The Input Element

THE `input` ELEMENT

A form is a container for interactive elements.

You can imagine a form like a paper sheet:

the sheet = the form
the blanks and questions = the form fields
the final action = submit

Diagram:

Paper form idea

Name:   [____________]
Email:  [____________]
Send:   [ Submit ]

On a web page, one of the most common form elements is <input>.

1. What the `input` element is

The input element is a universal element for creating different kinds of fields.

Its behavior depends on the type attribute.

The default type is:

type="text"

That creates a single-line text field.

Code:

<form>
  <input type="text" name="username" />
  <button type="submit">Submit feedback</button>
</form>

Visual idea:

+--------------------------------------+
| [____________________]   [ Submit ]  |
+--------------------------------------+

What happens:

the user can type text into the field
the button sends the form

Another simple diagram:

Form
 ├── input field
 └── submit button

See example 1.

2. Why `type` matters

The type attribute defines what kind of field the browser creates.

Example:

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

Meaning:

this is a text field
it accepts one line of text

Diagram:

type="text"

[ Jacob Mercer____________ ]

Main idea:

<input> + type = specific kind of field

See example 1.

3. Default behavior of input

By default, an input field:

is an inline element
does not inherit the font family automatically

That is why this global rule is useful:

input {
  font-family: inherit;
}

Why? Because otherwise the input may use a browser default font that looks different from the rest of the page.

Diagram:

Without font-family: inherit;

Page text:   Clean site font
Input text:  Different browser font

With font-family: inherit;

Page text:   Same font
Input text:  Same font

Visual comparison:

Before:
Title: Welcome
Input: [text in another font]

After:
Title: Welcome
Input: [text in the same font]

See example 1 and example 2.

4. The `name` attribute

Conceptually, an input field is like an entry in a dictionary sent to the server.

The name attribute is the key.

The user’s text is the value.

Example:

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

If the user types:

Jacob

then conceptually the form contains:

username = Jacob

Diagram:

Input field:
[ Jacob ]

Form data:
username -> Jacob

Another diagram:

Dictionary idea

key         value
-------------------------
username -> Jacob
email    -> exemple@nikitagoluban.eu
age      -> 25

Important:

name should be unique inside the form
JavaScript often uses this name too

See example 1 and example 2.

5. Why labels are needed

It is not enough to give the user just an empty field.

The user must understand:

what to type
where to type it
what the field means

That is why we use label.

Diagram without label:

[_____________________]

Problem:

What should I type here?
Username?
Email?
Phone number?

Diagram with label:

Username
[_____________________]

Now it is clear.

See example 2 and example 4.

6. What the `label` element does

The label element connects text with a form control.

This connection is:

visual
logical
accessible

Benefits:

clicking the label focuses the field
screen readers announce the label text
the form becomes easier to use

Diagram:

Label text ---> related input

Username ---> [____________]

When the label is clicked:

Click "Username"
        ↓
Cursor appears in input

See example 2.

7. Automatic connection: input inside label

If the input is placed inside the label, the connection is automatic.

Code:

<form>
  <label>
    Username
    <input type="text" name="username" />
  </label>
  <button type="submit">Submit feedback</button>
</form>

Diagram:

label
 ├── text: Username
 └── input

Username
[_____________________]

Click behavior:

Click on "Username"
        ↓
Focus goes into the input

Visual:

[Username]
[________]   <- active after clicking Username

See example 2.

8. Explicit connection: `for` and `id`

If the input is not inside the label, they must be connected explicitly.

Code:

<form>
  <label for="username">Username</label>
  <input type="text" name="username" id="username" />
  <button type="submit">Submit feedback</button>
</form>

Diagram:

label for="username"
        │
        ▼
input id="username"

Another visual:

Username            <- label
[______________]    <- input with matching id

Rule:

for value = id value

Example:

for="username"  matches  id="username"

See example 10.

9. Two correct ways to connect label and input

Method 1: wrap the input

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

Diagram:

label
 ├── text
 └── input

Method 2: use for + id

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

Diagram:

label ---for/id link---> input

Comparison:

Method 1 -> automatic
Method 2 -> explicit

See example 2 and example 10.

10. The `placeholder` attribute

The placeholder attribute shows hint text inside the field.

It appears when:

the field is empty

It disappears when:

the user starts typing

Code:

<form>
  <label>
    Username
    <input type="text" name="username" placeholder="Jacob Mercer" />
  </label>
  <button type="submit">Submit feedback</button>
</form>

Diagram before typing:

Username
[ Jacob Mercer        ]

Diagram after typing:

Username
[ Jacob               ]

Important: Placeholder is only a hint.

It does not replace a real label.

Comparison:

Label        -> what the field is
Placeholder  -> example of what to enter

See example 3 and example 4.

11. Label vs placeholder

Good:

Username
[ Jacob Mercer ]

Bad:

[ Username ]

Why is the second one bad? Because when the user types, the hint disappears:

[ Jacob ]

Then the user may forget what the field is.

Diagram:

With only placeholder:

Before typing:
[ Username ]

After typing:
[ Jacob ]

Problem:
No visible field description

See example 3 and example 4.

12. Example with missing values

Code:

<form>
  <label>
    Email address
    <input type="1" name="email_address" placeholder="2" />
  </label>
  <button type="3">Send</button>
</form>

Correct version:

<form>
  <label>
    Email address
    <input type="email" name="email_address" placeholder="exemple@nikitagoluban.eu" />
  </label>
  <button type="submit">Send</button>
</form>

Diagram:

Email address
[ exemple@nikitagoluban.eu________ ]  [ Send ]

Explanation:

1 -> email
2 -> exemple@nikitagoluban.eu
3 -> submit

See example 4.

13. The `::placeholder` pseudo-element

::placeholder styles the placeholder text itself.

Code:

input::placeholder {
  color: teal;
  font-weight: 700;
}

Diagram:

Before styling:
[ Jacob Mercer ] -> normal placeholder style

After styling:
[ Jacob Mercer ] -> teal and bold

Important: This changes the hint text, not the user’s typed text.

Comparison:

Placeholder text -> styled by ::placeholder
User input text  -> normal input text styles

See example 5 and example 6.

14. Placeholder on hover and focus

Code:

input:hover::placeholder,
input:focus::placeholder {
  color: orange;
}

Diagram:

Normal:
[ Jacob Mercer ] -> teal

Hover:
[ Jacob Mercer ] -> orange

Focus:
[ Jacob Mercer ] -> orange

State diagram:

Normal  -> teal
Hover   -> orange
Focus   -> orange

See example 5.

15. The `:placeholder-shown` pseudo-class

:placeholder-shown styles the input field while the placeholder is visible.

Code:

input {
  border: 1px solid orange;
}

input:placeholder-shown {
  border-color: blue;
}

Diagram:

Input empty, placeholder visible:
[ Jacob Mercer ]   border = blue

User types one character:
[ J ]              border = orange

Important difference:

::placeholder       -> styles the placeholder text
:placeholder-shown  -> styles the input element while placeholder is visible

Comparison diagram:

::placeholder
   affects this:
   "Jacob Mercer"

:placeholder-shown
   affects this:
   [ whole input box ]

See example 7.

16. The `autofocus` attribute

If an input has autofocus, it gets focus automatically when the page loads.

Code:

<form>
  <label>
    First name
    <input type="text" name="firstName" autofocus />
  </label>
  <label>
    Last name
    <input type="text" name="lastName" />
  </label>
  <button type="submit">Submit</button>
</form>

Diagram when page loads:

First name
[ |________________ ]

Last name
[__________________]

[ Submit ]

The vertical line means:

cursor is already inside the first field

Flow:

Page opens
   ↓
First input gets focus
   ↓
User can type immediately

Important: Only one element can have focus at a time.

So:

Good:
one field with autofocus

Bad:
many fields with autofocus

Boolean attribute idea:

<input autofocus />

No value is needed.

See example 8 and example 9.

17. Sandbox note

Sometimes sandbox examples do not show autofocus correctly.

So if it seems not to work there, test it in your own HTML file or editor.

Diagram:

Sandbox result     -> may not autofocus
Real browser page  -> autofocus works correctly

18. The `:focus-within` pseudo-class

:focus-within applies to an element when:

it has focus itself
or any element inside it has focus

This is very useful for styling:

the whole form
a label block
a wrapper around one field
a section of a form

Code:

form:focus-within {
  border-color: blue;
}

Meaning:

when any field inside the form gets focus
the form border becomes blue

Diagram before focus:

+------------------------+
| Username               |
| [__________________]   |
| [ Submit ]             |
+------------------------+
border: gray

Diagram after focus:

+------------------------+
| Username               |
| [______|___________]   |
| [ Submit ]             |
+------------------------+
border: blue

See example 10 and example 11.

19. Why `:focus-within` is useful

Without :focus-within, usually only the input changes.

With :focus-within, the whole parent block can react.

Example idea:

Input focus
   ↓
Parent form group highlights too

Diagram:

Without :focus-within

Label
[ active input ]

Parent stays unchanged

With :focus-within

Label becomes blue
[ active input ]
Parent border becomes blue

This gives the user stronger visual feedback.

See example 10 and example 11.

20. Full practical example

HTML:

<form>
  <label for="username">Username</label>
  <input
    type="text"
    name="username"
    id="username"
    placeholder="Jacob Mercer"
    autofocus
  />
  <button type="submit">Submit feedback</button>
</form>

CSS:

input {
  font-family: inherit;
  border: 1px solid orange;
}

input::placeholder {
  color: teal;
  font-weight: 700;
}

input:hover::placeholder,
input:focus::placeholder {
  color: orange;
}

input:placeholder-shown {
  border-color: blue;
}

form:focus-within {
  border-color: blue;
}

Visual behavior diagram:

Initial state:

+-----------------------------+
| Username                    |
| [ Jacob Mercer ]            |
| [ Submit feedback ]         |
+-----------------------------+
input border = blue
placeholder = teal

Hover state:

+-----------------------------+
| Username                    |
| [ Jacob Mercer ]            |
| [ Submit feedback ]         |
+-----------------------------+
placeholder = orange

Focus state:

+-----------------------------+
| Username                    |
| [ |Jacob Mercer ]           |
| [ Submit feedback ]         |
+-----------------------------+
form border = blue
placeholder = orange

Typing state:

+-----------------------------+
| Username                    |
| [ Jacob ]                   |
| [ Submit feedback ]         |
+-----------------------------+
placeholder disappears

21. Big summary diagram

FORM
│
├── label
│     └── tells user what the field is
│
├── input
│     ├── type="text"      -> text field
│     ├── name="username"  -> field key
│     ├── placeholder      -> hint text
│     └── autofocus        -> start here
│
├── ::placeholder
│     └── styles hint text
│
├── :placeholder-shown
│     └── styles input while hint is visible
│
└── :focus-within
      └── styles parent when field gets focus

22. Mini cheat sheet

<input>              -> form input field
type="text"          -> single-line text field
name                 -> key sent with the form
<label>              -> field description
placeholder          -> hint inside the field
::placeholder        -> styles hint text
:placeholder-shown   -> styles field while hint is visible
autofocus            -> field gets focus on page load
:focus-within        -> parent reacts when child gets focus

23. Common mistakes with diagrams

Mistake 1: using placeholder instead of label

Bad:

[ Username ]

After typing:

[ Jacob ]

Problem:

field description disappears

Mistake 2: forgetting name

<input type="text" />

Problem diagram:

Field exists
   ↓
User types text
   ↓
No proper field key in submitted data

Mistake 3: confusing ::placeholder and :placeholder-shown

::placeholder
   -> styles text inside the field

:placeholder-shown
   -> styles the field while hint text is visible

Mistake 4: using autofocus on several fields

Bad idea:

First name  -> autofocus
Last name   -> autofocus
Email       -> autofocus

Problem:

Only one element can be focused

24. Final summary

The input element is one of the most important form elements.

Important things to remember:

it is a universal field element
type defines the field kind
default type is text
name defines the key sent with the form
label explains the field and improves accessibility
placeholder gives a short hint
::placeholder styles the hint text
:placeholder-shown styles the field while the hint is visible
autofocus gives focus automatically on page load
:focus-within helps style a parent during field interaction

Super short memory line:

input = field
name = key
label = description
placeholder = hint
autofocus = start here
focus-within = parent reacts to focus

25. Exemples

Each example below links back to the matching theory section on this page.

Exemple 1

<div>
    <!-- coding -->
    <form class="form" name="issue_report_form" autocomplete="off">
        <input class="form-input" type="text" name="username" />
        <input class="form-input" type="text" name="topic" />
        <button class="form-button" type="submit">Submit an issue</button>
    </form>

    <style>
        input,
        textarea,
        button {
        font-family: inherit;
        line-height: inherit;
        }

        .form {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 8px;
        border: 1px solid #212121;
        max-width: 300px;
        }

        .form-button {
        align-self: flex-start;
        }

        .form-input {
        padding: 4px;
        color: #212121;
        border: 1px solid #212121;
        border-radius: 4px;
        }
    </style>
    </div>

Conclusion: This example shows the basic structure of a form with two text inputs and a submit button. See theory: input basics, type, name.

Exemple 2

<div>
  <div>
    <!-- coding -->
    <form class="ex2-form" name="issue_report_form" autocomplete="off">
      <label class="ex2-form-label">
        Your name
        <input class="ex2-form-input" type="text" name="your_name" />
      </label>

      <label class="ex2-form-label">
        Topic
        <input class="ex2-form-input" type="text" name="topic" />
      </label>

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

    <style>
      .ex2-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;
      }

      .ex2-form-label {
        display: flex;
        flex-direction: column;
        color: #f1f1f1;
      }

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

      .ex2-form-button {
        align-self: flex-start;
        font-family: inherit;
        line-height: inherit;
      }
    </style>
</div>
</div>

Conclusion: The important new part is that each input is placed inside a label, so the text and field are connected automatically. See theory: label and automatic connection.

Exemple 3

<div>
                <div>
                    <!-- coding -->
                    <form class="ex3-form">
                    <label class="ex3-label">
                        Username
                        <input class="ex3-input" type="text" name="username" placeholder="Bill Bush" />
                    </label>
                    <button class="ex3-button" type="submit">Submit feedback</button>
                    </form>

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

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

                    .ex3-input {
                        padding: 4px;
                        font-family: inherit;
                    }
                    </style>
                </div>
                </div>

Conclusion: This example shows how placeholder adds hint text inside the input. See theory: placeholder.

Exemple 4

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

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

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

                    <style>
                    .ex4-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;
                    }

                    .ex4-form-label {
                        display: flex;
                        flex-direction: column;
                        color: #f1f1f1;
                    }

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

                    .ex4-form-button {
                        align-self: flex-start;
                        font-family: inherit;
                        line-height: inherit;
                    }
                    </style>
                </div>
                </div>

Conclusion: The main point here is that labels and placeholders can work together: the label explains the field, and the placeholder gives an example. See theory: label and label vs placeholder.

Exemple 5

<div>
                <div>
                    <!-- coding -->
                    <form class="ex5-form">
                    <label class="ex5-label">
                        Username
                        <input class="ex5-input" type="text" name="username" placeholder="Jacob Frumer" />
                    </label>
                    <button class="ex5-button" type="submit">Submit feedback</button>
                    </form>

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

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

                    .ex5-input {
                        padding: 4px;
                        font-family: inherit;
                    }

                    .ex5-input::placeholder {
                        color: teal;
                        font-weight: 700;
                    }

                    .ex5-input:hover::placeholder,
                    .ex5-input:focus::placeholder {
                        color: orange;
                    }
                    </style>
                </div>
                </div>

Conclusion: This example shows how ::placeholder can style the placeholder text and how hover and focus can change that style. See theory: ::placeholder and hover and focus.

Exemple 6

<div>
                <div>
                    <!-- coding -->
                    <form class="ex6-form" name="issue_report_form" autocomplete="off">
                    <label class="ex6-form-label">
                        Your name
                        <input
                        class="ex6-form-input"
                        type="text"
                        name="username"
                        placeholder="Sophie Krashen"
                        />
                    </label>

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

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

                    <style>
                    .ex6-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;
                    }

                    .ex6-form-label {
                        display: flex;
                        flex-direction: column;
                        color: #f1f1f1;
                    }

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

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

                    .ex6-form-button {
                        align-self: flex-start;
                        font-family: inherit;
                        line-height: inherit;
                    }
                    </style>
                </div>
                </div>

Conclusion: The important new detail is that the placeholder color is styled separately from the normal input text. See theory: ::placeholder.

Exemple 7

<div>
            <div>
                <!-- coding -->
                <form class="ex7-form">
                <label class="ex7-form-label">
                    <span class="ex7-label-text">Username</span>
                    <input type="text" class="ex7-form-input" name="username" placeholder="Irina Lobanova" />
                </label>

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

                <style>
                .ex7-form-label {
                    display: flex;
                    flex-direction: column;
                    margin-bottom: 16px;
                }

                .ex7-label-text {
                    margin-bottom: 4px;
                    color: #f1f1f1;
                }

                .ex7-form-input {
                    padding: 8px;
                    border: 1px solid orange;
                    border-radius: 4px;
                    font-family: inherit;
                    font-size: 16px;
                    outline: none;
                }

                .ex7-form-input:placeholder-shown {
                    border-color: blue;
                }

                .ex7-form-input::placeholder {
                    color: #9e9e9e;
                }

                .ex7-button {
                    display: inline-flex;
                    padding: 12px 32px;
                    border: none;
                    border-radius: 4px;
                    background-color: #2196f3;
                    color: #fff;
                    font-size: inherit;
                    cursor: pointer;
                }

                .ex7-button:hover,
                .ex7-button:focus {
                    background-color: #1976d2;
                }
                </style>
                </div>
                </div>

Conclusion: This example shows that :placeholder-shown styles the whole input while the placeholder is visible. See theory: :placeholder-shown.

Exemple 8

<div>
                <div>
                    <!-- coding -->
                    <form class="ex8-form">
                    <label class="ex8-label">
                        First name
                        <input class="ex8-input" type="text" name="firstName" autofocus />
                    </label>

                    <label class="ex8-label">
                        Last name
                        <input class="ex8-input" type="text" name="lastName" />
                    </label>

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

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

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

                    .ex8-input {
                        padding: 8px;
                        font-family: inherit;
                    }

                    .ex8-button {
                        font-family: inherit;
                        line-height: inherit;
                    }
                    </style>
                </div>
                </div>

Conclusion: The important new part is autofocus, which places the cursor in the first field when the page loads. See theory: autofocus.

Exemple 9

<div>
                <div>
                    <!-- coding -->
                    <form class="ex9-form" name="issue_report_form" autocomplete="off">
                    <label class="ex9-form-label">
                        Your name
                        <input
                        class="ex9-form-input"
                        type="text"
                        name="username"
                        autofocus
                        placeholder="Nicolas Silberfaden"
                        />
                    </label>

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

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

                    <style>
                    .ex9-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;
                    }

                    .ex9-form-label {
                        display: flex;
                        flex-direction: column;
                        color: #f1f1f1;
                    }

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

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

                    .ex9-form-button {
                        align-self: flex-start;
                        font-family: inherit;
                        line-height: inherit;
                    }
                    </style>
                </div>
                </div>

Conclusion: This example combines autofocus with placeholders, so the first field is ready for typing immediately and still shows a hint. See theory: autofocus and placeholder.

Example 10

<div>
                <div>
                    <!-- coding -->
                    <form class="ex10-form">
                    <label class="ex10-form-label">
                        <span class="ex10-label-text">First name</span>
                        <input class="ex10-form-input" type="text" name="firstName" />
                    </label>

                    <label class="ex10-form-label">
                        <span class="ex10-label-text">Last name</span>
                        <input class="ex10-form-input" type="text" name="lastName" />
                    </label>

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

                    <style>
                    .ex10-form {
                        width: 100%;
                        padding: 24px;
                        border-radius: 4px;
                        border: 2px dashed #2a2a2a;
                        font-family: sans-serif;
                        line-height: 1.5;
                    }

                    .ex10-form:focus-within {
                        border-color: #2196f3;
                    }

                    .ex10-form-label {
                        display: flex;
                        flex-direction: column;
                        margin-bottom: 16px;
                    }

                    .ex10-form-label:focus-within {
                        color: #2196f3;
                    }

                    .ex10-label-text {
                        margin-bottom: 4px;
                        color: #f1f1f1;
                    }

                    .ex10-form-input {
                        padding: 8px;
                        border: 1px solid #2a2a2a;
                        border-radius: 4px;
                        font-family: inherit;
                        font-size: 16px;
                        outline: none;
                    }

                    .ex10-button {
                        display: inline-flex;
                        padding: 12px 32px;
                        border: none;
                        border-radius: 4px;
                        background-color: #2196f3;
                        color: #fff;
                        font-size: inherit;
                        cursor: pointer;
                    }

                    .ex10-button:hover,
                    .ex10-button:focus {
                        background-color: #1976d2;
                    }
                    </style>
                </div>
                </div>

Conclusion: The key idea here is :focus-within, which lets the form and label react when an input inside them gets focus. See theory: :focus-within.

Example 11

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

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

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

                    <style>
                    .ex11-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;
                    }

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

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

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

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

                    .ex11-form-button {
                        align-self: flex-start;
                        font-family: inherit;
                        line-height: inherit;
                    }
                    </style>
                </div>
                </div>

Conclusion: This example shows a practical combination of autofocus, placeholder, and :focus-within for a clearer form interaction. See theory: autofocus, placeholder, and :focus-within.

⬅ Back

1. What the input element is

2. Why type matters

3. Default behavior of input

4. The name attribute

5. Why labels are needed

6. What the label element does

7. Automatic connection: input inside label

8. Explicit connection: for and id

9. Two correct ways to connect label and input

10. The placeholder attribute

11. Label vs placeholder

12. Example with missing values

13. The ::placeholder pseudo-element

14. Placeholder on hover and focus

15. The :placeholder-shown pseudo-class

16. The autofocus attribute

17. Sandbox note

18. The :focus-within pseudo-class

19. Why :focus-within is useful

20. Full practical example

21. Big summary diagram

22. Mini cheat sheet

23. Common mistakes with diagrams

24. Final summary

25. Exemples

Exemple 1

Exemple 2

Exemple 3

Exemple 4

Exemple 5

Exemple 6

Exemple 7

Exemple 8

Exemple 9

Example 10

Example 11