{ LearnWebSiteDesign.com }

HTML, HTML5, XHTML, CSS and CSS3 Tutorials

HTML5 Form Attributes Tutorial

HTML5 defines 13 new form field types.

HTML5 provides new <form> attributes and <input> attributes.

The new HTML5 <form> attributes are:

  • autocomplete
  • novalidate

The new HTML5 <input> attributes are:

  • autocomplete
  • autofocus
  • form
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
  • height and width
  • list
  • min, max and step
  • multiple
  • pattern (regexp)
  • placeholder
  • required

Web Browser Support

The web browser support for each HTML5 feature listed here is listed below.

Attribute IE FireFox Opera Chrome Safari
autocomplete 8.0 3.5 9.5 3.0 4.0
autofocus No No 10.0 3.0 4.0
form No No 9.5 No No
form overrides No No 10.5 No No
height and width 8.0 3.5 9.5 3.0 4.0
list No No 9.5 No No
min, max and step No No 9.5 3.0 No
multiple No 3.5 11.0 3.0 4.0
novalidate No No 11.0 No No
pattern No No 9.5 3.0 No
placeholder No No 11.0 3.0 3.0
required No No 9.5 3.0 No

autocomplete Attribute

The HTML5 autocomplete attribute specifies whether or not the form should have autocomplete enabled.

The HTML5 autocomplete attribute allows the web browser to predict the user input for each field. When a user begins to enter text into an input field, web browsers that support this feature should display options that allow the user to auto-complete the field, based on values that entered into the input field earlier.

NOTE: The HTML5 autocomplete attribute works with the <form> tag, and the following <input> types: text, search, url, telephone, email, password, datepickers, range and color.

NOTE: Some web browsers require you to activate the HTML5 autocomplete function for it to work.

HTML5 autocomplete Attribute Values

The HTML5 autocomplete attribute values are listed below.

Attribute Description
on Default value. Specifies that autocomplete is enabled.
off Specifies that the autocomplete is disabled.

autocomplete Syntax

The syntax to enable or disable the HTML5 autocomplete attribute is shown below.

<form action="process.php" method="post" autocomplete="on"> </form>

HTML5 autofocus Attribute

The HTML5 autofocus attribute specifies that a field should automatically get focus when a page is loaded.

NOTE: The HTML5 autofocus attribute works with all <input> types.

Web browsers that do not support the HTML5 autofocus attribute will simply ignore the attribute.

An example of the autofocus attribute in use are shown below.

<form action="process.php" method="post"> Name: <input type="text" name="name" autofocus="autofocus" /> <br /> <input type="submit" autofocus="autofocus" /> </form>

An example of how an input text field appears in this web browser is shown below.

Name:

HTML5 form Attribute

The HTML5 form attribute specifies one or more form elements that are outside of the <form> element itself that belong to that <form>.

The HTML5 form attribute must specifically refer to the id of <form> that it should belong to.

NOTE: The HTML5 form attribute works with all <input> tags.

The code example below shows you how to apply the HTML5 form attribute to an <input> tag that is outside of the <form> element itself.

<form action="process.php" method="post" id="example_form"> First Name:<input type="text" name="first_name" /> <input type="submit" /> </form> <p> The <inpu> field is outside of the <form> element, but is still part of the <form> itself because the HTML5 form attribute is applied to it. </p> Last Name: <input type="text" name="last_name" id="example_form" />

NOTE: You can refer to more than one <form> by refering to the <form> id of each form by seperating specified <form> id with a space within the HTML5 form attribute.

HTML5 Form Override Attributes

HTML5 form override attributes allow you to override some of the attributes that are set for the <form> element.

The HTML5 form override attributes and description of what each does are listed below.

NOTE: HTML5 form override attributes work with the following <input> types: submit and image.

NOTE: HTML5 form override attributes are helpful in creating different submit buttons.

Attribute Description
formaction Overrides the form action attribute
formenctype Overrides the form enctype attribute
formmethod Overrides the form method attribute
formnovalidate Overrides the form novalidate attribute
formtarget Overrides the form target attribute

The code example below shows you how to use HTML5 form override attributes.

<form action="process.php" method="post" id="example_form"> Name: <input type="text" name="name" /> <br /> <input type="submit" value="Submit" /> <br /> <input type="submit" formaction="admin.php" value="Submit to Admin" /> <br /> <input type="submit" formnovalidate="true" value="Submit without validation" /> </form>

The code above produces the form with multiple submit buttons below.

Name:


HTML5 Form Height and Width Attributes

The HTML5 form height and width attributes allow you to specify the height and width of image used for an <input> type image, which will almost always apply to submit buttons.

NOTE: The HTML5 form height and width attributes only apply to <input> type images.

The code example below shows you how to apply HTML5 form height and width attributes to an image that is used as a submit button.

<input type="image" src="submit_button.gif" width="24" height="24" />

The code above produces the submit button shown below.

HTML5 list Attributes

The HTML5 form list attribute specifies a datalist for an <input> field. A datalist is a list of options for an <input> field.

NOTE: The HTML5 form list attribute works the following <input> types: text, search, url, telephone, email, date pickers, number, range and color.

NOTE: Web browsers that do not support this attribute will simply treat the <input> field as "type='text'".

The code below shows you how to apply the HTML5 form list attributes.

<form action="process.php" method="post"> List: <input type="url" list="tutorials_list" name="link" /> <datalist id="url_list"> <option label="HTML tutorial" value="HTML tutorials" /> <option label="HTML5 tutorials" value="HTML5 tutorials" /> <option label="CSS tutorials" value="CSS tutorials" /> </datalist> <input type="submit" /> </form>

The code example above produces the form below.

List:

HTML5 Form min, max and step Attributes

The HTML5 form min, max and step attributes allow you to specify restrictions for input type containing numbers or dates.

The HTML5 form min, max and step attributes and a description of each is listed below.

Attribute Description
min Specifies the minimum value allowed for the input field
max Specifies the maximum value allowed for the input field
step Specifies the allowed numbered intervals for the input field. For example, if "step='2'", the allowed numbers could be -4, -2, 0, 2, 4, 6, etc.

NOTE: The HTML5 form min, max and step attributes work with the following <input> types: number, range and date pickers.

The example code below shows you an example of an <input> field with min, max and step attributes.

<form action="process.php" method="post"> Numbers: <input type="number" name="numbers" min="-4" max="10" step="2" /> <br /> <input type="submit" /> </form>

Numbers:

HTML5 Form multiple Attribute

The HTML5 form multiple attribute specifies that the user can select multiple values can be selected for an <input> field.

NOTE: The HTML5 form multiple attribute works with the following <input> types: email and file.

The example code below shows you how to apply the HTML5 form multiple attribute to an <input> tag.

<form action="process.php" method="post"> Select images: <input type="file" name="image" multiple="multiple" /> </form>

The example below of how this web browser displays an <input> tag with a "type='file'" and a multiple attribute.

Select images:

HTML5 Form novalidate Attribute

If the HTML5 form novalidate attribute is included within a <form> or <input> tag, it specifies that the form or input field should not be validated when submitted.

NOTE: The HTML5 form novalidate attribute works with the <form> tag and the following <input> types: color, date pickers, email, password, range, search, telephone, text and url.

The code example below shows you how to include the novalidate attribute within a <form> tag.

<form action="process.php" method="post" novalidate="novalidate"> Name: <input type="text" name="name" /> <input type="submit" /> </form>

The form below is an example of a form with an HTML5 novalidate attribute included within the <form> tag.

Name:

HTML5 Form pattern Attribute

The HTML5 form pattern attribute allows you to specify a pattern to validate an <input> field. The pattern is a regular expression.

NOTE: The HTML5 form pattern attribute works with the following <input> types: email, password, search, telephone, text and url.

The code example shown below shows you a text field that is allowed to contain only three letters (no numbers or special characters).

<form action="process.php" method="post"> Letters: <input type="text" name="letters" pattern="[A-z]{3}" /> <br /> <input type="submit" /> </form>

The form below is an example of a form with an <input> field with a pattern attribute.

Letters:

HTML5 Form placeholder Attribute

The HTML5 form placeholder attribute provides a hint that describes the expected value of an <input> field. The hint is displayed in the input field when it is empty, and disappears when teh field gets focus.

NOTE: The HTML5 form placeholder attribute works with the following <input> types: email, password, search, telephone, text and url.

The example code below shows you how to include an HTML5 placeholder attribute in an <input> tag.

<form action="process.php" method="post"> <input type="search" name="search" placeholder="some text" /> <br /> <input type="submit" /> </form>

The input field shown below is an example of how an input field with an HTML5 placeholder appears in this web browser.


HTML5 Form required Attribute

The HTML5 form required attribute allows you to specify that an <input> field must be filled out before it is submitted.

NOTE: The HTML5 form required attribute works with the following <input> types: checkbox, date pickers, email, file, number, password, radio, search, telephone, text and url.

The code example is an <input> field with a HTML5 required attribute.

<form action="process.php" method="post"> Name: <input type="text" name="name" required="required" /> <br /> <input type="submit" /> </form>

The example below is a form with an <input> field with an required attribute.

Name:

Tutorials

Templates

References

Sponsors

You can get your website online using Velnet, a leading UK web hosting provider. They provide free template and installation for WordPress blogs. Discuss webmaster related topics at Webmaster Serve, a Webmaster SEO forum

SouthernWebGroup.com provides high quality website design in Atlanta, GA as well as around the world.

Find low cost cheap website hosting and domain registration.

Browser our free no ads web hosting directory and find the free web hosting that's right for you and your budget.

Advertise your web design and web development related products and services here.

Recommended

Download free css web hosting templates that are easy to edit at FreeWebHostingTemplates.com.

Friends