HTML Forms

An HTML form is used to collect input from a user. The input the user types is most often sent to a server, where it is processed.

Example

A simple form with two text fields for a first and last name.

A minimal HTML form that collects user input with two single-line text fields, labeled "First name" and "Last name".

Keep it plain HTML with no styling or submit handling.

> Output: complete HTML page

Prompt

A minimal HTML form that collects user input with two single-line text fields, labeled "First name" and "Last name". Keep it plain HTML with no styling or submit handling.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form</title>
</head>
<body>
  <form>
    First name:<br>
    <input type="text" name="firstname"><br>
    Last name:<br>
    <input type="text" name="lastname">
  </form>
</body>
</html>

The <form> Element

The <form> element is used to create an HTML form for user input.

It is a container that holds the different input elements, such as text fields, checkboxes, radio buttons, and submit buttons. All the form elements are covered in HTML Form Elements.

Form structure

An empty <form> tag with form elements placed inside it.

<form>
.
form elements
.
</form>

The <input> Element

The <input> element is the most used form element.

It can be shown in many different ways, depending on its type attribute. Some common types are: text for a single-line text field, radio for a radio button to pick one of many choices, checkbox to pick zero or more choices, submit for a button that sends the form, and button for a clickable button.

All the input types are covered in HTML Input Types.

Text Fields

<input type="text"> makes a single-line field for typing text.

Note: The form itself is not visible. The default width of a text field is about 20 characters.

Example

A form with text input fields for a first and last name, each with its own label.

A form with two single-line text input fields for "First name" and "Last name".

Use a <label> tied to each <input> with matching for and id, and a <br> after each field.

> Output: complete HTML page

Prompt

A form with two single-line text input fields for "First name" and "Last name". Use a tied to each with matching for and id, and a after each field.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Fields</title>
</head>
<body>
  <h2>Text input fields</h2>
  <form>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname">
  </form>
</body>
</html>

The <label> Element

The <label> tag defines a label for a form element.

It helps screen-reader users, because the screen reader reads the label out loud when the user moves to the input. It also helps people who find it hard to click very small areas, like radio buttons or checkboxes: clicking the label text toggles the matching control.

To bind a label to an input, set the label's for attribute to the same value as the input's id attribute.

Radio Buttons

<input type="radio"> makes a radio button. Radio buttons let the user pick just ONE choice out of a small set.

Example

A form with radio buttons for choosing one favorite web language. They share the same name, so only one can be selected.

A form that lets the user pick one favorite web language using radio buttons for HTML, CSS, and JavaScript.

All radios share the same name "fav_language" so only one can be selected, each with its own label.

> Output: complete HTML page

Prompt

A form that lets the user pick one favorite web language using radio buttons for HTML, CSS, and JavaScript. All radios share the same name "fav_language" so only one can be selected, each with its own label.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radio Buttons</title>
</head>
<body>
  <p>Choose your favorite Web language:</p>
  <form>
    <input type="radio" id="html" name="fav_language" value="HTML">
    <label for="html">HTML</label><br>
    <input type="radio" id="css" name="fav_language" value="CSS">
    <label for="css">CSS</label><br>
    <input type="radio" id="javascript" name="fav_language" value="JavaScript">
    <label for="javascript">JavaScript</label>
  </form>
</body>
</html>

Checkboxes

<input type="checkbox"> makes a checkbox. Checkboxes let the user pick ZERO or MORE options out of a set.

Example

A form with three checkboxes the user can tick on or off independently.

A form with three checkboxes letting the user select zero or more options: "I have a bike", "I have a car", "I have a boat".

Each checkbox has its own name, value, id, and a matching label.

> Output: complete HTML page

Prompt

A form with three checkboxes letting the user select zero or more options: "I have a bike", "I have a car", "I have a boat". Each checkbox has its own name, value, id, and a matching label.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Checkboxes</title>
</head>
<body>
  <form>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
    <label for="vehicle1"> I have a bike</label><br>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
    <label for="vehicle2"> I have a car</label><br>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
    <label for="vehicle3"> I have a boat</label>
  </form>
</body>
</html>

The Submit Button

<input type="submit"> makes a button that sends the form data to a form-handler.

The form-handler is usually a file on the server with a script that processes the input. You set it with the form's action attribute.

Example

A form with a submit button that sends the data to the page named in the action attribute.

A form with First name and Last name text fields pre-filled with "John" and "Doe", plus a submit button.

Set the form action to /action_page.php so the submit button sends the data to a handler.

> Output: complete HTML page

Prompt

A form with First name and Last name text fields pre-filled with "John" and "Doe", plus a submit button. Set the form action to /action_page.php so the submit button sends the data to a handler.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Submit Button</title>
</head>
<body>
  <form action="/action_page.php">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

The Name Attribute for <input>

Each input field must have a name attribute to be sent when the form is submitted.

If the name attribute is missing, the value of that field is not sent at all.

Example

This form will not submit the value of the first name field, because that input has no name attribute.

A form showing why the name attribute matters: a First name text field that has no name attribute, plus a submit button.

Because the input has no name, its value will not be sent when the form submits. Set the form action to /action_page.php.

> Output: complete HTML page

Prompt

A form showing why the name attribute matters: a First name text field that has no name attribute, plus a submit button. Because the input has no name, its value will not be sent when the form submits. Set the form action to /action_page.php.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Name Attribute</title>
</head>
<body>
  <form action="/action_page.php">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" value="John"><br><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>