Типовые элементы интерфейса в HTML

Элемент интерфейса - примитив графического интерфейса пользователя, имеющий стандартный внешний вид и выполняющий стандартные действия. Проще говоря, элементы интерфейса, это элементы некоторой области с которыми так или иначе взаимодействует пользователь. Например самая обычная кнопка является элементом интерфейса. Выпадающий список также можно отнести к элементам интерфейса. К примитивному элементу интерфейса можно отнести однострочное или многострочное текстовое поле.

Иногда компоненты графических элементов называют виджетами

Типовые элементы интерфейса

Давайте рассмотрим наиболее часто встречающиеся элементы интерфейса встроенные в язык гипертекстовой разметки HTML

Тег “<input>”

Тег “<input>” является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Главным атрибутом тега “<input>” является “type”. При помощи данного атрибута мы может создать тот или иной элемент интерфейса.

В рамках языка гипертекстовой разметки HTML, есть ряд виджетов, например таких как многострочное текстовое поле, список и другие, которые создаются при помощи специальных тегов, а не тега “input” например:

  • <textarea> - многострочное текстовое поле
  • <select> - выпадающий список

Важно отметить, что элементы интерфейса в разных браузерах могут выглядеть неодинаково, так как за рендер виджета отвечает браузер

Кнопка

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

Синтаксис

<input type=”button” value=”Send”>

Однострочное текстовое поле

Однострочное текстовое поле применяется на веб страницах повсеместно. Простой пример - это форма поиска. Пользователь вводит в данную форму некоторое содержимое, а затем нажимает на другой элемент интерфейса “кнопку”, ожидая увидеть искомые данные.

Также можно привести и другой пример. Пользователь хочет зарегистрироваться на портале и вводит имя пользователя в текстовое поле

Синтаксис

<input type=”text”>

Переключатели

Переключатели позволяют выбрать некоторое значение или несколько значений из определенного множества

Существует две разновидности переключателей

  1. Зависимые переключатели
  2. Независимые переключатели
Зависимые переключатели

Зависимые переключатели позволяют выбрать единственное значение из определенного множества вариантов. Они могут находиться в выбранном или не выбранном состоянии

Простой пример, это выбор пола при заполнении профильных данных на каком - либо веб - сайте.

Синтаксис

<input type=”radio”>

Независимые переключатели

Независимые переключатели, или их еще называют флажками, отличаются от зависимых тем, что в группе флажков одновременно можно установить флажки в любой комбинации. Иначе говоря в рамках некоторого множества переключателей одной группы, существует возможность выбрать несколько вариантов сразу.

Флажок может находиться в установленном или сброшенном состоянии.

В качестве примера можно привести выбор наиболее предпочитаемых жанров кинофильмов при заполнении анкетных данных.

Синтаксис

<input type=”checkbox”>

Выпадающий список

Выпадающий список, это такой графический элемент интерфейса, который позволяет выбрать опцию или опции из некоторого множества

Самый распространенный пример это выбор страны или города при заполнении анкетных данных

Синтаксис

<select>
    <option>Item 1</option>
    <option>Item 2</option>
</select>

Элементы интерфейса дают возможность пользователю интерактивно взаимодействовать с веб приложением. Как правило виджеты располагаются внутри так называемой формы (тег “<form>”), которая впоследствии отправляется на сервер для дальнейшей обработки.

В данном конспекте была рассмотрена лишь основная часть элементов интерфейса встроенных в язык разметки HTML

 

Информация

Автор конспекта


Дата создания: 10.01.2019
Категория: HTML