1 / 23

HTML Tutorial 6: Working with Forms

CIS 1315. HTML Tutorial 6: Working with Forms. <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

flo
Download Presentation

HTML Tutorial 6: Working with Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related