HTML Select and Textarea
A select element is a drop-down list that lets a visitor pick one option. A textarea element is a text field with many lines for longer answers.
A select list
Each option element is one choice in the list. The first option shows in the closed list.
<label for="fruit">Fruit</label>
<select id="fruit" name="fruit">
<option>Apple</option>
<option>Banana</option>
<option>Pear</option>
</select>A preset choice
The selected attribute marks the starting choice. The visitor can still pick a different one.
<label for="color">Colour</label>
<select id="color" name="color">
<option>Red</option>
<option selected>Blue</option>
<option>Green</option>
</select>A textarea
Rows sets the height of a textarea in lines. Cols sets its width in characters.
<label for="msg">Your message</label>
<textarea id="msg" name="msg" rows="4" cols="30"></textarea>A button element
The words of a button element show on the page as its text. A type of submit makes the button send its form.
<button type="submit">Send order</button>A plain button element
A type of button makes a plain button. It waits for a script to give it a job.
<button type="button">Show hint</button>Example
<!DOCTYPE html>
<html>
<head>
<title>Select and Textarea</title>
</head>
<body>
<h1>Leave a Comment</h1>
<p>Share your thoughts on the park.</p>
<form>
<label for="name">Your name</label>
<input type="text" id="name" name="name">
<label for="comment">Your comment</label>
<textarea id="comment" name="comment" rows="4" cols="30"></textarea>
<button type="submit">Post comment</button>
</form>
</body>
</html>Key points
- Select element: a drop-down list of choices
- Option element: one choice inside a select list
- Textarea element: a multi-line text field for longer answers
- Button element: a clickable control whose words are its content
- Select offers fixed choices, and textarea offers free space to type.
In this example, the form holds three controls. A text field collects the name of the visitor. A textarea gives four lines of space for the comment. A button element with type submit ends the form. Its words Post comment show as page text between its tags.
Note
A select list can allow many picks with a multiple setting. This course uses one pick at a time.
Try it Yourself
Edit the code, then press Run.
Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.
Exercise
Which element makes a drop-down list of choices?