Ежедневно мы используем графические интерфейсы, предоставляемые операционной системой, браузером и различными приложениями. С основными элементами графических интерфейсов интуитивно знаком каждый пользователь.
Элементы интерфейса пользователя — это всё, что мы видим и с чем можем взаимодействовать на экране.
| Элемент | Пример |
|---|---|
| Переключатель (radio button) |
|
| Чек-бокс (checkbox) |
|
| Поле для ввода (input field) |
|
| Область для ввода многострочного текста (textarea) |
|
| Выпадающий список (dropdown list) | |
| Кнопка (button) |
Форма — это ключевой элемент через который пользователь может отправить данные для обработки на сервер.
Данные из полей формы преобразуются в тело запроса.
По нажатию на кнопку отправляется HTTP-запрос на сервер.
Подробности запроса-ответа формы «Тестовая форма» доступны в DevTools Network.
Познакомимся с разделом DevTools Elements, который позволит нам увидеть фактический код элемента, скрывающийся за привычным визуальным отображением.
Поэкспериментируйте с элементами интерфейса для ввода данных:
Уровень повышен!