Session 1

Chapter 10 - How to Work with Forms

ITI 134: HTML5 Desktop and Mobile Level II

www.profburnett.com

Copyright © Carl M. Burnett

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 2

2/25/2014 3Copyright © Carl M. Burnett

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

Attributes - Input Elements

Attributes of Form Element

Attribute Description

name Name for code

action URL of processing file

method Get or Post

target Where to open page

HTML for Form

2/25/2014 4Copyright © Carl M. Burnett

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

subscribe.php?email=zak%40modulemedia.com&submit=Subscribe

URL when form submitted with “get” method

Example

Attributes Input Element Buttons and Button Element

2/25/2014 5Copyright © Carl M. Burnett

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 6Copyright © Carl M. Burnett

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

Four buttons that are created by the input element

<button type="submit"> <img src="images/addtocart.png" width="30" height="23" alt="Add to Cart">Add to Cart</button>

A button that is created by the button element

Example

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 7Copyright © Carl M. Burnett

2/25/2014 8Copyright © Carl M. Burnett

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

The HTML for text fields

Example

Attributes of Radio Buttons and Check Boxes

2/25/2014 9Copyright © Carl M. Burnett

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

Example

Attributes of Optgroup and Option Element

2/25/2014 10Copyright © Carl M. Burnett

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>

Example

Attributes of Select Element for List Boxes

2/25/2014 11Copyright © Carl M. Burnett

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

Attributes of Textarea Element

2/25/2014 12Copyright © Carl M. Burnett

Attributes Descriptions

rows Approximate number of rows

cols Approximate number of columns

wrap Text wrap specifications: hard | soft (default)

CSS for Text Area

HTML for Text Area Comments:<br><textarea name="comments" placeholder="If you have any comments, please enter them here."></textarea>

textarea { height: 5em; width: 25em; font-family: Arial, Helvetica, sans-serif; }

Example

The HTML for a form with label elements

2/25/2014 13Copyright © Carl M. Burnett

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

HTML that uses fieldset and legend elements

2/25/2014 14Copyright © Carl M. Burnett

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

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.

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

HTML for a file upload control

Example

2/25/2014 15Copyright © Carl M. Burnett

Aligned label, text box, and button 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"> Example

The CSS for the controlsThe HTML for the controlslabel { float: left; width: 5em; text-align: right;}input { margin-left: 1em; margin-bottom: .5em;}#button { margin-left: 7em;}

2/25/2014 16Copyright © Carl M. Burnett

The CSS for the enhanced formbody { 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; }

Example

2/25/2014 17Copyright © Carl M. Burnett

The attributes for tab order and access keysAttributes 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.

<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

The HTML for the controls<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">

Another way to define the access keys

Example

2/25/2014 18Copyright © Carl M. Burnett

The HTML5 attributes for data validationAttributes 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

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

HTML that uses the validation attributes

Example

:valid:invalidinput[required]

:required

Selector for controls with required attribute

The CSS3 pseudo-classes for validation

2/25/2014 19Copyright © Carl M. Burnett

Attributes for using regular expressionsAttributes 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 20Copyright © Carl M. Burnett

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 21Copyright © Carl M. Burnett

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

Example

2/25/2014 22Copyright © Carl M. Burnett

The type attribute for email, url, and tel controlsAttributes 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>

Example

2/25/2014 23Copyright © Carl M. Burnett

Attributes for the number and range controlsAttributes 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> Example

2/25/2014 24Copyright © Carl M. Burnett

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"> Example

In Opera

2/25/2014 25Copyright © Carl M. Burnett

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 26Copyright © Carl M. Burnett

The HTML for a color control

<label for="firstcolor">Choose your first background color:</label><input type="color" name="firstcolor" id="firstcolor">

Example

In Opera

2/25/2014 27Copyright © Carl M. Burnett

An attribute for the output elementAttribute 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> Total: <output name="result" for="x y"></output></form> Example

In Safari

2/25/2014 28Copyright © Carl M. Burnett

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>

Example

In Opera

2/25/2014 29Copyright © Carl M. Burnett

A web page that uses HTML5 data validation (Opera)

HTML

CSS

Example

In Opera

2/25/2014 30Copyright © Carl M. Burnett

Copyright © Carl M. Burnett

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 31

Copyright © Carl M. Burnett

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

2/25/2014 32

Next – Chapter 11 - How to add audio and video to your web site