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 send data to the backend for processing.

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

html

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

HTML form

Pay attention to the type attribute.

html

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

This allows the input field to be displayed in different types, such as checkbox, color picker, file upload field, and so on.

html

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

different input types

Every <input> field should be paired a <label> to provide a clear description for that field.

html

<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>

labels

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

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

<!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

Loading course content...

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 send data to the backend for processing.

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

html

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

HTML form

Pay attention to the type attribute.

html

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

This allows the input field to be displayed in different types, such as checkbox, color picker, file upload field, and so on.

html

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

different input types

Every <input> field should be paired a <label> to provide a clear description for that field.

html

<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>

labels

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

<!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>