New! My 44-page ebook "CSS in 44 minutes" is out! 😃
Defines an interactive control within a web form.
Defines the type of form input.Required.
Simple single line text input that accepts any type of character
Like a text input, but the browser will try to only allow valid email addresses.
On mobile devices, the email keyboard will show up.
Like a text input, but the browser will try to only allow valid numbers.
On mobile devices, the number keyboard will show up.
A toggle checkbox that can only be one of two states: checked or unchecked. The value is only submitted by the form if the checkbox is checked.
You can wrap a checkbox in a label, to increase the click area.
Notice how clicking the text toggles the checkbox.
Needs to be used used in combination with other radio buttons, so that they are mutually exclusive.
You link radio buttons through a similar
Notice how clicking one deselects the other.
Submit button that is triggered when clicked or when pressing Enter.
Defines the unique identifier for that input within the form. It allows the server to access each input's value when submitted.Required.
The name value must be unique within the context of a
It can only contain alphanumeric characters
0-9 and some special characters like
_… but no space.
Defines a non-selectable placeholder text that only appears when the input is empty.
"e.g. [email protected]"
You can hint at the format expected for the input.
As a best practice, it is recommended to have a label to describe the input, and use the placeholder to showcase an example:
Notice how the placeholder disappears on focus, hence the need to maintain a separate label.
Tells the browser that this input is required. Leaving it empty will show a warning.No value required.
You simply need to add the
required attribute with no value:
The browser should show a warning if you try to submit the form with an empty text input.
Disables the input.No value required.