HTML Form Controls and Validation — HTML Fundamentals (Lesson 9)

In the last lesson you built a basic form. Now you will add the remaining controls — multi-line text, dropdowns and buttons — and learn how HTML can validate input for free, before anything is even sent.

Textareas for longer text

A single-line input is fine for a name, but for messages or comments you want multiple lines. The <code><textarea></code> element gives a resizable, multi-line box. Unlike input, it has a closing tag, and any text between the tags becomes its default content.

HTML · editable

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

A multi-line text box — try typing in it.

Dropdowns with select

For a list of choices, a dropdown saves space. Use <code><select></code> for the menu and an <code><option></code> for each choice. The option's <code>value</code> is what gets submitted; the text between the tags is what the user sees.

HTML · editable

<form>
  <label for="country">Country</label>
  <select id="country" name="country">
    <option value="lv">Latvia</option>
    <option value="ee">Estonia</option>
    <option value="lt">Lithuania</option>
  </select>
</form>

A dropdown menu.

Buttons

The <code><button></code> element is more flexible than an input button — it can contain text, icons or HTML. Its <code>type</code> matters: <code>submit</code> sends the form, <code>reset</code> clears it, and <code>button</code> does nothing on its own (used with JavaScript).

button type	What it does
submit	Sends the form (default inside a form)
reset	Clears all fields back to defaults
button	Nothing by itself — for JavaScript

Built-in validation

HTML can check input before the form submits — no JavaScript required. Add <code>required</code> to make a field mandatory. Use <code>type="email"</code> to require a valid email shape. Add <code>min</code>, <code>max</code> and <code>maxlength</code> to limit values, or <code>pattern</code> for a custom rule. The browser shows a helpful message and blocks submission until it is fixed.

HTML · editable

<form>
  <label for="em">Email (required)</label><br>
  <input type="email" id="em" name="email" required placeholder="you@example.com"><br><br>
  <label for="age">Age (18-99)</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>
  <button type="submit">Submit</button>
</form>

Try submitting empty or with a bad email — the browser stops you.

Validation is not securityHTML validation improves the experience, but it is not security. A determined user can bypass it, so important data must always be checked again on the server. HTML validation is the friendly first line, not the lock.

Client-side (HTML) vs server-side validation

HTML validation

Instant feedback
No code needed
Great user experience
Can be bypassed

Server validation

Runs after submit
Needs back-end code
Cannot be bypassed
The real safety net

Try it yourself: a validated form

Build a sign-up form in the editable box: a required name (text), a required email, a number field with min and max, a dropdown with three options, and a submit button. Try submitting it incomplete and watch HTML catch the errors.

Quick quiz

1. Which element is a multi-line text box?

2. In a <select>, what gets submitted?

3. How do you make a field mandatory?

4. Is HTML validation enough for security?

5. Which button type sends the form?

Key takeaways

Use <textarea> for multi-line text and <select>/<option> for dropdowns.
Button types: submit sends, reset clears, button is for JavaScript.
Built-in validation: required, type, min/max, maxlength, pattern.
HTML validation improves UX but is not security — validate on the server too.

Textareas for longer text

Dropdowns with select

Buttons

Built-in validation

Related lessons