9 Forms

Learning Outcomes Describe Common Uses of Forms on Web Pages Create Forms on Web Pages Associate Form Controls & Groups Create Custom Image Buttons Use CSS to Style a Form Configure New HTML5 Form Controls Describe Features & Uses of Server-side Processing

Forms Overview Forms Are Used All Over the Web to: Types of Forms Accept Information Provide Interactivity Types of Forms Order Search Sign-up Survey

<form> <form>…</form> Attributes 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 Script that Transmits Data to Web Server

<form> Attributes autocomplete=“on | off” 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

<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

<form> Attributes name=“type” novalidate=“novalidate” Specifies the Name of a Form novalidate=“novalidate” Specifies Form Should Not be Validated when Submitted target=“_blank | _self | _parent | _top” Specifies Where to Display the Response After Form Submission

enctype Attribute

<input /> <input /> Attributes autocomplete=“on | off” Defines Type & Appearance for Form Input Elements Attributes autocomplete=“on | off” Specifies Whether <input> has Autocomplete Enabled autofocus=“autofocus” Specifies that <input> Automatically Gets Focus on Page Load checked=“checked” Initial State of Checkbox / Radiobutton is Selected

<input /> Attributes disabled=“disabled” form=“form_id” Disables Form Element Use form=“form_id” Specifies One or More Forms <input> Element Belongs to height=“#pixels” Specifies Height of <input> Element Only for TYPE=IMAGE

<input /> Attributes list=“datalist_id” max=“# | date” Refers to a <datalist> Element Contains Pre-defined Options for an <input> Element max=“# | date” Specifies Maximum Value for an <input> Element maxlength=“#” Sets Maximum Number of Characters for a Text Field min=“# | date” Specifies Minimum Value for an <input> Element

<input /> Attributes multiple=“multiple” name=“Text” Specifies User Can Enter More Than One Value name=“Text” Provides an ID for the Form Element pattern=“regexp” Specifies a Regular Expression that Value is Checked Against placeholder=“regexp” Specifies Short Hint that Describes Expected Value

<input /> Attributes readonly=“readonly” required=“required” Prevents User from Altering Contents of Element required=“required” Specifies Input Field Must be Filled Out Before Submission size=“width | (width,height)” Sets Width & Height of a Text Element src=“url” Specifies URL of Image When TYPE=IMAGE

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

<input /> Attributes type checkbox radio submit reset 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

<input /> Attributes type color Provide the User with a Color Picker date | datetime | time | month | week Select Date / Time in Appropriate Format email | tel | url Accept Data for E-mail Addresses, Telephone Numbers, URLs Performs Rudimentary Validation

<input /> Attributes type number range search Value Must be Numeric; Accepts Restrictions Utilizes Spinner Control range Accepts a Range of Numeric Values Utilizes Slider Control search Accept Search Terms

<input /> Attributes type value=“value” button image 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

<datalist> <datalist>…</datalist> Example Specifies a List of Pre-defined Options for an <Input> Example <input list="browsers" /> <datalist id="browsers">   <option value="Internet Explorer“ />   <option value="Firefox“ />   <option value="Chrome“ />   <option value="Opera“ />   <option value="Safari“ /> </datalist>

<label> <label>…</label> Attributes 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 id Value

<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

<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

<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

<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

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

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

<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 Treated as Multiple Lines When Submitted

<button> <button>…</button> Attributes Create Graphically Interesting Form Buttons Attributes disabled=“disabled” Disables Form Element Use name=“text” Associates a Name With the Element type=“button | submit | reset” Defines Button Type

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

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="address">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>

Form Usability Keep It Short Visually Group Related Labels & Fields Remove Fields Which Collect Info that Can Be Derived in Some Other Way Collected More Conveniently at a Later Date Simply Omitted Visually Group Related Labels & Fields Use Logical Sequencing Avoid Placeholder Text

Form Usability Present Fields in a Single Column Layout Single Column Faster Single Eye Movement Two-Column Right Slower Fewer Mistakes Awkward Appearance Two-Column Left Slowest Higher Risk of Error Difficult to Map from Label to Field Name: Address: Name: Address: Name: Address:

Form Usability Match Fields to Type & Size of the Input 2-3 Options Should be Displayed as Radios Text Fields Should Be Same Size as Expected Input Extremely Error Prone When Users Can’t See Full Entry Distinguish Optional & Required Fields Explain Any Input or Formatting Requirements

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

Radio Buttons Indicate Default Give People Control and Align with Their Expectations Expedite Tasks Harness the Power of Suggestion Assist Sway Horizontal Radio Buttons are Difficult to Scan Use <label> to Enlarge the Target Clickable Area

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

Form Validation Use <input> pattern Attribute Valid for: text, date, search, url, tel, email, and password Specify Regular Expression <input> Value is Checked Against Brackets Used to Find a Range of Characters [abc] Any Character Between Brackets [^abc] Any Character NOT Between Brackets [0-9] Any Digit Between Brackets [^0-9] Any Digit NOT Between Brackets (x|y) Any Specified Alternatives

Form Validation Use <input> pattern Attribute Specify Regular Expression Metacharacters Provide Special Meaning . Single Character \w Word Character \W Non-word Character \d Digit \D Non-digit Character

Form Validation Use <input> pattern Attribute Specify Regular Expression Metacharacters Provide Special Meaning \s Whitespace Character \S Non-whitespace character \b Match at Beginning / End of Word \B Match not at Beginning / End of Word

Form Validation Use <input> pattern Attribute Specify Regular Expression Matching Quantifiers n+ String Contains at Least One n n* String Contains Zero or More Occurrences of n n? String Contains Zero or One Occurrences of n n{X} String Contains a Sequence of X n's n{X,Y} String Contains a Sequence of X to Y n's n{X,} String Contains a Sequence of at Least X n's

Form Validation Use <input> pattern Attribute Specify Regular Expression Matching Quantifiers n$ String with n at End of it ^n String with n at Beginning of it ?=n String that is Followed by Specific String n ?!n String that is Not Followed by Specific String n Modifier /i Perform Case-insensitive Matching

Form Validation Use <input> pattern Attribute Use title Attribute to Describe Pattern or Help User Examples Email ^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA- Z0-9]+)*)\.([A-Za-z]{2,})$ Date \d{1,2}/\d{1,2}/\d{4} (mm/dd/yyyy or dd/mm/yyyy) ^(?:(0?[1-9]|1[012])[\/](0?[1-9]|[12][0-9]|3[01])[\/]((19)?[5-9]{1}[0- 9]{1}|(20)?[0-4]{1}[0-9]{1}))$ (m)m/(d)d/(yy)yy , from the years 1950-2049

Server-side Scripts Embedded Within a Web Page Uses Direct Execution Accesses File with Extension Such as: .php (PHP) .asp (Active Server Pages) .cfm (Adobe ColdFusion) .jsp (Sun JavaServer Pages) .aspx (ASP.Net) Uses Direct Execution Script is Run by Web Server or Extension Module to Server

Server-side Processing Steps Web Page Invokes Server-side Processing Via Form or Link Web Server Executes Server-side Script Script Accesses Requested: Database File Process Web Server Returns Web Page With Requested Information or Confirmation of Action