HTML Course 8. Basic forms

Introduction to HTML Forms

HTML forms are the primary way to collect user input on webpages. A form wraps various controls—text fields, checkboxes, radio buttons, file pickers, buttons—inside a <form> element. When submitted, the browser sends the data to a server endpoint or processes it with JavaScript.

Form Element and Core Attributes

The <form> tag supports several important attributes:

Basic form example:

<form action='/submit' method='post' enctype='multipart/form-data'>
  <!-- Form controls go here -->
</form>
  

Grouping Controls: <fieldset> and <legend>

Use <fieldset> to group related controls. The <legend> provides a caption.

<form action='/register'>
  <fieldset>
    <legend>Personal Information</legend>
    <label for='firstName'>First Name:</label>
    <input type='text' id='firstName' name='firstName' required>
    <br>
    <label for='lastName'>Last Name:</label>
    <input type='text' id='lastName' name='lastName' required>
  </fieldset>
</form>
  

Labels and Accessibility

Associating <label> with form controls improves usability and accessibility. Two methods:

• Using for and id:
  <label for='email'>Email:</label> with id='email'.
• Wrapping the control:
  <label>Username: <input type='text' name='user'></label>

Text Inputs and Variations

The <input> element with type='text' is the most basic. HTML5 introduced numerous specialized types for built-in validation and UI controls:

Example of various text-like inputs:

<form>
  <label for='email'>Email:</label>
  <input type='email' id='email' name='email' required placeholder='you@example.com'>
  <br>
  <label for='age'>Age:</label>
  <input type='number' id='age' name='age' min='0' max='120' step='1'>
  <br>
  <label for='birthdate'>Birth Date:</label>
  <input type='date' id='birthdate' name='birthdate'>
  <br>
  <label for='favcolor'>Favorite Color:</label>
  <input type='color' id='favcolor' name='favcolor' value='#ff0000'>
</form>
  

Checkboxes and Radio Buttons

type='checkbox' allows multiple selections. type='radio' groups allow single selection per group (same name attribute).

<form>
  <fieldset>
    <legend>Select Hobbies</legend>
    <label>
      <input type='checkbox' name='hobby' value='reading'> Reading
    </label>
    <label>
      <input type='checkbox' name='hobby' value='sports'> Sports
    </label>
  </fieldset>

  <fieldset>
    <legend>Gender</legend>
    <label>
      <input type='radio' name='gender' value='male' required> Male
    </label>
    <label>
      <input type='radio' name='gender' value='female'> Female
    </label>
  </fieldset>
</form>
  

File Uploads

To upload files, set enctype='multipart/form-data' on the <form> and use type='file'. The multiple attribute allows selecting several files.

<form action='/upload' method='post' enctype='multipart/form-data'>
  <label for='avatar'>Profile Picture:</label>
  <input type='file' id='avatar' name='avatar' accept='image/*'>
  <br>
  <label for='docs'>>Documents:</label>
  <input type='file' id='docs' name='docs[]' multiple>
  <button type='submit'>Upload</button>
</form>
  

Select, Option and Datalist

Dropdown menus use <select> with <option>. Group options with <optgroup>.

<form>
  <label for='country'>Country:</label>
  <select id='country' name='country'>
    <optgroup label='Europe'>
      <option value='fr'>France</option>
      <option value='de'>Germany</option>
    </optgroup>
    <optgroup label='Asia'>
      <option value='jp'>Japan</option>
      <option value='cn'>China</option>
    </optgroup>
  </select>

  <br>
  <label for='browser'>Browser:</label>
  <input list='browsers' id='browser' name='browser'>
  <datalist id='browsers'>
    <option value='Chrome'>
    <option value='Firefox'>
    <option value='Safari'>
  </datalist>
</form>
  

Textarea for Multi-line Input

Use <textarea> for comments or long text. Attributes: rows, cols, maxlength.

<form>
  <label for='comments'>Comments:</label>
  <textarea id='comments' name='comments' rows='5' cols='40'
            placeholder='Enter your comments here...' maxlength='500'></textarea>
</form>
  

Buttons: Submit, Reset, and Button

Three types of <button> or <input> buttons:

• type='submit': sends the form.
• type='reset': resets controls to initial values.
• type='button': custom JS actions.

<form>
  <input type='submit' value='Send'>
  <input type='reset' value='Clear'>
  <button type='button' onclick='alert('Hello')'>Click Me</button>
</form>
  

Built-in Validation and Custom Messages

HTML5 validation attributes:

• required
• pattern='regex'
• min, max, step for numeric/date
• maxlength, minlength

Example with custom message via oninvalid:

<form>
  <input type='text' name='username' required
         minlength='4' maxlength='12'
         placeholder='4-12 characters'
         oninvalid='this.setCustomValidity('Enter 4-12 letters')'
         oninput='setCustomValidity('')'>
  <button type='submit'>Register</button>
</form>
  

Progress and Meter Elements

Visual feedback controls:

• <progress>: completion progress (value and max).
• <meter>: measured value within a known range.

<label for='fileProgress'>Upload Progress:</label>
<progress id='fileProgress' value='30' max='100'>30%</progress>

<label for='diskUsage'>Disk Usage:</label>
<meter id='diskUsage' value='60' min='0' max='100'>60%</meter>
  

Summary

HTML forms combine structure (<form>, <fieldset>), labels, controls (<input>, <select>, <textarea>) and buttons. Accessibility and validation rely on proper use of attributes. Built-in input types and validation greatly reduce JavaScript overhead. Always test forms across browsers and handle server-side validation as well.