Advanced Form Controls & Validations

🌐 HTML Basics Lesson 9 Intermediate

For more complex form inputs, HTML provides advanced elements like textarea elements, select dropdown lists, and built-in browser validation rules.

1 Textarea elements, select inputs, and validation properties

Advanced elements include:

<textarea>: Allows multi-line text input (e.g. paragraphs or comment fields).
<select> and <option>: Creates dropdown selection lists.
HTML5 validations: Pre-validates inputs in the browser before submitting data to the server. Useful attributes include `required`, `min`, `max`, `step`, and regex validation using `pattern`.

2 Advanced Form Code

Let's examine advanced form configurations:

HTML — Advanced Form

<form action="/save-profile" method="POST">
    <label for="bio">Biography:</label>
    <textarea id="bio" name="user_bio" required></textarea>

    <label for="country">Country:</label>
    <select id="country" name="user_country">
        <option value="us">United States</option>
        <option value="in">India</option>
    </select>

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

3 Code Challenge

Challenge: Write an input field with type `number`. Add `min="10"` and `max="100"` parameters, verify the browser blocks values outside this range when attempting to submit the form.