HTML5 Form Attributes 

required

Tells the browser to only submit the form if the field in question is filled out correctly. If a required field is empty or invalid, the form will fail to submit, and focus will move to the first invalid form element and show the required message.

<input type="text" id="name" name="name" required aria-required="true">

<input type="text" id="name" name="name" required aria-required="true">

Styles: You can style the required elements with the proper pseudo clasess.

input:required 
{ 
    background-color: orange; 
} 
input:focus:invalid 
{ 
    background-color: red; 
} 
input:focus:valid 
{ 
    background-color: green; 
}

input:required  
{  
    background-color: orange;  
}  
input:focus:invalid  
{  
    background-color: red;  
}  
input:focus:valid  
{  
    background-color: green;  
}

To change the default required message you can use the setCustomValidity() javascript function:

var name = document.getElementById("name");
name.setCustomValidity("CUTOM ERROR MESSAGE");

var name = document.getElementById("name"); 
name.setCustomValidity("CUTOM ERROR MESSAGE");

placeholder

Defines an example text to be displayed inside of an input field. The placeholder text is displayed with the specified style until the field has focus.

<input name="url" type="url" placeholder="http://www.microsoft.com" />

<input name="url" type="url" placeholder="http://www.microsoft.com" />

 

Styles: you can style it however you want with Cascading Style Sheets (CSS) by using the :-ms-input-placeholder pseudo-class selector.

input.url:-ms-input-placeholder 
{ 
    background-color:#ddff00; 
    color:#0000ff; 
}

input.url:-ms-input-placeholder  
{  
    background-color:#ddff00;  
    color:#0000ff;  
}

pattern

Allows you to define a regular expression that the user's input must match.

<input type="tel" name="tel" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" />

<input type="tel" name="tel" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" />

disabled

The user can't edit the text in the control. Form controls with the disabled attribute aren’t submitted along with the form.

<input type="text" name="name" id="name" disabled>

<input type="text" name="name" id="name" disabled>

Styles: you can employ the :disabled pseudo-class in your CSS to style disabled form controls.

input:disabled {
    background-color: #dddddd;        
}

input:disabled { 
    background-color: #dddddd;         
}

readonly

This is similar to the disabled attribute, the user can't edit the form field, however, the field can receive focus and its value is submitted with the form.

<input type="text" name="name" id="name" readonly="true">

<input type="text" name="name" id="name" readonly="true">

multiple

Indicates that multiple values can be entered in a form control. It can be added to email and file input types as well.

<input type="email" id="email" name="email" multiple >

<input type="email" id="email" name="email" multiple >

form

Allows you to associate form elements with forms in which they’re not nested.

<input type="email" id="email" name="email" form="form1">

<input type="email" id="email" name="email" form="form1"> 

autocomplete

Specifies whether the form or a form control, should have autocomplete functionality. By default, autocomplete is on. To disable it, use autocomplete="off".

<form autocomplete="off">

<input type="email" id="email" name="email" autocomplete="off">

<form autocomplete="off"> 
 
<input type="email" id="email" name="email" autocomplete="off">

autofocus

Enables you to guide the user to a specific field by directing focus to a field or control after a webpage loads. Only one control in a document can have autofocus specified. If more than one element has the attribute, only the first one on the page gets the focus when the page opens.

<input type="email" id="email" name="email" autofocus>

<input type="email" id="email" name="email" autofocus>

list

Takes as its value the id attribute of the datalist you want to associate with the input. The datalist element is a list of options that will display a simple text field that drops down a list of suggested answers when focused.

<input type="url" list="urls" id="website" Name="website">

<datalist id="urls"> 
    <option value="http://www.site1.com"> 
    <option value="http://www.site2.com"> 
    <option value="http://www.site3.com">  
</datalist>

<input type="url" list="urls" id="website" Name="website"> 
 
<datalist id="urls">  
    <option value="http://www.site1.com">  
    <option value="http://www.site2.com">  
    <option value="http://www.site3.com">   
</datalist>

This is how Microsoft IE 10 displays it:

min, max, and step

These are applicable to input controls whose type attribute has been set to number or range. The min and max attributes define the minimum and maximum values that will be accepted. The step attribute defines the allowed interval between values.

<input type="number" min="0" max="10" step="2"/>

<input type="number" min="0" max="10" step="2"/>

novalidate

Can be set on form elements that have validation constraints to allow the form to be submitted without validation.

<form novalidate> 
   ...
</form>

<form novalidate>  
   ... 
</form>

formnovalidate

Useful for Save for Latter button. on the button that saves the form for later.

<input type="submit" formnovalidate name="save" value="Save for Later" />

<input type="submit" formnovalidate name="save" value="Save for Later" />

New input types 

HTML5 has 13 new input types:

• search
• email
• url
• tel
• number
• range
• color
• date
• datetime
• month
• week
• time
• datetime-local

Search

The search input type (type="search") provides a search field for entering one or more search terms. While you can use type="text" for search fields, the new search type provides an interface the user is accustomed to.

<input type="search" value="Search" id="searchSite">

<input type="search" value="Search" id="searchSite">

 

email

Used for specifying one or more email addresses. It supports the Boolean multiple attribute, allowing for multiple, comma-separated email addresses.

<input type="email" id="email" name="email">

<input type="email" id="email" name="email">

url

Indicates that the field must accept a fully qualified web address, such as "http://www.microsoft.com".

<input type="url" name="myUrl"/>

<input type="url" name="myUrl"/>

tel

Indicates that the field accepts a telephone number the tel type doesn’t enforce a particular syntax or pattern because telephone numbers can have different formats. If you need to force a particular format, use the pattern attribute.

<input id="work_phone" type="tel" required placeholder="(555) 555-5555"/>

<input id="work_phone" type="tel" required placeholder="(555) 555-5555"/>

number

It requires that the value attribute, if specified and not empty, have a valid floating point number.

<input type="number" name="quantity" value="10" />

<input type="number" name="quantity" value="10" />

This is how Microsoft IE 10 displays the number control:

This is how Google Chrome displays it:

range

Gives you the ability to easily create a range or slider input control. The range control takes four attributes—min, max, step, and value—to define the value range and resolution of the control.

<input type="range" min="0" max="100" step="5" value="50"/>

<input type="range" min="0" max="100" step="5" value="50"/>

color

Provides the user with a color picker. The color picker should return a hexadecimal RGB color value, such as #FFFF00. 

<input type="color" name="color" id="color" />

<input type="color" name="color" id="color" />

This is how Google Chrome displays the color control:

date

This includes the date: year, month, and day, but no time; for example, 2012-11-22.

<input type="date" id="startdate" name="startdate" min="2012-01-01" max="2012-01-31" required>

<input type="date" id="startdate" name="startdate" min="2012-01-01" max="2012-01-31" required>

datetime

This includes both the date and time, separated by a “T”, and followed by either a “Z” to represent UTC, or by a time zone specified with a + or - character.For example, “2012-01-17T10:45-5:00”.

datetime-local

Identical to datetime, except that it omits the time zone.

month

Only includes the year and month; for example, 2011-11.

week

This covers the year and week number from 1 to 52; for example, 2012-W03.

time

A time of day, using the military format (24-hour clock); for example, 21:00 instead of 09.00 p.m.