Textarea and Datalist

What Is It?

Textarea is for a longer answer. Datalist offers suggestions while still allowing someone to type a different answer.

What the Tags Mean

• textarea: a multi-line field.
• rows: its starting height.
• datalist: a list of suggestions.
• list: connects an input to that list.
• option: one suggestion.

Example 1

Save each example as index.html and open it in your browser. Each code block is a complete page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Textarea and Datalist</title>
 
</head>
<body>
<label for="message">Message</label>
<textarea id="message" name="message" rows="4"></textarea>
</body>
</html>

What you see: You see a box where you can type several lines.

Example 2: Another Use

Offer suggestions for a favourite fruit.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Textarea and Datalist</title>
 
</head>
<body>
<label for="fruit">Fruit</label>
<input id="fruit" list="fruits">
<datalist id="fruits">
  <option value="Apple">
  <option value="Mango">
</datalist>
</body>
</html>

Simple Tip

A datalist suggests answers; it does not force someone to choose one. Use select when the choices must be fixed.

Try It Yourself

Add a third fruit suggestion.