Select, Textarea, and Buttons

8 min read

More Form Controls

Beyond <input>, forms also use <select> for dropdown menus, <textarea> for multi-line text, and <button> for triggering actions.

html

<!-- Dropdown select -->
<label for="country">Country</label>
<select id="country" name="country">
  <option value="">-- Select --</option>
  <optgroup label="Asia">
    <option value="in">India</option>
    <option value="jp">Japan</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="de">Germany</option>
    <option value="fr">France</option>
  </optgroup>
</select>

<!-- Multi-line text area -->
<label for="bio">Short Bio</label>
<textarea id="bio" name="bio" rows="4" cols="40" placeholder="Tell us about yourself..."></textarea>

<!-- Buttons -->
<button type="submit">Submit Form</button>
<button type="reset">Clear</button>
<button type="button" id="preview">Preview</button>

The <button> element defaults to type="submit" inside a form, which can cause accidental submissions. Always specify the type attribute explicitly. Use type="button" for JavaScript-driven actions.

<select multiple> lets the user select several options. On desktop, hold Ctrl (or Cmd on Mac) to select multiple. On mobile, the browser shows a native multi-select UI.

Ready to test yourself?

Practice HTML— quiz & coding exercises