Getting Interactive Chapter 14 XHTML Forms Copyright 2010 Source:  Head First HTML with CSS & XHTML
XHTML Forms <ul><li>Form </li></ul><ul><ul><li>a component of a Web page that allows visitors to enter information </li></...
How Forms Work <ul><li>Visitor requests Web page </li></ul><ul><li>Visitor enters data into form </li></ul><ul><li>Visitor...
What You Write <ul><li><form action = “” method = “”> </li></ul><ul><li>add text and form elements </li></ul><ul><li>add “...
How The Form Element Works <ul><li><form  action  = “”  method  = “”> </li></ul><ul><li>action  - holds the URL of the Web...
What Can Go Into a Form <ul><li>input type=“text” </li></ul><ul><li>input type=“password” </li></ul><ul><li>input type=“su...
What Can Go Into a Form <ul><li>input type=“ text ” </li></ul><ul><li><input type=“text” name=“” /> </li></ul><ul><li>Exam...
What Can Go Into a Form <ul><li>input type=“ password ” </li></ul><ul><li><input type=“password” name=“” /> </li></ul><ul>...
What Can Go Into a Form <ul><li>input type=“ submit ” </li></ul><ul><li><input type=“submit” name=“” /> </li></ul><ul><li>...
What Can Go Into a Form <ul><li>input type=“ radio ” </li></ul><ul><li><input type=“radio” name=“” value=“”/> </li></ul><u...
What Can Go Into a Form <ul><li>input type=“ checkbox ” </li></ul><ul><li><input type=“checkbox” name=“” value=“” /> </li>...
What Can Go Into a Form <ul><li>textarea </li></ul><ul><li><textarea name=“” rows=“” cols=“”> </li></ul><ul><li>optional d...
What Can Go Into a Form <ul><li>select  and  option </li></ul><ul><li><select name=“”> </li></ul><ul><li><option value=“”>...
Assignment <ul><li>Create the online order form depicted on page 602.  Result  appears on page 616. </li></ul><ul><ul><li>...
Post vs. Get <ul><li>method attribute of the form tag </li></ul><ul><li>method=“ post ” vs. method=“ get ” </li></ul><ul><...
Post vs. Get <ul><li>When to use method = “ post ”: </li></ul><ul><ul><li>when data being sent is sensitive (passwords, cr...
Layout: CSS vs. Tables <ul><li>Assignment:  Result </li></ul><ul><ul><li>read pages 624 and 625 </li></ul></ul><ul><ul><li...
Upcoming SlideShare
Loading in...5
×

Getting Interactive: Chapter 14

733

Published on

Getting Interactive: Chapter 14

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
733
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Getting Interactive: Chapter 14

  1. 1. Getting Interactive Chapter 14 XHTML Forms Copyright 2010 Source: Head First HTML with CSS & XHTML
  2. 2. XHTML Forms <ul><li>Form </li></ul><ul><ul><li>a component of a Web page that allows visitors to enter information </li></ul></ul><ul><ul><li>a family of XHTML elements that work together </li></ul></ul><ul><ul><li>A collection of “controls” (objects) on a page that allow for the input of data </li></ul></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  3. 3. How Forms Work <ul><li>Visitor requests Web page </li></ul><ul><li>Visitor enters data into form </li></ul><ul><li>Visitor submits form by clicking button </li></ul><ul><li>Server performs an action </li></ul><ul><li>Server responds with message to visitor </li></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  4. 4. What You Write <ul><li><form action = “” method = “”> </li></ul><ul><li>add text and form elements </li></ul><ul><li>add “submit” button </li></ul><ul><li></form> </li></ul><ul><li>Example: form.html </li></ul><ul><li>(can be found in “chapter14/contest” folder) </li></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  5. 5. How The Form Element Works <ul><li><form action = “” method = “”> </li></ul><ul><li>action - holds the URL of the Web server and the Web application that will process the data </li></ul><ul><li>method - determines how the form data will be send (“post” vs. “get”) </li></ul><ul><li></form> </li></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  6. 6. What Can Go Into a Form <ul><li>input type=“text” </li></ul><ul><li>input type=“password” </li></ul><ul><li>input type=“submit” </li></ul><ul><li>input type=“radio” </li></ul><ul><li>input type=“checkbox” </li></ul><ul><li>textarea </li></ul><ul><li>select and option </li></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  7. 7. What Can Go Into a Form <ul><li>input type=“ text ” </li></ul><ul><li><input type=“text” name=“” /> </li></ul><ul><li>Example: form01.html | form02.html </li></ul><ul><li>Assignment: build out this form to include address, city, state, zip, phone, e-mail </li></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  8. 8. What Can Go Into a Form <ul><li>input type=“ password ” </li></ul><ul><li><input type=“password” name=“” /> </li></ul><ul><li>Example: form03.html </li></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  9. 9. What Can Go Into a Form <ul><li>input type=“ submit ” </li></ul><ul><li><input type=“submit” name=“” /> </li></ul><ul><li>Example: form04.html </li></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  10. 10. What Can Go Into a Form <ul><li>input type=“ radio ” </li></ul><ul><li><input type=“radio” name=“” value=“”/> </li></ul><ul><li><input type=“radio” name=“” value=“”/> </li></ul><ul><li>Example: form05.html </li></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  11. 11. What Can Go Into a Form <ul><li>input type=“ checkbox ” </li></ul><ul><li><input type=“checkbox” name=“” value=“” /> </li></ul><ul><li><input type=“checkbox” name=“” value=“” /> </li></ul><ul><li>Example: form06.html </li></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  12. 12. What Can Go Into a Form <ul><li>textarea </li></ul><ul><li><textarea name=“” rows=“” cols=“”> </li></ul><ul><li>optional default text </li></ul><ul><li></textarea> </li></ul><ul><li>Example: form07.html </li></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  13. 13. What Can Go Into a Form <ul><li>select and option </li></ul><ul><li><select name=“”> </li></ul><ul><li><option value=“”> text </option> </li></ul><ul><li><option value=“”> text </option> </li></ul><ul><li></select> </li></ul><ul><li>Example: form08.html </li></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  14. 14. Assignment <ul><li>Create the online order form depicted on page 602. Result appears on page 616. </li></ul><ul><ul><li>espresso -- use only the handouts and the code you just practiced without referring to the book </li></ul></ul><ul><ul><li>decaf -- walk through the assignment page by page from 603 thru 615 </li></ul></ul><ul><li>Ignore formatting and functionality (what happens when you click the button) </li></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  15. 15. Post vs. Get <ul><li>method attribute of the form tag </li></ul><ul><li>method=“ post ” vs. method=“ get ” </li></ul><ul><li>Both methods send data back to the server </li></ul><ul><li>Post – sends data invisibly (behind the scenes) </li></ul><ul><li>Get – sends data as part of the URL </li></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  16. 16. Post vs. Get <ul><li>When to use method = “ post ”: </li></ul><ul><ul><li>when data being sent is sensitive (passwords, credit card numbers, etc.) </li></ul></ul><ul><ul><li>when using textarea (lots of data means a very long URL) </li></ul></ul><ul><li>When to use method = “ get ”: </li></ul><ul><ul><li>when you want to allow the visitor to bookmark the resulting page </li></ul></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  17. 17. Layout: CSS vs. Tables <ul><li>Assignment: Result </li></ul><ul><ul><li>read pages 624 and 625 </li></ul></ul><ul><ul><li>Use Dreamweaver to create a “6 by 2” table (six rows and two columns) </li></ul></ul><ul><ul><li>Nest a second table (“5 by 2”) into the cell at row 4 column 2 </li></ul></ul><ul><ul><li>Copy the form elements and text into the appropriate cells </li></ul></ul><ul><ul><li>Create styledform.css (p. 630) </li></ul></ul>Copyright 2010 Source: Head First HTML with CSS & XHTML
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×