Textarea and Select Menus.

For multi-line text and dropdown selections, HTML provides the <textarea> and <select> elements.

The Essentials

<textarea> is used for long text like comments or bios.

Unlike <input>, <textarea> has a closing tag and content.

<select> creates a dropdown menu.

<option> defines an item inside the dropdown.

The 'selected' attribute defines the default choice.

<optgroup> can be used to group related options.

Professional Insights

Sizing Textareas

Use 'rows' and 'cols' attributes to set the initial size of a textarea. However, modern users prefer resizing them, which can be controlled with the CSS 'resize' property.

The 'value' attribute in Options

The text inside <option> is what the user sees, but the 'value' attribute is what is sent to the server. These can be different (e.g., <option value='US'>United States</option>).

Multiple Selections

Adding the 'multiple' attribute to a <select> allows users to pick more than one option (usually by holding Ctrl/Cmd).

The <datalist> Element

A <datalist> provides an 'autocomplete' feature for a regular <input>. It's a mix between a text box and a dropdown.

Critical Pitfalls

Putting the default value of a textarea in the 'value' attribute (it should be between the tags!).

Forgetting to provide a 'value' for each <option>.

Not grouping long dropdowns with <optgroup>, making them hard to read.

Using a select menu when only 2-3 radio buttons would be faster for the user.

Interactive Lab

Sprint Tasks

Create a textarea with 4 rows

Create a select menu for 'Color' with options 'Red' and 'Blue'

Loading editor...

Production Preview