THE textarea AND select ELEMENTS

Asking questions is an art.

Sometimes the problem is not only in the question itself, but also in the format of the answer.

For example, if you ask: “How would you rate our service?”

different people may answer differently:

• one person writes 4, meaning 4 out of 10
• another writes 3, meaning 3 out of 5

So the problem may be:

• the question is unclear
• or the answer format is too open

That is why choosing the right form element is important.

Besides input, two other very common form elements are:

• textarea
• select

1. Why different form elements are needed

Different questions need different answer formats.

Examples:

• short one-line answer -> input
• long multi-line answer -> textarea
• one choice from a list -> select

Big diagram:

Question type                            Best element
-------------------------------------------------------------
Short text answer                        input
Long message / comment                   textarea
Choose one from many options             select

Another diagram:

Forms
│
├── input     -> short data
├── textarea  -> long text
└── select    -> choice from list

See example 1 and example 3.

2. The textarea element

textarea is a paired tag.

It creates a multi-line text field for entering a large amount of text.

It can be used for:

• feedback
• comments
• social media posts
• clarification of order details
• descriptions
• notes

Syntax:

<textarea name="" rows="" cols="" placeholder=""></textarea>

Main idea: input is usually for one line, but textarea is for many lines.

Diagram:

input:
[________________________]

textarea:
+------------------------+
|                        |
|                        |
|                        |
+------------------------+

See example 1 and example 2.

3. Why textarea is different from input

An input type="text" is usually a single-line field.

Diagram:

Single-line field
[ Write your name here________ ]

A textarea allows multiple lines.

Diagram:

Multi-line field
+------------------------------+
| Write your message here...   |
|                              |
|                              |
+------------------------------+

So if the user needs space for a longer answer, textarea is the better choice.

See example 1 and example 2.

4. Common uses of textarea

Examples:

• review text
• support message
• delivery note
• comment under a post
• contact form message

Visual examples:

Feedback:
+----------------------------------+
| I really liked the service...    |
| The delivery was fast...         |
|                                  |
+----------------------------------+

Order details:
+----------------------------------+
| Please call before delivery.     |
| Leave the package at the door.   |
+----------------------------------+

See example 1 and example 2.

5. Important textarea attributes

The most common attributes are:

• rows
• cols
• name
• placeholder

Example:

<textarea name="comment" rows="5" cols="30" placeholder="Write your comment"></textarea>

Diagram:

name="comment"     -> field key
rows="5"           -> height in text rows
cols="30"          -> width in text columns
placeholder="..."  -> hint text

See example 1 and example 2.

6. rows and cols

rows

• sets the number of rows
• this affects the height

cols

• sets the number of columns
• this affects the width

Example:

<textarea rows="4" cols="20"></textarea>

Diagram:

rows = 4

+--------------------+
|                    |
|                    |
|                    |
|                    |
+--------------------+

Another diagram:

rows="2"
+--------------------+
|                    |
|                    |
+--------------------+

rows="6"
+--------------------+
|                    |
|                    |
|                    |
|                    |
|                    |
|                    |
+--------------------+

In practice:

• rows is often used
• width is usually controlled with CSS instead of cols

Short rule:

rows -> usually used
cols -> often replaced by CSS width

See example 1 and example 2.

7. Practical example of textarea

Code:

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" placeholder="Write your message here"></textarea>

Diagram:

Message
+----------------------------------+
| Write your message here          |
|                                  |
|                                  |
|                                  |
|                                  |
+----------------------------------+

What happens:

• the label explains the field
• the user can type a long message
• the placeholder gives a hint

See example 1 and example 2.

8. textarea is a paired tag

This is very important.

Unlike input, textarea has:

• an opening tag
• a closing tag

Correct:

<textarea></textarea>

Not like this:

<textarea />

Diagram:

input      -> single/self-contained field
textarea   -> opening tag + closing tag

Comparison:

<input type="text" name="username" />

<textarea name="message"></textarea>

9. Resizing textarea

By default, a textarea can usually be resized by the user:

• horizontally
• vertically

This depends on the browser, but the default behavior is usually flexible resizing.

Diagram:

+----------------------+
| Some text...         |
|                      |
|                ◢     |  <- resize handle
+----------------------+

To control resizing, CSS uses the resize property.

Syntax:

resize: both | horizontal | vertical | none;

See example 1 and example 2.

10. resize values

resize: both;

• user can resize horizontally and vertically

Diagram:

Width  <---->
Height up/down

resize: horizontal;

• user can resize only left-right

Diagram:

+------------------+
|                  |
+------------------+
<------------------>

resize: vertical;

• user can resize only up-down

Diagram:

+----------+
|          |
|          |
+----------+
     ^
     |
   resize
     |
     v

resize: none;

• user cannot resize the field

Diagram:

+------------------+
| fixed size only  |
+------------------+

See example 1.

11. Example with resize

Code:

textarea {
  resize: vertical;
}

Meaning:

• the user can make the field taller
• but cannot make it wider

This is often useful because:

• width is controlled by the layout
• height may need flexibility for long messages

Comparison:

resize: both        -> change width and height
resize: vertical    -> change only height
resize: none        -> no resizing

See example 2.

12. The select element

The select element creates a drop-down menu.

It is also called a combo box.

It allows the user to choose one option from several choices.

Example:

<select name="size">
  <option value="xs">Extra Small</option>
  <option value="s">Small</option>
  <option value="m" selected>Medium</option>
  <option value="l">Large</option>
</select>

Main idea: select is used when the answer should come from a prepared list.

Diagram closed:

[ Medium ▼ ]

Diagram open:

[ Medium ▼ ]
   Extra Small
   Small
 → Medium
   Large

See example 3 and example 4.

13. Why select is useful

select helps when:

• the user should choose one answer from a list
• you want to avoid unclear free-text answers
• you want consistent data

Example: Question: “What size do you want?”

Bad open answer:

medium
Medium
M
med

Better with select:

Extra Small
Small
Medium
Large

Diagram:

Open text answer -> many inconsistent versions
Drop-down menu   -> one clear choice

See example 3.

14. Structure of select

A select element contains option elements.

Diagram:

select
├── option
├── option
├── option
└── option

Code:

<select name="size">
  <option value="xs">Extra Small</option>
  <option value="s">Small</option>
  <option value="m">Medium</option>
  <option value="l">Large</option>
</select>

Meaning:

• select = whole drop-down
• option = one answer choice

See example 3 and example 4.

15. The name attribute in select

Just like with input, select also has a name.

Example:

<select name="size">

This means:

• when the form is submitted
• the selected option value is sent under the key size

Diagram:

Field name:
size

Selected option:
m

Form data:
size -> m

See example 3.

16. The option element

Each option has:

• visible text
• a value

Example:

<option value="m">Medium</option>

Meaning:

• the user sees Medium
• the form sends m

Diagram:

What the user sees:   Medium
What gets submitted:  m

This is very important.

The text is for the user.

The value is for the form data.

Another example:

<option value="xs">Extra Small</option>

Visible text: Extra Small
Submitted value: xs

See example 3 and example 4.

17. Default selected option

By default, the first option is selected.

Diagram:

<select>
  <option>First</option>
  <option>Second</option>
</select>

Result:
[ First ▼ ]

If you want another option selected by default, use the selected attribute.

Example:

<option value="m" selected>Medium</option>

Now the initial result is:

[ Medium ▼ ]

Comparison:

Without selected  -> first option is chosen
With selected     -> chosen option becomes default

See example 3.

18. Full select example

Code:

<select name="size">
  <option value="xs">Extra Small</option>
  <option value="s">Small</option>
  <option value="m" selected>Medium</option>
  <option value="l">Large</option>
</select>

Visual:

Closed state:
[ Medium ▼ ]

Opened state:
Extra Small
Small
Medium   <- selected
Large

What happens:

• the menu shows Medium first
• if the user opens it, all options appear
• when the form is sent, the chosen value is submitted

19. Grouping options with optgroup

If you need to group options inside a drop-down menu, use optgroup.

The group title is set with the label attribute.

Example:

<select name="month">
  <optgroup label="Summer">
    <option value="s6">June</option>
    <option value="s7">July</option>
    <option value="s8">August</option>
  </optgroup>

  <optgroup label="Autumn">
    <option value="s9">September</option>
    <option value="s10">October</option>
    <option value="s11">November</option>
  </optgroup>
</select>

See example 4.

20. How optgroup looks conceptually

Diagram:

Month ▼
├── Summer
│   ├── June
│   ├── July
│   └── August
└── Autumn
    ├── September
    ├── October
    └── November

Another visual:

[ Month ▼ ]

Summer
  June
  July
  August

Autumn
  September
  October
  November

This makes long lists clearer and easier to use.

See example 4.

21. Why optgroup is useful

Without grouping:

June
July
August
September
October
November

With grouping:

Summer
  June
  July
  August

Autumn
  September
  October
  November

So grouping helps:

• organize long lists
• make options easier to scan
• improve clarity

See example 4.

22. Comparison: input vs textarea vs select

Diagram:

<input>
-> short answer
Example: username

<textarea>
-> long multi-line answer
Example: message

<select>
-> one choice from a list
Example: size

Visual comparison:

Username:
[____________________]           -> input

Comment:
+------------------------------+
|                              |
|                              |
+------------------------------+ -> textarea

Size:
[ Medium ▼ ]                    -> select

23. Practical examples

23.1 Feedback form

Name:
[____________________]

Message:
+------------------------------+
| Write your feedback...       |
|                              |
+------------------------------+

Best elements:

• name -> input
• message -> textarea

23.2 Size selection

Choose size:
[ Medium ▼ ]

Best element:

• select

23.3 Order note

Order details:
+------------------------------+
| Please do not ring the bell. |
| Leave the order at the door. |
+------------------------------+

Best element:

• textarea

24. Common mistakes

Mistake 1: Using input for long messages.

Problem:

• only one line
• uncomfortable for comments or feedback

Diagram:

Bad:

[ This is a very long message that does not fit well... ]

Better:

+----------------------------------+
| This is a very long message...   |
|                                  |
+----------------------------------+

Mistake 2: Using open text when the answer should be one choice from a list.

Problem: users may write inconsistent answers.

Bad:

Size:
[ medium ]
[ Medium ]
[ M ]

Better:

Size:
[ Medium ▼ ]

Mistake 3: Forgetting value in option.

Problem: you may lose clean submitted values.

Mistake 4: Using cols too much for layout width.

Better:

• use CSS for width
• use rows mainly for height

Mistake 5: Forgetting that textarea is a paired tag.

Wrong idea:

<textarea />

Correct:

<textarea></textarea>

25. Full example with all three elements

Code:

<form>
  <label for="username">Username</label>
  <input type="text" name="username" id="username" />

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="4" placeholder="Write your message"></textarea>

  <label for="size">T-shirt size</label>
  <select name="size" id="size">
    <option value="s">Small</option>
    <option value="m" selected>Medium</option>
    <option value="l">Large</option>
  </select>

  <button type="submit">Send</button>
</form>

Visual diagram:

Username
[________________________]

Message
+------------------------+
| Write your message     |
|                        |
|                        |
|                        |
+------------------------+

T-shirt size
[ Medium ▼ ]

[ Send ]

26. Big structure diagram

Form
│
├── input
│     └── short single-line text
│
├── textarea
│     ├── long multi-line text
│     ├── rows -> height
│     ├── cols -> width in characters
│     └── resize -> user resizing behavior
│
└── select
      ├── drop-down menu
      ├── option -> one choice
      ├── selected -> default chosen option
      └── optgroup -> grouped options

27. Mini cheat sheet

input     -> short one-line field
textarea  -> long multi-line field
rows      -> textarea height
cols      -> textarea width in columns
resize    -> controls textarea resizing
select    -> drop-down menu
option    -> one choice in the menu
value     -> submitted value
selected  -> default selected option
optgroup  -> group of options

28. Final summary

textarea and select are important form elements used when input is not the best choice.

Use:

• textarea for long multi-line text
• select for choosing one option from a list

Important things to remember:

• textarea is a paired tag
• rows controls height
• cols controls width in characters, but CSS often controls width in practice
• resize controls whether the user can resize the textarea
• select creates a drop-down menu
• option creates one choice
• the user sees the option text, but the form sends the value
• selected changes the default option
• optgroup groups related options

Super short memory line:

input = short text
textarea = long text
select = choose from list

29. Examples for practising

Each example below highlights the main idea it demonstrates, just like in the input lesson.

Exemple 1

<div>
            <div>
                <!-- coding -->
                <form class="ex12-form">
                <label class="ex12-label">
                    Username
                    <input class="ex12-input" type="text" name="username" placeholder="Jack Meadows">
                </label>

                <label class="ex12-label">
                    Feedback
                    <textarea class="ex12-textarea" name="feedback" rows="5" placeholder="Enter your message here..."></textarea>
                </label>

                <button class="ex12-button" type="submit">Submit</button>
                </form>

                <style>
                .ex12-form {
                    font-family: sans-serif;
                    line-height: 1.5;
                }

                .ex12-label {
                    display: flex;
                    flex-direction: column;
                    margin-bottom: 8px;
                    color: #f1f1f1;
                }

                .ex12-input,
                .ex12-textarea {
                    padding: 8px;
                    font-family: inherit;
                    font-size: inherit;
                }

                .ex12-textarea {
                    resize: none;
                }
                </style>
            </div>
            </div>

Exemple 2

<div>
            <div>
                <!-- coding -->
                <form class="ex13-form" name="issue_report_form" autocomplete="off">
                <label class="ex13-form-label">
                    Your name
                    <input
                    class="ex13-form-input"
                    type="text"
                    name="username"
                    placeholder="Andrew Berger"
                    autofocus
                    />
                </label>

                <label class="ex13-form-label">
                    Topic
                    <input
                    class="ex13-form-input"
                    type="text"
                    name="topic"
                    placeholder="Short issue summary"
                    />
                </label>

                <label class="ex13-form-label">
                    Description
                    <textarea
                    class="ex13-form-input"
                    name="description"
                    placeholder="Please provide a detailed issue description"
                    rows="5"
                    ></textarea>
                </label>

                <button class="ex13-form-button" type="submit">Submit an issue</button>
                </form>

                <style>
                .ex13-form {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    padding: 8px;
                    border: 1px solid #212121;
                    max-width: 300px;
                    font-family: sans-serif;
                    line-height: 1.5;
                }

                .ex13-form-label {
                    display: flex;
                    flex-direction: column;
                    color: #f1f1f1;
                    transition: color 150ms ease-in-out;
                }

                .ex13-form-label:focus-within {
                    color: #009688;
                }

                .ex13-form-input {
                    padding: 4px;
                    color: #212121;
                    border: 1px solid #212121;
                    border-radius: 4px;
                    font-family: inherit;
                    line-height: inherit;
                }

                .ex13-form-input::placeholder {
                    color: #616161;
                }

                .ex13-form-button {
                    align-self: flex-start;
                    font-family: inherit;
                    line-height: inherit;
                }

                textarea.ex13-form-input {
                    resize: none;
                }
                </style>
            </div>
            </div>

Exemple 3

<div>
            <div>
                <!-- coding -->
                <label class="size-label" for="size">Size</label>
                <select class="size-select" id="size" name="size">
                <option value="xs">Extra Small</option>
                <option value="s">Small</option>
                <option value="m" selected>Medium</option>
                <option value="l">Large</option>
                </select>

                <style>
                .size-label {
                    display: block;
                    margin-bottom: 4px;
                    color: #f1f1f1;
                    font-family: sans-serif;
                    line-height: 1.5;
                }

                .size-select {
                    font-size: 16px;
                }
                </style>
            </div>
            </div>

Exemple 4

<div>
            <div>
                <!-- coding -->
                <div class="ex4-month">
                <label class="ex4-month-label" for="month">Month</label>
                <select class="ex4-month-select" name="month" id="month">
                    <optgroup label="Summer">
                    <option value="s6">June</option>
                    <option value="s7">July</option>
                    <option value="s8">August</option>
                    </optgroup>

                    <optgroup label="Autumn">
                    <option value="s9">September</option>
                    <option value="s10">October</option>
                    <option value="s11">November</option>
                    </optgroup>
                </select>
                </div>

                <style>
                .ex4-month {
                    font-family: sans-serif;
                    line-height: 1.5;
                }

                .ex4-month-label {
                    display: block;
                    margin-bottom: 4px;
                    color: #f1f1f1;
                }

                .ex4-month-select {
                    font-size: 16px;
                }
                </style>
            </div>
            </div>