Member Login:


Additional HTML5 Form Input Features

Document Reference: TN201604001 - Rev: 1.9 - Last Update: 05-07-2017 15:14 GMT - Downloaded: 19-Mar-2024 04:47 GMT

A selection of some of the new HTML5 type input controls, new attributes and related elements.

At the last test in April 2016, we have found that not all features of this controls have been implemented in all current HTML5 compliant browsers as yet. So before implementing, please test to see if your design requirements are fulfilled for your target audience. Please note that should one particular input type not be supported in one particular web browser, it will default back to a text (type="text") control.

See also the HTML4.01 Form Input Control Type practioners reference page for more information on other available type attributes.

Additional Form Control Types

tel - Telephone Field

<input type="tel" id="phone" name="phone" required>

Creates a single line text field for phone number entry. E.g.:

The required attribute prevents a visitor to submit a form without completing the form field.

email - Email Field

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

Creates a single line text field with email address format validation. E.g.:

url - URL Address

<input type="url" id="web" name="web">

Creates a single line text field for url address entry. E.g.:

search - Search Field

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

Creates a single line text field for search queries. E.g.:

number - Number Field

<input type="number" id="number" name="number" step="10" min="-120" max="120">

Creates a single line text field for number entry with step up/down function. E.g.:

The step attribute allows a visitor to step up/down through an optional range of values that can be set with the min attribute and max attribute.

range - Value Range Slider

<input type="range" id="valuerange" name="valuerange" step="0.5" min="0" max="100">

Creates a slider control to allow selection of a value within a defined range. E.g.:

The step attribute sets the accuracy of the slider and allows a visitor to select a value within a range of values that can be set with the min attribute and max attribute.

Additional Attributes

autocomplete

The autocomplete attribute allows to control the option of automatic form completion. Possible values are on and off.

autofocus

The autofocus attribute sets focus to the specified field.

formaction

The formaction attribute relates to buttons that submit a form. It will override the action attribute of the related form tag.

formenctype

The formenctype attribute relates to buttons that submit a form. It will override the enctype attribute of the related form tag.

formmethod

The formmethod attribute relates to buttons that submit a form. It will override the method attribute of the related form tag.

formnovalidate

The formnovalidate attribute relates to buttons that submit a form. It allows bypassing form validation.

formtarget

The formtarget attribute relates to buttons that submit a form. It will override the target attribute of the related form tag.

list

The list attribute allows to connect a element with a datalist element by its' id attribute and avail of its' option elements as suggestions.

max

The max attribute sets the maximum value that can be selected.

min

The min attribute sets the minimum value that can be selected.

novalidate

The novalidate attribute relates to a form element and prevents form validation.

pattern

The pattern attribute specifies a regular expression for form field validation.

placeholder

The placeholder attribute allows to display a hint to a visitor what type of data to enter.

required

The required attribute specifies that a form field must be completed.

step

The step attribute specifies the step size for value selection of an input element.

Related Elements

datalist - List of Options

 <input type="text" name="hotdrink" list="hotdrinkslist">
<datalist id="hotdrinkslist">
<option value="Coffee">
<option value="Hot Chocolate">
<option value="Hot Milk">
<option value="Tea">
</datalist>

Can be linked to an input element and used for data suggestions. The list and id attribute provides this link. E.g.:

meter - Gauge

<meter id="gaugedisplay" name="gaugedisplay" value="33" min="0" max="100">33%</meter>

Creates a gauge style bar to display values within a known range. E.g.:

33%

output - Result

 <form oninput="display.value=parseInt(slider.value)">
<input type="range" name="slider" id="slider" min="25" max="75" value="50">
<output name="display" id="display" for="slider">50</output>
</form>

A dedicated element to display the result of a calculation or the selected numeric value. E.g.:

50

progress - Progress Bar

<progress id="progressbar" name="progressbar" value="33" max="100">33%</progress>

Creates a progress style bar to display values between 0 and a maximum value. E.g.:

33%

This website uses cookies to give you the best experience on our website, to personalise content and to analyse our website traffic. Some cookies may have been set already. To find out more about our use of cookies you can visit our Privacy Statement. By browsing this website, you agree to our use of cookies.

Hide this message