HTML B OOT C AMP Chapter 9 Forms Kirkwood Continuing Education © Copyright 2015, Fred McClurg All Rights Reserved

The Tag Description: Defines a form and provides a container for form elements. Example:... 2

Tag “action” Attribute Description: Defines the script that is executed upon form submission. Example:... 3

Tag “method” Attribute Description: Defines the method by which the data is passed to the script upon form submission. Example: <form action="script.php" method="get">... <form action="script.php" method="post">... 4

Which is better GET or POST? Description: Both “get” and “post” serve different roles. Use GET when:  Small forms with few fields  Save/retrieve bookmark of execution  Pass parameters via a link  Debugging code Use POST when:  Many or long text fields  Capturing sensitive information (e.g. credit card, social security, passwords) 5

Tag “enctype” Attribute Description: By default, form data is encoded. This attribute allows you to turn off the encoding. Example: <form method="post" enctype="text/plain" onSubmit="window.alert('Form was sent via ...')" > 6 Chapter 09 > Enctype Attribute

Tag Description: Several controls share the input tag but have a different type attribute values. Example: 7

Tag “type” Attributes Description: A number of tags support the following attributes. 8 TypeDescription button Push button control (client-side) checkbox Checkbox button (many of many selection) hidden Hidden control password Single line text field with masked display radio Radio button (one of many selection) reset Push button for reset (client-side) submit Push button for submission (server-side) text Single line text field

Radio Input Type Description: The radio button allows you to select one-of-many options (single selection). Example: <form action="javascript:void(0);" method="post" > Lions Tigers Bears 9 Chapter 09 > Radio Input Type

Check Box Input Type Description: The check box allows you to select many-of-many options (multiple selection). Example: <form action="javascript:void(0);" method="post" > Lions Tigers Bears 10 Chapter 09 > Check Box Input Type

Tag with “for” & “id” Description: Associates a label with a control. Example: <input type="radio" name="frequency" value="1" id="always"> Always 11 Chapter 09 > Label Tag

Label Element Description: The labels can be associated with another element in order to assist screen readers and to enable the label to be clicked. Example: <input type="radio" name="comedians" value="ac" id="ac" /> Abbott & Costello <input type="radio" name="comedians" value="lh" id="lh" /> Laurel & Hardy <input type="radio" name="comedians" value="ml" id="ml" /> Dean Martin & Jerry Lewis 12 Chapter 09 > Label Element

type buttons Description: The tag features three different buttons. Example: 13 Chapter 09 > Input Type Buttons

Tag with text Description: The has several advantages over the including HTML formatting of text and image support. Example: Danger, Will Robinson! Danger! 14 Chapter 09 > Button Tag with Text

Tag with Description: The has several advantages over the including HTML formatting of text and image support. Example: <img src="images/download.png" alt="Download" /> 15 Chapter 09 > Button Tag with Image

Tag with Image Type Description: The allows you construct a clickable image that functions like a push button. Example: <input type="image" id="imageButton" title="You better not press this!" alt="Push Button Warning" src="images/cancel.32x32.png" /> Don't Press Me 16 Chapter 09 > Image Input Type

Text Input Type Description: The default input type is “text”. It allows a single line of text. Example: <form action="javascript:void(0);" method="post" > Full Name: <input type="text" name="fullname" /> 17 Chapter 09 > Text Input Type

Tag Attributes Description: There are a number of attributes that can be used with the input tag. 18 TypeDescription value Defaulted text string size Controls width of text box to limit the number of characters displayed maxlength Limits the number of characters that can be entered required Specifies field is required. Displays an error message and prevents form from submission if value is present.

More Tag Attributes Description: There are several new attributes that can be used with the input tag. 19 TypeDescription readonly Displays text and allows copy (Ctrl+v) but does not allow user to modify text. disabled Displays text but does not allow copy (Ctrl+v) or modification of text. placeholder Light gray text that appears when the field is blank to provide context help for users. Text disappears when user begins typing. pattern Regular expression that specifies a valid string. Text box turns red when losing focus to indicate string if is not valid

“readonly” & “disabled” Attribute Description: Read only attribute prevents a text control from being modified. Disabled attribute prevents controls from being usable. Example: Try to Enter: <input type="text" value="Try to modify text" readonly /> <input type="submit" value="Try to Submit" disabled /> 20 Chapter 09 > Text Input Attributes

Password Input Type Description: The password input type masks the password so it is not displayed while typing. Example: Password: <input type="password" name="password" placeholder="8 chars min" pattern="^.{8,}$" title="Minimum of 8 chars" required > 21 Chapter 09 > Password Input Type

New Tag “type” Attributes Description: Several new input tag types have been introduced with HTML5. 22 TypeDescription color Color picker address field number Number field range Slider for entering a number within range search Text field for a search string tel Text field for a telephone number url Text field for a URL Chapter 09 > New Input Types

New Tag “type” Attributes Description: Several new input tag types have been introduced with HTML5. 23 TypeDescription color Color picker address field number Number field range Slider for entering a number within range search Text field for a search string tel Text field for a telephone number url Text field for a URL Chapter 09 > New Input Types

Tag Description: Defines a text box that permits multiple lines of input. Example: <textarea name="message" rows="5" cols="20"> 24 Chapter 09 > Multiple Line Text

Tag (dropdown list) Description: Defines a dropdown list of items. Only one item can be selected. Example: Paperback Hardcover Kindle 25 Chapter 09 > Dropdown List

Tag “multiple” Attribute Description: The size attribute greater than one defines a scrolling list of items. Multiple items can be selected. Example: Cat Dog Fish Other Chapter 09 > Multiple Select List

& Tag Description: Provides a visual grouping of elements. Example: Demographics First: <input type="text" name="first"> Chapter 09 > Fieldset & Legend

HTML5 Semantic Tags Description: Several of the new semantic tags are available in HTML5. 28 TypeDescription header Container for a group of introductory elements nav Container for grouping navigation links section Defines sections in a document such as chapters, headers, footers, etc. article Defines self-contained content aside Defines content related to the surrounding content Chapter 09 > Semantic Tags

More HTML5 Semantic Tags Description: Several additional semantic tags are available in HTML5. 29 TypeDescription figure Defines self-contained content like illustrations, diagrams, photos, graphs, etc. figurecaption Defines a caption for a figure element footer Defines a footer for a document time Defines human-readable date/time main Specifies the main document content Chapter 09 > Semantic Tags

& Tag Description: Provides a heading for the element. In some browsers (e.g. Chrome) the heading can be clicked to view/hide the details. Example: Carver, George Washington An American botanist and inventor. He performed research into and promotion of alternative crops to cotton, such as peanuts, soybeans, and sweet potatoes, which also aided nutrition for farm families. 30 Chapter 09 > Details and Summary

Tag Description: Provides a list of options for an input element which are displayed as autocompletion items. Example: <input list="lname" name="lname" placeholder='Type "mcglumphry"' /> 31 Chapter 09 > Datalist Tag

Speech Input Attribute Description: HTML5 provides speech input capabilities. Chrome is one of the few browsers to implement this capability. Example: <input type="text" x-webkit-speech /> 32 Chapter 09 > Speech Input Attribute

Tag Description: The tag, also known as a gauge, displays a measurement within a range. Example: Your score: <meter min="0" max="100" low="40" high="80" value="75"> 75 Percent 33 Chapter 09 > Meter Tag

Tag Description: The tag displays progress of a task. Example: Completed: 3/4 complete 34 Chapter 09 > Meter Tag