How to Create Forms in HTML

Code Playground is only enabled on larger screen sizes.

Form is an essential component when creating your website, as it allows the user to communicate with the website.

It is created with the <form> element, acting as a container for different input fields.

<form>
  <input type="text" />
</form>

Pay attention to the type attribute, which allows the element to be displayed in different types, such as checkbox, color picker, file upload field, and so on.

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="color" />
  <input type="file" />
</form>

Every <input> field should also have a <label> to provide a clear description for that field.

<form>
  <label for="text_input">Your name:</label><br />
  <input type="text" id="text_input" /><br />

  <label for="checkbox_input">Confirm:</label><br />
  <input type="checkbox" id="checkbox_input" /><br />

  <label for="color_input">Pick a color:</label><br />
  <input type="color" id="color_input" /><br />

  <label for="file_input">Upload a file:</label><br />
  <input type="file" id="file_input" /><br />
</form>

Make sure the for attribute of <label> matches the id attribute of the corresponding <input>.

Also keep in mind that the id must be unique throughout the entire HTML document. There should not be two elements with the same id.

The <label> elements help the user understand the purpose of the form fields and are particularly useful for screen reader users. When the user focuses on a field, the screen reader will read the corresponding label out loud.

The input also requires a name attribute. When the form submits data to the backend, the user input of each field will be tied to its name, allowing you to retrieve the corresponding information in the backend.

The form attributes

This leads to two other very important attributes for the <form> element, action and method, as well as the <input type="submit"> element. These three components are what make the form function properly.

<form action="/some-program.py" method="POST">
  <label for="first_name">First Name:</label><br />
  <input type="text" id="first_name" name="firstName" /><br />

  <label for="last_name">Last Name:</label><br />
  <input type="text" id="last_name" name="lastName" /><br />

  <input type="submit" value="Submit" />
</form>

When the Submit button is clicked, that tells the browser to wrap up the user inputs and send them to the backend. However, the browser needs to know where to send the data and how to send them.

This information is specified by the action and method attributes. action points to a backend program that will process the data, and method specifies an HTTP method that will be used to transmit the information.

Textual inputs

Besides the text input we just demonstrated, which accepts a single line input from the user, there are other input fields designed for more specific purposes. For example, the email input:

<input type="email" />

It automatically checks if the user input is a properly formatted email address.

Of course, that doesn't necessarily mean the email address exists, but it should at least have the correct format.

Similar text input fields include tel (phone number) and url.

<input type="tel" />

<input type="url" />

The password field also accepts a single-line text input, but the input will be obscured so that it cannot be recognized.

<input type="password" />

Hidden inputs

<input type="hidden" value="xxxxx" />

The hidden field is a special case, it will be hidden to the user, so obviously it cannot collect user input.

Instead, it is often used to pass security tokens, such as the CSRF (Cross-Site Request Forgery) tokens or user information used for tracking purposes.

Textarea

<textarea rows="5" cols="33">
. . .
</textarea>

The textarea field is used to collect multi-line text inputs. You can use the rows and cols attributes to define its initial size.

Field attributes

Additionally, the input fields also accept the following attributes:

read-only and disabled

<input type="text" placeholder="Read Only Field" readonly />
<input type="text" placeholder="Disabled Field" disabled />

Both options prevent the user from editing the field, except readonly still allows the field to be selected, while disabled disables the field completely.

placeholder

<input type="text" placeholder="Placeholder Text" />

Defines the placeholder texts that will be displayed when the field is empty.

minlength and maxlength

<input type="text" maxlength="20" minlength="10" />

Specifies the minimum and maximum number of characters that the field will accept.

spellcheck

<input type="text" spellcheck="true" />

Defines whether or not the browser's built-in spell check functionality will be enabled for the field.

Radio

Radios are used in groups, which is determined by the name attribute.

<input type="radio" id="opt1" name="options" value="1" checked />
<label for="opt1">Option #1</label>

<input type="radio" id="opt2" name="options" value="2" />
<label for="opt2">Option #2</label>

<input type="radio" id="opt3" name="options" value="3" />
<label for="opt3">Option #3</label>

<input type="radio" id="opt4" name="options" value="4" />
<label for="opt4">Option #4</label>

Only one option in the radio group can be checked. You can set the default option using the checked attribute.

Checkbox

The checkboxes, on the other hand, allow you to check multiple options in one group.

<input type="checkbox" name="multi-options" id="opt5" />
<label for="opt5">Option #5</label>

<input type="checkbox" name="multi-options" id="opt6" />
<label for="opt6">Option #6</label>

<input type="checkbox" name="multi-options" id="opt7" />
<label for="opt7">Option #7</label>

<input type="checkbox" name="multi-options" id="opt8" />
<label for="opt8">Option #8</label>

Selections

<select name="options">
  <option value="">--Please choose an option--</option>
  <option value="opt1">Option #1</option>
  <option value="opt2">Option #2</option>
  <option value="opt3">Option #3</option>
  <option value="opt4">Option #4</option>
  <option value="opt5">Option #5</option>
</select>

The <select> element creates a selection menu. Each option is defined with the <option> element.

By default, only one option can be selected, but you can enable multi-select using the multiple attribute.

<select name="options" multiple>
  <option value="">--Please choose an option--</option>
  <option value="opt1">Option #1</option>
  <option value="opt2">Option #2</option>
  <option value="opt3">Option #3</option>
  <option value="opt4">Option #4</option>
  <option value="opt5">Option #5</option>
</select>

File picker

Besides the text-based input fields, sometimes you also need to allow users to submit files.

<input type="file" />

For now, you don't need to know exactly how to upload files. We'll cover this topic later.

Date selector

<input type="date" />

The date selector allows the user to pick a date.

Buttons

Buttons are also a crucial part of a form. There are 3 types of buttons available, submit, reset, and button.

<input type="submit" value="Submit this form" />
<input type="reset" value="Reset this form" />
<input type="button" value="Do Nothing without JavaScript" />

The submit button will wrap up the user input, and submit the data to the backend.
The reset button clears all the existing user input.
The button button does not do anything on its own, but can be customized using JavaScript.

Besides the <input> buttons, there is also a <button> element, which works exactly the same, except it is easier to style. We will discuss more about this later.

<button type="submit">Submit this form</button>
<button type="reset">Reset this form</button>
<button type="button">Do Nothing without JavaScript</button>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="/styles.css">
</head>

<body>
  <form>
    <h2>Basic Inputs</h2>

    <label for="text">Text (required, placeholder)</label>
    <input
      type="text"
      id="text"
      name="text"
      placeholder="Enter your name"
      required />

    <label for="password">Password (minlength, maxlength)</label>
    <input
      type="password"
      id="password"
      name="password"
      minlength="6"
      maxlength="12" />

    <label for="email">Email (required)</label>
    <input type="email" id="email" name="email" required />

    <label for="url">URL (with default value)</label>
    <input type="url" id="url" name="url" value="https://example.com" />

    <label for="tel">Telephone (pattern)</label>
    <input
      type="tel"
      id="tel"
      name="tel"
      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
      placeholder="123-456-7890" />

    <label for="search">Search (placeholder)</label>
    <input type="search" id="search" name="search" placeholder="Search..." />

    <h2>Numeric & Date Inputs</h2>

    <label for="number">Number (min, max, step)</label>
    <input type="number" id="number" name="number" min="1" max="10" step="1" />

    <label for="range">Range (0–100)</label>
    <input type="range" id="range" name="range" min="0" max="100" />

    <label for="date">Date</label>
    <input type="date" id="date" name="date" />

    <label for="time">Time</label>
    <input type="time" id="time" name="time" />

    <label for="month">Month</label>
    <input type="month" id="month" name="month" />

    <label for="week">Week</label>
    <input type="week" id="week" name="week" />

    <label for="datetime-local">Datetime Local</label>
    <input type="datetime-local" id="datetime-local" name="datetime-local" />

    <h2>Special Inputs</h2>

    <label for="color">Color Picker</label>
    <input type="color" id="color" name="color" />

    <div class="group">
      <input type="checkbox" id="checkbox" name="checkbox" />
      <label for="checkbox">Checkbox</label>
    </div>

    <div class="group">
      <input type="radio" id="radio1" name="radio" value="1" />
      <label for="radio1">Radio 1</label>
      <input type="radio" id="radio2" name="radio" value="2" />
      <label for="radio2">Radio 2</label>
    </div>

    <label for="file">File Upload (multiple)</label>
    <input type="file" id="file" name="file" multiple />

    <h2>Select & Textarea</h2>

    <label for="select">Select Dropdown (disabled option)</label>
    <select id="select" name="select">
      <option value="">-- Please choose --</option>
      <option value="a">Option A</option>
      <option value="b" disabled>Option B (disabled)</option>
      <option value="c">Option C</option>
    </select>

    <label for="multi-select">Multi Select</label>
    <select id="multi-select" name="multi-select" multiple size="3">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>

    <label for="textarea">Textarea (readonly)</label>
    <textarea id="textarea" name="textarea" rows="4" readonly>
      This is a read-only message.</textarea>

    <h2>Hidden & Disabled</h2>

    <input type="hidden" name="userId" value="12345" />

    <label for="disabled">Disabled Input</label>
    <input
      type="text"
      id="disabled"
      name="disabled"
      value="Can't edit"
      disabled />

    <h2>Actions</h2>

    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </form>
</body>

</html>

Open Sandbox