Формы на сайте и элементы взаимодействия с пользователем
Все элементы, которые взаимодействуют с пользователем (в первую очередь с мышкой и клавиатурой) находятся внутри форм.
Например, форма Регистрации в которой есть поля: емейл, пароль, пароль еще раз, имя, телефон и Отправить.
То есть элементы внутри форм называют полями.
Это не считая 2 устаревших: image и reset (точнее они не применяются на практике). И 1 скрытого поля (которое никак к дизайну не относится).
Итого: 1. Девять тут: https://webref.ru/html/input/type
2. TextArea https://webref.ru/html/textarea - отличается от обычного поля (например куда вводим емейл), тем, что в это поле можно ввести несколько строк текста.
3. Выпадающий список: https://webref.ru/html/select. Стоит отменить, что список множественного выбора не используется, он заменяется "галочками" (см. п.1), которые официально называются Флажки. Не забудьте флажки (если рисуете нестандартными) изобразить на макете отмеченными и неотмеченными (то есть в двух состояниях!)
В HTML 5 появились новые типы, но пока нет их полной поддержки, да и к тому же многие внешне никак не отличаются (с точки зрения дизайна), например, поле для ввода телефона, но пользователю на мобильных устройствах выскакивает клавиатура без алфавита (только цифры).
Отдельно стоит PLACEHOLDER (не имеющий русского перевода).
Если простыми словами, то это текст (обычно серенький), который выводится в поле, пока мы ничего не ввели. https://webref.ru/html/input/placeholder
Пред. урок След. урок
То есть элементы внутри форм называют полями.
Типы полей:
Типов полей на самом деле не много, всего 11.Это не считая 2 устаревших: image и reset (точнее они не применяются на практике). И 1 скрытого поля (которое никак к дизайну не относится).
Итого: 1. Девять тут: https://webref.ru/html/input/type
2. TextArea https://webref.ru/html/textarea - отличается от обычного поля (например куда вводим емейл), тем, что в это поле можно ввести несколько строк текста.
3. Выпадающий список: https://webref.ru/html/select. Стоит отменить, что список множественного выбора не используется, он заменяется "галочками" (см. п.1), которые официально называются Флажки. Не забудьте флажки (если рисуете нестандартными) изобразить на макете отмеченными и неотмеченными (то есть в двух состояниях!)
В HTML 5 появились новые типы, но пока нет их полной поддержки, да и к тому же многие внешне никак не отличаются (с точки зрения дизайна), например, поле для ввода телефона, но пользователю на мобильных устройствах выскакивает клавиатура без алфавита (только цифры).
Отдельно стоит PLACEHOLDER (не имеющий русского перевода).
Если простыми словами, то это текст (обычно серенький), который выводится в поле, пока мы ничего не ввели. https://webref.ru/html/input/placeholder
И боже упаси вас использовать Плейсхолдер для названия поля! Это неправильно!
Плейсхолдер нужен, чтобы дать подсказку или показать пример заполнения поля.
То есть название полей нужно писать над полем!
Пред. урок След. урок