LESSON 9.4

Special Form Fields

More ways to collect input from your users

Learn how to add textarea, select dropdowns, checkboxes, and radio buttons to your forms, and when to use each one.

💡 The Concept

HTML form fields extend well beyond the basic text input. There are specialized elements designed for different types of user data. Beyond the basic text input, HTML has several other field types that give users structured ways to respond. These are the ones you will use most often.

Textarea

Use <textarea> when you want the user to write a longer response, like a message or comment. Unlike <input>, it is not self-closing and uses a separate closing tag:

<label for="message">Your Message:</label>
<textarea id="message" name="message"></textarea>

Style it in CSS the same way you would a text input. Add resize: vertical to let users resize it vertically but not horizontally:

textarea {
   width: 100%;
   height: 120px;
   padding: 8px;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical;
}
A textarea form field showing a multi-line text input area

Select Dropdown

Use <select> and <option> to create a dropdown list. Each <option> needs a value attribute, which is what gets sent to the server:

<label for="state">State:</label>
<select id="state" name="state">
   <option value="mn">Minnesota</option>
   <option value="wi">Wisconsin</option>
   <option value="ia">Iowa</option>
</select>
A select dropdown form field showing a list of state options

Checkboxes

Use checkboxes when the user may select more than one option. Each checkbox is a separate <input type="checkbox">. Give them all the same name but different value attributes:

<input type="checkbox" name="interest" value="design"> Design<br>
<input type="checkbox" name="interest" value="programming"> Programming<br>
<input type="checkbox" name="interest" value="other"> Other
A set of checkboxes showing multiple selectable options

Radio Buttons

Use radio buttons when the user must choose exactly one option from a group. Give them all the same name. This is what links them together so only one can be selected at a time:

<input type="radio" name="color" value="blue" checked> Blue<br>
<input type="radio" name="color" value="yellow"> Yellow<br>
<input type="radio" name="color" value="red"> Red
A set of radio buttons showing mutually exclusive options

Checkboxes vs. Radio Buttons

The rule is simple: use checkboxes if the user may choose more than one. Use radio buttons when the user must choose only one.

Comparison showing when to use radio buttons versus checkboxes

❓ Frequently Asked Questions

When should I use a textarea instead of a text input?

Use textarea when you want the user to write more than a line or two, such as a message, a comment, a description, or any open-ended response. A regular text input is designed for short, single-line responses like a name, email address, or phone number. The practical difference is also visual: a textarea is resizable, gives the user a larger writing area, and signals that a longer response is expected. You can control the default size with the height and width properties in CSS, and adding resize: vertical lets users expand it vertically without breaking your layout.

What is the difference between checkboxes and radio buttons?

Checkboxes let users select multiple options at once. Think of a list of interests where someone might check several. Radio buttons are grouped together and only allow one selection at a time, so choosing one automatically deselects the others. Think of them like the buttons on an old car radio, where pressing one released the previous one. Use checkboxes for select all that apply and radio buttons for choose one. In HTML, radio buttons in the same group share the same name attribute, which is what tells the browser they are part of the same choice.

What does the value attribute do in a dropdown option?

Every option in a select dropdown has two pieces of text: what the user sees, and what gets sent to the server. The text between the opening and closing option tags is what the user sees in the dropdown. The value attribute is what actually gets submitted with the form. So you can display a friendly label like Minnesota to the user while sending a clean, consistent value like mn to your database. This matters because databases and back-end code prefer short, predictable values without spaces or capital letters. If you leave out the value attribute, most browsers will send the visible text instead, which can cause problems if users ever see different formatting or spelling.

★ Key Takeaways

Forms can collect more than just text. This lesson covered special form fields including text areas, dropdowns, checkboxes, and radio buttons. Next, you will learn how to embed video and other media on a web page. Multimedia content makes your pages more engaging and useful for visitors.

Next Lesson: Embedding Multimedia

← Back to Special Topics Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons