Практически каждое приложение, которое мы разрабатываем с использованием HTML, использует input, но существует множество типов ввода type, о которых вы можете не знать. Итак, давайте рассмотрим все, что вы могли не знать о типах input.
Общие типы ввода в HTML
В HTML мы можем задать вводу определенный тип. Например, простой ввод text, когда пользователь может ввести текст в поле, выглядит следующим образом:
<input type="text" />
Наиболее распространенными типами ввода, которые мы используем, являются:
Помимо этих основных типов:
- есть также
search— хотя он не так часто используется, он может использоваться для поля ввода поиска, которое показывает маленький крестик, когда вы вводите текст. - Также у нас есть
reset, которая создает кнопку, которая не отправляет форму, а говоритreset. Она сбросит все остальные элементы формы.
Эти распространенные типы input встречаются повсеместно, и выглядят они следующим образом:
Основные HTML-вводы с проверкой типов
Помимо этих простых типов, есть еще несколько других, которые могут быть весьма полезны, например:
Примечание: эти типы ввода действительно проверяют ввод на стороне клиента, но их не следует использовать как метод, гарантирующий, что ввод содержит только этот тип. Например, email принимает только тип email, но пользователь может легко изменить фронтенд, чтобы отправить что-то, что не является email. Поэтому обязательно проверьте и бэкенд.
Типы HTML ввода даты
Большинство из нас знакомы с type="date", но существует множество типов дат для HTML-ввода, в том числе:
Каждый из них показан ниже. Они довольно полезны, хотя и ограничены реализацией пользовательского интерфейса в браузере:
Другие типы ввода HTML
Помимо всех этих типов, у нас также есть следующие дополнительные типы:
файловый тип для вводимых данных
Тип файла для вводимых данных создает интерфейс загрузки файлов:
<input type="file" />
тип изображения для входов
Этот тип, вероятно, вы будете использовать реже всего. Он позволяет задать атрибуты src и alt для вашего ввода, который используется в качестве кнопки отправки формы — в итоге ваш ввод действует как изображение:
<input type="image" alt="Login" src="login-button.png" />
Заключение
Это охватывает все типы ввода HTML, которые вы можете использовать сегодня. Надеюсь, вы узнали что-то новое, даже если это всего лишь причудливый тип ввода type="image". Если вы хотите узнать больше о веб-разработке, вы можете следить за мной в twitter или заглянуть в fjolt.