Textareas, Dropdowns, Checkboxes & More

Long text: <textarea>

When you need more than one line — a message, a review, an address — use <textarea> instead of <input>.

<form>
  <label for="msg">Your message</label><br>
  <textarea id="msg" name="message" rows="4" cols="40" placeholder="Type here..."></textarea>
</form>

<textarea> is a resizable, multi-line box. rows="4" sets its starting height (about four lines) and cols="40" its starting width (about 40 characters). Unlike <input>, it has a separate closing tag, and placeholder shows faint hint text until the user types.

Dropdowns: <select>, <option>, <optgroup>

A <select> holds <option> choices. Group related options with <optgroup>.

<form>
  <label for="course">Choose a course</label><br>
  <select id="course" name="course">
    <optgroup label="Frontend">
      <option value="html">HTML &amp; CSS</option>
      <option value="react">React</option>
    </optgroup>
    <optgroup label="Backend">
      <option value="laravel">PHP &amp; Laravel</option>
      <option value="node">Node.js</option>
    </optgroup>
  </select>
</form>

The <select> is the dropdown box. Each <option> is one choice; the user sees the text (“React”) but the form sends the value (“react”). The <optgroup label="..."> tags put choices under non-clickable headings (“Frontend”, “Backend”) so a long list stays organised.

Checkboxes — choose any number

A checkbox is a little tick box the user can turn on or off. Use checkboxes when the visitor may pick several answers at once (or none at all). Each one is an <input type="checkbox">:

<form>
  <p>What do you know already?</p>
  <label><input type="checkbox" name="skills" value="html"> HTML</label><br>
  <label><input type="checkbox" name="skills" value="css"> CSS</label><br>
  <label><input type="checkbox" name="skills" value="js"> JavaScript</label>
</form>

Each <input type="checkbox"> is an independent on/off tick box, so the user can tick any number of them. Wrapping each one in a <label> means clicking the word also toggles the box. The ticked boxes are sent using their name and value.

Radio buttons — choose exactly one

Give every radio in the group the same name — that is what links them so only one can be chosen.

<form>
  <p>Preferred batch time</p>
  <label><input type="radio" name="batch" value="morning"> Morning</label><br>
  <label><input type="radio" name="batch" value="evening"> Evening</label><br>
  <label><input type="radio" name="batch" value="weekend"> Weekend</label>
</form>

All three radios share name="batch" — that shared name groups them, so selecting one automatically clears the others. Each carries its own value (morning / evening / weekend), and the one chosen is what gets sent. Use radios when only one answer makes sense.

Autocomplete suggestions: <datalist>

A <datalist> gives a normal text box a set of suggestions — the user can pick one or type something new.

<form>
  <label for="city">City</label>
  <input list="cities" id="city" name="city">
  <datalist id="cities">
    <option value="Bengaluru">
    <option value="Mumbai">
    <option value="Delhi">
  </datalist>
</form>

The link is the matching name: the input’s list="cities" points to the <datalist id="cities">. As the user types in the box, the matching <option> values drop down as suggestions — but unlike a <select>, they are free to ignore them and type their own city.

Grouping fields: <fieldset>

A <fieldset> draws a labelled box around a set of related fields, making long forms easier to scan.

<form>
  <fieldset>
    <legend>Your details</legend>
    <label>Name <input type="text" name="name"></label><br><br>
    <label>City <input type="text" name="city"></label>
  </fieldset>
</form>

<fieldset> visually groups the fields inside a border, and <legend> gives that group a title (“Your details”) sitting on the border line. It is purely organisational — the inputs work exactly the same — but it makes the form clearer for everyone.