Forms in HTML5

The HTML elements that allow you to build interactive forms

Share this page

New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

# button

Defines a clickable button.

Example: Copy

<button>
  Submit form
</button>

name

Defines the unique identifier for that button within the form. It allows the server to access each button's value when submitted.

"submit_button"

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.

value

The value sent to the server when submitting the form.

"primary"

The server will receive the value primary.

type

Defines the button type.

"submit"

The button sends the form data to the server.

"reset"

The button resets the form.

disabled

Disables the button.

No value required.

autofocus

Sets focus on the element when the web page loads.

No value required.

# fieldset

Defines a group of controls within a form.

Example: Copy

Subscribe to the Newsletter
<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"

Default.

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.

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

Subscribe to the Newsletter
<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.