Forms in HTML5
The HTML elements that allow you to build interactive forms
New! My 44-page ebook "CSS in 44 minutes" is out! 😃
# fieldset
Defines a group of controls within a form.
Example: Copy
<form action="/subscribe" method="post">
<fieldset>
<legend>Subscribe to the Newsletter</legend>
<input type="email" name="email">
<button>Ok</button>
</fieldset>
</form>
disabled
Disables the controls the fieldset contains.
No value required.# form
Defines an interactive form with controls.
Example: Copy
<form action="/signup" method="post">
<p>
<label>Title</label><br>
<label>
<input type="radio" name="title" value="mr">
Mr
</label>
<label>
<input type="radio" name="title" value="mrs">
Mrs
</label>
<label>
<input type="radio" name="title" value="miss">
Miss
</label>
</p>
<p>
<label>First name</label><br>
<input type="text" name="first_name">
</p>
<p>
<label>Last name</label><br>
<input type="text" name="last_name">
</p>
<p>
<label>Email</label><br>
<input type="email" name="email" required>
</p>
<p>
<label>Phone number</label><br>
<input type="tel" name="phone">
</p>
<p>
<label>Password</label><br>
<input type="password" name="password">
</p>
<p>
<label>Country</label><br>
<select>
<option>China</option>
<option>India</option>
<option>United States</option>
<option>Indonesia</option>
<option>Brazil</option>
</select>
</p>
<p>
<label>
<input type="checkbox" value="terms">
I agree to the <a href="/terms">terms and conditions</a>
</label>
</p>
<p>
<button>Sign up</button>
<button type="reset">Reset form</button>
</p>
</form>
action
Defines which URL the form's information is sent to when submitted.
"/contact"
You can use a relative URL.
"https://htmlreference.io/contact"
You can use an absolute URL.
method
Defines the HTTP method used when submitting the form.
"post"
The form information is sent to the server as part of the request body.
"get"
The form information is sent to the server as part URL parameters: /contact?first_name=Alex&last_name=Smith.
name
The form's name when sent to the server. Useful when multiple forms are present on the same web page.
"sign_up_form"
The name value must be unique within the context of the whole web page.
It can only contain alphanumeric characters a-z A-Z 0-9 and some special characters like - _… but no space.
autocomplete
Determines if the browser can autocomplete all the form's controls.
"off"
The browser will disable autocomplete functions. This can however be overriden for each control individually.
"on"
The browser will enable autocomplete functions. This can however be overriden for each control individually.
Try pressing "down" in this input. It will show previously entered email addresses.
target
Defines in which tab or window the clicked link will show up.
"_blank"
Opens in a new browsing context, which is usually a new tab.
"_self"
Opens in the current tab.
"_parent"
Opens in the parent browsing context, or _self is there is none.
"_top"
Opens in the top browsing context, or _self is there is none.
enctype
Defines the MIME type of the information sent to the server. Only works if the method is post.
"application/x-www-form-urlencoded"
The default value.
"text/plain"
For HTML5 plain text.
"multipart/form-data"
Needed when using an <input type="file"> element.
novalidate
Tells the browser to not validate the form on submission.
No value required.# input
Defines an interactive control within a web form.
Example: Copy
<input type="text" name="first_name" placeholder="e.g. Alex">
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.# legend
Defines a caption for a parent's content.
Example: Copy
<form action="/subscribe" method="post">
<fieldset>
<legend>Subscribe to the Newsletter</legend>
<input type="email" name="email">
<button>Ok</button>
</fieldset>
</form># textarea
Defines a multi-line text control within a web form.
name
Defines the unique identifier for that textarea within the form. It allows the server to access each textarea's value when submitted.
Required.
"message"
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.
autocomplete
Determines if the browser can autocomplete the textarea.
"off"
The browser will disable autocomplete functions..
"on"
The browser will enable autocomplete functions.
minlength
Defines the minimum amount of characters the textarea required to be valid.
"15"
You can use integers.
maxlength
Defines the maxlength amount of characters allowed.
"140"
You can use integers.
placeholder
Defines a non-selectable placeholder text that only appears when the textarea is empty.
"e.g. Hello my name is Alex"
You can hint at the format expected for the textarea.
cols
Defines the number of columns.
"40"
You can use integers.
rows
Defines the number of rows.
"5"
You can use integers.
wrap
Defines how the text should be wrapped.
"hard"
The text will always be wrapped depending on the cols value.
"soft"
The text will only break when needed.
disabled
Disables the textarea.
No value required.
required
Tells the browser that this textarea is required. Leaving it empty will show a warning.
No value required.
autofocus
Sets focus on the textarea when the web page loads.
No value required.
readonly
Turns the textarea into a read-only element.
No value required.
spellcheck
Enables the browser spell checker.
No value required.