<input type="text" name="first_name" placeholder="e.g. Alex">New! My 44-page ebook "CSS in 44 minutes" is out! 😃
# input
Defines an interactive control within a web form.
Example: Copy
type
Defines the type of form input.
Required.
"text"
Simple single line text input that accepts any type of character
"email"
Like a text input, but the browser will try to only allow valid email addresses.
On mobile devices, the email keyboard will show up.
"number"
Like a text input, but the browser will try to only allow valid numbers.
On mobile devices, the number keyboard will show up.
"checkbox"
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.
<label>
<input type="checkbox">
I accept the terms and conditions
</label>Notice how clicking the text toggles the checkbox.
"radio"
Needs to be used used in combination with other radio buttons, so that they are mutually exclusive.
You link radio buttons through a similar name value:
<label>
<input type="radio" name="newsletter" value="yes">
Yes
</label>
<label>
<input type="radio" name="newsletter" value="no">
No
</label>Notice how clicking one deselects the other.
"submit"
Submit button that is triggered when clicked or when pressing Enter.
name
Defines the unique identifier for that input within the form. It allows the server to access each input's value when submitted.
Required.
"first_name"
The name value must be unique within the context of a <form> container.
It can only contain alphanumeric characters a-z A-Z 0-9 and some special characters like - _… but no space.
placeholder
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:
<form>
<label>Email</label><br>
<input type="email" name="email" placeholder="e.g. [email protected]">
</form>Notice how the placeholder disappears on focus, hence the need to maintain a separate label.
required
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:
<form>
<input type="text" required>
</form>The browser should show a warning if you try to submit the form with an empty text input.
disabled
Disables the input.
No value required.