HTML Form Elements

HTML Form Elements

HTML forms are fundamental for collecting user input. This chapter explores the various elements used to build interactive forms.

The <form> Element

The <form> element acts as a container for form controls. It defines how and where the collected data should be sent when the user submits the form.

Key attributes:

• action: The URL of the server-side script that will process the form data.
• method: The HTTP method to use for submission (usually GET or POST). GET appends data to the URL (visible, limited size), POST sends data in the request body (hidden, larger capacity). Use POST for sensitive data or large forms.
• enctype: Specifies how form data should be encoded before sending. Default is application/x-www-form-urlencoded. Use multipart/form-data when uploading files (<input type="file">).
• novalidate: A boolean attribute that disables the browser’s built-in form validation.
• target: Specifies where to display the response after submission (e.g., _blank for a new tab).

<form action="/submit-feedback" method="post">
  <!-- Form controls go here -->
</form>

The <input> Element

The <input> element is the most versatile form control. Its behavior is determined by its type attribute.

Common types include text, password, checkbox, radio, submit, file, email, number, date, etc. (Refer to the ‘HTML Input Types’ chapter for a detailed list).

Essential attributes:

• type: Defines the kind of input control.
• name: Provides a name for the input, used to identify the data on the server side.
• id: A unique identifier, used by <label>’s for attribute and for CSS/JavaScript targeting.
• value: The initial value of the input field (or the value sent on submission for radio/checkbox/submit).
• placeholder: Hint text displayed when the field is empty.
• required: Makes the field mandatory.
• disabled: Disables the input.
• readonly: Makes the field uneditable but still submittable.

<label for="username">Username:</label>
<input type="text" id="username" name="username" required placeholder="Enter your username">

The <label> Element

The <label> element provides a caption for a form control. It’s crucial for accessibility and usability.

Associate a label with an input using the for attribute, which should match the id of the corresponding input element. Clicking the label will then focus the associated input.

<label for="email_address">Email Address:</label>
<input type="email" id="email_address" name="email">

Alternatively, you can wrap the input element within the label (implicit association), but using for and id is generally more robust.

<label>
  Subscribe to newsletter:
  <input type="checkbox" name="newsletter" value="subscribe">
</label>

Always use <label> for your form controls.

The <select> Element (Drop-Down List)

The <select> element creates a drop-down list.

Each item in the list is defined by an <option> element nested inside <select>. The value attribute of the selected <option> is sent on form submission.

<label for="car_brand">Choose a car:</label>
<select id="car_brand" name="car">
  <option value="">--Please choose an option--</option> <!-- Placeholder -->
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi" selected>Audi</option> <!-- Pre-selected -->
</select>

Attributes for <select>:

• name: Identifies the select list data on the server.
• id: Unique identifier for label association.
• multiple: Allows selecting multiple options (usually requires Ctrl/Cmd-click).
• required: Requires the user to select an option (other than a placeholder with an empty value).
• disabled: Disables the dropdown.

Use the selected boolean attribute on an <option> to make it the default choice.

Use <optgroup> to group related options under a label:

<select name="vehicle">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

The <textarea> Element

The <textarea> element defines a multi-line text input field.

The text between the opening <textarea> and closing </textarea> tags becomes the default content.

<label for="message">Your Message:</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="Enter your feedback here..."></textarea>

Attributes:

• name, id
• rows: Specifies the visible height in lines.
• cols: Specifies the visible width in characters (less reliable for sizing than CSS).
• maxlength: Maximum number of characters allowed.
• placeholder, required, disabled, readonly

Use CSS (width, height, resize) for precise control over sizing and resizing behavior.

The <button> Element

The <button> element defines a clickable button.

Unlike <input type="submit">, the <button> element can contain HTML content (like text, images, icons), offering more styling flexibility.

Key attribute: type

• type="submit" (Default): Submits the form data.
• type="reset": Resets all form controls to their initial values.
• type="button": No default behavior; used for triggering actions with JavaScript.

<button type="submit">
  <img src="icons/save.svg" alt="" width="16" height="16"> Save Changes
</button>

<button type="reset">Reset Form</button>

<button type="button" onclick="alert('Action triggered!');">Custom Action</button>

Grouping Elements: <fieldset> and <legend>

The <fieldset> element groups related controls within a form, often drawing a box around them.

The <legend> element provides a caption for the <fieldset>, improving structure and accessibility.

<fieldset>
  <legend>Contact Information</legend>

  <label for="user_name">Name:</label>
  <input type="text" id="user_name" name="name">

  <label for="user_email">Email:</label>
  <input type="email" id="user_email" name="email">
</fieldset>

HTML5 Form Elements

HTML5 introduced elements to enhance form functionality:

<datalist> Element

Provides predefined options (suggestions) for an <input> element as the user types. Link an input to a datalist using the input’s list attribute, matching the datalist’s id.

<label for="browser_choice">Choose your browser:</label>
<input list="browsers" id="browser_choice" name="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

<output> Element

Represents the result of a calculation or user action, typically populated using JavaScript.

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="range" id="a" name="a" value="50"> +
  <input type="number" id="b" name="b" value="25">
  = <output name="result" for="a b">75</output>
</form>

The for attribute lists the ids of the elements contributing to the output.

Deprecated: <keygen> Element

The <keygen> element is deprecated and should not be used. It was intended for generating client-side key pairs but lacked broad support and modern alternatives are preferred.

Summary of Form Elements

Tag	Description
<form>	Container for form controls, defines submission behavior.
<input>	Versatile input control (text, password, checkbox, radio, submit, file, etc.).
<label>	Caption for a form control (essential for accessibility).
<select>	Drop-down list container.
<option>	An item within a <select> list or <datalist>.
<optgroup>	Groups related <option> elements within a <select>.
<textarea>	Multi-line text input field.
<button>	Clickable button (can contain HTML content).
<fieldset>	Groups related form controls.
<legend>	Caption for a <fieldset>.
<datalist>	Provides suggestions for an <input> field.
<output>	Displays the result of a calculation or action.
<progress>	Displays the progress of a task.
<meter>	Represents a scalar measurement within a range.