New Form Elements in HTML5

New Form Elements in HTML5 is part 4 of Beginner’s Guide to HTML5.

New Form Elements:

You probably have experienced this kind of response somewhere on the Web: when you are typing in an input form, a list of suggestions appears at the bottom of the input.

Over the years, we rely on JavaScript to create such a function. Today, we are able to do that with the new HTML5 element. This HTML5 new element allows us to store a list of options that will be shown as the users type in the input.

The can be linked to element using a new HTML5 attribute, list. We can use list in a few input types like text and search.

The datalist contains option elements much like the select element, though datalist itself is not an independent control. Instead it is added or attached to an element using the list attribute. Consider the following markup:

[code language=”html”] control with an id and the new list attribute. This tells the browser to load the list of values or suggestions from the datalist element with a corresponding id.

Then comes the actual datalist element with the aforementioned id and a collection of option elements. This is how the values are attached to the input control.

When we run this in the browser, we will see a normal textbox, then when we starting typing (or press the down arrow key, which works in Firefox and Chrome but not in Opera) the complete or filtered list appears. As we type, only the relevant options will be shown, much like how Google’s Search box displays suggestions. Be aware though, slight behavioural variations do exist from browser to browser.


To hook the to an element, simply add list attribute and refer to the id attribute, like so.

[code language=”html”]

The HTML  element exists to facilitate generation of key material, and submission of the public key as part of an HTML form. This mechanism is designed for use with Web-based certificate management systems. It is expected that the keygen element will be used in an HTML form along with other information needed to construct a certificate request, and that the result of the process will be a signed certificate.


autofocus: This Boolean attribute lets you specify that the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean.

challenge: A challenge string that is submitted along with the public key. Defaults to an empty string if not specified.

disabled: This Boolean attribute indicates that the form control is not available for interaction.

form: The form element that this element is associated with (its form owner). The value of the attribute must be an id of a 

 element in the same document. If this attribute is not specified, this element must be a descendant of a 

 element. This attribute enables you to place  elements anywhere within a document, not just as descendants of their form elements.

keytype: The type of key generated. The default value is RSA.

name:  The name of the control, which is submitted with the form data.


[code language=”html”] Note: Not all major browsers support all the new form elements. However, you can already start using them; If they are not supported, they will behave as regular text fields.


Across the web, you’ll see a range of sites that feature calculators for working out things like loan repayments, mortgage rates, tax, insurance, and more. Until now, we’ve had no way of semantically marking up the result of those calculations.

The element represents the result of a calculation. Example given below :


Along with the standard global attributes, also accepts the following:

A space-separated list containing the IDs of the elements whose values went into the calculation.

Associates the element with its form owner. The value must be the ID of a form in the same document. This allows you to place an element outside of the

with which it is associated.

The name of the element.

Implementing :

[code language=”html”]


+ = Total :

What’s Next?

Learn more in details about New Semantic Elements in HTML5

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.


Leave a Reply
  1. Wow, awesome blog layout! How long have you been blogging for?

    you made blogging look easy. The overall look of your site is fantastic, as well as the content!

Comment Below