Type html что это
Атрибут type HTML тега input
Атрибут type определяет тип элемента ввода.
Тип по умолчанию — text.
Этот атрибут не является обязательным, однако лучше всегда определять его.
Атрибут type для тега поддерживается всеми основными браузерами, тем не менее не все браузеры корректно работают со всеми его значениями.
В HTML5 для атрибута type были добавлены следующие новые значения: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel, url.
Синтаксис атрибута
Значения атрибута
| Значение | Описание |
|---|---|
| button | Обычная кнопка (как правило используется для запуска скриптов Javascript). |
| checkbox | Флажки, которые позволяют выбрать более одного варианта из предложенных. |
| color | Добавлен в HTML5. Виджет для выбора цвета. |
| date | Добавлен в HTML5. Поле выбора календарной даты. |
| datetime | Добавлен в HTML5. Указание даты и времени. |
| datetime-local | Добавлен в HTML5. Указание местной даты и времени. |
| Добавлен в HTML5. Для адресов электронной почты. | |
| file | Поле для ввода имени файла, который пересылается на сервер. |
| hidden | Скрытое поле, которое не отображается на странице. |
| image | Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. |
| month | Добавлен в HTML5. Выбор месяца. |
| number | Добавлен в HTML5. Ввод чисел. |
| password | Текстовое поле, в котором все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. |
| radio | Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. |
| range | Добавлен в HTML5. Ползунок для выбора чисел в указанном диапазоне. |
| reset | Кнопка сброса данных в исходные значения. |
| search | Добавлен в HTML5. Поле поиска. |
| submit | Кнопка отправки данных формы на сервер. |
| tel | Добавлен в HTML5. Для телефонных номеров. |
| text | Текстовое поле. Значение по умолчанию. |
| time | Добавлен в HTML5. Для времени. |
| url | Добавлен в HTML5. Для веб-адресов. |
| week | Добавлен в HTML5. Выбор недели. |
Пример использования атрибута
HTML форма с двумя разными элементами ввода — текстовое поле и кнопка отправки данных на сервер:
Type html что это
Если атрибут type не указан, то по умолчанию используется тип «text».
Поддержка браузеров
Синтаксис
Значение атрибута
| Значение | Описание |
|---|---|
| button | Определяет кликабельную кнопку (в основном используется с JavaScript для активации скрипта) |
| checkbox | Определяет флажок |
| color | Определяет выбор цвета |
| date | Определяет элемент управления датой (год, месяц, день (без времени)) |
| datetime-local | Определяет контроль даты и времени (год, месяц, день, время (без часового пояса) |
| Определяет поле для адреса электронной почты | |
| file | Определяет поле выбора файла и кнопку «Обзора» (для загрузки файлов) |
| hidden | Определяет скрытое поле ввода |
| image | Определяет изображение как кнопку отправки |
| month | Определяет контроль месяца и года (без часового пояса) |
| number | Определяет поле для ввода номера |
| password | Определяет поле пароля |
| radio | Определяет переключатель |
| range | Определяет элемент управления диапазоном (например, ползунок) |
| reset | Определяет кнопку сброса |
| search | Определяет текстовое поле для ввода строки поиска |
| submit | Определяет кнопку отправки |
| tel | Определяет поле для ввода телефонного номера |
| text | По умолчанию. Определяет однострочное текстовое поле |
| time | Определяет элемент управления для ввода времени (без часового пояса) |
| url | Определяет поле для ввода URL |
| week | Определяет контроль недели и года (без часового пояса) |
Еще примеры
Тип ввода: button
Кнопка, которая активирует JavaScript при нажатии на нее:
Тип ввода: checkbox
Флажки позволяют пользователю выбрать один или несколько вариантов из ограниченного числа вариантов:
У меня есть велосипед
У меня есть машина
Тип ввода: color
Выбрать цвет из палитры цветов:
Тип ввода: date
Определить дату контроля:
Тип ввода: datetime-local
Определить контроль даты и времени (без часового пояса):
Тип ввода: email
Определить поле для адреса электронной почты (будет автоматически проверяться при отправке):
Тип ввода: file
Определить поле выбора файла и кнопку «Обзор. » (для загрузки файлов):
Тип ввода: hidden
Определить скрытое поле (невидимое пользователю).
Скрытое поле часто хранит запись базы данных, которая должна быть обновлена при отправке формы:
Тип ввода: image
Определить изображение как кнопку отправки:
Тип ввода: month
Определить контроль месяца и года (без часового пояса):
Тип ввода: number
Определить поле для ввода номера (вы также можете установить ограничения на то, какие номера принимаются):
Для указания ограничений используйте следующие атрибуты:
Тип ввода: password
Определить поле пароля (символы маскируются):
Тип ввода: radio
Переключатели позволяют пользователю выбрать только один из ограниченного числа вариантов:
Тип ввода: range
Определить элемент управления для ввода числа, точное значение которого не имеет значения (например, ползунок). Диапазон по умолчанию от 0 до 100. Однако вы можете установить ограничения на то, какие числа принимаются с атрибутами min, max и step:
Для указания ограничений используйте следующие атрибуты:
Тип ввода: reset
Определить кнопку сброса (сброс всех значений формы к значениям по умолчанию):
Совет: Используйте кнопку сброса осторожно! Это может раздражать пользователей, которые случайно активируют кнопку сброса.
Тип ввода: search
Определить поле поиска (например, поиск по сайту или поиск в Google):
Тип ввода: submit
Определить кнопку отправки:
Тип ввода: tel
Определить поле для ввода телефонного номера:
Тип ввода: text
Определить два однострочных текстовых поля, в которые пользователь может вводить текст:
Тип ввода: time
Определите элемент управления для ввода времени (без часового пояса):
Тип ввода: url
Определить поле для ввода URL:
Тип ввода: week
Определите контроль недели и года (без часового пояса):
Атрибут type
Сообщает браузеру, к какому типу относится элемент формы.
Синтаксис
Значения
В табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.
| Тип | Описание | Вид |
|---|---|---|
| button | Кнопка. | |
| checkbox | Флажки. Позволяют выбрать более одного варианта из предложенных. | Пиво Чай Кофе |
| file | Поле для ввода имени файла, который пересылается на сервер. | |
| hidden | Скрытое поле. Оно никак не отображается на веб-странице. | |
| image | Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. | |
| password | Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. | |
| radio | Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. | Пиво Чай Кофе |
| reset | Кнопка для возвращения данных формы в первоначальное значение. | |
| submit | Кнопка для отправки данных формы на сервер. | |
| text | Текстовое поле. Предназначено для ввода символов с помощью клавиатуры. |
В HTML5 добавлены новые значения, представленные в табл. 2.
| Тип | Описание |
|---|---|
| color | Виджет для выбора цвета. |
| date | Поле для выбора календарной даты. |
| datetime | Указание даты и времени. |
| datetime-local | Указание местной даты и времени. |
| Для адресов электронной почты. | |
| number | Ввод чисел. |
| range | Ползунок для выбора чисел в указанном диапазоне. |
| search | Поле для поиска. |
| tel | Для телефонных номеров. |
| time | Для времени. |
| url | Для веб-адресов. |
| month | Выбор месяца. |
| week | Выбор недели. |
Поддержка этих значений браузерами показана в табл. 3.
Type html что это
Это поле, которое позволяет выбрать цвет.
Пример
Атрибут value используют для установки исходного цвета, его можно не указывать.
Поле ввода даты
Поле типа date позволяет ввести дату с помощью календаря.
Можно задать нижнюю и верхнюю границу диапазона дат атрибутами min и max.
Пример
Поле ввода адреса электронной почты
Для ввода нескольких адресов можно добавить атрибут multiple, при этом для разделения адресов используется запятая (,)
Пример
Файл FILE
Позволяет передать сценарию любой файл. Максимальный размер файла в байтах задается скрытым полем max_file_size.
Пример
Сценарий получения файла на PHP:
Браузер Chrome понимает дополнительные атрибуты «webkitdirectory directory«, указание которых у input позволяет выбирать целые папки:
Скрытое поле HIDDEN
Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм, то в скрытом поле каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.
Пример
Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.
Пример
Сценарий получит переменную с именем FormVersion, которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.
Поле ввода чисел NUMBER
Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.
Пример
Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как целым, так и дробным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.
Пример
Для задания любого шага используйте step=»any».
Пример
Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.
Если нужно, чтобы стрелочки в поле number были всегда, задайте стиль:
Если нужно убрать стрелочки в поле number, задайте стиль:
Поле ввода пароля PASSWORD
Поле ввода пароля очень похоже на простое текстовое поле. Отличается оно тем, что вместо вводимых символов в нем отображаются точки. Такая возможность очень важна, когда нужно ввести секретную информацию, типа пароля, которую не должны видеть другие.
Пример
Переключатель RADIO
Переключатель напоминает флажок, поскольку он тоже может находиться во включенном или выключенном состоянии.
По смыслу всегда предполагается, что в форме имеется несколько переключателей с одинаковым атрибутом name. У каждого из них свое значение атрибута value. Группа переключателей с одним и тем же именем в форме ведет себя таким образом, что только один из них может быть включенным. При передаче данных передается значение только выбранного переключателя.
Один переключатель из группы может быть изначально выбран по умолчанию с помощью атрибута checked.
Пример
Ползунок RANGE
Поле предназначено для ввода числа в указанном диапазоне.
Можно задать минимальное значение (по умолчанию 0), максимальное значение (по умолчанию 100), шаг изменения числа (по умолчанию 1) и текущее значение (по умолчанию среднее арифметическое минимального и максимального значений).
Пример
Ползунок сам по себе не даёт пользователю представление, какое же число он выбрал. Поэтому здесь без JavaScript не обойтись.
Пример
Поле range отображается разными браузерами по-разному.
Если хотите своё оформление, задайте стили для ползунка:
Но победить до конца стили IE11 не удастся!
Кнопка RESET
Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.
Совет: осторожно относитесь к выбору надписи на кнопке RESET. Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.
Пример
Кнопка SUBMIT
Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима от кнопки BUTTON. Сама она не передается, а служит только для управления.
Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit, заданный в теге
Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.
Пример
Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.
Пример
Поле ввода TEXT
Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input[type=»text»], то тогда атрибут type=»text» пропускать нельзя.
Имя поля, задаваемое атрибутом name, всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.
Пример
Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку RESET, то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.
HTML Типы ввода
HTML Типы ввода
Вот различные типы ввода, которые вы можете использовать в HTML:
Тип ввода «text»
определяет однострочное поле ввода текста:
Пример
Именно так приведенный выше HTML код будет отображаться в браузере:
Тип ввода «password»
определяет поле пароля:
Пример
Именно так приведенный выше HTML код будет отображаться в браузере:
Имя пользователя:
Пароль:
Символы в поле пароля маскируются (отображаются в виде звездочек или кружочков).
Тип ввода «submit»
определяет кнопку для предоставление данных формы в обработчик форм.
Обработчик форм обычно представляет собой серверную страницу со скриптом для обработки входных данных.
Обработчик формы задается в окне формы атрибут action :
Пример
Именно так приведенный выше HTML код будет отображаться в браузере:
Пример
Тип ввода «reset»
определяет кнопку сброса это приведет к сбросу всех значений формы к их значениям по умолчанию:
Пример
Именно так приведенный выше HTML код будет отображаться в браузере:
Если вы измените входные значения и затем нажмете кнопку «Сброс», то данные формы будут сброшены до значений по умолчанию.
Тип ввода «radio»
определяет переключатель.
Переключатели позволяют пользователю выбрать только один из ограниченного числа вариантов:
Пример
Именно так приведенный выше HTML код будет отображаться в браузере:
Мужчина
Женщина
другое
Тип ввода «checkbox»
определяет флажок.
Флажки позволяют пользователю выбрать ноль или более вариантов из ограниченного числа вариантов.
Пример
Именно так приведенный выше HTML код будет отображаться в браузере:
У меня есть велосипед
У меня есть машина
У меня есть лодка
Тип ввода «button»
определяет кнопку:
Пример
Именно так приведенный выше HTML код будет отображаться в браузере:
Тип ввода «color»
используется для полей ввода, которые должны содержать цвет.
В зависимости от поддержки браузера в поле ввода может отображаться палитра цветов.
Пример
Тип ввода «date»
используется для полей ввода, которые должны содержать дату.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
Пример
Вы также можете использовать атрибуты min и max для добавления ограничений к датам:
Пример
Тип ввода «datetime-local»
задает поле ввода даты и времени без часового пояса.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
Пример
Тип ввода «email»
используется для полей ввода, которые должны содержать адрес электронной почты.
В зависимости от поддержки браузера адрес электронной почты может быть автоматически проверен при отправке.
Некоторые смартфоны распознают тип электронной почты и добавляют «.com» к клавиатуре, чтобы соответствовать вводу электронной почты.
Пример
Тип ввода «file»
определяет поле выбор файла в «браузере» и кнопку для загрузки файла.
Пример
Тип ввода «month»
позволяет пользователю выбрать месяц и год.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
Пример
Тип ввода «number»
определяет числовое поле ввода.
Вы также можете установить ограничения на то, какие номера принимаются.
В следующем примере отображается числовое поле ввода, в которое можно ввести значение от 1 до 5:
Пример
Входные ограничения
Вот список некоторых распространенных ограничений ввода:
| Атрибут | Описание |
|---|---|
| checked | Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type=»checkbox» или type=»radio») |
| disabled | Указывает, что поле ввода должно быть отключено |
| max | Задает максимальное значение для поля ввода |
| maxlength | Задает максимальное количество символов для поля ввода |
| min | Задает минимальное значение для поля ввода |
| pattern | Задает регулярное выражение для проверки входного значения |
| readonly | Указывает, что поле ввода доступно только для чтения (не может быть изменено) |
| required | Указывает, что поле ввода является обязательным (должно быть заполнено) |
| size | Задает ширину (в символах) поля ввода |
| step | Задает допустимые интервалы чисел для поля ввода |
| value | Задает значение по умолчанию для поля ввода |
Подробнее об ограничениях на ввод данных вы узнаете в следующей главе.
В следующем примере показано числовое поле ввода, в которое можно ввести значение от 0 до 100 с шагом 10. Значение по умолчанию равно 30:
Пример
Тип ввода «range»
Пример
Тип ввода «search»
используется для полей поиска (поле поиска ведет себя как обычное текстовое поле).
Пример
Тип ввода «tel»
используется для полей ввода, которые должны содержать номер телефона.
Пример
Тип ввода «time»
позволяет пользователю выбрать время (без часового пояса).
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора времени.
Пример
Тип ввода «url»
используется для полей ввода, которые должны содержать URL адрес.
В зависимости от поддержки браузера поле url адреса может быть автоматически проверено при отправке.
Некоторые смартфоны распознают тип URL адреса, и добавляют, «.com» на клавиатуре, чтобы соответствовать ввода URL адреса.
Пример
Тип ввода «week»
позволяет пользователю выбрать неделю и год.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.