CodeX Cider Logo
CodeX Cider
HTML Topics
HTML Module📖Lesson 17 of 18

Form Controls

Today we add longer answers and menus: textarea for multi-line text, select for a dropdown, and required so empty fields cannot submit.

⏱️~5 min read🟢Beginner⚡Jump to Code Editor

What you'll learn in this lesson

  1. 1textarea holds multi-line text
  2. 2select builds a dropdown menu
  3. 3option is one choice in that menu
  4. 4value is what the form sends
  5. 5required blocks empty submits
  1. 1

    What these controls are

    Last lesson we changed input types. Today we need a longer message box and a list of choices. Those are not single-line inputs.

    <textarea> holds multi-line text. <select> with <option> builds a dropdown. The required attribute blocks submit when a field is empty.

  2. 2

    Handling Freeform Long-Text and Curated Dropdown Menus

    A customer support query or article review cannot be squeezed into a single-line input. Conversely, selecting a country or product plan shouldn't force users to manually type values that could contain typos.

    HTML solves this with specialized form elements: <textarea> provides an expandable multiline editing box, <select> with <option> restricts user choices to a clean dropdown menu, and the required attribute prevents submission if left empty.

  3. 3

    How Browsers Handle Multiline Text, Option Value Mappings, and HTML5 Validation

    Unlike <input>, <textarea> is a non-void element requiring an explicit closing tag </textarea>. Any text placed between the opening and closing tags becomes the initial default value.

    For <select>, the text inside <option> is what users see in the menu, while the value attribute is the actual payload sent to the backend. When required is present, empty fields halt submission and trigger built-in browser tooltips.

  4. 4

    Hands-On: Constructing a Validated Feedback Form

    Interact with the form below. Select an option from the dropdown and write a multiline comment in the textarea. Try clicking "Send message" without picking a course to see the native required validation in action.

  5. 5

    Rules for Usability: Closing Tags, Value Mapping, and Required Fields

    Use select when the answers are a short fixed list. Use textarea when people need space to write. Mark only the fields that truly must not be empty with required.

<select> & <option> (Curated Menu)
<option value="pro">Pro Plan</option>

Restricts input to an approved set of values. Prevents spelling errors and standardizes backend data.

<textarea> (Multiline Textbox)
<textarea name="bio"></textarea>

Designed for long-form comments and paragraphs. Supports Enter line-breaks and user resizing. Must have a closing tag.

Interactive Live Editor
controls.html
Click & type to editHTML5
Browser

Line by line

  1. <select id="course" name="course" required>

    Starts the dropdown. name is submitted. required means a real choice is needed.

  2. <option value="html">HTML</option>

    One menu item. People see “HTML”. The form sends html as the value.

  3. <textarea id="message" name="message" rows="3" required>

    A multi-line box. rows hints at the visible height. Closing </textarea> is required.

Try it yourself

Build a feedback form with a required <select> for rating (1–5) and a required <textarea> for comments. Wire both labels with for / id.

Hint: Put a placeholder option with value="" so required can catch “no choice”.

💡 View Solution (if stuck)
<form>
  <label for="rating">Rating (1-5):</label>
  <select id="rating" name="rating" required>
    <option value="">-- Choose rating --</option>
    <option value="5">5 - Excellent</option>
    <option value="4">4 - Good</option>
    <option value="3">3 - Average</option>
    <option value="2">2 - Poor</option>
    <option value="1">1 - Terrible</option>
  </select>

  <label for="feedback">Your Review:</label>
  <textarea id="feedback" name="feedback" rows="4" required></textarea>

  <button type="submit">Submit Feedback</button>
</form>
Quick Knowledge Check

Is <textarea> a void self-closing tag like <input> (e.g. <textarea />)?

Common mistakes

  • 1.Treating textarea like an empty tag. It needs a closing </textarea>.
  • 2.Giving every option the same empty value. Then the form cannot tell which choice was picked.

Interview prep

Q: When should you use <textarea> instead of <input type="text">?↓

Use <textarea> whenever users need to input multi-line content such as reviews, addresses, or open messages. It preserves line breaks and allows vertical resizing.

Q: What is the difference between an option's text content and its value attribute?↓

The text between <option>...</option> is the human-readable label rendered in the UI dropdown. The value attribute is the actual machine-readable key submitted in the HTTP payload to the server.

Q: How does the required attribute work on a <select> dropdown?↓

By setting the default placeholder option with value="" (e.g., <option value="">Select...</option>), the browser treats the empty string as invalid and prevents form submission until a valid option with a non-empty value is picked.

Previous lessonForm Input TypesNext lessonIframes