FormsLesson 123Free preview

Form with Icons

This lesson is part of How To · All levels

Summary

Form with icons adds icons to the input to give visual clues about the type of data requested. The icon is positioned absolutely within the relative wrapper, while the input is padded left so that the text does not touch the icon. Decorative icons are best hidden from the screen reader.

Key points

The input packer uses position: relative.
The icon uses position: absolute on the left side of the input.
The left padding on the input prevents text from colliding with the icon.
Decorative icons are given hidden airs".
:focus-within can highlight the entire package when the input is active.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.