Forms 2010


Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Forms 2010

  1. 1. Forms<br />How to create a form using HTML<br />
  2. 2. Today<br />Presentation on Forms<br />Using Dreamweaver<br />Creating a Form Using Dreamweaver.<br />Practice Form<br />
  3. 3. Forms<br />Made of buttons, text fields, pull-down menus collectively called form controls. Used to collect information from the user.<br />Application or script on the server that processes the information collected by the form.<br />
  4. 4. Forms – What happens when submitted?<br />Server -> Web Application<br />Name = John Doe<br />Email =<br />
  5. 5. Form element<br />Container for all the form's content and controls.<form action="/cig-bin/" method="post"> <ol><li><label>Name:<input type="text" name="name" id="name" /> </label></li><li><label>Email: <input type="text" name="email" id="email" /> </label></li>" <li><label>Click to Submit: <input type="submit" name="Submit" id="Submit" value="Submit" /> </label></li> </ol></form><br />
  6. 6. Form Attributes<br />Action – provides the location of the script used to process the form information on the server.<br /><formaction="/cig-bin/" method="post" > <br />The .pl indicates the form is processed by a Perl script. <br />Frequently also .php(PHP program), .asp (Microsoft ASP "Active Server Pages"), .jsp(Java Server Pages), and other languages can be used.<br />
  7. 7. Form – Method Attribute<br /><form action="/cig-bin/" method="post"> <br />Specifies how the information is sent to the server – either post or get.<br />Name = John Doe<br />Email =<br />After browser encodes<br />Name="John%20Doe&<br />
  8. 8. Form – Method Attribute<br /><form action="/cig-bin/" method="post"> <br />Post– Only the server sees the content of the request. Best method for secure information.<br /><ul><li>Get – Not appropriate for forms with private or personal information. Has a limit of 256 characters.With Get Data is added to the URL of the script:"John%20Doe&</li></li></ul><li>Form ID Attribute<br /><form action="/cig-bin/" method="post"> <br />Identifies the form when there are multiple forms on the page.<br />
  9. 9. Form –Name Attribute<br />The name attribute identifies the variable name for the control.<br /><li><label>Name:<input type="text" name="name" id="name" /></label></li><br />Name=john%20doe<br />Names for the controls must match with the variables expected by the script.<br />
  10. 10. Forms –Labels<br />The label element is used to associate the descriptive text with its associated form field. Important for speech-based browsers.<br /><li><label>Name:<input type="text" name="name"/></label></li><br />Explicit Association -<li><label for="name">Name:<input type="text" name="name" id="name" /></label></li><br />
  11. 11. Forms –Fieldset and Lengend<br />Used to create a logical group of form controls. May also include a legend element that provides a caption.<br />
  12. 12. Forms –Fieldset and Lengend<br /><fieldset><br /><legend>Mailing List Sign Up</legend> <br /><ol> <br /><li><label>Name:<input type="text" name="name" id="name" /></label></li><li><label>Email:<input type="text" name="email" id="email" /></label></li> <li><label>Click to Submit: <input type="submit" name="Submit" id="Submit" value="Submit" /></label></li> <br /></ol> <br /></fieldset><br />
  13. 13. Forms – text entry<br /><input type = "text" /><br />Additional Attributes:<br />Value – specifies the default text that appears in the field.<br />Size – default is 20 characters wide but you can choose the character width.<br />Maxlength– default is unlimited. You can choose a maximum number of characters that you want entered.<br /><input type="text" name="city" value="Winooski" size="25" maxlength="50" /><br /><input type="password" /><br />
  14. 14. Forms – Multiline text entry<br /><textarea>…</textarea><br />Use when you want your users to be able to enter more than one line of text.<br /><textarea name="comment" rows="5" cols="100">Enter your comment in 50 words or less. </textarea><br />
  15. 15. Forms –Input and Reset buttons<br /><input type="submit" /><br /><input type="reset" /><br /><input type="submit" /> <input type="reset" value="start over /><br />
  16. 16. Forms –Radio and checkbox buttons<br />
  17. 17. Forms –Radio and checkbox buttons<br /><fieldset><br /><legend>How old are you?</legend> <br /><p> <br /><label><input type="radio" name="age" value="under24" checked="checked"/> Under 24</label><br /> <br /><label><input type="radio" name="age" value="25-34"/>25 to 34</label> <br /> <br /><label><input type="radio" name="age" value="45+"/> Over 45</label> <br /><br /></p> </fieldset><br />
  18. 18. Forms –Radio and checkbox buttons<br />
  19. 19. Forms –Radio and checkbox buttons<br /><fieldset> <br /><legend>What type of music to you listen to?</legend> <p> <br /><label><input type="checkbox" name="genre" value="Indie" checked="checked" />Indie Rock</label> <br /><br /><label><input type="checkbox" name="genre" value="Techno" />Techno</label> <br /><br /><label><input type="checkbox" name="genre" value="Latin"/>Latin</label> <br /> </p> <br /></fieldset><br />
  20. 20. Forms – Menus<br />
  21. 21. Forms – Menus<br /><fieldset> <br /><legend>Which is your favorite band?</legend><br /><select name="band"> <br /><option>Jackson Five</option><br /><option>Commodores</option><br /><option>Supremes</option> <br /></select><br /></fieldset><br />
  22. 22. Forms – Menus<br />Use the attribute select="selected" in the option tag when you want a value pre-selected.<br />Use the attribute size="#" in the select element when you want a menu to display as a scrolling list.<br />