Inputs
<input> element
The <input> element is one of the most powerful and complex in all of HTML due to the
number of combinations of input types and attributes.
A <label> element should always be used to describe the input to the user and screen readers.
Wrapping label:
<label>
Username: <input name="username">
</label>Associated label:
You can associate a label with an input by adding a for attribute on the label with the same value as the input's id
<label for="firstname">First name:</label>
<input id="firstname" name="fname>Read more at MDN Web Docs: Input element
<fieldset>
The <fieldset> element groups form elements together.
It is not required for forms, but a good practice on a longer or more complex form.
The <legend> elements defines a caption for the <fieldset> element.
<fieldset>
<legend>Personal details</legend>
<label>
First name: <input name="firstname">
</label>
<label>
Email: <input type="email" name="emailaddress">
</label>
</fieldset>Input types
There are many different types of inputs, which are displayed different depending on the browser and device
| Type | Description | Example |
|---|---|---|
| button | A push button with no default behavior displaying the value of the value attribute, empty by default. |
<input type="button" name="button" value="Press me"/> |
| checkbox | A check box allowing single values to be selected/deselected. |
<input type="checkbox" name="checkbox"/> |
| color | A control for specifying a color; opening a color picker when active in supporting browsers. |
<input type="color" name="color"/> |
| date | A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers. |
<input type="date" name="date"/> |
| datetime-local | A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. |
<input type="datetime-local" name="datetime-local"/> |
A field for editing an email address. Looks like a text input, but has validation parameters
and relevant keyboard in supporting browsers and devices with dynamic keyboards. |
<input type="email" name="email"/> |
|
| file | A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select. |
<input type="file" accept="image/*, text/*" name="file"/> |
| hidden | A control that is not displayed but whose value is submitted to the server. There is an example in the next column, but it's hidden! | |
| image |
A graphical submit button. Displays an image defined by the src attribute.
The alt attribute displays if the image src is missing.
|
<input type="image" name="image" src="" alt="image input"/> |
| month | A control for entering a month and year, with no time zone. |
<input type="month" name="month"/> |
| number | A control for entering a number. Displays a spinner and adds default validation when supported. Displays a numeric keypad in some devices with dynamic keypads. |
<input type="number" name="number"/> |
| password | A single-line text field whose value is obscured. Will alert user if site is not secure. |
<input type="password" name="password"/> |
| radio | A radio button, allowing a single value to be selected out of multiple choices with the same name value. |
<input type="radio" name="radio"/> |
| range | A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values. |
<input type="range" name="range" min="0" max="25"/> |
| reset | A button that resets the contents of the form to default values. Not recommended. |
<input type="reset" name="reset"/> |
| search | A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads. |
<input type="search" name="search"/> |
| submit | A button that submits the form. |
<input type="submit" name="submit"/> |
| tel | A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads. |
<input type="tel" name="tel"/> |
| text | The default value. A single-line text field. Line-breaks are automatically removed from the input value. |
<input type="text" name="text"/> |
| time | A control for entering a time value with no time zone. |
<input type="time" name="time"/> |
| url | A field for entering a URL. Looks like a text input, but has validation parameters and
relevant keyboard in supporting browsers and devices with dynamic keyboards. |
<input type="url" name="url"/> |
| week | A control for entering a date consisting of a week-year number and a week number with no time zone. |
<input type="week" name="week"/> |