ITI 134: HTML5 Desktop and Mobile Level II
Session 1
Chapter 10 - How to Work with Forms
www.profburnett.com
Class Outline




How to Use Forms and Controls
Other Skills for Working with Forms
How to Use HTML5 for Data Validation
How to Use HTML5 Controls
2/25/2014
Copyright © Carl M. Burnett
2
Attributes of Form Element
Attribute
Description
name
Name for code
action
URL of processing file
method
Get or Post
target
Where to open page
Attributes - Input Elements
Attribute
Description
type
Type of control ie “button”, “text”, “checkbox”
name
Name of Code
disabled
Boolean that disables control
readonly
Boolean that means user can change control value
2/25/2014
Copyright © Carl M. Burnett
3
HTML for Form
<form name="email_form" action="subscribe.php"
method="post">
<p>Please enter your e-mail address to subscribe to
our newsletter.</p>
<p>E-Mail: <input type="text" name="email"></p>
<p><input type="submit" name="submit"
value="Subscribe"></p>
</form>
URL when form submitted with “get” method
subscribe.php?email=zak%40modulemedia.com&submit=Subscribe
Example
2/25/2014
Copyright © Carl M. Burnett
4
Attributes Input Element Buttons and Button Element
Attributes
Descriptions
type
Submit, Reset, button, or image
value
Text to display
src
Relative or Absolute URL of image
alt
Alternate Text
height
Pixels or Percent
width
Pixels or Percent
2/25/2014
Copyright © Carl M. Burnett
5
Four buttons that are created by the input element
<input
<input
<input
<input
type="button" name="message" value="Alert Me">
type="submit" name="checkout" value="Checkout">
type="reset" name="resetform" value="Reset">
type="image" src="images/submit.jpg"
alt="Submit button" width="114" height="42">
A button that is created by the button element
<button type="submit">
<img src="images/addtocart.png" width="30"
height="23" alt="Add to Cart">Add to Cart
</button>
Example
2/25/2014
Copyright © Carl M. Burnett
6
Attributes - Input Element Text Fields
Attributes
Descriptions
type
text, password, or hidden
value
Default value
maxlength
Max Characters
size
Width of the field in characters
autofocus
A boolean attribute to set focus on
placeholder
Puts a default value or hint in the field. Value is removed when user’s
cursor enters the control
2/25/2014
Copyright © Carl M. Burnett
7
The HTML for text fields
Quantity:<input type="text" name="quantity" value="1"
size="5" readonly><br><br>
Username:<input type="text" name="username"
autofocus><br><br>
Password:<input type="password" name="password"
maxlength="6"
placeholder="Enter your password"><br><br>
Hidden:<input type="hidden" name="productid"
value="widget">
Example
2/25/2014
Copyright © Carl M. Burnett
8
Attributes of Radio Buttons and Check Boxes
Attributes
Descriptions
type
Radio or checkbox
value
Value Submitted
checked
Boolean
Crust:<br>
<input type="radio" name="crust" value="thin">
Thin Crust<br>
<input type="radio" name="crust" value="deep" checked>
Deep Dish<br>
<input type="radio" name="crust" value="hand">
Hand Tossed<br><br>
Toppings:<br>
<input type="checkbox" name="topping1" value="pepperoni">
Pepperoni<br>
<input type="checkbox" name="topping2" value="mushrooms">
Mushrooms<br>
<input type="checkbox" name="topping3" value="olives">
Olives
2/25/2014
Copyright © Carl M. Burnett
Example
9
Attributes of Optgroup and Option Element
Element
Attributes
Descriptions
optgroup
Label
Text used to identify group
option
value
Value sent to server
option
selected
Boolean value
Style:<br>
<select name="style_and_size">
<optgroup label="The New Yorker">
<option value="ny10">10"</option>
<option value="ny12">12"</option>
<option value="ny16">16"</option>
</optgroup>
<optgroup label="The Chicago">
<option value="chi10">10"</option>
<option value="chi12">12"</option>
<option value="chi16">16"</option>
</optgroup>
</select>
2/25/2014
Copyright © Carl M. Burnett
Example
10
Attributes of Select Element for List Boxes
Attributes
Descriptions
size
Number if item to display
multiple
Boolean for multiple select
<select name="toppings" size="4" multiple>
<option value="pepperoni">Pepperoni</option>
<option value="sausage" selected>Sausage</option>
<option value="mushrooms">Mushrooms</option>
<option value="olives">Black olives</option>
<option value="onions">Onions</option>
<option value="bacon">Canadian bacon</option>
<option value="pineapple">Pineapple</option>
</select>
2/25/2014
Copyright © Carl M. Burnett
Example
11
Attributes of Textarea Element
Attributes
Descriptions
rows
Approximate number of rows
cols
Approximate number of columns
wrap
Text wrap specifications: hard | soft (default)
HTML for Text Area
Comments:<br>
<textarea name="comments" placeholder="If you have any
comments, please enter them here.">
</textarea>
CSS for Text Area
textarea {
height: 5em;
width: 25em;
font-family: Arial, Helvetica, sans-serif; }
2/25/2014
Copyright © Carl M. Burnett
Example
12
The HTML for a form with label elements
Attributes
Descriptions
for
Set the id of the related control. id required for form that use labels for
attributes.
<label for="quantity" id="quantity">Quantity:</label>
<input type="text" name="quantity" id="quantity"
value="1" size="5"><br><br>
Crust:<br>
<input type="radio" name="crust" id="crust1"
value="thin">
<label for="crust1">Thin Crust</label><br>
<input type="radio" name="crust" id="crust2"
value="deep">
<label for="crust2">Deep Dish</label><br>
<input type="radio" name="crust" id="crust3"
value="hand">
<label for="crust3">Hand Tossed</label><br><br>
2/25/2014
Copyright © Carl M. Burnett
Example
13
HTML that uses fieldset and legend elements
<form name="order" action="order.php" method="post">
<fieldset>
<legend>Crust</legend>
<input type="radio" name="crust" id="crust1"
value="thin">
<label for="crust1">Thin Crust</label><br>
<input type="radio" name="crust" id="crust2"
value="deep">
<label for="crust2">Deep Dish</label><br>
<input type="radio" name="crust" id="crust3"
value="hand">
<label for="crust3">Hand Tossed</label>
</fieldset>
<br>
2/25/2014
Copyright © Carl M. Burnett
Example
14
Attributes of the input element for a file upload control
Attributes
Descriptions
accept
The types of files accepted for upload.
multiple
Boolean attribute to upload more than one file.
HTML for a file upload control
<form name="upload_form" action="sendemail.php"
method="post" enctype="multipart/form-data">
Attach an image:<br>
<input type="file" name="fileupload"
accept="image/jpeg, image/gif">
</form>
Example
2/25/2014
Copyright © Carl M. Burnett
15
Aligned label, text box, and button controls
The HTML for the controls
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname"
autofocus><br>
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname"><br>
<label for="address">Address:</label>
<input type="text" name="address" id="address"><br>
<label for="city">City:</label>
<input type="text" name="city" id="city"><br>
<label for="state">State:</label>
<input type="text" name="state" id="state"><br>
<label for="zip">Zip code:</label>
<input type="text" name="zip" id="zip"><br>
<input type="submit" name="register" id="button"
value="Register">
<input type="reset" name="reset" id="reset">
2/25/2014
Copyright © Carl M. Burnett
The CSS for the controls
label {
float: left;
width: 5em;
text-align: right;}
input {
margin-left: 1em;
margin-bottom: .5em;}
#button {
margin-left: 7em;}
Example
16
The CSS for the enhanced form
body {
font: 90% Arial, Helvetica, sans-serif;
margin: 20px; }
label {
color: navy;
float: left;
width: 8em;
font-weight: bold;
text-align: right;}
input {
width: 15em;
margin-left: 1em;
margin-bottom: .5em;}
input:focus {
border: 2px solid navy; }
#button, #reset {
width: 7em;
box-shadow: 2px 2px 0 navy;
background-color: silver; }
#button { margin-left: 9.5em; }
2/25/2014
Copyright © Carl M. Burnett
Example
17
The attributes for tab order and access keys
Attributes
Descriptions
tabindex
Sets the tab order of the control
accesskey
Keyboard and control key
Accessibility guideline - Setting a proper tab order and providing access keys improves the accessibility for users who
can’t use a mouse.
The HTML for the controls
Another way to define the access keys
<label for="firstname"><u>F</u>irst name:</label>
<input type="text" name="firstname" id="firstname"
accesskey="F"><br>
<label for="lastname"><u>L</u>ast name:</label>
<input type="text" name="lastname" id="lastname"
accesskey="L"><br>
<label for="email"><u>E</u>mail:</label>
<input type="text" name="email" id="email"
accesskey="E
<label for="firstname"
accesskey="F"><u>F</u>irst name:</label>
<input type="text" name="firstname"
id="firstname"><br>
<label for="lastname"
accesskey="L"><u>L</u>ast name:</label>
<input type="text" name="lastname"
id="lastname"><br>
<label for="email"
accesskey="E"><u>E</u>mail:</label>
<input type="text" name="email" id="email">
Example
2/25/2014
Copyright © Carl M. Burnett
18
The HTML5 attributes for data validation
Attributes
Descriptions
autocomplete
Set attribute to off – disables auto-completion
required
Boolean attribute – Form submitted empty browser display error message
novalidate
Boolean attribute to tell browser not to validate form
HTML that uses the validation attributes
Name:
<input type="text" name="name" required><br>
Address: <input type="text" name="address"
novalidate><br>
Zip:
<input type="text" name="zip" required><br>
Phone:
<input type="text" name="phone"
required autocomplete="off"><br>
<input type="submit" name="submit" value="Submit Survey">
The CSS3 pseudo-classes
for validation
:valid
:invalid
input[required]
Selector for controls with required attribute
Example
:required
2/25/2014
Copyright © Carl M. Burnett
19
Attributes for using regular expressions
Attributes
Descriptions
pattern
Specifies regular expression to valid entry
title
Test that is displayed in tooltip
Patterns for common entries
Used For
Pattern
Password (6+ alphanumeric)
[a-zA-Z0-9]{6,}
Zip code (99999 or 99999-9999)
\d{5}([\-]\d{4})?
Phone number (999-999-9999)
\d{3}[\-]\d{3}[\-]\d{4}
Date (MM/DD/YYYY)
[01]?\d\/[0-3]\d\/\d{4}
URL (starting with http:// or https://)
https?://.+
Credit card (9999-9999-9999-9999)
^\d{4}-\d{4}-\d{4}-\d{4}$
2/25/2014
Copyright © Carl M. Burnett
20
HTML that uses regular expressions
Name: <input type="text" name="name"
required autofocus><br>
Zip: <input type="text" name="zip" required
pattern="\d{5}([\-]\d{4})?"
title="Must be 99999 or 99999-9999"><br>
Phone: <input type="text" name="phone" required
pattern="\d{3}[\-]\d{3}[\-]\d{4}"
title="Must be 999-999-9999"><br>
<input type="submit" name="submit" value="Submit Survey">
Example
2/25/2014
Copyright © Carl M. Burnett
21
Attributes for the option elements within a datalist element
Attributes
Descriptions
value
The value of the option in the datalist. Left aligned
label
Description of item
<p>Our company is conducting a survey. Please answer the
question below.</p>
<label for="link">What is your preferred search engine:
</label>
<input type="url" name="link" id="link" list="links">
<datalist id="links">
<option value="http://www.google.com/"
label="Google">
<option value="http://www.yahoo.com/" label="Yahoo">
<option value="http://www.bing.com/" label="Bing">
<option value="http://www.dogpile.com/"
label="Dogpile">
</datalist>
<br><br>
<input type="submit" name="submit" value="Submit Survey">
2/25/2014
Copyright © Carl M. Burnett
Example
22
The type attribute for email, url, and tel controls
Attributes
Descriptions
email
A control for receiveing email address (Implies Validation)
url
A control for receiving a URL (Implies Validation)
tel
A control for receiving a telephone number (Does not Imply Validation)
<form name="email_form" action="survey.php"
method="post">
<h3>Your information:</h3>
<label for="email">Your email address:</label>
<input type="email" name="email" id="email"
required><br>
<label for="link">Your web site:</label>
<input type="url" name="link" id="link"
list="links"><br>
<label for="phone">Your phone number:</label>
<input type="tel" name="phone" id="phone"
required><br><br>
<input type="submit" name="submit"
value="Submit Survey">
</form>
2/25/2014
Copyright © Carl M. Burnett
Example
23
Attributes for the number and range controls
Attributes
Descriptions
min
Minimum value
max
Maximum value
step
The increase and decrease by user clicks or up and down arrow keys
<h3>Your information:</h3>
<form name="test_form" action="test.php" method="get">
<label for="investment">Monthly investment: </label>
<input type="number" name="investment"
id="investment" min="100" max="1000"
step="100" value="300"><br><br>
<label for="book">Rate the book from 1 to 5: </label>
<input type="range" name="book" id="book"
min="1" max="5" step="1"><br><br>
<input type="submit" name="submit"
value="Submit Survey">
</form>
2/25/2014
Copyright © Carl M. Burnett
Example
24
Attributes for the date and time controls
Attributes
Descriptions
min
Minimum value
max
Maximum value
Date and time:&nbsp;&nbsp;
<input type="datetime" name="datetime"><br><br>
Local date and time:&nbsp;&nbsp;
<input type="datetime-local"
name="datetimelocal"><br><br>
Month:&nbsp;&nbsp;
<input type="month" name="month"><br><br>
Week:&nbsp;&nbsp;
<input type="week" name="week"><br><br>
Time:&nbsp;&nbsp;
<input type="time" name="time"><br><br>
Date:&nbsp;&nbsp;
<input type="date" name="date">
2/25/2014
Copyright © Carl M. Burnett
In Opera
Example
25
A search function that uses a search control
<form method="get" action="http://www.google.com/search">
<input type="search" name="q" size="30"
maxlength="255">
<input type="hidden" name="domains"
value="http://www.murach.com">
<input type="hidden" name="sitesearch"
value="http://www.murach.com">
<input type="submit" name="search" value="Search">
</form>
Example
2/25/2014
Copyright © Carl M. Burnett
26
The HTML for a color control
<label for="firstcolor">Choose your first background
color:</label>
<input type="color" name="firstcolor" id="firstcolor">
In Opera
Example
2/25/2014
Copyright © Carl M. Burnett
27
An attribute for the output element
Attribute
Descriptions
for
Can be used to associate output element with one or more controls
<p>Enter numbers in both fields and click the Calculate button.</p>
<form onsubmit="return false">
<input name="x" type="number" min="100" step="5"
value="100"> +
<input name="y" type="number" min="100" step="5"
value="100"><br><br>
<input type="button" value="Calculate"
onClick="result.value = parseInt(x.value) +
parseInt(y.value)">
<br><br>
In Safari
Total: <output name="result" for="x y"></output>
</form>
Example
2/25/2014
Copyright © Carl M. Burnett
28
Attributes for the progress and meter elements
Attributes
Descriptions
high
High point
low
Low point
min
Lowest limit
max
Maximum limit
optimum
Optimum value
value
Current value
<body onLoad="setProgressAndMeter()">
<h3>Progress Element</h3>
Progress set by JavaScript on page load:
<progress id="progressBar" max="100"
value="0"></progress>
<h3>Meter Element</h3>
Meter set by JavaScript on page load:
<meter id="meterBar" max="100" value="0" optimum="50"
high="60"></meter>
</body>
2/25/2014
Copyright © Carl M. Burnett
In Opera
Example
29
A web page that uses HTML5 data validation (Opera)
HTML
CSS
In Opera
Example
2/25/2014
Copyright © Carl M. Burnett
30
Student Exercise 2
 Complete Exercise 8-1 on page 372 using
Dreamweaver.
 Upload your HTML pages and CSS files to the
live site to preview.
2/25/2014
Copyright © Carl M. Burnett
31
Class Review




How to Use Forms and Controls
Other Skills for Working with Forms
How to Use HTML5 for Data Validation
How to Use HTML5 Controls
Next –
Chapter 11 - How to add audio and video to your web site
2/25/2014
Copyright © Carl M. Burnett
32