HTML - Text area, Checkboxes, Radio Buttons, and Dropdowns

HTML - Text Area, Checkboxes, Radio Buttons, and Dropdowns

1. Text Area

A <textarea> element is used when you want to create a multi-line text input field, allowing users to type longer pieces of text. This is useful for comments, feedback, or longer answers where a single-line text field is not sufficient.

1.1. Syntax for Textarea

The <textarea> element does not use a value attribute. Instead, the text between the opening and closing <textarea> tags represents the default text in the field.

    <label for="message">Message:</label>
    <textarea id="message" name="message">Enter your message here</textarea>
    

Example:

Message:
Enter your message here

The rows and cols attributes are used to define the visible size of the text area in terms of rows and columns (lines and character widths). You can also use CSS to style these properties.

2. Checkboxes

Checkboxes are used when you want users to select multiple options from a list. They are represented using the <input> element with type="checkbox".

2.1. Syntax for Checkboxes

The <input> element with type="checkbox" creates a checkbox. Multiple checkboxes can be grouped by giving them the same name attribute, allowing the user to select multiple options.

    <label for="subscribe">Subscribe to newsletter</label>
    <input type="checkbox" id="subscribe" name="subscribe">
    

Example:

Coding
Music
Sports

2.2. Checkbox Grouping

By giving the checkboxes the same name, you can send the selected values as an array to the server for processing. This allows for multiple selections.

Example:

    <label><input type="checkbox" name="hobbies" value="reading"> Reading</label>
    <label><input type="checkbox" name="hobbies" value="travelling"> Travelling</label>
    

3. Radio Buttons

Radio buttons are used when you want the user to select one option from a group of choices. They are created using the <input> element with type="radio". All radio buttons in a group must share the same name attribute so that only one option can be selected at a time.

3.1. Syntax for Radio Buttons

Each radio button is created using the <input> element with type="radio". The name attribute ensures that only one option from the group can be selected.

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

Example:

Male
Female

3.2. Default Selected Option

You can pre-select a radio button by adding the checked attribute to one of the options.

    <label><input type="radio" name="gender" value="male" checked> Male</label>
    

4. Dropdowns

Dropdowns, also called select menus, allow the user to select one option from a list of choices. They are created using the <select> element, and each option in the list is represented by an <option> element.

4.1. Syntax for Dropdown

The <select> element is used to create the dropdown menu. Inside the <select>, each choice is defined by an <option> element.

    <label for="country">Choose a country</label>
    <select id="country" name="country">
        <option value="usa">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="india">India</option>
    </select>
    

Example:

Choose a country:
United States United Kingdom India

4.2. Default Selected Option

You can pre-select an option by adding the selected attribute to one of the <option> elements.

    <option value="uk" selected>United Kingdom</option>
    

4.3. Multiple Select Dropdown

To allow multiple selections in a dropdown, add the multiple attribute to the <select> element.

    <select id="hobbies" name="hobbies" multiple>
        <option value="coding">Coding</option>
        <option value="music">Music</option>
        <option value="sports">Sports</option>
    </select>
    

Example of multiple select dropdown:

Select your hobbies:
Coding Music Sports

HTML provides several interactive form elements such as text areas, checkboxes, radio buttons, and dropdowns that allow users to enter or select data. These form elements are essential for gathering information from users in web applications. Understanding how to use these elements effectively is a key part of creating interactive and user-friendly websites.