html ввод текста в поле
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, то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.
Формы и их составляющие (form, input) в HTML
Если создать html файл и вставить в него код из примера выше, то в браузере такой файл отобразится как html страница со следующим содержанием: 
— в этой форме есть два поля для ввода и одна кнопка. Все эти элементы строятся самим браузером.
Рассмотрим построчно теги из примера.
— этот тег формы. Внутри него могут находиться различные элементы: текстовые поля, поля для ввода пароля и т.п. Во время отправки формы все поля внутри формы передадут свои значения на страницу, адрес которой указан в атрибуте action=». «. Способ передачи данных указывается в атрибуте method=». «. Подробнее о передаче данных из формы на сайт можно прочитать в разделе по программированию, к примеру, на языке PHP. В этой статье рассмотрим только виды полей для вода информации.
— этот тег может отображать различные элемены в зависимости от значения атрибута type=». «. На третьей строке он используется как поле для ввода текста type=»text». А на четвёртой стройке он используется для ввода пароляtype=»password». Отличие типов «text» от «password» в том, что в поле для ввода пароля все символы скрываются, заменяясь на звёздочки или точки.
В конце стретьей строки есть атрибут required. В переводе означает «обязательный». Если попытаться отправить форму (в нашем случае нажать на кнопку «Войти на сайт») без заполнения этого поля, то форма не отправится и выдаст предупреждение: 
На пятой строке используется с атрибутом type=»submit». В результате чего браузер рисует кликабельную кнопку, которая запускает процесс отправки содержимого формы.
В атрибуте value=». « задаётся значение, которое принимает элемент формы. К примеру, если в поле с атрибутом type=»text» задать value=»Это текст в форме», то после загрузки html страницы в этом текстовом поле будет стоять текст «Это текст в форме». В случае с полем type=»submit» значение в атрибуте value=». « устанавливает надпись на кнопку отправки формы.
В примере все текстовые поля имеют атрибут value=»» (value равно пустоте, между двойными кавычками «» ничего нет). Поэтому на заднем фоне поля для ввода отображается текст-заглушка, которая сразу прячется, как только начинается ввод в поле. Текст этой заглушки можно задать через атрибут placeholder=». «.
Далее разберём подробнее какие ещё типы полей могут быть в формах. Рассмотрим самые востребованные.
input type=»radio»
Поле для ввода с атрибутом type=»radio» помогает сделать переключатель вариантов. К примеру, если пользователь должен выбрать только один вариант из списка, то код формы будет таким: На экране негобраузера форма будет выглядеть так: 
Обратите внимание, что все поля имеют атрибут name=»cheese» с одинаковым значением. Это необходимо, потому что на одной странице могут находится несколько форм с радиокнопками. Но переключатель будет работать только внутри группы радиокнопок с одинаковым значением атрибута name. А значение value=». « должно быть разным. именно value у выбранного пункта будет передано во время отправки формы.
В примере выше можно заметить, что на втором варианте ответа стоит атрибут checked. Он указывает на то, что во время загрузки страницы второй пункт будет отмечен как выбранный.
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»
позволяет пользователю выбрать неделю и год.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
Шаблон ввода данных
Текстовые поля никак не ограничивают ввод данных, хотя часто возникает необходимость задать для них параметры ввода, например, вводить только буквы, цифры или текст в определённом формате. Такие ограничения позволяют снизить ошибки пользователя и добиться от него ввода данных в нужном виде. Сам шаблон устанавливается для тега с помощью атрибута pattern значением которого выступают регулярные выражения.
| Выражение | Описание |
|---|---|
| \d 7 | Одна цифра от 0 до 9. |
| \D [^0-9] | Любой символ кроме цифры. |
| \s | Пробел. |
| [A-Z] | Только заглавная латинская буква. |
| [A-Za-z] | Только латинская буква в любом регистре. |
| [А-Яа-яЁё] | Только русская буква в любом регистре. |
| [A-Za-zА-Яа-яЁё] | Любая буква русского и латинского алфавита. |
| 2 | Три цифры. |
| [A-Za-z] | Не менее шести латинских букв. |
| 2 | Не более трёх цифр. |
| 4 | От пяти до десяти цифр. |
| ^[a-zA-Z]+$ | Любое слово на латинице. |
| ^[А-Яа-яЁё\s]+$ | Любое слово на русском включая пробелы. |
| ^[ 0-9]+$ | Любое число. |
В примере 1 показано, как сделать ввод IP-адреса
Пример 1. Шаблон ввода IP-адреса
HTML5 IE 10+ Cr Op Sa Fx
При вводе значения, не соответствующего шаблону будет выводиться сообщение об ошибке. Вид и содержание этого сообщения зависит от браузера, так, в Chrome оно будет иметь вид, как показано на рис. 1.
Защита от дурака
«Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в форме. Например, если в поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввёл текст или число, которое не лежит в указанном диапазоне, т.е. число не должно быть меньше нуля и больше десяти.
Почему происходит ввод неправильной информации? Это в основном совершается по трём причинам.
Следует понимать, что точные и правильные формулировки хотя и снижают вероятность возникновения ошибок, но никак не спасают от них. Только технические средства на стороне сервера позволяют получить требуемый результат и избежать ввода неправильной информации. Тем не менее, ревизия или, как её ещё называют, валидация на стороне клиента позволяет быстро проверить данные, вводимые пользователем, на корректность, без отправки формы на сервер. Таким образом экономится время пользователя и снижается нагрузка на сервер. С позиции юзабилити тоже имеются плюсы — пользователь сразу получает сообщение о том, какую информацию он указал неверно и может исправить свою ошибку.
Обязательное поле
Пример 1. Атрибут required
HTML5 IE 10+ Cr Op Sa Fx
Обязательные поля должны быть заполнены перед отправкой формы, иначе форма на сервер не отправится и браузер выдаст об этом предупреждение. Вид сообщения зависит от браузера, например Chrome выводит всплывающую подсказку, как показано на рис. 1.
Рис. 1. Обязательное поле не заполнено
Корректность данных
Исходно имеется два поля, в котором вводимые пользователем данные проверяются автоматически. Это веб-адрес и адрес электронной почты. Браузер Chrome также проверяет на корректность поле с календарными данными, но только потому, что у него не предусмотрен интерфейс выбора календаря щелчком мыши. Для этих элементов характерны следующие правила.
У браузеров несколько различается политика по проверке данных пользователя. К примеру, Opera подставляет протокол http:// перед введённым текстом автоматически, тогда как другие браузеры ждут его от пользователя. Chrome и Opera требуют, чтобы в почтовом адресе была точка, для Firefox она не обязательна.
В примере 2 показана форма с обязательными полями, в которой два поля проверяется браузером.
Пример 2. Корректность данных
HTML5 IE 10+ Cr Op Sa Fx
Opera проверяет элемент формы только при наличии атрибута name.
Что происходит в Opera при вводе неверных данных показано на рис. 2.
Рис. 2. Предупреждение о неправильных данных
Шаблон ввода
| Шаблон | Описание |
| ^[a-zA-Z]+$ | Любые латинские буквы. |
| ^[ 0-9]+$ | Любое количество цифр. |
| \d<1,3>\.\d<1,3>\.\d<1,3>\.\d | IP-адрес. |
| 6 | Почтовый индекс. |
| \d+(,\d<2>)? | Цена в формате 1,34 (разделитель запятая). |
| \d+(\.\d<2>)? | Цена в формате 2.10 (разделитель точка). |
В примере 3 просят ввести шестнадцатеричное значение цвета (#ffcc00) и если оно не лежит в этом диапазоне, браузер выводит сообщение об ошибке.
Пример 3. Шаблон ввода
HTML5 IE 10+ Cr Op Sa Fx
На рис. 3 показано предупреждение в браузере Chrome.
Рис. 3. Введённые данные не соответствуют шаблону
Отмена валидации
Валидация не всегда требуется для формы, к примеру, разработчик пожелает использовать универсальное решение на JavaScript и дублирующая проверка браузером ему уже ни к чему. В подобных случаях необходимо отключить встроенную валидацию. Для этого применяется атрибут novalidate тега