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.:
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.:
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.: