28. Dropdowns and Long Messages (<select>, <textarea>, <datalist>)
A dropdown list of states, a long feedback box and auto-search suggestions
Real-life analogy
Just as in online shopping a long list opens downward for choosing your State, select and option do the same thing.
Explanation
Other important form elements:
<select>and<option>: For creating a dropdown menu (Drop-down list).<textarea>: For writing a long multi-line message or address. Its size is set withrowsandcols.<datalist>: Magical auto-search! Shows suggestions while you type in an input box.
Golden rules
- The closing tag
</textarea>is mandatory for<textarea>.
Common mistake
Writing textarea as a self-closing .
Example code
<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px; font-size: 13px;">
<!-- Dropdown -->
<label style="font-weight: bold;">Select city (<select>):</label><br>
<select style="width: 100%; max-width: 260px; padding: 6px; margin: 4px 0 12px 0; border: 1px solid #cbd5e1; border-radius: 4px;">
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
<option value="lucknow">Lucknow</option>
</select><br>
<!-- Textarea -->
<label style="font-weight: bold;">Message (<textarea>):</label><br>
<textarea rows="3" placeholder="Write here..." style="width: 100%; max-width: 260px; padding: 6px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;"></textarea>
</body>
</html>Quick quiz
Which tag is used to add each option inside a dropdown list?
- <item>
- <list>
- <option>
- <choice>
Show answer
Answer: <option>
The <option> tag is used for the options of a dropdown.