The document summarizes new form attributes in HTML5 including:
- autocomplete to enable autofill functionality
- autofocus to automatically focus an input field
- form to specify which form an input belongs to
- New input attributes like height, width, list, min, max, step, multiple, novalidate, pattern, placeholder, and required.
1. TRANSLATE
Search w3schools.com Search
HOME HTML C SS XML JAVASC RIPT ASP PHP SQL MORE... R EFER ENC ES | EXAMPLES | FO R UM | ABO UT
HTML5 Form Attributes
HTML5 Tutorial WEB HOSTING
HTML5 Home Best Web Hosting
HTML5 Introduction PHP MySQL Hosting
HTML5 New Elements « Previous Next Chapter »
HTML5 Video Best Hosting C oupons
HTML5 Audio
HTML5 Canvas HTML5 New Form Attributes UK Reseller Hosting
HTML5 Web Storage C loud Hosting
This chapter covers some of the new attributes for <form> and <input>.
Top Web Hosting
HTML5 Forms New form attributes: $7.95/mo SEO Hosting
HTML5 Input Types
HTML5 Form Elements autocomplete WEB BUILDING
HTML5 Form Attributes novalidate
Download XML Editor
HTML5 Reference New input attributes: FREE Website BUILDER
HTML5 Tags autocomplete Free Website Templates
HTML5 Attributes autofocus Free WordPress Themes
HTML5 Events form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) W3SCHOOLS EXAMS
HTML5 Tags height and width Get C ertified in:
<!--> list HTML, C SS, JavaScript,
<!DOCTYPE> min, max and step XML, PHP, and ASP
<a> multiple
<abbr> pattern (regexp) W3SCHOOLS BOOKS
<acronym> placeholder New Books:
<address> required HTML, C SS
<applet> JavaScript, and Ajax
<area>
<article> Browser Support STATISTICS
<aside> Browser Statistics
<audio> Attribute IE Firefox Opera Chrome Safari Browser OS
<b> Browser Display
autocomplete 8.0 3.5 9.5 3.0 4.0
<base>
<basefont> autofocus No 4.0 10.0 3.0 4.0 SHARE THIS PAGE
<bdo>
form No 4.0 9.5 10.0 No Share with »
<big>
<blockquote> form overrides No 4.0 10.5 10.0 No
<body>
<br> height and width 8.0 3.5 9.5 3.0 4.0
<button>
list No 4.0 9.5 No No
<canvas>
<caption> min, max and step No No 9.5 3.0 No
<center>
multiple No 3.5 11.0 3.0 4.0
<cite>
<code> novalidate No 4.0 11.0 10.0 No
<col>
pattern No 4.0 9.5 3.0 No
<colgroup>
<command> placeholder No 4.0 11.0 3.0 3.0
<datalist>
required No 4.0 9.5 3.0 No
<dd>
<del>
<details>
<dfn>
<dir>
autocomplete Attribute
<div>
The autocomplete attribute specifies that the form or input field should have an autocomplete
<dl>
function.
<dt>
<em> Note: The autocomplete attribute works with <form>, and the following <input> types: text, search,
<embed> url, telephone, email, password, datepickers, range, and color.
<fieldset>
<figcaption> When the user starts to type in an autocomplete field, the browser should display options to fill in
<figure> the field:
<font>
<footer>
<form> Example
<frame>
<frameset> <form action="demo_form.asp" method="get" autocomplete="on">
<h1> - <h6> First name: <input type="text" name="fname" /><br />
<head> Last name: <input type="text" name="lname" /><br />
<header>
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<hgroup>
<hr>
<input type="submit" />
<html> </form>
<i>
<iframe>
Try it yourself »
<img>
<input>
<ins> Note: In some browsers you may need to activate the autocomplete function for this to work.
<keygen>
<kbd>
<label>
<legend>
autofocus Attribute
<li>
The autofocus attribute specifies that a field should automatically get focus when a page is loaded.
<link>
<map> Note: The autofocus attribute works with all <input> types.
<mark>
2. <menu>
Example
<meta>
<meter>
<nav> User name: <input type="text" name="user_name" autofocus="autofocus" />
<noframes>
<noscript> Try it yourself »
<object>
<ol>
<optgroup>
<option>
<output> form Attribute
<p>
<param> The form attribute specifies one or more forms the input field belongs to.
<pre>
<progress> Note: The form attribute works with all <input> types.
<q>
<rp> The form attribute must refer to the id of the form it belongs to:
<rt>
<ruby> Example
<s>
<samp>
<script>
<form action="demo_form.asp" method="get" id="user_form">
<section> First name:<input type="text" name="fname" />
<select> <input type="submit" />
<small> </form>
<source> Last name: <input type="text" name="lname" form="user_form" />
<span>
<strike>
<strong> Try it yourself »
<style>
<sub>
<summary> Note: To refer to more than one form, use a space-separated list.
<sup>
<table>
<tbody> Form Override Attributes
<td>
<textarea> The form override attributes allow you to override some of the attributes set for the form element.
<tfoot>
<th> The form override attributes are:
<thead>
formaction - Overrides the form action attribute
<time>
formenctype - Overrides the form enctype attribute
<title>
formmethod - Overrides the form method attribute
<tr>
<tt> formnovalidate - Overrides the form novalidate attribute
<u> formtarget - Overrides the form target attribute
<ul>
Note: The form override attributes works with the following <input> types: submit and image.
<var>
<video>
<wbr> Example
<xmp>
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true"
value="Submit without validation" />
<br />
</form>
Try it yourself »
Note: These attributes are helpful for creating different submit buttons.
height and width Attributes
The height and width attributes specifies the height and width of the image used for the input type
image.
Note: The height and width attributes only works with <input> type: image.
Example
<input type="image" src="img_submit.gif" width="24" height="24" />
Try it yourself »
list Attribute
The list attribute specifies a datalist for an input field. A datalist is a list of options for an input field.
Note: The list attribute works with the following <input> types: text, search, url, telephone, email,
date pickers, number, range, and color.
Example
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
3. Try it yourself »
min, max and step Attributes
The min, max and step attributes are used to specify restrictions for input types containing numbers
or dates.
The max attribute specifies the maximum value allowed for the input field.
The min attribute specifies the minimum value allowed for the input field.
The step attribute specifies the legal number intervals for the input field (if step="3", legal numbers
could be -3,0,3,6, etc).
Note: The min, max, and step attributes works with the following <input> types: date pickers,
number, and range.
The example below shows a numeric field that accepts values between 0 and 10, with a step of 3
(legal numbers are 0, 3, 6 and 9):
Example
Points: <input type="number" name="points" min="0" max="10" step="3" />
Try it yourself »
multiple Attribute
The multiple attribute specifies that multiple values can be selected for an input field.
Note: The multiple attribute works with the following <input> types: email, and file.
Example
Select images: <input type="file" name="img" multiple="multiple" />
Try it yourself »
novalidate Attribute
The novalidate attribute specifies that the form or input field should not be validated when
submitted.
If this attribute is present the form will not validate form input.
Note: The novalidate attribute works with: <form> and the following <input> types: text, search,
url, telephone, email, password, date pickers, range, and color.
Example
<form action="demo_form.asp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
Try it yourself »
pattern Attribute
The pattern attribute specifies a pattern used to validate an input field.
The pattern is a regular expression. You can read about this in our JavaScript tutorial.
Note: The pattern attribute works with the following <input> types: text, search, url, telephone,
email, and password
The example below shows a text field that can only contain three letters (no numbers or special
characters):
Example
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
Try it yourself »
placeholder Attribute
The placeholder attribute provides a hint that describes the expected value of an input field.
Note: The placeholder attribute works with the following <input> types: text, search, url, telephone,
email, and password
The hint is displayed in the input field when it is empty, and disappears when the field gets focus:
4. Example
<input type="search" name="user_search" placeholder="Search W3Schools" />
Try it yourself »
required Attribute
The required attribute specifies that an input field must be filled out before submitting.
Note: The required attribute works with the following <input> types: text, search, url, telephone,
email, password, date pickers, number, checkbox, radio, and file.
Example
Name: <input type="text" name="usr_name" required="required" />
Try it yourself »
« Previous Next Chapter »
Free Online Website Builder - No Downloading Needed
Create a free Flash website with our simple, online web design editing platform. Stunning templates
and user-friendly tools make website building easy and fun.
Start Creating your free website now!
Stylus Studio® XML Development Environment
Stylus Studio® 2011 XML Enterprise Suite raises the bar for productivity in XML development tools.
Millions of XML developers and data integration specialists turn to Stylus Studio's comprehensive
and intuitive XML toolset to tackle today's advanced XML data transformation and aggregation
challenges.
XML Pipeline Editor, Debugger and Code Generator
DataDirect XML Converters
XQuery Mapper, Editor, Debugger, and Profiler
XSLT Mapper, Editor, Debugger, Designer, and
Profiler
Java and C# for .Net Code Generation
XML Schema Designer With Documentation
Generator
XML Editor With Full XPath Integration
Download a free trial now
W3Schools' Online Certification
The perfect solution for professionals who need to balance
work, family, and career building.
More than 6000 certificates already issued!
Get Your Certificate »
The HTML Certificate documents your knowledge of HTML.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The jQuery Certificate documents your knowledge of jQuery.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
5. The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
RE P O RT E RRO R | HO ME | TO P | P RI N T | FO RU M | A BO U T
W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
While using this site, you agree to have read and accepted our terms of use and privacy policy.
C opyright 1999-2011 by Refsnes Data. All Rights Reserved.