HTML Form Elements

While the standard <input> element handles a lot of basic functionality like text boxes and checkboxes, forms often demand more specialized user interactions. HTML provides several unique, dedicated elements designed exclusively to live inside of a <form> container.

Dropdown Menus: <select> and <option>

When you have a long list of choices but want to save screen space, a dropdown menu is the perfect solution. You create this using the <select> wrapper element, and fill it with individual <option> child elements.

<label for="cars">Choose a car brand:</label>
<select id="cars" name="brand">
  <option value="volvo">Volvo</option>
  <!-- Using the 'selected' attribute establishes a default -->
  <option value="fiat" selected>Fiat</option>
  <option value="audi">Audi</option>
</select>

Choose a car brand:

Multi-line Text: <textarea>

A standard text input is meant for one single line (like a name). But what if you want users to submit a paragraph, a detailed user review, or a support message? You need the <textarea> element.

Unlike <input>, the text area requires both an opening and closing tag. You control its default physical size using the rows and cols attributes.

<label for="msg">Write your message:</label>
<textarea id="msg" name="message" rows="4" cols="50">
  This is the default text inside the box.
</textarea>

Interaction Note: By default, web browsers allow end-users to click and drag the bottom-right corner of a <textarea> to resize it manually on their screen.

The Interactive <button>

While you can use <input type="submit"> or <input type="button">, modern developers heavily prefer the dedicated <button> element. Why? Because the <button> tag allows you to place complex content inside of it, like custom icons, images, or formatted HTML—something an <input> cannot do.

<!-- A button with an image embedded inside -->
<button type="button" onclick="alert('Hello World!')">
  <img src="/images/click-icon.png" alt="Icon"> Click Me!
</button>

Organizing Chaos: <fieldset> and <legend>

When forms contain lots of data, they become visually confusing. You can group related fields together (like clustering all the "Shipping Address" inputs in one place) using the <fieldset> element.

Inside the fieldset, the very first element should be a <legend>, which acts as a built-in caption for that specific grouping.

<form>
  <fieldset>
    <legend>Personal Details:</legend>
    
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname"><br>
    
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname">
  </fieldset>
</form>

« Previous Lesson Next Lesson »