Form Elements

Lesson 2 of 16 Beginner Interactive

HTML forms have many input types and elements for collecting different kinds of data.

Select Dropdown

Use <select> and <option> for dropdown menus.

Textarea

Use <textarea> for multi-line text input.

Radio & Checkbox

Use type="radio" for single selection and type="checkbox" for multiple selections.

Syntax

HTML

<select name="course">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
</select>

<textarea name="message" rows="4"></textarea>

<input type="radio" name="gender" value="male"> Male
<input type="checkbox" name="agree" value="yes"> I agree

Select, Textarea and Checkbox

HTML

<!DOCTYPE html>
<html>
<body>
    <form>
        <label>Topic:</label><br>
        <select name="topic">
            <option value="">Select one</option>
            <option value="html">HTML</option>
            <option value="css">CSS</option>
            <option value="js">JavaScript</option>
        </select><br><br>

        <label>Message:</label><br>
        <textarea rows="4" cols="40" placeholder="Type here..."></textarea><br><br>

        <input type="checkbox" id="agree" name="agree">
        <label for="agree">I agree to terms</label><br><br>

        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label><br><br>

        <button type="submit">Send</button>
    </form>
</body>
</html>

Try It Yourself

Practice

Exercise

Create a form with a dropdown of 3 countries and a textarea for address.

Answer

<form>
    <label>Country:</label><br>
    <select name="country">
        <option>India</option>
        <option>USA</option>
        <option>UK</option>
    </select><br><br>
    <label>Address:</label><br>
    <textarea rows="3" cols="40"></textarea><br><br>
    <input type="submit" value="Save">
</form>

Quick Quiz

Which tag creates a dropdown menu?

<menu>

The <select> tag creates a dropdown menu, with <option> tags inside it.

Interview Questions

The <label> tag provides an accessible label for form inputs. When clicked, it focuses the associated input. It improves accessibility for screen readers and makes the form easier to use on mobile devices.

Forms & Inputs

Tutorial Complete

Back to HTML