View
217
Download
0
Category
Tags:
Preview:
Citation preview
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: <input type="datetime" name="datetime"><br><br>Local date and time: <input type="datetime-local" name="datetimelocal"><br><br>Month: <input type="month" name="month"><br><br>Week: <input type="week" name="week"><br><br>Time: <input type="time" name="time"><br><br>Date: <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
Recommended