Как сделать поле ввода в html
Обновлено: 08.07.2024
Что такое input (инпут)? Тег input в HTML представляет собой элемент управления формы. Он позволяет пользователю вводить данные и взаимодействовать с сайтом или приложением.
Тег input в HTML — cинтаксис
Записывается как ( без закрывающегося тега ). Тегу присваивается атрибут type для указания типа элемента управления и атрибут name , чтобы процессор формы мог ссылаться на него. Часто используется атрибут value для указания значения по умолчанию для элемента управления.
Базовый пример синтаксиса тега с несколькими атрибутами:
Пример, содержащий три элемента в стандартной форме:
Базовая форма
Ниже приводится форма, которая используется для ввода имени/фамилии пользователя. Используются три тега input type : для имени и фамилии, один для кнопки отправки:
Атрибут form
Мы можем связать тег input с формой с помощью атрибута form .
Если вы используете атрибут form , то должны указать идентификатор формы, с которой необходимо связать элемент.
В следующем примере я разместил элементы, связанные с формой, вне элемента
Радио-кнопки (переключатели)
В этом примере мы создадим радиокнопки. Для этого тега input атрибуту type присваивая значение radio .
Каждый пункт для выбора в группе должен иметь одно и то же значение name . Таким образом они связываются. Через value мы можем задавать различные варианты:
Связанные с формой элементы
Тег input рассматривается как связанный с формой элемент. Так как он может принадлежать определенной форме.
В этой главе описываются различные типы ввода для элемента .
В переводе с анг. input - ввод (данных); type - тип (данных).
HTML Типы ввода
Здесь различные типы ввода, которые вы можете использовать в HTML:
Input Type Text - Тип ввода Текст
определяет однострочное поле ввода текста:
Пример
Вот как HTML-код выше будет отображаться в браузере:
Input Type Password - Тип ввода Пароль
определяет поле пароля:
Пример
Вот как HTML-код выше будет отображаться в браузере:
User name:
User password:
Попробуйте заполнить поля! Символы в поле пароля маскируются (отображаются в виде звездочек или кружков).
определяет кнопку для отправки данных формы в обработчик форм.
Обработчик форм обычно представляет собой серверную страницу со скриптом для обработки входных данных.
Обработчик формы указывается в атрибуте action :
Пример
Вот как HTML-код выше будет отображаться в браузере:
Если вы опустите атрибут значения кнопки отправки, кнопка получит текст по умолчанию:
Пример
Input Type Reset - Тип ввода Сброс
определяет кнопку сброса, которая сбросит все значения формы к их значениям по умолчанию:
Пример
Вот как HTML-код выше будет отображаться в браузере:
Input Type Radio - Тип ввода Радио
определяет радио-кнопку.
Переключатели (радио-кнопки) позволяют пользователю выбрать ТОЛЬКО ОДИН из ограниченного числа вариантов:
Пример
Вот как HTML-код выше будет отображаться в браузере:
Male
Female
Other
Input Type Checkbox - Тип ввода Флажок
определяет флажок.
Флажки позволяют пользователю выбрать НОЛЬ или БОЛЬШЕ вариантов из ограниченного числа вариантов.
Пример
Вот как HTML-код выше будет отображаться в браузере:
I have a bike
I have a car
Input Type Button - Тип ввода Кнопка
определяет кнопку:
Пример
Вот как HTML-код выше будет отображаться в браузере:
HTML5 Типы ввода
HTML5 добавил несколько новых типов ввода:
Новые типы ввода, которые не поддерживаются старыми веб-браузерами, будут вести себя как .
Input Type Color - Тип ввода Цвет
используется для полей ввода, которые должны содержать цвет.
В зависимости от поддержки браузера в поле ввода может отображаться палитра цветов.
Пример
Input Type Date - Тип ввода Дата
используется для полей ввода, которые должны содержать дату.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
Пример
Вы также можете использовать атрибуты min и max чтобы добавить ограничения для даты:
Пример
Input Type Datetime-local - Тип ввода Локальные дата/время
задает поле ввода даты и времени, без часового пояса.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
Пример
Input Type Email - Тип ввода Email
используется для полей ввода, которые должны содержать адрес электронной почты.
В зависимости от поддержки браузера адрес электронной почты может автоматически проверяться при отправке.
Некоторые смартфоны распознают тип электронной почты и добавляют ".com" к набору с клавиатуры, чтобы соответствовать вводу электронной почты
Пример
Input Type File - Тип ввода Файл
определяет поле выбора файла и кнопку "Обзор" для загрузки файла.
Пример
Input Type Month - Тип ввода Месяц
позволяет пользователю выбрать месяц и год.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
Пример
Input Type Number - Тип ввода Число
определяет числовое поле ввода.
Вы также можете установить ограничения на то, какие номера принимаются.
В следующем примере показано числовое поле ввода, где вы можете ввести значение от 1 до 5:
Пример
Ограничения на ввод
Список некоторых общих ограничений ввода:
| Атрибут | Описание |
|---|---|
| checked | Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type="checkbox" или type="radio") |
| disabled | Указывает, что поле ввода должно быть отключено |
| max | Определяет максимальное значение для поля ввода |
| maxlength | Определяет максимальное количество символов для поля ввода |
| min | Определяет минимальное значение для поля ввода |
| pattern | Определяет регулярное выражение для проверки входного значения |
| readonly | Указывает, что поле ввода доступно только для чтения (не может быть изменено) |
| required | Указывает, что поле ввода является обязательным (должно быть заполнено) |
| size | Определяет ширину (в символах) поля ввода |
| step | Определяет допустимые интервалы номеров для поля ввода |
| value | Определяет значение по умолчанию для поля ввода |
Вы узнаете больше об ограничениях ввода в следующей главе.
В следующем примере показано числовое поле ввода, в котором вы можете ввести значение от 0 до 100 с шагом 10. Значение по умолчанию - 30:
Пример
Input Type Range - Тип ввода Диапазон
определяет элемент управления для ввода числа, точное значение которого не имеет значения (например, элемент управления ползунка). Диапазон по умолчанию от 0 до 100. Однако вы можете установить ограничения на то, какие числа принимаются с атрибутами min , max и step :
Пример
Input Type Search - Тип ввода Поиск
используется для полей поиска (поле поиска ведёт себя как обычное текстовое поле).
Пример
Input Type Tel - Тип ввода Телефон
используется для полей ввода, которые должны содержать номер телефона.
Пример
Input Type Time - Тип ввода Время
позволяет пользователю выбрать время (без часового пояса).
В зависимости от поддержки браузера в поле ввода может отображаться указатель времени.
Пример
Input Type Url - Тип ввода Url
используется для полей ввода, которые должны содержать URL адрес.
В зависимости от поддержки браузера, поле URL может быть автоматически проверено при отправке.
Некоторые смартфоны распознают тип URL и добавляют ".com" к вводу на клавиатуре, чтобы соответствовать вводу URL
Пример
Input Type Week - Тип ввода Неделя
позволяет пользователю выбрать неделю и год.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
Ниже приведены значения атрибута type , введенные в стандарте HTML 5.
| Значение type | Описание |
|---|---|
| search | Текстовое поле, предназначенное для ввода поискового запроса. Отличается от обычного текстового поля своим лексическим назначением. Некоторые браузеры отображают на нем дополнительную кнопку очистки поля. |
| Текстовое поле для ввода адресов электронной почты. По умолчанию элемент принимает только один адрес, но указав булев атрибут multiple="multiple" можно разрешить пользователю ввод нескольких адресов через запятую. | |
| url | Текстовое поле для ввода абсолютного IRI . |
| tel | Поле для ввода телефонных номеров. В отличие от полей ввода почтовых адресов и URL, телефонный номер по умолчанию не проходит проверку при отправке данных, поскольку существует множество различных форматов телефонных номеров. |
| number | Поле числового ввода. Визуально похоже на текстовое, но с добавлением кнопок-стрелок, позволяющих увеличивать и уменьшать значение. |
| range | Специальный элемент для выбора значения из заданного диапазона. Представляет собой ползунок, минимальное и максимальное значения которого задаются в атрибутах min и max соответственно, а шаг — в атрибуте step . |
| time | Элемент для ввода времени. Похож на поле для ввода чисел, но с разделением на часы и минуты. |
| date | Элемент для выбора даты, представляющий собой выпадающий григорианский календарь. |
| datetime-local | Комбинация двух предыдущих элементов для ввода даты и времени без учета часового пояса. |
| datetime | То же, что и предыдущий элемент, но с установленной временной зоной UTC . |
| week | Элемент для выбора недели. Визуально аналогичен элементу с type="date" , отличается лишь формат значения. |
| month | Элемент для выбора месяца. Визуально аналогичен элементу с type="date" , отличается лишь формат значения. |
| color | Специальный элемент для выбора цвета в формате RGB . |
Упомянутые атрибуты min , max и step позволяют определить диапазон и шаг допустимых значений не только для элемента с типом range , но и в случае с number и всеми типами, связанными с выбором даты и времени, включая week и month . Конечно, значения этих атрибутов, как и атрибута value , должны быть в соответствующем формате, который легко увидеть на практике, добавив нужный элемент в документ.
Все текстовые поля с произвольной длиной значения поддерживают еще три атрибута — maxlength , позволяющий ограничить эту длину; size , в котором задается количество символов, визуально помещающихся в элемент (относительная ширина элемента); а также pattern , в котором можно указать регулярное выражение JavaScript, определяющее шаблон допустимых значений. Например, pattern="3" означает, что в данном поле можно указать число от 0 до 9.
Элемент поддерживает атрибут autocomplete , аналогичный атрибуту формы. Значения on и off позволяют включить и, соответственно, отключить функцию автозаполнения поля браузером. По умолчанию атрибут считается установленным в on .
Многострочный текст, атрибуты текстовых элементов
Вообще говоря, элемент не поддерживает перенос строки, а значит не позволяет вводить многострочный текст. Для этих целей существует специальный тег
Если текст не помещается в строку
, то он переносится на следующую. Если же строк больше, чем вмещается в элемент, то автоматически появляется полоса прокрутки. В HTML 5 есть еще атрибут, определяющий способ передачи содержимого на сервер — это wrap . Установленный в значение hard , он добавляет код символа переноса в конец каждой строки. По умолчанию же значением wrap является soft , при котором символы переноса строки не добавляются.
Альтернативная кнопка, перегрузка атрибутов формы
Исторически так сложилось, что кнопки можно добавлять не только тегом , но и с помощью элемента . В целом, он повторяет ту часть функциональности , которая касается кнопок. Так значением атрибута type могут быть reset , submit и button , отвечающие за функции очистки формы, отправки данных и кнопки без определенного действия соответственно. Отличается тег тем, что он парный, и надпись на кнопке определяется не в атрибуте value , а в содержимом элемента.
Кпопка отправки данных, будь это или , позволяет переопределить некоторые атрибуты формы (элемента
Стандарт HTML 5 не определяет способы использования полученных ключей. Возможна, например, реализация механизма, при котором сервер, получив открытый ключ, сгенерирует пользовательский сертификат и предложит его сохранить вместе с секретным ключом в хранилище ключей браузера. А пользователь при необходимости сможет использовать его для авторизации на сервере.
Другие элементы форм
В HTML 5 появился элемент , имя и значение которого также передаются на сервер при отправке формы. Однако он не является элементом ввода и предназначен для хранения и отображения каких-либо результатов вычислений. Например, с помощью JavaScript можно организовать подсчет по формуле, переменные которой вводятся в других полях формы. Кроме атрибута name , привычно содержащего имя передаваемого на сервер поля, поддерживает также атрибут for , в котором можно указать один или несколько идентификаторов элементов, так или иначе связанных с отображаемым результатом. Сам результат содержится внутри элемента.
Еще одним элементом, который привязывается к другим, является . В отличие от , он не поддерживает атрибут name , а его значение не отправляется на сервер. Кроме того, в атрибуте for может быть указан только один идентификатор привязываемого поля ввода. Если for вообще отсутствует, то привязывается к своему же содержимому. Такая привязка, помимо очевидного лексического смысла, обладает одним полезным свойством — если, например, связан с полем , то флажок будет менять свое значение не только при нажатии по нему, но и по этому .
Разместив несколько элементов внутри одного , можно таким образом лексически объединить их в одну группу. Визуально выглядит как рамка, в левом верхнем углу которой пишется заголовок. Его можно указать в элементе , располагаемым сразу за открывающим тегом . Несмотря на то, что этот элемент не влияет на отправляемые на сервер данные, он все же поддерживает атрибут name .
Атрибуты элементов ввода
В значении атрибута accesskey можно указать один или несколько (через пробел) одиночных Unicode-символов, на базе которых браузер попытается построить комбинацию клавиш для быстрого доступа к элементу. Помните, что браузеры делают это на свое усмотрение и итоговые комбинации могут отличаться или вовсе отсутствовать.
Большинство элементов форм поддерживают булев атрибут disabled="disabled" , отключающий их функциональность. Установив disabled в элементе ,
, , или , вы не сможете ввести или выбрать его значение. Элемент с таким атрибутом нельзя будет выбрать из списка. Помещенный в , он отключит всю группу вариантов, а в — все дочерние элементы ввода. Значения отключенных элементов пишутся серым шрифтом.
HTML 5 позволяет разместить элемент вне формы или даже связать его с несколькими формами одновременно. Для этого необходимо в атрибуте form указать через пробел идентификаторы этих форм. Атрибут поддерживается следующими элементами: ,
Элементы форм, которые могут получать фокус ввода, поддерживают булев атрибут autofocus="autofocus" . Если установить его в одном из таких элементов, то фокус установится на нем сразу после загрузки страницы. Этот атрибут также появился в HTML 5.
7 комментариев
Ben @ 10 января 2014
Виктория @ 16 апреля 2015
Мирослав @ 27 января 2016
Увы. сочетает в одном элементе выбор года и месяца. Однако, для выбора года вполне сойдет type="number", для выбора месяца - .
Алексей @ 28 января 2016
Есть форма с кнопкой (сабмит) и отдельно textarea.
Попытался связать их через атрибут form.
Все нормально, НО при нажатии на сабмит текст не передается на сервер.
В чем соль?
HTML-формы требуются для сбора данных от посетителей сайта. Например, при регистрации на Uber, Netflix или Facebook пользователь вводит свое имя, почту и пароль.
Примечание: В примерах ниже уже заданы CSS стили, поэтому они отличаются от того, что получится у вас. CSS файлы можно скачать отсюда:
Элемент Form
Элемент Form () оборачивает все элементы внутри HTML-формы.
Атрибуты:
Примечание: Нельзя создать форму внутри формы. То есть использование элемента
Читайте также: