Тег input является неотъемлемой частью для всех форм. Но не все знают, что некоторые его атрибуты сильно облегчают и улучшают обработку форм в дальнейшем. Type является одним из этих атрибутов. Сегодня я собрал для вас все самые популярные значения для атрибута type, тега input.
Стандартный input выводит строку для вода данных и имеет type=»text».
Данному полю мы зададим заголовок
Теперь я буду изменять значение атрибута type=’ ‘и показывать что выводит каждое из значений.
Для начала вот полный список значений для атрибута type.
Значения для атрибута type
- type
- Основной атрибут, задающий тип элемента. Если атрибут не указан, то по умолчанию используется значение text.
Возможные значения:- button – Кнопка с надписью.
- checkbox – Флажок.
- color – Виджет для выбора цвета.
- date – Поле для ввода календарной даты (год, месяц, день).
- datetime – Поле для ввода даты и времени.
- datetime-local – Поле для ввода даты и местного времени.
- email – Поле для ввода адреса электронной почты.
- file – Поле для ввода имени файла, который пересылается на сервер.
- hidden – Скрытое поле (не отображается на Web-странице).
- image – Графическая кнопка отправки данных формы на сервер. Вместе с этим значением нужно использовать атрибут src, чтобы определить адрес изображения и атрибут alt для определения альтернативного текста. Можно также задать атрибуты width и height, чтобы определить размер изображения в пикселях.
- month – Поле для ввода месяца и года.
- number – Поле для ввода чисел.
- password – Поле для ввода пароля.
- radio – Переключатели (радио-кнопки). Выбрать можно только один вариант. Атрибут checkedуказывает, что вариант выбран по умолчанию.
- range – Ползунок для ввода чисел в указанном диапазоне. Если соответствующие атрибуты не указаны, то значения по умолчанию:
- min = 1
- max = 100
- value = min + ( max — min ) / 2, или min , если max < min
- step = 1
- reset – Кнопка сброса данных формы в первоначальное состояние.
- search – Поле для ввода строки поиска.
- submit – Кнопка для отправки данных формы на сервер.
- tel – Поле для ввода номера телефона.
- text – Текстовое поле.
- time – Поле для ввода времени.
- url – Поле для ввода Web-адреса.
- week – Поле для ввода номера недели и года.\
И так… я разбил все значения на некоторые группы.
Для форм.
В первую группу я занёс значения, которые используются в формах авторизации и регистрации. Они проверяют правильность и заполненность полей.
Такие значения, как…
- datetime – Поле для ввода даты и времени.
- email – Поле для ввода адреса электронной почты.
- number – Поле для ввода чисел.
- tel – Поле для ввода номера телефона.
- url – Поле для ввода Web-адреса.
- password – Поле для ввода пароля.
Они изначально имеют пустые поля и проверяют введённые данные, на правильность ввода. Например: если поставить значение email, то если не ввести @, то нам выведется ошибка.
В данной группе, все значения работают аналогично. Только пароль работает немного иначе, он просто закрывает знаками * все введённые символы.
А что бы проверить поля на заполненность, необходимо ещё добавить по мимо атрибута type , атрибут required=»required».
С выбором ответа.
Вторая группа отличается тем что имеют дополнительно выпадающее окно, в котором есть несколько вариантов для выбора.
- date – Поле для ввода календарной даты (год, месяц, день).
- datetime-local – Поле для ввода даты и местного времени.
- file – Поле для ввода имени файла, который пересылается на сервер.
- time – Поле для ввода времени.
- week – Поле для ввода номера недели и года.
Для примера мы рассмотрим такое значение, как date
Прочие
А в третьей категории будут просто прочие значения.
- button – Кнопка с надписью.
- checkbox – Флажок.
- hidden – Скрытое поле (не отображается на Web-странице).
- radio – Переключатели (радио-кнопки). Выбрать можно только один вариант. Атрибут checkedуказывает, что вариант выбран по умолчанию.
- range – Ползунок для ввода чисел в указанном диапазоне. Если соответствующие атрибуты не указаны, то значения по умолчанию:
- min = 1
- max = 100
- value = min + ( max — min ) / 2, или min , если max < min
- step = 1
На этом всё ! Задавай свои вопросы в комментариях.
Если вы хотите больше практики по HTML, то вам сюда — http://prog-time.ru/html/
