HTML Form Elements

Beyond the basic <input> tag, HTML provides several other form elements used to collect different types of user input. Each element serves a specific purpose and helps build a complete, user-friendly form.

<select> – Dropdown List

The <select> element creates a dropdown menu. Each option in the dropdown is defined with an <option> tag. The value attribute in each option is the data sent to the server when submitted.

<label for="country">Select Country:</label>
<select id="country" name="country">
  <option value="">-- Choose --</option>
  <option value="in">India</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="au">Australia</option>
</select>

Pre-selecting an Option

Adding the selected attribute to an option makes it the default selection.

<select name="city">
  <option value="delhi" selected>Delhi</option>
  <option value="mumbai">Mumbai</option>
  <option value="chennai">Chennai</option>
</select>

Multiple Selections

Adding the multiple attribute allows selecting more than one option by holding Ctrl or Cmd.

<select name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>

Option Groups with <optgroup>

The <optgroup> tag groups related options under a labeled heading in the dropdown.

<select name="vehicle">
  <optgroup label="Cars">
    <option value="sedan">Sedan</option>
    <option value="suv">SUV</option>
  </optgroup>
  <optgroup label="Bikes">
    <option value="sports">Sports Bike</option>
    <option value="cruiser">Cruiser</option>
  </optgroup>
</select>

<textarea> – Multi-line Text Input

The <textarea> element provides a resizable, multi-line text box. It is ideal for collecting longer text like messages, feedback, or descriptions.

<label for="feedback">Your Feedback:</label><br>
<textarea id="feedback" name="feedback" rows="5" cols="45" 
  placeholder="Tell us what you think..." maxlength="500">
</textarea>

<button> – Button Element

The <button> element creates a clickable button. Unlike <input type="submit">, the <button> tag can contain HTML content such as icons and text.

<!-- Submit button -->
<button type="submit">Submit Form</button>

<!-- Reset button -->
<button type="reset">Clear All</button>

<!-- Regular button (no form submission) -->
<button type="button">Click Me</button>

<!-- Button with icon text -->
<button type="submit">✉ Send Message</button>

<fieldset> and <legend>

The <fieldset> tag groups related form fields together inside a visible border box. The <legend> tag provides a title for the group. This improves the readability and organization of longer forms.

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

  <fieldset>
    <legend>Login Details</legend>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="pwd">Password:</label>
    <input type="password" id="pwd" name="pwd">
  </fieldset>

  <button type="submit">Register</button>
</form>

<datalist> – Autocomplete Suggestions

The <datalist> element provides a list of pre-defined suggestions for an <input> field. The user can either type freely or choose from the suggestions. Connect the input to the datalist using matching list and id attributes.

<label for="browser">Preferred Browser:</label>
<input type="text" id="browser" name="browser" list="browsers" placeholder="Start typing...">

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

<output> – Display Calculated Result

The <output> element displays the result of a calculation or user interaction.

<form oninput="result.value = parseInt(num1.value) + parseInt(num2.value)">
  <input type="number" id="num1" value="0">
  +
  <input type="number" id="num2" value="0">
  = <output name="result">0</output>
</form>

Form Elements Quick Reference

Key Points to Remember

• Use <select> for dropdown choices and <textarea> for long text
• Group related fields inside <fieldset> with a <legend> title
• Use <datalist> to provide helpful autocomplete suggestions
• The <button> tag is more flexible than <input type="submit">
• Always connect <label> to form elements using matching for and id values
• Use type="button" for buttons that should not submit the form