HTML Tutorial 6: Working with Forms

1. CIS 1315 HTMLTutorial 6: Working with Forms

2. <form> • <form>…</form> • Region for Elements Used for Soliciting Input • Can Have Multiple Forms • Cannot Nest Forms • Attributes • action=“url” • Specifies Location of Resource • Browser Executes it When Form Data is Submitted • Mailto that Submits Data in an Email • CGI Script that Transmits Data to Web Server • Required

3. <form> • Attributes • method=“get | post” • Processes Form Data to the URL Specified by ACTION • get • Browser Creates a Query • Includes URL, ?, and Values Generated By the Form • post • Formats Form Data as a Block

4. <form> • Attributes • enctype=“type” • Specifies Type & Format of Submitted Form Data • application/x-www-form-urlencoded • Single Text String • multipart/form-data • Binary Data or Text Containing Non-ASCII Characters • text/plain • Separated Field / Value Pairs

5. enctype Attribute

6. <input /> • <input /> • Defines Type & Appearance for Form Input Elements • Attributes • checked=“checked” • Initial State of Checkbox / Radiobutton is Selected • disabled=“disabled” • Disables Form Element Use • name=“Text” • Provides an ID for the Form Element

7. <input /> • Attributes • maxlength=“#” • Sets Maximum Number of Characters for a Text Field • readonly=“readonly” • Prevents User from Altering Contents of Element • size=“width | (width,height)” • Sets Width & Height of a Text Element • src=“url” • Specifies URL of Image When TYPE=IMAGE

8. <input /> • Attributes • type=“text | password | checkbox | radio | hidden | submit | reset | button | image” • Indicates Type of Input Element to Display • text • Generates a Textbox • password • Generates a Textbox • Any Character Entered By User Displays as an Asterisk • hidden • Data That Is Necessary For Correct Form Processing • Users Cannot See Data

9. <input /> • Attributes • type • checkbox • Generates a Multiple Selection Element • radio • Generates a Mutually Exclusive Element • Name Values Must be the Same • submit • Button that Processes Form Data by the ACTION Attribute • reset • Button that Restores Form to Its Original State

10. <input /> • Attributes • type • button • Button that Executes a Script • image • SUBMIT Button that Uses Image Specified by SRC Attribute • value=“value” • Value For Non-text Input Elements When Form is Submitted • What Appears on Button Face for Buttons

11. <label> • <label>…</label> • Associates the Label with a Form Element • Simplify Data Entry • Attributes • disabled=“disabled” • Disables Form Element Use • for=“name” • Associates Label with Element Using the NAME Value

12. <select>, <option>, & <optgroup> • <select>…</select> • Create a Drop-down Menu or Scrolling List • Attributes • disabled=“disabled” • Disables Form Element Use • multiple=“multiple” • Allows Users to Choose More than One Item • name=“text” • Associates a Name With the List • size=“#” • Sets the Number of Choices Visible Within the Menu

13. <select>, <option>, & <optgroup> • <option>…</option> • Creates an Item in a Drop-down Menu or Scrolling List • Attributes • disabled=“disabled” • Disables Form Element Use • selected=“selected” • Indicates Item Should be the Default Choice • value=“value” • Value For Item When Form is Submitted

14. <select>, <option>, & <optgroup> • <optgroup>…</optgroup> • Organizes Menu / List Items into Distinct Groups • Attributes • disabled=“disabled” • Disables Form Element Use • label=“text” • Not Selectable • LABEL Appears Above Each Group in Menu / List • Required

15. <fieldset> & <legend> • <fieldset>…</fieldset> • Visually Groups Form Elements into a Panel • <legend>…</legend> • Provides a Caption for a Fieldset • Can be Used to Explain Their Capabilities or Contents

16. <textarea> • <textarea>…</textarea> • Creates a Multiline Text Input Box • Attributes • cols=“#” • Specifies Width of Textarea in Columns • Limit is 72 • Required • disabled=“disabled” • Disables Form Element Use

17. <textarea> • Attributes • name=“text” • Associates a Name With the Element • readonly=“readonly” • Prevents User From Altering Textarea’s Contents • rows=“#” • Specifies Number of Rows in Textarea • Required

18. <textarea> • Attributes • wrap=“off | soft | hard” • Specifies Word Wrap Handling • off • Default Setting • No Wrapping • soft • Automatically Wraps • Treated as One Line when Submitted • hard • Automatically Wraps • Treated as Multiple Lines When Submitted

19. Emailing Form Data • mailto:address@email • Value of the <form> Action Attribute • Can Automatically Include Subject Line mailto:mike@cod.edu?subject=text • Other Options mailto:mike@cod.edu?cc=another@cod.edu&bcc=secret@cod.edu&subject=subscribe&body=Send me your newsletter right away

20. mailto: Example <html> <head><title>LanGear Product Registration</title></head> <body style="color: rgb(133,0,0); margin: 0"> <form name="reg" action="mailto:sales@langear.com?Subject=Register" method=“post" enctype="text/plain"> <label for="fname">First Name</label> <input type="text" name="fname" id="fname" size="30" /> <label for="lname">Last Name</label> <input type="text" name="lname" id="lname" size="30" /> <label for="address1">Address</label> <input type="text" name="address" id="address" size="60" /> <label for="city">City</label> <input type="text" name="city" id="city" size="40" /> <label for="state">State</label> <input type="text" name="state" id="state" size="3" /> <label for="zip">ZIP</label> <input type="text" name="zip" id="zip" size="10" maxlength="10" /> <input type="submit" value="Send Registration" /> <input type="reset" value="Cancel" /> </form> </body> </html>

21. Form Layout Name: • Structure • Single Column • Faster • Single Eye Movement • Two-Column Right • Slower • Fewer Mistakes • Awkward Appearance • Two-Column Left • Slower • Higher Risk of Error • Difficult to Map from Label to Field Address: Name: Address: Name: Address:

22. Form Layout • Character Limits • No Warning • Assumes Visitor Should Know • Keyboard Appears to Stop Working • Inform Visitor

23. Form Buttons • Descriptive Text • Register Now /Cancel vs. OK /Cancel • Option Weight • Primary vs. Secondary Actions • Bigger is Easier