ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

A Web Tutorial Series: HTML 5 - New Form and Input Elements and Attributes

Updated on March 29, 2014

Recap of The Last Tutorial & This Tutorial's Goals

In the previous tutorial in this series we began looking at some of the changes introduced in HTML5. A number of elements were dropped from the standard because they were hardly ever used. Our discussion focused on the new semantic elements. Those elements which related content to its usual meaning, the <footer> element is related to footnotes; the <header> element is related to heading, etc.

In this tutorial we turn our attention to the <form> and <input> elements and new types and attributes associated with them.

New Form and Input Elements

HTML5 has the following new form elements:

  • <datalist>
  • <keygen>
  • <output>

The <datalist> element is one that anyone who fills out a survey or an address label is very familiar with. In filling out a form there might be a pre-defined list for age, state or country of residence for example. The <datalist> element provides an "autocomplete" feature on <input> elements. As a user inputs data they will see options available based on the character which they have input thus far. The connection between the form and the input element is via the input element list attribute.

The new <keygen> element was implemented to provide a secure authentication method for users. The tag specifies a key pair generator field in a form. Upon submission, both a private key and a public key are generated. The private key is locally stored. The public key could be used to authenticate the user in the future through a client certificate.

The <output> is simply that, it represents the output of a calculation. The output element is associated with three attributes:

  • for - which is used to make an explicit relationship between the inputs and the output
  • form - associates the output with a named form.
  • name - the elements name

We expand upon <input> element attributes later in this tutorial. The following snapshot illustrates the use of <datalist>, <keygen>, and <output>.

Examples of the Use of New Form Types

Use of a datalist for states of the United States.
Use of a datalist for states of the United States.
Note: IE doesn't understand the field so the input box is not displayed. Chrome provides two alternatives for the encryption type.
Note: IE doesn't understand the field so the input box is not displayed. Chrome provides two alternatives for the encryption type.

New <input> Types

HTML5 has several new input types for forms. These new features allow better input control and validation.


This chapter covers the new input types:

  • color - The color field is used for those input types that should have a color.
  • date - The user is allowed to specify a date..
  • datetime - Allows the user to select a date and time with a time-zone.
    .
  • datetime-local - Data and time are specified locally..
  • email - indicates that the filed should be an e-mail address.
  • month - the user can select a month and year
  • number - specifies that the filed should be numeric
  • range - the user is allowed to select a value within a range
  • search - indicates that the field will be used for a search. In reality it acts like a text field.
  • tel - a field for a telephone number
  • time - allows the user to specify a time
  • url -a field intended for a URL
  • week - the user can specify a numberic value for a week and year

One of the main features of the new input types is that they provide some validation. For example, number and range can have a restricted set of values. e-mail and url check for patterns. It should be noted that not all browsers support these features in the same way nor supply the save level of validation.

Not All Browser Exhibit the Same Behavior

In this simple example with color. Chrome Canary show how robust it is. It pre-fills the input box with color and then when the user click on the input field bring up the color palette. Firefox and IE don't.
In this simple example with color. Chrome Canary show how robust it is. It pre-fills the input box with color and then when the user click on the input field bring up the color palette. Firefox and IE don't.
This is the code for the example above.
This is the code for the example above.

HTML5 New <form> Attributes: autocomplete and novalidate

There are two new form attributes, rather simple in nature. The autocomplete attribute allow suggested values to be presented to the user after they select the field.The values for autocomplete can be set to either on or off.

The novalidate attribute states that no validation should be performed for the field being entered


HTML5 Attributes for the <input> Element

New attributes for <input>:

  • autocomplete

  • autofocus

  • form

  • formaction

  • formenctype

  • formmethod

  • formnovalidate

  • formtarget

  • height and width

  • list

  • min and max

  • multiple

  • pattern (regexp)

  • placeholder

  • required

  • step

The <input> autocomplete Attribute

The autocomplete attribute can be sspecified for an input field as well as a form. It is set to eith "on" or "off".

When autocomplete is "on" , the browser complete values based what the user has entered before for that field type.

Notes: Autocomplete may be set to "on" for the form, and "off" for specific input fields, or vice versa.

The autocomplete attribute works with <input> types: text, search, url, tel, email, password, datepickers, range, and color.

<input> autofocus Attribute

The autofocus attribute is a boolean attribute. It specifies that an <input> element should automatically get focus when the page loads.

<input> form Attribute

An <input> element may belong to one or more forms. To refer to more than one form one would use a space-separated list of form ids.

<input> formaction Attribute

The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.

The formaction attribute overrides the action attribute of the <form> element.

Note Two Possible Actions for One Form

Deferent actions are performed  depending upon which submit button is clicked.
Deferent actions are performed depending upon which submit button is clicked.

<input> formmethod Attribute

The formmethod attribute defines the HTTP method, either "get" or "post" for sending form data to the action URL.

The formmethod attribute overrides the method attribute of the <form> element.

Formmethod attribute can be used with the "submit" and "image" type.

<input> formenctype Attribute

The formenctype attribute specifies how the form data should be encoded when submitting it to the server. This attribute only applies to "post" method submission.

The formenctype attribute overrides the enctype attribute of the <form> element and is used for type="submit" or "image".


<input> form novalidate Attribute

The novalidate attribute is a boolean attribute. It specifies that the <input> element should not be validated when submitted. It overrides the value set for the form. It is used with type="submit".

<input> formtarget Attribute

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

The formtarget attribute overrides the target attribute of the <form> element. and can be used with type="submit" and type="image"

Example of A Form Target Opening a New Window

Depending upon which submit button is clicked., processing is reported back to this window or a new window (the _blank value indicated).
Depending upon which submit button is clicked., processing is reported back to this window or a new window (the _blank value indicated).

<input> height and width Attributes

The height and width attributes specify the height and width of an <input> element. Specifying height and width for images is a performance inprovement in how a pages loads.

<input> list Attribute

The list attribute refers to a <datalist> element that contains predefined options for an <input> element.

<input> min and max Attributes

The min and max attributes specify the minimum and maximum value for an <input> element. These attributes work with input types: number, range, date, datetime, datetime-local, month, time and week.

<input> multiple Attribute

The multiple attribute is a boolean attribute.

When present, it specifies that the user is allowed to enter more than one value in the <input> element. For example the user may specify multiple email addresses or multiple filenames.

Code for Specifying Multiple Images

In this case multiple images can be specified.
In this case multiple images can be specified.

<input> pattern Attribute

The pattern attribute specifies a regular expression that the <input> element's value is checked against. This is a GREAT way to filter out errors in input.

<input> placeholder Attribute

The placeholder attribute specifies a short hint that describes the expected value of an input field. The hint is displayed in the input field before the user enters a value.

"placeholder" works with input types: text, search, url, tel, email, and password.

<input> required Attribute

The required attribute is a boolean attribute.

If used, it specifies that an input field must be filled out before submitting the form.

<input> step Attribute

The step attribute specifies the legal number intervals for an <input> element.

Example: if step="10", legal numbers could be -10, 0, 10, 20, 30, etc.

The step attribute can be used together with the max/min attributes to create a range of legal values.

The step attribute works with the following input types: number, range, date, datetime, datetime-local, month, time and week.

Wrap Up and What's Next

This tutorial has covered a number of new <form> and <input> types as well as their attributes. Most of this are rather self-explanatory and in a lot of cases elementary. A suggestion is to familiarize yourself with the possibilities so when you start coding you don't have to "reinvent" the wheel by working on something which is alreaded developed for your use.

In our next tutorial we continue with features which were new in HTML5.

Please Rate This Tutorial for Clarity and Completeness

Cast your vote for Was this tutorial clear and complete?

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)