Forms 2010
Download as PPTX, PDF1 like1,128 views
Forms are used to collect information from users. They contain form controls like text fields, checkboxes, menus. Forms submit data to a server-side script via the action attribute. The method attribute specifies how data is sent, either via GET which appends data to the URL, or POST which hides data. Labels associate text with form controls for accessibility. Fieldsets group related controls with a legend caption. Common form controls include text & textarea fields, submit/reset buttons, radio buttons, checkboxes, and select menus.
Forms 2010
- 1. FormsHow to create a form using HTML
- 2. TodayPresentation on FormsUsing DreamweaverCreating a Form Using Dreamweaver.Practice Form
- 3. FormsMade of buttons, text fields, pull-down menus collectively called form controls. Used to collect information from the user.Application or script on the server that processes the information collected by the form.
- 4. Forms – What happens when submitted?Server -> Web ApplicationName = John DoeEmail = [email protected]
- 5. Form elementContainer for all the form's content and controls.<form action="/cig-bin/mailinglist.pl" 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>
- 6. Form AttributesAction – provides the location of the script used to process the form information on the server.<formaction="/cig-bin/mailinglist.pl" method="post" > The .pl indicates the form is processed by a Perl script. Frequently also .php(PHP program), .asp (Microsoft ASP "Active Server Pages"), .jsp(Java Server Pages), and other languages can be used.
- 7. Form – Method Attribute<form action="/cig-bin/mailinglist.pl" method="post"> Specifies how the information is sent to the server – either post or get.Name = John DoeEmail = [email protected] browser encodesName="John%20Doe&email=J.Doe%40xyz.com
- 8. Form – Method Attribute<form action="/cig-bin/mailinglist.pl" method="post"> Post– Only the server sees the content of the request. Best method for secure information.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: http://www.band.com/cgi-bin/mailinglist.pl?Name="John%20Doe&email=J.Doe%40xyz.comForm ID Attribute<form action="/cig-bin/mailinglist.pl" method="post"> Identifies the form when there are multiple forms on the page.
- 9. Form –Name AttributeThe name attribute identifies the variable name for the control.<li><label>Name:<input type="text" name="name" id="name" /></label></li>Name=john%20doeNames for the controls must match with the variables expected by the script.
- 10. Forms –LabelsThe label element is used to associate the descriptive text with its associated form field. Important for speech-based browsers.<li><label>Name:<input type="text" name="name"/></label></li>Explicit Association -<li><label for="name">Name:<input type="text" name="name" id="name" /></label></li>
- 11. Forms –Fieldset and LengendUsed to create a logical group of form controls. May also include a legend element that provides a caption.
- 12. Forms –Fieldset and Lengend<fieldset><legend>Mailing List Sign Up</legend> <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> </fieldset>
- 13. Forms – text entry<input type = "text" />Additional Attributes:Value – specifies the default text that appears in the field.Size – default is 20 characters wide but you can choose the character width.Maxlength– default is unlimited. You can choose a maximum number of characters that you want entered.<input type="text" name="city" value="Winooski" size="25" maxlength="50" /><input type="password" />
- 14. Forms – Multiline text entry<textarea>…</textarea>Use when you want your users to be able to enter more than one line of text.<textarea name="comment" rows="5" cols="100">Enter your comment in 50 words or less. </textarea>
- 15. Forms –Input and Reset buttons<input type="submit" /><input type="reset" /><input type="submit" /> <input type="reset" value="start over />
- 16. Forms –Radio and checkbox buttons
- 17. Forms –Radio and checkbox buttons<fieldset><legend>How old are you?</legend> <p> <label><input type="radio" name="age" value="under24" checked="checked"/> Under 24</label><br /> <label><input type="radio" name="age" value="25-34"/>25 to 34</label> <br /> <label><input type="radio" name="age" value="45+"/> Over 45</label> <br /></p> </fieldset>
- 18. Forms –Radio and checkbox buttons
- 19. Forms –Radio and checkbox buttons<fieldset> <legend>What type of music to you listen to?</legend> <p> <label><input type="checkbox" name="genre" value="Indie" checked="checked" />Indie Rock</label> <br /><label><input type="checkbox" name="genre" value="Techno" />Techno</label> <br /><label><input type="checkbox" name="genre" value="Latin"/>Latin</label> <br /> </p> </fieldset>
- 20. Forms – Menus
- 21. Forms – Menus<fieldset> <legend>Which is your favorite band?</legend><select name="band"> <option>Jackson Five</option><option>Commodores</option><option>Supremes</option> </select></fieldset>
- 22. Forms – MenusUse the attribute select="selected" in the option tag when you want a value pre-selected.Use the attribute size="#" in the select element when you want a menu to display as a scrolling list.