Атрибуты ввода — Учебник HTML
❮ Назад Далее ❯
В этой главе описываются различные атрибуты HTML кода элемента <input>.
Атрибут value
Ввод атрибута value задает начальное значение для поля ввода:
Пример
Поля ввода с начальными (по умолчанию) значениями:
<form>
<label for=»fname»>Имя:</label><br>
<input type=»text»
id=»fname» name=»fname» value=»Андрей»><br>
<label for=»lname»>Фамилия:</label><br>
<input type=»text» name=»lname»
value=»Щипунов»>
</form>
Попробуйте сами »
Атрибут readonly
Ввод атрибута readonly указывает, что поле ввода доступно только для чтения.
Поле ввода только для чтения не может быть изменено (однако пользователь может перейти к нему, выделить его и скопировать текст из него).
Значение поля ввода только для чтения будет отправлено при отправке формы!
Пример
Поле ввода только для чтения:
<form>
<label for=»fname»>Имя:</label><br>
<input type=»text»
id=»fname» name=»fname» value=»Андрей» readonly><br>
<label for=»lname»>Фамилия:</label><br>
<input type=»text» name=»lname»
value=»Щипунов»>
Попробуйте сами »
Атрибут disabled
Ввод атрибута disabled указывает, что поле ввода должно быть отключено.
Отключенное поле ввода непригодно для использования и не кликабельно.
Значение отключенного поля ввода не будет отправлено при отправке формы!
Пример
Поле ввода с ограниченными физическими возможностями:
<form>
<label for=»fname»>Имя:</label><br>
<input type=»text»
id=»fname» name=»fname» value=»Андрей» disabled><br>
<label for=»lname»>Фамилия:</label><br>
<input type=»text» name=»lname»
value=»Щипунов»>
</form>
Попробуйте сами »
Атрибут size
Ввод атрибута size определяет видимую ширину поля ввода в символах.
Значение по умолчанию для size 20.
Примечание: Атрибут size работает со следующими типами входных данных: text, search, tel, url, email, и password.
Пример
Задать ширину поля ввода:
<form>
<label for=»fname»>Имя:</label><br>
<input type=»text» name=»fname» size=»50″><br>
<label for=»pin»>ПИН:</label><br>
<input type=»text» name=»pin» size=»4″>
</form>
Попробуйте сами »
Атрибут maxlength
Ввод атрибута maxlength задает максимальное количество символов, разрешенных в поле ввода.
Примечание: Когда задано maxlength, то поле ввода не будет принимать больше указанного количества символов.
Однако этот атрибут не дает никакой обратной связи. Поэтому, если вы хотите предупредить пользователя, вы должны написать код JavaScript.
Пример
Установите максимальную длину для поля ввода:
<form>
<label for=»fname»>Имя:</label><br>
<input type=»text» name=»fname» size=»50″><br>
<label for=»pin»>ПИН:</label><br>
<input type=»text» name=»pin»
maxlength=»4″ size=»4″>
</form>
Попробуйте сами »
Атрибуты min и max
Ввод атрибутов min и max определяют минимальное и максимальное значения для поля ввода.
Атрибуты min и max работают со следующими типами входных данных: number, range, date, datetime-local, month, time и week.
Совет: Используйте атрибуты max и min вместе для создания диапазона допустимых значений.
Пример
Установите максимальную дату, минимальную дату и диапазон допустимых значений:
<form>
<label for=»datemax»>Введите дату до 1980-01-01:</label>
<input type=»date» name=»datemax» max=»1979-12-31″><br><br>
<label for=»datemin»>Введите дату после 2000-01-01:</label>
<input type=»date» name=»datemin» min=»2000-01-02″><br><br>
<label for=»quantity»>Количество (от 1 до 5):</label>
<input type=»number» name=»quantity» min=»1″ max=»5″>
</form>
Атрибут multiple
Ввод атрибута multiple указывает, что пользователю разрешено вводить более одного значения в поле ввода.
Атрибут multiple атрибут работает со следующими типами входных данных: email, и file.
Пример
Поле загрузки файла, принимающее несколько значений:
<form>
<label for=»files»>Выбор файлов:</label>
<input type=»file» name=»files» multiple>
</form>
Попробуйте сами »
Атрибут pattern
Ввод атрибута pattern указывает регулярное выражение, по которому проверяется значение поля ввода при отправке формы.
Атрибут pattern атрибут работает со следующими типами входных данных: text, date, search, url, tel, email, и password.
Совет:
Совет: Learn more about regular expressions in our JavaScript tutorial.
Пример
Поле ввода, которое может содержать только три буквы (без цифр или специальных символов):
<form>
<label for=»country_code»>Код страны:</label>
<input type=»text» name=»country_code»
pattern=»[A-Za-z]{3}» title=»Трехбуквенный код страны»>
</form>
Попробуйте сами »
Атрибут placeholder
Ввод атрибута placeholder задает короткую подсказку, описывающую ожидаемое значение поля ввода
(примерное значение или краткое описание ожидаемого формата).
Короткая подсказка отображается в поле ввода до того, как пользователь вводит значение.
Атрибут placeholder работает со следующими типами входных данных: text, search, url, tel, email, и password.
Пример
Поле ввода с текстовым заполнением:
<form>
<label for=»phone»>Введите номер телефона:</label>
<input type=»tel» name=»phone»
placeholder=»123-45-678″
pattern=»[0-9]{3}-[0-9]{2}-[0-9]{3}»>
</form>
Попробуйте сами »
Атрибут required
Ввод атрибута required указывает, что перед отправкой формы необходимо заполнить поле ввода.
Атрибут required работает со следующими типами входных данных: text, search, url, tel, email, password, date pickers, number, checkbox, radio, и file.
Пример
Обязательное поле ввода:
<form>
<label for=»username»>Имя пользователя:</label>
<input type=»text» name=»username» required>
</form>
Атрибут step
Ввод атрибута step задает допустимые интервалы чисел для поля ввода.
Пример: Если step=»3″, законными числами могут быть -3, 0, 3, 6 и т.д.
Совет: Этот атрибут можно использовать вместе с атрибутами max и min для создания диапазона допустимых значений.
Атрибут step работает со следующими типами входных данных: number, range, date, datetime-local, month, time и week.
Пример
Поле ввода с заданными интервалами законных номеров:
<form>
<label for=»points»>Точки:</label>
<input type=»number» name=»points» step=»3″>
</form>
Попробуйте сами »
Примечание: Ограничения ввода не являются надежными, и JavaScript предоставляет множество способов добавления незаконных входных данных. Чтобы безопасно ограничить ввод, он также должен быть проверен получателем (сервером)!
Атрибут autofocus
Ввод атрибута autofocus указывает, что поле ввода должно автоматически получать Фокус при загрузке страницы.
Пример
Пусть поле ввода «Имя» автоматически получает фокус при загрузке страницы:
<form>
<label for=»fname»>Имя:</label><br>
<input type=»text» name=»fname» autofocus><br>
<label for=»lname»>Фамилия:</label><br>
<input type=»text» name=»lname»>
</form>
Попробуйте сами »
Атрибуты height и width
Ввод атрибутов height и width
определяют высоту и ширину объекта элемента <input type="image">
Совет: Всегда указывайте атрибуты высоты и ширины для изображений.
Если заданы высота и ширина, то пространство, необходимое для изображения, резервируется при загрузке страницы.
Без этих атрибутов браузер не знает размер изображения и не может зарезервировать для него соответствующее пространство.
Эффект будет заключаться в том, что макет страницы будет меняться во время загрузки (в то время как изображения загружаются).
Пример
Определить изображение кнопки «Отправить», с помощью атрибутов height и width :
<form>
<label for=»fname»>Имя:</label>
<input type=»text» name=»fname»><br><br>
<label for=»lname»>Фамилия:</label>
<input type=»text» name=»lname»><br><br>
<input type=»image» src=»img_submit.gif» alt=»Отправить»>
Попробуйте сами »
Атрибут list
Ввод атрибута list относится к элементу <datalist>,
содержащий предварительно определенные параметры для элемента <input>.
Пример
Один элемент <input> с заданными значениями в <datalist>:
<form>
<input list=»browsers»>
<datalist>
<option value=»Internet Explorer»>
<option value=»Firefox»>
<option value=»Chrome»>
<option value=»Opera»>
<option value=»Safari»>
</datalist>
</form>
Попробуйте сами »
Атрибут autocomplete
Ввод атрибута autocomplete указывает, должна ли форма или поле ввода иметь автозаполнение включено или выключено.
Автозаполнение позволяет браузеру предсказать значение. Когда пользователь начинает вводить поле, браузер должен отображать параметры для заполнения поля, основанные на ранее введенных значениях.
Атрибут autocomplete работает с <form> и
<input> типами: text, search, url, tel, email, password, datepickers, range, и color.
Пример
HTML форма с включенным и выключенным автозаполнением для одного поля ввода:
<form action=»/action_page.php» autocomplete=»on»>
<label for=»fname»>Имя:</label>
<input type=»text» name=»fname»><br><br>
<label for=»lname»>Фамилия:</label>
<input type=»text» name=»lname»><br><br>
<label for=»email»>Email:</label>
<input type=»email» name=»email» autocomplete=»off»><br><br>
<input type=»submit» value=»Отправить»>
</form>
Попробуйте сами »
Совет: В некоторых браузерах вам может потребоваться активировать функцию автозаполнения,
чтобы это работало (смотрите ниже «Предпочтения» в меню браузера).
HTML Упражнения
Проверьте себя с помощью упражнений
Упражнение:
В поле ввода ниже добавьте заполнитель с надписью «ваше имя здесь».
<form action=»/action_page.php»>
<input type=»text» >
</form>
HTML Форма и элементы ввода
| Тег | Описание |
|---|---|
| <form> | Определяет HTML форму для пользовательского ввода |
| <input> | Определяет элемент управления вводом |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.
❮ Назад Далее ❯
Атрибут type HTML тега input
Атрибут type определяет тип элемента ввода.
Тип по умолчанию — text.
Этот атрибут не является обязательным, однако лучше всегда определять его.
Атрибут type для тега <input> поддерживается всеми основными браузерами, тем не менее не все браузеры корректно работают со всеми его значениями.
В HTML5 для атрибута type были добавлены следующие новые значения: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel, url.
Синтаксис атрибута
<input type=»значение«>
Значения атрибута
| Значение | Описание |
|---|---|
| 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 форма с двумя разными элементами ввода — текстовое поле и кнопка отправки данных на сервер:
<form action="//msiter.ru/demo_form.asp"> Имя пользователя: <input type="text" name="usrname"><br> <input type="submit" value="Отправить"> </form>
Как определить тип ввода в HTML (все значения и атрибуты) »
В атрибутах HTML
Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице.
Узнайте больше
- Атрибут
- Как использовать ввод для создания полей формы в HTML: простой учебник
- Что делает
Как определить тип ввода в HTML (все значения и атрибуты)? - Определяет тип ввода.
Адам Вуд
Адам — технический писатель, специализирующийся на документации и учебных пособиях для разработчиков.
Browser Support for type
| All | All | All | All | All | All |
Values of the type attribute
| Значение Имя | Примечания |
|---|---|
| текст | Определяет поле ввода текста в форме. |
| флажок | Определяет флажок, который пользователь может включить или отключить. |
| радио | Определяет круглую кнопку выбора в форме. |
| пароль | Отображает скрытое поле ввода пароля. |
| скрыто | Определяет поле в форме, невидимое для пользователя. |
| отправить | Определяет кнопку, по нажатию которой отправляется форма. |
| сброс | Определяет кнопку в форме, которая вернет все поля к значениям по умолчанию. |
| кнопка | Определяет ввод в виде кнопки. |
| файл | Определяет окно загрузки файла с кнопкой обзора. |
| изображение | Определяет изображение, которое щелкают, чтобы отправить форму. |
Все атрибуты входа
| Имя атрибута | Значения | Примечания |
|---|---|---|
| шаг | Задает интервал между допустимыми значениями в числовом вводе. | |
| required | Указывает, что поле ввода является обязательным; запрещает отправку формы и предупреждает пользователя, если обязательное поле пусто. | |
| только для чтения | Запрещает пользователю редактировать значение ввода. | |
| заполнитель | Задает текст-заполнитель в текстовом вводе. | |
| шаблон | Указывает регулярное выражение, по которому проверяется значение ввода. | |
| несколько | Позволяет пользователю вводить несколько значений при загрузке файла или вводе по электронной почте. | |
| мин. | Задает минимальное значение для полей ввода чисел и дат. | |
| макс. | Задает максимальное значение для полей ввода чисел и дат. | |
| список | Указывает идентификатор элемента | |
| height | Определяет высоту входного изображения. | |
| formtarget | Указывает контекст просмотра, в котором следует открыть ответ сервера после отправки формы. Для использования только с типами ввода «отправить» или «изображение». | |
| formmethod | Указывает метод HTTP (GET или POST), который будет использоваться при отправке данных формы на сервер. Только для использования с типами ввода «отправить» или «изображение». | |
| formenctype | Указывает, как данные формы должны быть отправлены на сервер. Только для использования с типами ввода «отправить» и «изображение». | |
| formaction | Указывает URL-адрес для отправки формы. Может использоваться только для type=»submit» и type=»image». | |
| форма | Указывает форму, которой принадлежит поле ввода. | |
| autofocus | Указывает, что поле ввода должно быть в фокусе сразу после загрузки страницы. | |
| тип | текст флажок радио пароль скрытый отправка сброс кнопка файл изображение | Определяет тип ввода. |
| имя | Указывает имя элемента ввода. Имя и значение каждого элемента ввода включаются в HTTP-запрос при отправке формы. | |
| значение | Определяет начальное значение или выбор по умолчанию для поля ввода. | |
| размер | Определяет ширину ввода в символах. | |
| maxlength | Определяет максимальное количество символов, которые можно ввести в текстовый ввод. | |
| Checked | Указывает, должен ли ввод флажка или переключателя быть отмечен по умолчанию. | |
| граница | Используется для указания границы ввода. Устарело. Вместо этого используйте CSS. | |
| src | Определяет URL-адрес источника для входного изображения. | |
| отключено | Отключает поле ввода. | |
| ключ доступа | Определяет сочетание клавиш для элемента. | |
| язык | Используется для указания языка сценариев, используемого для событий, запускаемых вводом. | |
| autocomplete | Указывает, должен ли браузер пытаться автоматически завершать ввод на основе ввода данных пользователем в аналогичные поля. |
5 самых полезных атрибутов элемента ввода, которые вы должны знать
При создании веб-сайта вы должны уделять первоочередное внимание удобству для пользователей. Атрибуты элемента ввода Если вы занимаетесь веб-разработкой, вы должны быть знакомы с атрибутами элемента ввода термина.
В этом блоге мы собираемся обсудить именно это. Я объясню вам о теге ввода и 5 обязательных атрибутах ввода, которые используются для веб-разработки.
Тег ввода
HTML-элемент ввода — это удобный тег для создания интерактивных веб-форм для получения данных от пользователя. В зависимости от устройства и пользовательского агента доступно множество виджетов управления входными данными.
Тег ввода является очень мощным и сложным для большого количества комбинаций типов ввода и атрибутов.
Давайте рассмотрим пример входного тега. Здесь мы взяли входной тег для ввода имени, в котором пользователь может заполнить минимум 4 символа своего имени и максимум 8 символов.
На изображении ниже показано, как код HTML будет отображаться в редакторе.
На изображении ниже показано, как вывод выше будет отображаться в браузере.
Таким образом, вы можете принимать данные от пользователя. Существует много типов входных тегов. Вот некоторые из них: текст, кнопка, флажок, радио, локальная дата и время, диапазон, поиск. Следует отметить, что значение атрибута type по умолчанию — «текст».
Важно отметить, что поведение существенно меняется в зависимости от значения его атрибута type; в результате различные виды описываются на отдельных справочных страницах. Если это свойство не указано, текстовый тип будет использоваться как значение по умолчанию.
Атрибуты ввода
Элемент очень эффективен благодаря своим атрибутам. Из этого очень важен атрибут type. Поскольку каждый элемент , независимо от типа, основан на интерфейсе HTMLInputElement, это связано с тем, что они оба имеют почти одинаковый набор атрибутов. Однако на самом деле это влияет на определенный тип подмножества типа ввода. Кроме того, некоторые атрибуты влияют на тип ввода, но могут отличаться для разных атрибутов.
Здесь мы перечислили некоторые важные атрибуты типа ввода, которые разработчик должен знать очень хорошо:
- Minlength
- Максимальная длина
- Отключено
- Автофокус
- Заполнитель
Minilength
Этот атрибут работает только с текстом , поиском, телефоном, URL-адресом, электронной почтой или паролем в элементе ввода. Атрибут minlength указывает минимальное количество символов, которое должно быть введено в поле ввода, например единицы кода UTF-16.
Это должно быть неотрицательное целое число, меньшее или равное значению, указанному в maxlength. Если для minlength не задано значение или указано недопустимое значение, то вход не имеет минимальной длины. Отправка формы завершится ошибкой, если в поле ввода введено меньше символов, чем минимальная длина.
На изображении ниже показано, как код HTML будет отображаться в редакторе.
На изображении ниже показано, как вывод выше будет отображаться в браузере.
Maxlength
Этот атрибут также работает только с текстом, поиском, телефоном, URL-адресом, адресом электронной почты или паролем в элементе ввода, таком как minilength. Атрибут maxlength указывает максимальное количество символов, которые можно ввести в поле ввода, например единицы кода UTF-16.
Это должно быть неотрицательное целое число, большее или равное значению, указанному в minlength. Если значение maxlength не задано или указано недопустимое значение, то вход не имеет максимальной длины.
По умолчанию браузеры запрещают пользователю вводить количество символов в поле ввода, если оно превышает указанную максимальную длину.
На изображении ниже показано, как код HTML будет отображаться в редакторе.
На изображении ниже показано, как вывод выше будет отображаться в браузере.
Отключено
Это логический атрибут. Этот атрибут указывает, что пользователь не должен взаимодействовать с вводом.
Отключенные входы специально отображаются более тусклым цветом при использовании какой-либо другой формы индикации того, что они недоступны для использования. Отключенный атрибут не получает событие клика, и значение отключенной формы не будет отправлено при отправке формы.
На изображении ниже показано, как код HTML будет отображаться в редакторе.
На изображении ниже показано, как результат выше будет отображаться в браузере.
Автофокус
Это также логический атрибут, как и отключенный атрибут.
Это указывает на то, что поле ввода становится в фокусе, когда страница завершает процесс загрузки. Или когда отображается элемент ввода, содержащий атрибут автофокуса.
Не более одного элемента получили атрибут автофокуса. Если поместить более одного элемента, первый с атрибутом будет сфокусирован, поскольку скрытые входы не могут быть сфокусированы. Таким образом, атрибут автофокуса можно использовать со скрытыми типами ввода.
На изображении ниже показано, как код HTML будет отображаться в редакторе.
На изображении ниже показано, как вывод выше будет отображаться в браузере.
Заполнитель
Заполнитель — это строковый атрибут. Это атрибут, который дает представление о данных, которые должны быть введены в поле ввода.
Это должно быть слово или короткая фраза, которая намекает на тип данных, которые нужно ввести в поле ввода, а не объяснение. Так, например, если ожидается, что поле будет содержать имя пользователя, а его метка — «Имя», подходящим заполнителем может быть «например, Брюс».