HTML
Message and subject
Add a subject select and a message textarea.
select, option and optgroup
Use <select> for a dropdown menu; each choice is an <option>. To group choices under a heading, wrap them in <optgroup> with a label attribute.
For example at Cafe Dem the subject can split into 'Orders' and 'Other' groups. optgroup gives screen reader users a meaningful structure and makes long lists easier to scan.
textarea and maxlength
Use <textarea> for long messages. Its size can be tuned with rows and columns but the content is what really matters. The maxlength attribute sets the most characters a user can type.
Give the hint with placeholder; don't put default text inside the tag. Placeholder is greyed out and disappears when the user types, while a default value gets submitted.
Exercise Add the subject and message fields
Add a second <fieldset> to the form with a <legend> of 'Subject'. Inside it add a label+select pair: label for='subject' 'Subject', select id='subject' name='subject' with two <optgroup> (label='Orders' containing <option value='delivery'>Delivery</option>, label='Other' containing <option value='suggestion'>Suggestion</option>). Then add a label+textarea pair: label for='message' 'Message', textarea id='message' name='message' maxlength='500' placeholder='Write your message here...'. Don't put default text inside the textarea.
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cafe Dem - Contact</title>
</head>
<body>
<form action="/contact" method="post">
<fieldset>
<legend>Contact details</legend>
<label for="name">Your name</label>
<input type="text" id="name" name="name">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="name.surname@example.com" required>
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" placeholder="+1 555 123 4567">
</fieldset>
<fieldset>
<legend>Subject</legend>
<label for="subject">Subject</label>
<select id="subject" name="subject">
<optgroup label="Orders">
<option value="delivery">Delivery</option>
</optgroup>
<optgroup label="Other">
<option value="suggestion">Suggestion</option>
</optgroup>
</select>
<label for="message">Message</label>
<textarea id="message" name="message" maxlength="500" placeholder="Write your message here..."></textarea>
</fieldset>
</form>
</body>
</html>
Test yourself
-
Which element groups options under a heading?
<select>
?
<option>...</option>
</?>
</select>
- legend
- fieldset
- datalist
- optgroup
Show answer
optgroup — Correct! optgroup groups options inside a select; label gives the group title.
-
Fill in: the optgroup label
<select id="subject" name="subject">
<optgroup label=____>
<option value="delivery">Delivery</option>
</optgroup>
</select>
Show answer
<select id="subject" name="subject">
<optgroup label="Orders">
<option value="delivery">Delivery</option>
</optgroup>
</select>
-
Match tags to their role
- select
- Dropdown menu
- option
- Single choice
- optgroup
- Option group
- textarea
- Multi-line text
Next lesson: Project final - Contact form
