Selects and Textareas

Introduction

Forms help people send information to a website. In the previous lessons, you may have used text inputs for short answers such as a name or email address. Today, you will add three useful form controls: a select dropdown for choosing one option, a textarea for longer responses, and a submit button for sending the completed form.

You will build part of a workshop registration form. The form will ask visitors which session they want to attend and give them space to share questions or accessibility needs. These controls are practical because they guide users while keeping information organized.

What You Will Learn

• Use a <select> element to create a dropdown list.
• Use <option> elements to provide choices.
• Use a <textarea> element for multi-line text.
• Connect labels to controls for accessibility.
• Add a submit button to a form.

Dropdowns with Select and Option

A dropdown is useful when a person should choose from a known list of options. The <select> element creates the control, and each <option> element creates one choice inside it.

Every form control should have a label. The label tells users what information to provide and also helps people who use screen readers. Connect a label to a control by giving the control an id and using the same value in the label's for attribute.

<label for="session">Choose a session:</label>
<select id="session" name="session">
  <option value="morning">Morning workshop</option>
  <option value="afternoon">Afternoon workshop</option>
  <option value="evening">Evening workshop</option>
</select>

The name attribute identifies the data when the form is submitted. The value is the data sent, while the text between the opening and closing option tags is what the user sees.

Multi-Line Text with Textarea

Use <textarea> when users may need to write more than one line, such as a message, description, or question.

<label for="message">Questions or accessibility needs:</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

The rows and cols attributes suggest the starting size of the text area. The user can usually type several lines and may be able to resize the field. Unlike an input, a textarea has an opening and closing tag. Do not place a value in a value attribute.

Worked Example

Here is a complete form section combining a dropdown, a textarea, and a submit button. The required attribute makes choosing a session necessary before the form can be submitted.

<form>
  <h3>Workshop registration</h3>

  <label for="session">Choose a session:</label>
  <select id="session" name="session" required>
    <option value="">Select one</option>
    <option value="morning">Morning workshop</option>
    <option value="afternoon">Afternoon workshop</option>
    <option value="evening">Evening workshop</option>
  </select>

  <label for="message">Questions or accessibility needs:</label>
  <textarea id="message" name="message" rows="5"></textarea>

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

The first option, “Select one,” has an empty value. This gives users an instruction rather than silently selecting a real session. Because the select is required, the user must choose another option before submitting.

Guided Activity: Improve a Contact Form

Open your HTML project and create a form for a local coding club. Start with the form element and add the following controls one at a time.

1. Add a heading that says “Join the coding club.”
2. Add a dropdown labeled “Preferred meeting day.” Include Monday, Wednesday, and Saturday as options.
3. Add a textarea labeled “Tell us what you want to learn.” Give it at least five rows.
4. Add a submit button with the text “Join the club.”
5. Check that every label's for value matches a control's id.
6. Test the form with your keyboard. Use the Tab key to move through the controls and the Space or arrow keys to use the dropdown.

As you work, read your labels aloud. Would a new visitor understand exactly what information belongs in each field? If not, make the labels more specific.

Common Mistake

A common mistake is putting a label next to a control without connecting it correctly. For example, <label for="day">Meeting day</label> will not be connected to <select id="meeting-day"> because the values do not match. Use the same exact identifier: for="meeting-day" and id="meeting-day".

Another frequent error is placing the default text for a textarea in a value attribute. Textareas use content between their tags. Leave that space empty when you want the field to begin blank.

Independent Challenge

Create a “Movie night suggestion” form. Include a dropdown labeled “Choose a genre” with at least four genres, a textarea labeled “Describe your movie suggestion,” and a submit button labeled “Send suggestion.” Make the genre required and include a first option that says “Select a genre.”

Before you finish, check three things: every control has a useful name, every label is connected to its control, and the submit button has type="submit". You now have the tools to collect both short choices and detailed responses in a well-structured HTML form.