1. 9
Forms

2. 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

3. 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

4. <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
Script that Transmits Data to Web Server

5. <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

6. <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

7. <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

8. enctype Attribute

9. <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

10. <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

11. <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

12. <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

13. <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

14. <input /> Attributes
type=“text | password | hidden | checkbox | radio | submit | reset | color | date | | 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

15. <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

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

17. <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

18. <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

19. <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>

20. <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

21. <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

22. <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

23. <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

24. <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

25. <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

26. <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

27. <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

28. <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

29. Emailing Form Data mailto:address@email
Value of the <form> Action Attribute
Can Automatically Include Subject Line
Other Options
&body=Send me your newsletter right away

30. mailto: Example <html>
<head><title>LanGear Product Registration</title></head>
<body style="color: rgb(133,0,0); margin: 0">
<form name="reg"
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>

31. 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

32. 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:

33. 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

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

35. 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

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

37. Form Validation Use <input> pattern Attribute
Valid for: text, date, search, url, tel, , 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

38. 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

39. 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

40. 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

41. 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

42. Form Validation Use <input> pattern Attribute
Use title Attribute to Describe Pattern or Help User
Examples
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

43. 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

44. 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