CS 50.12 HTML 5 :: Interactive Web Pages

New form input types - an alternative to the <input type="text">

email
field's only value is an email address
url
field is used to enter the absolute URL address
tel
indicates the input field will contain a telephone #
number
field is used for numberical input only
range
field used to specify a range of values
time
a field used to specifiy a particular time
date
indicates a field that contains a date (day, month, and year)
datetime
a field that contains a date and time
datetime-local
same as above only local
week
field that contains a particular week
month
field that contains a particular month
 
 
color
indicates a field that is used to select a color value
search
the input field used for searching for content

New Attributes for form tag and other form elements:

autofocus
specifies a form element that should receive the focus when a page loads
autocomplete
indicates that this element's value may be remembered for future entries
pattern
restricts the input of a field to match a regular expression pattern
placeholder
specifies test that appears in the element until the user enters an actual value
novalidate, formnovalidate
causes the browser to NOT validate the form
required
indicates the field is required to have a value
 

New CSS pseudo-classes for form elements

:valid
pseudo-class for styling elements in their valid state
:invalid
pseudo-class for styling elements in their invalid state
 
:required
pseudo-class for styling elements that are required
 
 

Sample Form - demonstrated in several browsers

Open this form in 4 browsers and then enter valid and invalid data to see how the browser reacts.

Finished Sample form

Step 1 - adding new form input tyes

 
email
<input id="emailEx" type="email">
some smart phones change keyboard, browser validates for email data
URL
<input id="urlEx" type="url">
some smart phones change keyboard, browser validates for URL data
tel
<input name="telEx" type="tel">
no new browser features at this time
number
<input id="numEx" type="number" value="5">
 
some smart phones change keyboard, browser validates for numerical data
number range
Number Field (Min and Max):
<input id="numMinMaxEx" type="number" min="2" max="12" value="9">
Number Field (Step):
<input id="numStepEx" type="number" value="5" step="5">
 
Number Field (Min, Max, and Step):
<input id="numMinMaxStepEx" type="number" min="2" max="12" step="2" value="6">
 
Number Field (Decimals, Min, Max, and Step):
<input id="numComplexEx" type="number" min="0.0" max="2.0" step="0.2" value="0.8">
some smart phones change keyboard, browser validates for numerical data
date/time
Time Field:
<input id="timeEx" type="time" step="3600">
 
Date Field:
<input id="dateEx" type="date" value="2011-12-22">
 
DateTime Field:
<input id="dateTimeEx" type="datetime" value="2011-12-22T01:30Z">
 
Local DateTime Field:
<input id="dateTimeLocalEx" type="datetime-local" value="2011-12-22T01:30">
 
Week Field:
<input id="weekEx" type="week" value="2011-W11">
 
Month Field:
<input id="monthEx" type="month" value="2011-07">

Month Field (Min, Max):
<input id="monthRangeEx" type="month" value="2011-07" min="2011-01" max="2011-12">
some browsers display a calendar which allows you to select a day, week or month
color
<input id="ColorEx" type="color">
some browsers display a color picker
search
<input id="searchEx" type="search">
no new browser features at this time

Sample form with new input types added

Step 2 - autofocus attribute

<label for="FirstName">First Name:</label><br>
<input id="FirstName" type="text" autofocus>

In this code we simple enter the attribute "autofocus" - no value is required

Sample form - autofocus

Step 3 - autocomplete attribute

You will set this to "off" for items which are sensitive such as passwords or account numbers. Here is a code snippet

<label for="LastName">Last Name:<br></label>
<input id="LastName" type="text" autocomplete="on">


<label for="email">Email Address:</label> <br>
<input id="email" type="email" autocomplete="off">

Simple form - autocomplete

Special Note - if your browser has autocomplete turned off then this code will not work. In Firefox for the Mac > Preferences > Privacy >change drop down menu that reads "Remember History" to "Use Custom Settings for History" then make sure the box "remember search and form history" is checked.

 

Step 4 - placeholder attribute

Using this attribute allows you to place text that serves as a "hint" to the user about what type or format they should use when entering data. This text displays when the input area is empty and the autofocus is not on the area.

I add a new form input area for the zip code and include a placeholder attribute for the email and zip code input fields. This text will display in gray text until I click in that input box.

<label for="emailEx">Email Address:</label> <br>
<input id="emailEx" type="email" autocomplete="off" placeholder="name@domain.com">

<label for="zipEx">Zip Code:</label> <br>
<input id="zipEx" type="zip" placeholder="5 digits only">

Sample form - placeholder

 

Step 5 - pattern attribute

The pattern attribute forces the user to enter data that conforms to a Regular Expression pattern.

I modify the zip code input filed so it now has a pattern attribute and the regular expression for a 5 digit number

<label for="zip">Zip Code:</label> <br>
<input id="zip" type="number" placeholder="5 digits only" pattern="^[0-9]{5}$">

Lets take a closer look at the regular expression

pattern="^[0-9]{5}$"

^ - start data
[0-9] any digit from 0 through 9 is acceptable
{5} total of 5 data items
$ end data

Sample form - pattern

 

Step 6 - required attribute

The required attribute forces the user to enter valid data into the particular input area of the form. I have required 3 or the 4 input areas shown below:

<label for="FirstName">First Name:</label><br>
<input id="FirstName" type="text" autocomplete="on" autofocus required>


<label for="LastName">Last Name:<br></label>
<input id="LastName" type="text" autocomplete="on" required>


<label for="emailEx">Email Address:</label> <br>
<input id="emailEx" type="email" autocomplete="off" placeholder="name@domain.com" required>
<br><br>


<label for="zipEx">Zip Code:</label> <br>
<input id="zipEx" type="number" autocomplete="on" placeholder="5 digits only" pattern="^[0-9]{5}$">

Sample form - step 5 required

Step 7 - Using CSS to style valid, invalid, and required fields

Lets use CSS to control the look of required fields or show when someone has entered an invalid value:

<style type="text/css">
:invalid {
background-color: #ffdddd;
}

:valid {
background-color: #ddffdd;
}


:required {
border-color: #00F;
border-width: 3px;
}

</style>

Sample form - CSS