CS 50.12 HTML 5 :: Interactive Web Pages

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

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

New Attributes for form tag and other form elements:

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

New CSS pseudo-classes for form elements

pseudo-class for styling elements in their valid state
pseudo-class for styling elements in their invalid state
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

<input id="emailEx" type="email">
some smart phones change keyboard, browser validates for email data
<input id="urlEx" type="url">
some smart phones change keyboard, browser validates for URL data
<input name="telEx" type="tel">
no new browser features at this time
<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
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
<input id="ColorEx" type="color">
some browsers display a color picker
<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


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

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


Sample form - CSS