Элементы интерфейса пользователя

User Interface Elements

Web page with different user interface elements

Ежедневно мы используем графические интерфейсы, предоставляемые операционной системой, браузером и различными приложениями. С основными элементами интерфейса интуитивно знаком каждый пользователь.

Элементы интерфейса пользователя — это всё, что мы видим и с чем можем взаимодействовать на экране.

Элементы интерфейса для ввода данных

Элемент Пример
Радиокнопка (radio button)
Чек-бокс (checkbox)
Поле для ввода (input field)
Область для ввода многострочного текста (textarea)
Выпадающий список (dropdown list)
Кнопка (button)

Элемент Форма

Form element

Форма — это ключевой элемент через который пользователь может отправить данные для обработки на сервер.

Данные из полей формы преобразуются в тело запроса.

По нажатию на кнопку отправляется HTTP-запрос на сервер.

Подробности запроса-ответа формы «Тестовая форма» доступны в DevTools Network.

Попробуй

Тестовая форма

Раздел Elements в DevTools

Познакомимся с разделом DevTools Elements, который позволит нам увидеть фактический код элемента, скрывающийся за привычным визуальным отображением.

Поэкспериментируйте с элементами интерфейса для ввода данных:

  1. Откройте DevToolsF12
  2. Нажмите на стрелочку слева от Elements (Inspector в Firefox)
  3. Выберите курсором интересующий элемент
  4. Кликните на элемент, чтобы переместиться к нему в коде
devtools-elements
Задача
Задача доступна премиум пользователям!

Открой доступ, чтобы заниматься без ограничений.

Полный доступ ко всем практическим задачам
Проверка ответов
Неограниченное количество попыток
Sidebar arrow

ВВЕДЕНИЕ

БАЗОВЫЕ ЗНАНИЯ

УРОВНИ ТЕСТИРОВАНИЯ

UI ТЕСТИРОВАНИЕ

ТЕХНИКИ ТЕСТ ДИЗАЙНА

ТЕСТОВАЯ ДОКУМЕНТАЦИЯ

АУТЕНТИФИКАЦИЯ И АВТОРИЗАЦИЯ

POSTMAN

БАЗЫ ДАННЫХ

ТЕСТИРОВАНИЕ РЕЛИЗА

АНАЛИЗ РАБОТЫ ПРИЛОЖЕНИЯ

ПОДГОТОВКА К СОБЕСЕДОВАНИЮ

Как составить резюме Топ вопросов Тест Собеседование