Chapter 9

How to work
with forms

Slide
1
Attributes of the form element
• name
• action
• method
• target

Slide 2
Attributes common to most input elements
• type
• name
• disabled
• readonly

Slide 3
The HTML for a 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>

Slide 4
The form in a web browser

Slide 5
Attributes of the input element for buttons
and for the button element
• type
• value
• src
• alt
• height
• width

Slide 6
Four buttons that are created by the input element
<input type="button" name="message" value="Alert Me">
<input type="submit" name="checkout" value="Checkout">
<input type="reset" name="resetform" value="Reset">
<input type="image" src="images/submit.jpg"
alt="Submit button" width="114" height="42">

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

Slide 8
The buttons in a web browser

Slide 9
Attributes of the input element for text fields
• type
• value
• maxlength
• size
• autofocus
• placeholder

Slide
10
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">

Slide
11
The text fields in a web browser

Slide
12
Attributes of the input element for radio buttons
and check boxes
• type
• value
• checked

Slide
13
The HTML for radio buttons and check boxes
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

Slide
14
The radio buttons and check boxes
in a web browser

Slide
15
Attributes of the optgroup and option elements
Element Attribute
optgroup label
option value
option selected

Slide
16
The HTML for a drop-down list
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>

Slide
17
The drop-down list in a web browser
when the user clicks on the arrow

Slide
18
Attributes of the select element for list boxes
• size
• multiple

Slide
19
The HTML for a list box
<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>

Slide
20
The list box in a web browser with a scroll bar

Slide
21
Attributes of the textarea element
• rows
• cols
• wrap

Slide
22
The HTML for a text area with default text
Comments:<br>
<textarea name="comments"
placeholder="If you have any comments, please enter them here.">
</textarea>

The CSS for the text area

Slide
23
The text area in a web browser

Slide
24
The text area after text has been entered into it

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

Slide
26
HTML that uses fieldset
and legend elements (cont.)
<fieldset>
<legend>Toppings</legend>
<input type="checkbox" name="topping1" id="topping1"
value="pepperoni">
<label for="topping1">Pepperoni</label><br>
<input type="checkbox" name="topping2" id="topping2"
value="mushrooms">
<label for="topping2">Mushrooms</label><br>
<input type="checkbox" name="topping3" id="topping3"
value="olives">
<label for="topping3">Black Olives</label>
</fieldset>
</form>

Slide
27
The elements in a web browser

Slide
28
Label, text box, and button controls aligned
on a form

Slide
29
The HTML for the form
<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">

Slide
30
The CSS for the controls
label {
float: left;
width: 5em;
text-align: right;}
input {
margin-left: 1em;
margin-bottom: .5em;}
#button {
margin-left: 7em;}

Slide
31
The form with some additional formatting

Slide
32
The CSS for the 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; }

Slide
33
The HTML5 attributes for data validation
• autocomplete
• required
• novalidate

Slide
34
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">

Slide
35
The error message and highlighting used
by Chrome

Slide
36
Attributes for the option elements
within a datalist element
• value
• label

Slide
37
HTML that uses a datalist element
<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">

Slide
38
The form in Chrome after the user clicks
the down arrow

Slide
39
The email, url, and tel controls
• email
• url
• tel

Slide
40
HTML code that uses the email, url,
and tel controls
<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 website:</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>

Slide
41
The form in Chrome

Slide
42
Attributes for the number and range controls
• min
• max
• step

Slide
43
HTML that uses number and range controls
<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>

Slide
44
The form in Chrome

Slide
45
HTML that uses the date and time controls
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">

Slide
46
The controls in Chrome

Slide
47
Attribute for the color control
• value

Slide
48
The HTML for a color control
<label for="firstcolor">Choose your first background
color:</label>
<input type="color" name="firstcolor" id="firstcolor"
value="#facd8a">

Slide
49
The color control in Chrome

Slide
50
Exercise: Create a form for getting tickets

Slide
51