Alternative Form Elements: Select, Textarea, Button, and Label

While the <input> element covers many bases, rich applications require advanced inputs like multi-line comments, dropdown selectors, and semantic labeling. Let's look at the remaining essential HTML form components.

1. The <label> Element

The <label> element is critical for web accessibility (A11y) and user experience. It associates a descriptive text title with a specific form control.

There are two ways to bind a label to an input:

A. Implicit Association

Wrap the input inside the <label> tags:

<label>
  Username:
  <input type="text" name="username">
</label>

B. Explicit Association (Recommended)

Match the label's for attribute with the input's unique id:

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

• UX Benefit: Clicking the label automatically puts the cursor focus on the linked input box.
• Accessibility Benefit: Screen readers will read the label's text aloud when a visually impaired user focuses on the input box.

2. The <select> Element (Dropdown Lists)

The <select> element creates a dropdown selector, saving space on the screen. Individual options are defined using <option> tags nested inside.

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <!-- Use the 'selected' attribute to set the default option -->
  <option value="cn" selected>China</option>
  <option value="gb">United Kingdom</option>
</select>

3. The <textarea> Element (Multi-line Input)

The <textarea> element allows users to write paragraphs, comments, or rich descriptions. It can be resized by the user by default.

<label for="comments">Feedback:</label>
<!-- Specify 'rows' and 'cols' to determine its default block size -->
<textarea id="comments" name="feedback" rows="5" cols="40" placeholder="Type your review here..."></textarea>

Unlike <input>, <textarea> has a closing tag and holds its default text between the tags, rather than in a value attribute.

4. The <button> Element

The <button> element is a more flexible alternative to <input type="submit">. It can contain text, HTML tags, and images.

<button type="submit">
  <img src="/icons/check.svg" alt="" width="16">
  Submit Form
</button>

Always Set the type Attribute:

• type="submit": Sends the form data (Default behavior if no type is declared).
• type="button": A generic button that does nothing until scripted (e.g., using JavaScript).
• type="reset": Clears all inputs inside the form.