Тег html input: HTML-тег | HTML/xHTML

Содержание

HTML тег

accept audio/*
video/*
image/*
MIME_type
Указывает типы файлов, которые вы можете отправить через поле загрузки файлов. (Используется вместе с атрибутом type="file")
align left
right
top
middle
bottom
Определяет тип выравнивания изображения. (Используется только с изображениями).
Не поддерживается в HTML5.
alt text Устанавливает альтернативный текст для изображения. (Используется только с изображениями).
autocomplete on
off
Включает/отключает автозаполнение.
Новый атрибут в HTML5.
autofocus autofocus Указывает, что поле формы должно получить фокус после загрузки страницы.
Новый атрибут в HTML5.
checked checked Указывает, что элемент должен быть предварительно выбран при загрузке страницы (Используется только для <input type = "checkbox"> и <input type = "radio">).
disabled disabled Указывает, что элемент должен быть недоступен для взаимодействия с пользователем.
form form_id Указывает форму (определенную элементом <form>) к которой относится элемент управления. Значением является идентификатор формы (id) в этом же документе.
Новый атрибут в HTML5.
formaction URL Задаeт адрес, куда будут пересылаться данные формы при нажатии на кнопку. (Используется только для <input type = "image"> и <input type = "submit">).
formenctype application/x-www-form-
urlencoded
multipart/form-data
text/plain
Определяет способ кодирования данных формы перед отправкой на сервер. (Используется только для <input type = "image"> и <input type = "submit">) все символы кодируются перед отправкой (значение по умолчанию). Символы не кодируются пробелы заменяются знаком "+", но символы не кодируются.
formmethod
Указывает метод HTTP запроса, который будет использован при отправке данных формы. (Используется только для <input type = "image"> и <input type = "submit">)
get Передает данные формы в адресной строке («имя=значение»), которые добавляются к URL страницы после вопросительного знака и разделяются между собой амперсандом (&). (http://example.ru/doc/?name=Ivan&password=vanya)
post Браузер устанавливает связь с сервером и посылает данные для обработки.
formnovalidate formnovalidate Указывает, что не нужно проверять данные на корректность. (Используется только для <input type = "submit">).
formtarget Указывает, где показывать ответ после отправки формы. (Используется только для <input type = "image"> и <input type = "submit">).
blank открывает ответ в новом окне.
self открывает ответ в текущем окне.
parent открывает ответ в родительском фрейме.
top открывает ответ во всю ширину окна.
heigh pixels Определяет высоту элемента (Используется только для <input type = "image">)
inputmode verbatim
latin
latin-name
latin-prose
full-width-latin
kana
katakana
numeric
tel
email
url
Определяет раскладку клавиатуры.
list datalist_id Определяет список вариантов, из которых пользователь может выбрать. В качестве значения для атрибута указывается идентификатор элемента <datalist>. З
ma number
date
Устанавливает верхнее значение для ввода числа или даты.
maxlength number Определяет максимальное количество символов, которое пользователь может ввести.
min number
date
Определяет минимальное значение для ввода числа или даты.
multiple multiple Указывает, что пользователь может ввести более одного значения в элементе (только для <input type = "file"> и <input type = "email">).
name text Определяет имя элемента. (используется для идентификации формы).
pattern regexp Задает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы (Только для элементов управления text, search, tel, url, email и password).
placeholder text Определяет короткую подсказку, которая описывает ожидаемое значение для поля ввода. Пользователь видит подсказку в поле ввода. Она исчезает, когда пользователь начинает вводить данные или когда поле получает фокус.
readonly readonly Определяет, что поле ввода доступно только для чтения. Пользователь не может вносить изменения.
required required Указывает, что поле ввода должно быть заполнено перед отправкой формы.
selectionDirection forward
backward
none
Устанавливает направление в котором происходит выбор.
size number Устанавливает ширину текстового поля. (Только для text, search, tel, url, email и password). начение по умолчанию 20 символов.
src URL Указывает путь к изображению, которое используется в качестве кнопки “отправить”. (Используется только для <input type = "image"> )
step number Задает шаг приращения (величину инкремента) для числовых полей. Используется с атрибутами min и max которые определяют минимальное и максимальное значение.
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Определяет тип поля ввода.
value text Устанавливает значение элемента.
width
width
Определяет ширину элемента (только для <input type = "image">).

Тег input



Пример

HTML-форма с тремя полями ввода; два текстовых поля и одна кнопка Submit:

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>


Определение и использование

Тег <input> определяет поле ввода, в которое пользователь может вводить данные.

<input> элементы используются в элементе <input> для объявления элементов управления вводом, которые позволяют пользователям вводить данные.

Поле ввода может меняться различными способами в зависимости от атрибута Type.


Поддержка браузера

Элемент
<input> Да Да Да Да Да

Советы и примечания

Примечание: Элемент <input> пуст, он содержит только атрибуты.

Совет: Используйте <label> для определения меток для <input> элементов.


Различия между HTML 4,01 и HTML5

Атрибут "align" является навестить поддерживается в HTML5.

В HTML5 тег <input> имеет несколько новых атрибутов, а атрибут Type имеет несколько новых значений.



Различия между HTML и XHTML

В HTML тег <input> не имеет конечного тега.

В XHTML тег <input> должен быть правильно закрыт, как это <input />.


Атрибуты

= Новое в HTML5.

Атрибут Значение Описание
accept file_extension
audio/*
video/*
image/*
media_type
Указывает типы файлов, которые принимает сервер (только для type="file")
align left
right
top
middle
bottom
Не поддерживается в HTML5.
Задает выравнивание входного изображения (только для type="image")
alt text Задает альтернативный текст для изображений (только для type="image")
autocomplete on
off
Указывает, должен ли элемент <input> включать Автозаполнение
autofocus autofocus Указывает, что элемент <input> должен автоматически получать фокус при загрузке страницы
checked checked Указывает, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type="checkbox" or type="radio")
dirname inputname. dir Указывает, что направление текста будет отправлено
disabled disabled Указывает, что элемент <input> должен быть отключен
form form_id Указывает одну или несколько форм, к которым принадлежит элемент <input>
formaction URL Задает URL-адрес файла, который будет обрабатывать элемент управления вводом при отправке формы (для type="submit" and type="image")
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Указывает, как данные формы должны кодироваться при отправке на сервер (для type="submit" and type="image")
formmethod get
post
Определяет метод HTTP для отправки данных в URL-адрес действия (для type="submit" and type="image")
formnovalidate formnovalidate Определяет, что элементы формы не должны проверяться при отправке
formtarget _blank
_self
_parent
_top
framename
Указывает, где отображать ответ, полученный после отправки формы (для type="submit" and type="image")
height pixels Задает высоту элемента <input> (только для type="image")
list datalist_id Ссылается на элемент <datalist>, содержащий предварительно определенные параметры для элемента <input>
max number
date
Задает максимальное значение для элемента <input>
maxlength number Указывает максимальное число символов, допустимое в элементе <input>
min number
date
Задает минимальное значение для элемента <input>
multiple multiple Указывает, что пользователь может ввести более одного значения в элементе <input>
name text Задает имя элемента <input>
pattern regexp Задает регулярное выражение, которое проверяется значением <input> элемента
placeholder text Задает краткую подсказку, описывающую ожидаемое значение элемента <input>
readonly readonly Указывает, что поле ввода предназначено только для чтения
required required Указывает, что поле ввода должно быть заполнено перед отправкой формы
size number Задает ширину (в символах) элемента <input>
src URL Указывает URL-адрес изображения для использования в качестве кнопки отправки (только для type="image")
step number Задает юридические интервалы номеров для поля ввода
type button
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Указывает тип <input> элемент для отображения
value text Задает значение элемента <input>
 
width pixels Задает ширину элемента <input> (только для type="image")

Глобальные атрибуты

Тег <input> также поддерживает Глобальные атрибуты в HTML.


Event Attributes

Тег <input> также поддерживает Атрибуты событий в HTML.


Похожие страницы

HTML Учебник: HTML Forms

HTML DOM Ссылки:


Параметры CSS по умолчанию

Нет.


| HTML (Примеры)

Тег <input> (от англ. input — ввод) является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем.

Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

Основной атрибут <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file), кнопка с изображением (image) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых атрибутов.

Формы

Синтаксис

Закрывающий тег не требуется.

Атрибуты

accept
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
alt
Альтернативный текст для кнопки с изображением.
autocomplete
Включает или отключает автозаполнение.
autofocus
Устанавливает фокус в поле формы.
checked
Предварительно активированный переключатель или флажок.
dirname
Параметр, который передаёт на сервер направление текста.
disabled
Блокирует доступ и изменение элемента.
form
Связывает поле с формой по её идентификатору.
formaction
Определяет адрес обработчика формы.
formenctype
Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod
Сообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidate
Отменяет встроенную проверку данных на корректность.
formtarget
Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list
Указывает на список вариантов, которые можно выбирать при вводе текста.
max
Верхнее значение для ввода числа или даты.
maxlength
Максимальное количество символов разрешённых в тексте.
min
Нижнее значение для ввода числа или даты.
minlength
Минимальное количество символов разрешённых в тексте.
multiple
Позволяет загрузить несколько файлов одновременно.
name
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern
Устанавливает шаблон ввода.
placeholder
Выводит подсказывающий текст.
readonly
Устанавливает, что поле не может изменяться пользователем.
required
Обязательное для заполнения поле.
size
Ширина текстового поля.
src
Адрес графического файла для поля с изображением.
step
Шаг приращения для числовых полей.
type
Сообщает браузеру, к какому типу относится элемент формы.
value
Значение элемента.

Также для этого элемента доступны универсальные атрибуты.

accept

Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как MIME-тип, при нескольких значениях они перечисляются через запятую. Если файл не подходит под установленный фильтр, он не показывается в окне выбора файлов.

Применяется к полю для отправки файла (<input type="file">).

Поддержка браузерами

Can I Use input-file-accept? Data on support for the input-file-accept feature across the major browsers from caniuse.com.

Синтаксис

<input type="file" accept="<MIME-тип>" />

Значения

Имя MIME-типа в любом регистре, несколько значений перечисляются через запятую.

В HTML5 также допустимо в качестве значения указывать audio/* для выбора всех звуковых файлов, video/* для видеофайлов и image/* для всех графических файлов.

Список MIME-типов файлов.

Значение по умолчанию

Нет.

alt

Атрибут alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также предназначен для поисковых систем.

Синтаксис

<input type="image" alt="<текст>" />

Значения

Любая подходящая текстовая строка.

Значение по умолчанию

Нет.

autocomplete

Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete.

При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое.

Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.

Синтаксис

<input type="text" autocomplete="on | off" />
<input type="password" autocomplete="on | off" />
<input type="email" autocomplete="on | off" />
<input type="search" autocomplete="on | off" />
<input type="url" autocomplete="on | off" />
<input type="tel" autocomplete="on | off" />

Значения

on
Включает автозаполнение текста.
off
Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).

Значение по умолчанию

Зависит от настроек браузера.

autofocus

Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.

Синтаксис

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут autofocus не установлен.

checked

Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton) может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.

Синтаксис

<input type="radio" checked />
<input type="checkbox" checked />

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

dirname

При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname, а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr, а для текста справа налево (иврита, к примеру) значение будет rtl.

Синтаксис

<input type="text" dirname="<строка>" />
<input type="search" dirname="<строка>" />

Значения

Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют .dir.

Значение по умолчанию

Нет.

disabled

Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передаётся на сервер.

Синтаксис

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

form

Связывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами <form>, например, при создании её программно или по соображениям дизайна.

Синтаксис

<input type="<тип>" form="<идентификатор>" />
<form>...</form>

Значения

Идентификатор формы (значение атрибута id элемента <form>).

Значение по умолчанию

Нет.

formaction

Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента <form>.

Синтаксис

<input type="submit" formaction="<адрес>" />

Значения

Нет.

formenctype

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype элемента <form>, при совместном использовании formenctype и enctype последний игнорируется.

Синтаксис

<input
  type="submit"
  formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"
/>

Значения

application/x-www-form-urlencoded
Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя).
multipart/form-data
Данные не кодируются. Это значение применяется при отправке файлов.
text/plain
Пробелы заменяются знаком +, буквы и другие символы не кодируются.

Значение по умолчанию

application/x-www-form-urlencoded

formmethod

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

Синтаксис

<input type="submit" formmethod="get | post" />

Значения

Различают два метода — GET и POST, которые задаются ключевыми словами get и post.

get
Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар «имя=значение», которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ &). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup. Объём данных в методе ограничен 4 Кб.
post
Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

Значение по умолчанию

get

formnovalidate

Отменяет встроенную проверку данных введённых пользователем в форме на корректность перед отправкой формы. Такая проверка делается браузером автоматически для полей <input type="email">, <input type="url">, а также при наличии атрибута pattern или required у элемента <input>.

Синтаксис

<input type="submit" formnovalidate />

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

formtarget

Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы в виде HTML-документа.

Синтаксис

<input
  type="submit"
  formtarget="<имя фрейма> | _blank | _self | _parent | _top"
/>

Значения

В качестве значения используется имя фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имен можно указывать следующие.

_blank
Загружает страницу в новую вкладку браузера.
_self
Загружает страницу в текущую вкладку.
_parent
Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self.

Значение по умолчанию

_self

list

Указывает на список вариантов, созданный с помощью элемента <datalist>, которые можно выбирать при наборе текста. Изначально этот список скрыт и становится доступным при получении полем фокуса.

Синтаксис

<input list="<идентификатор>" />
<datalist>
  <option value="Текст1"></option>
  <option value="Текст2"></option>
</datalist>

Значения

Имя идентификатора элемента <datalist>.

Значение по умолчанию

Нет.

max

Устанавливает верхнее значение для ввода числа или даты в поле формы.

Синтаксис

<input type="number" max="<число>" />
<input type="range" max="<число>" />
<input type="date" max="<дата>" />

Значения

Целое положительное или отрицательное число (для type="number", type="range").

Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date".

Значение по умолчанию

Нет.

maxlength

Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.

Синтаксис

<input type="text" maxlength="<число>" />
<input type="password" maxlength="<число>" />

Значения

Любое целое положительное число.

Значение по умолчанию

Ввод символов не ограничен.

min

Устанавливает нижнее значение для ввода числа или даты в поле формы.

Синтаксис

<input type="number" min="<число>" />
<input type="range" min="<число>" />
<input type="date" min="<дата>" />

Значения

Целое положительное или отрицательное число (для type="number", type="range").

Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date".

Значение по умолчанию

Нет.

minlength

Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.

Синтаксис

<input type="text" minlength="<число>" />
<input type="password" minlength="<число>" />

Значения

Любое целое положительное число.

Значение по умолчанию

Нет.

multiple

Атрибут multiple позволяет указывать одновременно несколько файлов в поле для загрузки файлов, а также несколько адресов электронной почты. При использовании двух и более почтовых адресов они должны перечисляться через запятую.

Синтаксис

<input type="file" multiple />
<input type="email" multiple />

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут multiple выключен.

name

Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введённым данным поля через скрипты.

Синтаксис

<input name="<имя>" />

Значения

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name.

Значение по умолчанию

Нет.

pattern

Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.

Поддержка браузерами

Can I Use input-pattern? Data on support for the input-pattern feature across the major browsers from caniuse. [ 0-9]+$Любое число.[0-9]{6}Почтовый индекс.\d+(,\d{2})?Число в формате 1,34 (разделитель запятая).\d+(\.\d{2})?Число в формате 2.10 (разделитель точка).\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}IP-адрес

placeholder

Выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.

Поддержка браузерами

Can I Use input-placeholder? Data on support for the input-placeholder feature across the major browsers from caniuse.com.

Синтаксис

<input placeholder="<текст>" />

Значения

Текстовая строка. Если внутри строки предполагается пробел, её необходимо брать в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

readonly

Когда к элементу <input> добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов и данные отправляются на сервер.

Синтаксис

<input type="text" readonly />
<input type="password" readonly />

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

required

Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.

Синтаксис

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут required выключен.

size

Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.

Синтаксис

<input type="text" size="<число>" />
<input type="password" size="<число>" />

Значения

Любое целое положительное число.

Значение по умолчанию

20

src

Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате PNG и JPEG.

Синтаксис

<input type="image" src="<адрес>" />

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

step

Устанавливает шаг изменения числа для ползунков и полей ввода чисел.

Синтаксис

<input type="number" step="<число>" />
<input type="range" step="<число>" />

Значения

Любое целое или дробное число.

Значение по умолчанию

1

type

Сообщает браузеру, к какому типу относится элемент формы.

Поддержка браузерами

email, tel, url:

Can I Use input-email-tel-url? Data on support for the input-email-tel-url feature across the major browsers from caniuse.com.

color:

Can I Use input-color? Data on support for the input-color feature across the major browsers from caniuse. com.

range:

Can I Use input-range? Data on support for the input-range feature across the major browsers from caniuse.com.

number:

Can I Use input-number? Data on support for the input-number feature across the major browsers from caniuse.com.

search:

Can I Use input-search? Data on support for the input-search feature across the major browsers from caniuse.com.

date, time, datetime:

Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.

Синтаксис

<input
  type="button|checkbox|file|hidden|image|password|radio|reset|submit|text"
/>

Значения

Значения type:

button
Кнопка.
checkbox
Флажки. Позволяют выбрать более одного варианта из предложенных.
file
Поле для ввода имени файла, который пересылается на сервер.
hidden
Скрытое поле. Оно никак не отображается на веб-странице.
image
Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password
Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio
Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
reset
Кнопка для возвращения данных формы в первоначальное значение.
submit
Кнопка для отправки данных формы на сервер.
text
Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

В HTML5 добавлены новые значения:

color
Виджет для выбора цвета.
date
Поле для выбора календарной даты.
datetime
Указание даты и времени.
datetime-local
Указание местной даты и времени.
email
Для адресов электронной почты.
number
Ввод чисел.
range
Ползунок для выбора чисел в указанном диапазоне.
search
Поле для поиска.
tel
Для телефонных номеров.
time
Для времени.
url
Для веб-адресов.
month
Выбор месяца.
week
Выбор недели.

Значение по умолчанию

text

value

Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента <input>, а значение — атрибутом value.

В зависимости от типа элемента атрибут value выступает в следующей роли:

  • для кнопок (input type="button | reset | submit") устанавливает текстовую надпись на них;
  • для текстовых полей (input type="password | text") указывает предварительно введённую строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введённый в атрибуте value;
  • для флажков и переключателей (input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь.
  • для файлового поля (input type="file") не оказывает влияние.

Синтаксис

<input value="<текст>" />

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

Значения ARIA role

  • <input type=button>role=button
  • <input type=checkbox>role=checkbox
  • <input type=email>role=textbox
  • <input type=image>role=button
  • <input type=number>role=spinbutton
  • <input type=radio>role=radio
  • <input type=range>role=slider
  • <input type=reset>role=button
  • <input type=search>role=searchbox
  • <input type=submit>role=button
  • <input type=tel>role=textbox
  • <input type=text>role=textbox
  • <input type=text, search, tel, url, или email с атрибутом list>role=combobox
  • <input type=url>role=textbox

Спецификации

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>INPUT</title>
  </head>

  <body>
    <form name="test" method="post" action="input1. php">
      <p>
        <b>Ваше имя:</b><br />
        <input type="text" size="40" />
      </p>
      <p>
        <b>Каким браузером в основном пользуетесь:</b><br />
        <input type="radio" name="browser" value="ie" />
        Internet Explorer<br />
        <input type="radio" name="browser" value="opera" />
        Opera<br />
        <input
          type="radio"
          name="browser"
          value="firefox"
        />
        Firefox<br />
      </p>
      <p>
        Комментарий<br />
        <textarea
          name="comment"
          cols="40"
          rows="3"
        ></textarea>
      </p>
      <p>
        <input type="submit" value="Отправить" />
        <input type="reset" value="Очистить" />
      </p>
    </form>
  </body>
</html>

Ссылки

| Справочник HTML



Элемент <input> (от англ. "input" ‒ «ввод») является основным элементом формы (HTML тег <form>) и определяет пользовательское поле для ввода информации.

Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу. Это могут быть разнообразные кнопки, поля ввода текста, пароля или имени файла, переключатели, флажки и т.д.

Так как тег <input> является встроенным, то его не обязательно заключать в форму (тег <form>), но если вы отправляете данные на сервер, то это необходимо сделать. А вот, если вы обращаетесь к тегу <input>, например, при помощи скриптов, то достаточно его разместить внутри любого элемента, который может содержать инлайн-теги.

Примечание: Для определения метки для элемента <input> используется элемент <label>.

Примечание: Тег <input> не может содержать какой-либо контент, он может содержать только атрибуты.

Синтаксис

<input type=". ..">

Закрывающий тег

Не требуется.

Атрибуты

type
Основной атрибут, определяет тип элемента ввода. Если атрибут не указан, то по умолчанию используется значение "text".
Возможные значения:
  • button – определяет активную кнопку с надписью.
  • checkbox – определяет элементы управления флажки.
  • color – генерирует палитру цветов, давая возможность пользователям выбирать значения цветов в шестнадцатеричном формате.
  • date – определяет поле для ввода календарной даты (год, месяц, день).
  • datetime – определяет поле для ввода даты и времени.
  • datetime-local – определяет элемент управления датой и временем (год, месяц, день, час, минуты, секунды и доли секунды (без часового пояса)).
  • email – определяет поле для адреса электронной почты.
  • file – определяет элемент управления с кнопкой "Обзор", для выбора и загрузки файлов.
  • hidden – определяет скрытое поле ввода (не отображается на Web-странице).
  • image – определяет изображение, как кнопку для отправки данных формы на сервер. Вместе с этим значением нужно использовать атрибут src, чтобы определить адрес изображения и атрибут alt для определения альтернативного текста. Можно также задать атрибуты width и height, чтобы определить размер изображения в пикселях.
  • month – позволяет выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца (например: 2017-07).
  • number – определяет поле для ввода чисел.
  • password – определяет поле для ввода пароля (замаскированные символы).
  • radio – создает радио-кнопки, которые являются взаимоисключающими, если выбрать одну радио-кнопку, то все остальные становятся неактивными. Атрибут checked указывает, что вариант выбран по умолчанию.
  • range – создает ползунок для ввода чисел в указанном диапазоне. Если соответствующие атрибуты не указаны, то значения по умолчанию:
    • min = 1
    • max = 100
    • value = min + ( max - min ) / 2, или min , если max < min
    • step = 1
  • reset – создает кнопку сброса данных формы в первоначальное состояние.
  • search – определяет текстовое поле для ввода строки поиска.
  • submit – определяет кнопку "Отправить" для отправки данных формы на сервер.
  • tel – определяет поле для ввода телефонного номера.
  • text – определяет однострочное текстовое поле (ширина по умолчанию составляет 20 символов).
  • time – определяет поле для ввода времени в 24-часовом формате, например 17:30.
  • url – определяет поле для ввода URL-адреса.
  • week – позволяет выбрать одну неделю, после чего обеспечит ввод данных в формате года и недели (например: 2017-W15).

Не все браузеры поддерживают типы, добавленные в HTML5.
Если браузер не поддерживает какой-то из новых типов, то он будет считать, что это тип text.


accept
Устанавливает типы/форматы файлов, которые можно прикреплять к форме (отправлять на сервер). Атрибут используется только для <input type = "file">.

alignУстарел
Определяет выравнивание ввода изображения (только для <input type = "image">).

alt
Альтернативный текст для кнопки с изображением.

autocompleteHTML5
Включает или отключает автозаполнение.

autofocusHTML5
Указывает, что элемент <input> должен автоматически получать фокус при загрузке страницы.

borderУстарел
Толщина рамки вокруг изображения.

checked
Указывает, что элемент должен быть предварительно выбран при загрузке страницы (только для <input type = "checkbox"> и <input type = "radio">).

dirnameHTML5
Параметр, который передаёт на сервер направление текста.

disabled
Блокирует доступ и изменение элемента.

formHTML5
Задает форму (элемент <form>) к которой элемент управления принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе.

formactionHTML5
Указывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для <input type = "image"> и <input type = "submit">).

formenctypeHTML5
Определяет, как данные формы должны быть закодированы при передаче на сервер (только для <input type = "image"> и <input type = "submit">).

formmethodHTML5
Определяет метод HTTP для отправки данных (только для <input type = "image"> и <input type = "submit">).

formnovalidateHTML5
Отменяет встроенную проверку данных на корректность (только для <input type = "submit">).

formtargetHTML5
Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы. По умолчанию установлено значение _self - отображает ответ в текущем окне. Атрибут используется только только для <input type = "image"> и <input type = "submit">.

listHTML5
Указывает на список вариантов, которые можно выбирать при вводе текста. Значение атрибута должно соответствовать идентификатору элемента <datalist>.

maxHTML5
Верхнее значение для ввода числа или даты.

maxlengthHTML5
Указывает максимально допустимое количество символов в элементе. Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются).

min
Нижнее значение для ввода числа или даты.

minlengthHTML5
Минимальное количество символов разрешённых в тексте. Только для элементов управления следующих типов: text, search, tel, url, email и password.

multipleHTML5
Указывает, что пользователь может ввести более одного значения в элементе (только для <input type = "file"> и <input type = "email">).

name
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

patternHTML5
Устанавливает шаблон ввода с которым сверяется значение введённое в элементе. Синтаксис регулярного выражения соответствует языку JavaScript. Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются).

placeholderHTML5
Выводит подсказывающий текст. Атрибут может быть использован с полями данных определенных типов (атрибут type) со значениями email, password, search, tel, text и url).

readonly
Указывает, что поле ввода доступно только для чтения.

requiredHTML5
Обязательное для заполнения поле.

size

src
Задаёт URL-адрес изображения, которое используется в качестве кнопки отправки (только для <input type = "image">).

stepHTML5
Шаг приращения для числовых полей. Только для элементов управления следующих типов: number, range, tel, date, date, time, datetime-local, month, time и week (остальные игнорируются). Значение по умолчанию 1.

value
Значение элемента.

widthHTML5

Элемент поддерживает глобальные атрибуты и события.

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

В HTML5 атрибут align не поддерживается.

В HTML5 у тега <input появилось несколько новых атрибутов, а у атрибута type несколько новых значений.

Пример использования:

HTML форма с тремя полями ввода данных — двумя текстовыми и одной кнопкой отправки данных:

Пример HTML:

Попробуй сам
<form action="action_form.php">
   Имя: <input type="text" name="firstname"><br>
   Фамилия: <input type="text" name="lastname"><br>
   <input type="submit" value="Отправить">
</form>

Спецификации

Поддержка браузерами

Определяет ширину для элемента (в символах). Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются). Значение по умолчанию 20 символов.Задает ширину элемента (только для <input type = "image">).
Элемент
<input> 2+ 1+ 1+ 1+ 1+ 1+
Элемент
<input> 1+ 1+ 6+ 1+

Попробуйте сами - Примеры

Как создать переключатели (<input type="radio">):
Использование переключателей

Как создать флажки (<input type="checkbox">):
Использование флажков

Как создать кнопку отправки данных (<input type="submit">):
Использование submit

Как создать ползунковый регулятор (<input type="range">):
Регулятор

Как создать поле для поиска (<input type="search">):
Поле для поиска


Учебник HTML

HTML уроки: HTML элемент input

HTML Элементы



HTML тег input | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 27. 02.2009

Тег <input> (с англ. ввод данных) позволяет создавать элементы интерфейса: кнопки, текстовые поля, переключатели и флажки. Основной метод получения информации от пользователя (читателя) базируется на этом теге. В зависимости от атрибута type, отображается в виде различных элементов управления.
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<form action="...">
<input type="..."/>
</form>

Атрибуты

Основные Вспомогательные События

accept список типов содержимого, через запятую, которые сервер-обработчик формы будет корректно обрабатывать
acceskey указываем горячую клавишу
align задает выравнивание поля в форме
  • bottom — нижняя граница поля выравнивается по окружающему тексту (по умолчанию)
  • left — по левому краю окна. Текст обтекает справа
  • middle — центр картинки по базовой линии текущей строки
  • right — по правому краю окна. Текст обтекает слева
  • top — верх поля выравнивается по самому высокому элементу строки
alt альтернативный текст для кнопки с изображением
border толщина рамки.
Отсутствует в спецификации HTML 4.01!
checked флаг. Определяет переключатель как установленный <input type="checkbox" checked/>
class определяет имя используемого класса
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
disabled флаг. Делает элемент неактивным
hspace отступ по горизонтали (по умолчанию 0)
Отсутствует в спецификации HTML 4.01!
id уникальный индетификатор
ismap флаг, определяющий, что картинка является картой-изображением
lang определяет язык отображаемого документа
maxlength задает максимальное количество символов, которое может ввести пользователь в текстовое поле
name уникальное имя элемента
onblur потеря фокуса элементом
onclick щелчек на элементе
ondblclick двойной щелчек на элементе
onchange потеря фокуса элементом при условии, что его содержимое изменилось
onfocus получение фокуса элементом
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
onselect выделение какого-либо текста в текстовом поле
readonly флаг. Запрещает изменение данных поля пользователем
size ширина текстового поля в символах
src URL файла с изображением
style задает встроенную таблицу стилей
tabindex порядок обхода элементов с помощью Tab
title всплывающая подсказка
type тип элемента управления
  • button — кнопка
  • checkbox — флаг
  • file — поле для ввода имени файла
  • hidden — скрытое поле. На странице не отображается
  • image — кнопка с изображением
  • password — текстовое поле в котором символы показываются звездочками
  • radio — переключатели. Выбор одного варианта из нескольких
  • range — слайдер (отсутствует в спецификации HTML 4.01, поддерживает Opera, Safari и Chrome)
  • reset — кнопка возврата данных формы к значениям по умолчанию
  • search — поле поиска (отсутствует в спецификации HTML 4.01, поддерживает Safari и Chrome)
  • submit — кнопка для отправки данных на сервер
  • text — текстовое поле
usemap применяет к изображению карту <MAP>
value значение элемента
vspace отступ по вертикали (по умолчанию 0)
Отсутствует в спецификации HTML 4. 01!
Пример

Флаг

<input type="checkbox" checked="checked"/> флаг


Переключатель

<input type="radio"/> переключатель


Поле для отправки файла

<input type="file" value="имя файла"/>


Обычное текстовое поле

<input type="text" value="Логин"/>


Поле для ввода пароля

<input type="password" value="пароль"/>


Кнопка

<input type="button" value="Обычная кнопка"/>


Неактивная кнопка

<input type="button" value="Неактивная кнопка" disabled="disabled"/>

Рекомендации по использованию
  • должен быть закрыт слешем (<input.../>)
  • обязательных атрибутов нет
  • по умолчанию тег <input> имеет тип type="text"
  • в таблицах стилей явно указывайте цвет фона полей, т. к. по умолчанию в браузере цвет фона полей может отличаться от белого
  • в больших формах используйте атрибут tabindex для последовательного tab-обхода полей
  • хорошим тоном является указание атрибута maxlength, чтобы пользователь не мог ввести заведомо больше символов, чем отведено в базе данных для этого поля (согласовывается с или задается программистами)
  • некотрые браузеры подсвечивают поля в фокусе (Chrome, Safari)

Твой код:
<html> <head> <title></title> </head> <body> <div> <input type="checkbox" checked="checked"/> флаг </div> <div> <input type="radio"/> переключатель </div> <div> <input type="file" value="имя файла"/> </div> <div> <input type="text" value="Логин"/> </div> <div> <input type="password" value="пароль"/> </div> <div> <input type="button" value="Обычная кнопка"/> </div> <div> <input type="button" value="Неактивная кнопка" disabled="disabled"/> </div> </body> </html> Сделай код и жми тут

Результат:
большой полигон

Формы. Теги форм

Формы есть на всех сайтах, которые предоставляют возможность поиска по сайту или имеют страницу (блок) "Контакты". Создаются формы с помощью тега <form> и ряда тегов <input>, которые имеют разный атрибут type, и в зависимости от него отвечают за разные поля ввода или другие элементы (радиокнопки, флажки).

Рассмотрим, как формируются поля форм и как можно использовать плагин Emmet для ускорения набора кода форм в вашем редакторе кода.

Тег form

Итак, основной тег <form> - является блочным (имеет свойство display: block). Закрывающий тег обязателен. Размещать внутри тега <form> можно любые другие html-теги, которые, как правило, служат для форматирования полей формы и их  заголовков.

Основными атрибутами являются action="путь к php-файлу" и method="get|post":

Emmet abbr: form <form action="contact.php"></form> Emmet abbr: form:get <form action="" method="get"></form> Emmet abbr: form:post <form action="" method="post"></form>

Emmet abbr: form

   <form action="contact. php"></form>

 

Emmet abbr: form:get

    <form action="" method="get"></form>

 

Emmet abbr: form:post

    <form action="" method="post"></form>

В атрибуте action должен быть записан абсолютный или относительный путь к файлу, как правило серверного скрипта, например, php или asp, который будет обрабатывать значения полей, отправленных формой.

Метод get или post определяет, каким образом будут отправлены данные. Метод GET (get) отправляет данные, записывая их в адресной строке браузера. Длина такой строки невелика, поэтому большие сообщения или изображение таким способом отправить не удастся. Метод POST (post) отправляет данные скрытым способом + позволяет передать достаточно весомые данные (сообщение, изображение, zip-архив). Размер передаваемой информации зависит от настроек сервера. Обычно это от 2 до 16 Мб.

Текстовые поля и их разновидности

Вы наверняка сталкивались с заполнением полей с подписью Имя (Логин), Email, Пароль и, возможно загружали что-либо с помощью кнопки "Обзор" в текстовом поле. Все они формируются с помощью тега <input>. Рассмотрим для них аббревиатуры Emmet:

Emmet abbr: input <input type="text" /> Emmet abbr: inp <input type="text" name="" /> Emmet abbr: input:text, input:t ( аналогично inp) <input type="text" name="" /> Emmet abbr: input:hidden, input:h (аналог [type=hidden]) <input type="hidden" name="" /> Emmet abbr: input:search (аналог inp[type=search]) <input type="search" name="" /> Emmet abbr: input:email (аналог inp[type=email]) <input type="email" name="" /> Emmet abbr: input:url (аналог inp[type=url]) <input type="url" name="" /> Emmet abbr: input:password, input:p (аналог inp[type=password]) <input type="password" name="" /> Emmet abbr: input:file, input:f (аналог inp[type=file]) <input type="file" name="" />

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

Emmet abbr: input

    <input type="text" />

 

Emmet abbr: inp

    <input type="text" name="" />

 

Emmet abbr: input:text, input:t ( аналогично  inp)

    <input type="text" name="" />

 

Emmet abbr: input:hidden, input:h (аналог [type=hidden])

 

    <input type="hidden" name="" />

 

Emmet abbr: input:search  (аналог inp[type=search])

    <input type="search" name="" />

 

Emmet abbr: input:email (аналог inp[type=email])

    <input type="email" name="" />

 

Emmet abbr: input:url (аналог inp[type=url])

    <input type="url" name="" />

 

Emmet abbr: input:password, input:p (аналог inp[type=password])

    <input type="password" name="" />

 

Emmet abbr: input:file, input:f  (аналог inp[type=file])

    <input type="file" name="" />

Среди перечисленных полей большинство относится к спецификации HTML4. HTML5 ввел такие поля, как search, url, email соответственно для полей, предназначенных для поиска информации, ввода адреса сайта или email-a.

Внутри этих полей реализована проверка правильности ввода, например, соответствие email-адреса общепринятому, т.е. наличие символа @, например. Если вы введете неверный email или url, браузер подсветит это поле красным (как правило) и при нажатии на кнопку отправки формы попросит вас корректно ввести адрес почты или адрес сайта, который начинается с http://.

Желательно еще добавлять в  поле атрибут required, т.е. обязательный, для того чтобы это поле было заполнено пользователем.

Теги кнопок

Кнопки, как правило, завершают любую форму. Добавляются в форму с помощью тега <input>. Они бывают нескольких типов (атрибут type):

  • submit - отправляет форму на сервер. Пожалуй, главная кнопка в форме.
  • reset - очищает поля формы до значений по умолчанию. Сейчас используется все реже и реже.
  • button - обычная кнопка, с которой, как правило, связан код на JavaScript.
  • image - аналог кнопки submit, но с атрибутом src="путь к файлу изображения", который позволяет указать картинку, которая будет заменять кнопку. Был очень актуален до CSS3, т.к. позволял сделать кнопку-изображение с закругленными краями и градиентом. Сейчас используется редко, т.к. возможности CSS3 уже позволяют сделать очень многое с помощью правил форматирования.

Также вы можете использовать тег <button>, который в обычном виде является аналогом тега <input type="button">, но может также иметь свой атрибут type="submit" | "reset" | "image", соответствующие аналогичным в теге <input>.

Рассмотрим применение Emmet для вставки тегов кнопок:

Emmet abbr: input:submit, input:s <input type="submit" value="" /> Emmet abbr: input:reset (аналог input:button[type=reset]) <input type="reset" value="" /> Emmet abbr: input:button, input:b <input type="button" value="" /> Emmet abbr: input:image, input:i <input type="image" src="" alt="" /> Emmet abbr: button:submit, button:s, btn:s (аналог button[type=submit]) <button type="submit"></button> Emmet abbr: button:reset, button:r, btn:r (аналог button[type=reset]) <button type="reset"></button> Emmet abbr: button:disabled, button:d, btn:d (аналог button[disabled. ]) <button disabled="disabled"></button>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

Emmet abbr: input:submit, input:s

    <input type="submit" value="" />

 

Emmet abbr: input:reset (аналог input:button[type=reset])

    <input type="reset" value="" />

 

Emmet abbr: input:button, input:b

    <input type="button" value="" />

 

Emmet abbr: input:image, input:i

    <input type="image" src="" alt="" />

 

Emmet abbr: button:submit, button:s, btn:s (аналог button[type=submit])

    <button type="submit"></button>

 

Emmet abbr: button:reset, button:r, btn:r (аналог button[type=reset])

    <button type="reset"></button>

 

Emmet abbr: button:disabled, button:d, btn:d (аналог button[disabled. ])

    <button disabled="disabled"></button>

Флажки (checkboxes)

Предназначены для множественного выбора элементов. Например, в форме необходимо отметить, какие языки вы знаете из перечисленных.

Для оформления флажков часто используются теги label. Поскольку элемент типа checkbox  также является одним из вариантов тега input, то текст, который размещен рядом с флажком, как бы к нему не относится. А тег label позволяет указать принадлежность текста инпуту - для этого в label записывается атрибут for cо значением в виде id соответствующего <input type="checkbox">. С одной стороны, тег label при клике на тексте позволяет выделить соответствующий флажок, с другой - label помогают в форматировании внешнего вида текста. Для них часто задают margin, padding, font-family, color и др. css-свойства.

Обратите внимание, как в разметке использованы теги input и label, а также на css-правила для label в тегах <style>:

<style> . form-line { margin-bottom: 10px; } label { display: inline-block; vertical-align: top; margin-left: 10px; } </style> <form name="langForm"> <div> <input type="checkbox" name="lang1" value="ru" checked> <label for="lang1">Русский</label> </div> <div> <input type="checkbox" name="lang2" value="ua" checked> <label for="lang2">Украинский</label> </div> <div> <input type="checkbox" name="lang3" value="by"> <label for="lang3">Белорусский</label> </div> <div> <input type="checkbox" name="lang4" value="en"> <label for="lang4">Английский</label> </div> <div> <input type="checkbox" name="lang5" value="gr"> <label for="lang5">Немецкий</label> </div> <div> <input type="checkbox" name="lang6" value="fr"> <label for="lang6">Французский</label> </div> </form>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<style>

    . form-line {

        margin-bottom: 10px;

    }

    label {

        display: inline-block;

        vertical-align: top;

        margin-left: 10px;

    }

</style>

<form name="langForm">

<div>

    <input type="checkbox" name="lang1" value="ru" checked>

    <label for="lang1">Русский</label>

</div>

<div>

    <input type="checkbox" name="lang2" value="ua" checked>

    <label for="lang2">Украинский</label>

</div>

<div>

 

    <input type="checkbox" name="lang3" value="by">

    <label for="lang3">Белорусский</label>

</div>

<div>

    <input type="checkbox" name="lang4" value="en">

    <label for="lang4">Английский</label>

</div>

<div>

    <input type="checkbox" name="lang5" value="gr">

    <label for="lang5">Немецкий</label>

</div>

<div>

    <input type="checkbox" name="lang6" value="fr">

    <label for="lang6">Французский</label>

</div>

</form>

Для того чтобы выделить какой-либо флажок по умолчанию, для него используют атрибут checked (т. е. выбранный).

<input type="checkbox" name="lang1" value="ru" checked> <label for="lang1">Русский</label>

<input type="checkbox" name="lang1" value="ru" checked>

<label for="lang1">Русский</label>

Emmet аббревиатуры для checkbox и label:

input:checkbox, input:c <input type="checkbox" name="|"> label <label for="|"></label>

input:checkbox, input:c

<input type="checkbox" name="|">

 

label

<label for="|"></label>

Для оформления checkbox-ов существует довольно много рецептов и плагинов. Большая часть из них собрана в этой статье.

Переключатели или радио-кнопки (radio)

Предназначены для одиночного выбора среди нескольких вариантов. Например, в форме необходимо отметить, какой работой вы занимаетесь и работаете ли вообще.

Отличие переключателей от флажков заключается не только во внешнем виде.

Для того чтобы организовать единичный выбор из множества вариантов, у группы переключателей должно быть одно и то же имя, т.е. атрибут name одинаков для всех radio-кнопок данного блока:

<form name="jobForm"> <div> <input type="radio" name="job"> <label for="job1">Работаю постоянно</label> </div> <div> <input type="radio" name="job"> <label for="job2">Работа временная или сезонная</label> </div> <div> <input type="radio" name="job"> <label for="job3">Не работаю</label> </div> <div> <input type="radio" name="job"> <label for="job4">Сижу дома с ребенком</label> </div> <div> <input type="radio" name="job"> <label for="job5">Учусь</label> </div> </form>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<form name="jobForm">

    <div>

        <input type="radio" name="job">

        <label for="job1">Работаю постоянно</label>

    </div>

    <div>

        <input type="radio" name="job">

        <label for="job2">Работа временная или сезонная</label>

    </div>

    <div>

        <input type="radio" name="job">

        <label for="job3">Не работаю</label>

    </div>

    <div>

        <input type="radio" name="job">

        <label for="job4">Сижу дома с ребенком</label>

    </div>

    <div>

        <input type="radio" name="job">

        <label for="job5">Учусь</label>

    </div>

</form>

Обратите внимание, что у всех <input type="radio"> атрибут name="job", а вот id разные, т. к. они связаны с тегом label.

Emmet аббревиатуры для radio:

input:radio, input:r, inp[type=radio] <input type="radio" name="|">

input:radio, input:r, inp[type=radio]

 

<input type="radio" name="|">

Кстати, предыдущий пример можно полностью оформить в виде тегов с помощью аббревиатуры Emmet. Придется только текст в label дописать:

form[name="jobForm"]>.form-line*5>input:r[name=job][id="job$"]+label[for="job$"]

form[name="jobForm"]>.form-line*5>input:r[name=job][id="job$"]+label[for="job$"]

Скопируйте аббревиатуру и нажмите клавишу Tab в самом конце (без пробела), чтобы ее раскрыть.

Пример оформления радио-кнопок и флажков из статьи:

See the Pen Using Pseudo Elements for Input Styling by Alex Bergin (@abergin) on CodePen.

Просмотров: 214

Html формы для сайта — теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ

Главная / Как устроены сайты / Html за 10 уроков

23 января 2021

  1. Зачем нужны и как работают формы на современных сайтах
  2. Тег Input
  3. Input с различными значениями для Type
  4. Другие атрибуты тэга Input и примеры их использования
  5. Выпадающие списки, текстовые области и другие формы
  6. Select и Option — тэги выпадающих списков
  7. Атрибуты тега Option
  8. Textarea — создание текстового поля в форме
  9. Label — для чего нужен этот Html тэг в форме
  10. Fieldset и Legend — разбиваем форму на части

Приветствую вас, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу поговорить о такой неотъемлемой составляющей верстки любого сайта, как HTML формы. Какой бы не был движок вашего сайта (cms), на нем обязательно будут в том или ином виде использоваться формы, созданные с помощью тегов Form и Input, а так же атрибутов и параметров Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.

Ну, и еще можно добавить к этому элементы для создания выпадающих списков и текстовых полей — Select, Option, Textarea, Label, Fieldset, Legend.

Зачем нужны и как работают формы на современных сайтах

Та же строка поиска по сайту (здесь описан поиск от яндекса) создается с использованием этих тэгов, а поиск то на вашем проекте будет обязательно. Поэтому понимание того, как они устроены и работают, вам совсем не помешает для успешной работы над дизайном, да и при самостоятельной раскрутке и продвижении будет не лишним.

Так, с обоснованием необходимости изучения этих элементов, думаю, вопросов больше не должно возникнуть, поэтому самое время переходить непосредственно к изучению их возможных вариантов.

Да, хочу еще напомнить, что мы уже успели рассмотреть много материалов на тему языка гипертекстовой разметки, например, узнали принципы формирования цветов в Html, трех видов списков на тегах ul, ol, li, dl) и принципы создания таблиц на тегах Tr, Th, Td, Table.

По своей сути формы состоят из элементов, для создания которых внутри основного контейнера из тегов Form вставляют различные тэги — Checked, Value, Checkbox, Radio, Checkbox, Submit и др. Нам лишь нужно будет расположить ее код в любом удобном для этого месте шаблона сайта, указав с помощью тегов и их атрибутов, как она должна будет выглядеть.

Это может быть текстовое поле с кнопкой отправки введенного запроса, варианты выбора с радиокнопками (когда можно оставить нажатой только одну из предоставляемых кнопок), несколько текстовых полей с кнопкой для отправки (обратная связь описанная тут) и многое другое.

Например, в случае «поиска», с помощью атрибута Value можно задать, что именно будет написано на кнопке расположенной рядом с полем для ввода запроса. Данные вводимые в формах должны быть в дальнейшем каким-то образом обработаны.

Например, в случае обратной связи пользователь, после того как заполнит поле со своим именем, введет свой E-mail и текст сообщения, а затем нажмет на кнопку отправки, будет вправе надеяться на отправку данных из формы на E-mail автора сайта. Но реализовать такое с помощью только одного языка гипертекстовой разметки (здесь читайте что такое Html, теги и валидатор W3C), к сожалению, не возможно.

Для этих целей потребуется специальная программа обработчик, которая после нажатия пользователем на кнопку отправки возьмет все данные из полей обратной связи и отправит их на E-mail владельцу ресурса. Какая именно программа будет это делать, вы должны указать сами с помощью атрибута Action.

Обычно программа обработки представляет из себя скрипт, написанный на языке PHP. Поэтому в атрибуте Action тэга Form вы должны будете прописать путь к файлу этого скрипта, лежащего на сервере вашего хостинга. Приведу в качестве примера подписку на RSS ленту моего блога посредством E-mail:

Немного непонятно, наверное, кажется по началу, но, думаю, что все прояснится по мере дальнейшего рассказа.

Теги Form и Input для создания кнопок, чекбоксов и радиокнопок

Любая форма должна быть заключена в открывающий и закрывающий тэги Form. Это своеобразный контейнер для их создания. У этого тега имеется ряд обязательных и необязательных атрибутов:

  1. Name – уникальное имя, которое нужно указывать, если в Html файле, где вы что-то делаете, будет использоваться несколько вебформ
  2. Action – обязательный атрибут указывающий путь к скрипту, которому будут переданы данные из нее для дальнейшей обработки
  3. Method – с помощью него вы можете изменить метод передачи данных из этой вебформы скрипту файла обработчика. Если вы его не укажете, то по умолчанию будет использоваться метод Get, который, собственно говоря, предназначен в основном для переменных и коротких сообщений, и к тому же открытым способом передавая данные через адресную строку браузера. Для передачи данных форм скрипту обработчика все же лучше использовать метод POST, предназначенный специально для передачи текстовых сообщений закрытым способом

Рассмотрим остальные тэги, позволяющие создавать разнообразные вебформы. Самый универсальный – это Input. Внутри него обязательно прописывают атрибут Type, который определяет, что именно будет из себя представлять HTML форма, созданная с помощью этого тэга.

C помощью Input и Type можно создавать следующие элементы:

  1. однострочные текстовые поля (Type="Text")
  2. поля для ввода пароля (Type="Password")
  3. чекбоксы (Type="Checkbox")
  4. радиокнопки (Type="Radio")
  5. скрытые поля (Type="Hidden")
  6. обычные кнопки (Type="Button")
  7. кнопки для отправки данных в обработчик (Type="Submit")
  8. кнопки для приведения вебформы к исходному состоянию (Type="Reset")
  9. поля для загрузки файлов на сервер (Type="File)
  10. кнопки с изображением (Type="Image")

Input не имеет закрывающего тега. Что именно будет представлять из себя вебформа, созданная с помощью него, целиком и полностью зависит от параметра указанного в атрибуте Type. Если Type не указан, то по умолчанию будет создано текстовое поле.

Примеры форм, созданных на Input с различными значениями для Type

Другие атрибуты тэга Input и примеры их использования

Рассмотрим, для чего нужны остальные атрибуты:

  1. Name – в случае, если данные должны быть отправлены в скрипт программы обработчика, то вы должны обязательно указать параметр для атрибута Name. Под этим именем данные, отправленные из формы, будут фигурировать в программе обработчика информации.
  2. Size — с помощью него задается размер поля создаваемой вебформы. Значение указывается в количестве символов, которое сможет поместиться в данном поле. Если Size не указан, то ширина будет принята по умолчанию равной 24 символам
  3. Maxlength — по умолчанию количество символов, которое можно будет ввести в Html форму, не ограничено, но с помощью Maxlength можно задать это ограничение. Больше символов, чем в нем будет указано, вам ввести в поле не удастся
  4. Value — с помощью него можно задать, что именно будет написано по умолчанию в поле или же на кнопке отправки данных
  5. Checked — это атрибут-флаг, который можно вставить в Input для радиокнопок (radio) или же для чекбоксов (checkbox). В этом случае данная радиокнопка или чекбокс будут активными при загрузке страницы с вебформой (в них уже будет стоять галочка)

Теперь давайте рассмотрим все примеры формы с Input. Внешний вид текстового поля похож на вид поля для ввода пароля, поэтому рассмотрим только вариант создания Text, например, для ввода адреса электронной почты:

Теперь давайте рассмотрим создание вебформы с радиокнопками (Radio):

Обратите внимание, что в этой форме два раза используется тег Input – по разу для создания каждой из двух радиокнопок. Причем, в каждом из них прописан атрибут Name с одинаковым значением (rezultat), а значение Value разное (YES и NO).

Это означает, что при ее обработке, в случае выбора любого из переключателей, будет отправлена переменная, название которой прописано в Name, но значение этой переменной будет зависеть от того, какой именно переключатель был выбран.

Рассмотрим пример создание вебформы с чекбоксами (Checkbox):

Чекбоксы отличаются от радиокнопок возможностью выбрать сразу несколько вариантов. Name служит для определения в файле обработчика, в каком именно чекбоксе проставлены флажки,а Value — задает то значение, которое будет отослано в обработчик (если Value задан не будет, то в обработчик будет отправлен текст, расположенный рядом с данным чекбоксом).

Select, Option, Textarea, Label, Fieldset, Legend — выпадающие списки, текстовые области и другие элементы вебформ

Для начала хочу немного напомнить, что такое, собственно, вебформы и для чего они нужны на страницах сайта. Они в первую очередь призваны в удобном для пользователя виде повторять имеющиеся в любой операционной системе элементы: кнопки, поля для ввода текста, выпадающие списки, флажки, переключатели и тому подобные вещи.

Все пользователи без каких-либо дополнительный объяснений понимают назначение этих элементов и если они видят кнопку Html формы, то понимают, что на нее нужно нажать.

Причем, все составляющие ее элементы (вроде Select, Option, Textarea, Label, Fieldset, Legend) представляют собой уже законченные заготовки (контейнеры), для вставки которых достаточно будет лишь использовать нужный тег с нужными атрибутами и параметрами.

Браузеры сами знают, как отображать тот или иной элемент вебформы. Правда, варианты отображения одного и того же ее элемента в разных браузерах могут немного отличаться друг от друга, но, как правило, не существенно.

Т.о. получается, что вебформы в Html являются попыткой перенести ключевые элементы, используемые в любой операционной системе, на страницы вебсайта. Но для чего они могут понадобиться на страницах сайта?

В принципе, для того же, для чего аналогичные элементы используются в операционных системах — передача данных от пользователя. В случае форм данные от пользователя передаются на сервер, где обрабатываются специальной программой (язык гипертекстовой разметки, к сожалению, не позволяет вести обработку данных).

Хотя, данные можно отправить не только на сервер, но и, например, по электронной почте на адрес, заданный в атрибуте Action тэга Form. При отправке из Html данных на E-mail у пользователя, заполняющего поля, после нажатия им на кнопку отправки данных, запустится почтовая программа используемая на его компьютере по умолчанию.

Открывающий тег Form в таком случае должен выглядеть примерно так:

<form action="mailto:[email protected]" enctype="text/plain">

Select и Option — тэги выпадающих списков

Все элементы вебформы, которые создают поля с выпадающими списками, формируются одинаковым образом. Сначала задается контейнер поля со списком с помощью открывающего и закрывающего Html тега Select. А затем внутри этого контейнера создаются отдельные контейнеры с пунктами (элементами) этого списка. Это делается с помощью открывающих и закрывающих тэгов Option.

Получается примерно так:

Но это упрощенная конструкция, т.к. у Select и Option имеется ряд атрибутов, которые определяют свойства и внешний вид создаваемого поля с выпадающим списком.

  1. Name — вы должны задать уникальное имя для данного элемента вебформы, создаваемого с помощью Select. Это имя будет передано на сервер в программу обработчик данных в качестве имени для переменной. В качестве значения этой переменной будет передано значение атрибута Value (задается в Option для каждого пункта) того пункта выпадающего списка, который выберет пользователь.
  2. Size — с помощью него можно задать количество отображаемых пунктов. Иначе говоря, с помощь Size можно задать высоту списка, измеряемую в количестве отображаемых строк. Если вы не указываете в явном виде значение Size в теге Select, то будет использоваться значение высоты выпадающего списка по умолчанию, при этом она будет разной в случае отсутствия или присутствия в Select атрибута Multiple:
    1. Если Multiple в Select присутствует, то высота выпадающего списка в вебформе будет по умолчанию равна количеству его элементов. Т.е. будут показаны все элементы выпадающего списка с множественным выбором. См. пример множественного ниже. Если атрибут Size в Select задать меньше количества пунктов, то справа появится полоса прокрутки.
    2. Если Multiple в Select отсутствует, то высота выпадающего списка в вебформе будет по умолчанию равна одной строке. Т.е. видна будет только одна строка, а остальные пункты будут доступны только при нажатии на кнопку лифта (справа). См. пример приведенный ниже
  3. Multiple — приписывание данного атрибута в теге Select позволит вам создать выпадающий список с возможность одновременного выбора нескольких пунктов. Подробнее об этом атрибуте читайте ниже.

Формы с выпадающими списками можно разделить на два варианта. В первом варианте вы сможете выбрать только один элемент (строку) поля с выпадающим списком, во втором варианте — удерживая Ctrl или Shift сможете выбрать одновременно несколько из имеющихся пунктов.

При этом во втором варианте будут отправлены на сервер данные о всех выбранных пунктах. Какой именно выпадающий список будет создан, определяется наличием или отсутствием в тэге Select атрибута Multiple.

Multiple указывается в Select без параметра, т.к. пишется просто Multiple и все. Если он присутствует, то будет создана вебформа выпадающего списка с возможностью множественного выбора (удерживая Ctrl или Shift).

Вариант поля с выпадающим списком, в котором будет возможен множественный выбор, будет выглядеть примерно так:

LabelSelectSelectEDKtoNaNovenkogo.ruLegend

Справа приведен пример вебформы выпадающего списка со множественным выбором, который создан на основе кода, приведенного выше. Как вы видите, удерживая Ctrl или Shift можно выделить несколько пунктов одновременно.

Если в тэге Select атрибута Multiple не будет, то выбрать можно будет только один элемент этого выпадающего списка (строку).

Пример, в котором можно выбрать только один пункт, вы можете видеть здесь:

LabelSelectSelectEDKtoNaNovenkogo.ruLegend

Атрибуты тега Option

  1. SelectED — он определяет, какой пункт выпадающего списка будет выделен. Т.е. будет отображаться с одним видимым пунктом. В случае же списка с множественным выбором (если в Select присутствует атрибут Multiple) можно будет с помощью указания SelectED в Html теге Option выделить сразу несколько пунктов.
  2. Value — на сервер из вебформы поля выпадающего списка будет отправлена пара значений — имя для переменной и значение этой переменной. Так вот, имя для переменной берется из атрибута Name тэга Select, а значение этой переменной будет взято из Value тега Option, но только того пункта (или пунктов, в случае множественного выбором), который выбрал пользователь перед тем, как нажать кнопку отправки данных.
    SelectLabelSelectEDKtoNaNovenkogo.ruLegend

В создаваемый выпадающий список (с помощью Select и Option) можно добавить что-то вроде разделителей с заголовком групп, которые будут отличаться от остальных пунктов меню по начертанию шрифта.

Для создания группы из пунктов выпадающего списка нужно заключить их в открывающий и закрывающий теги формы Optgroup, а в открывающем тэге Optgroup прописать атрибут Label, в качестве параметра которого нужно будет ввести желаемое название группы.

Например так:

LabelSelectSelectEDKtoNaNovenkogo.ruLegend

Textarea — создание текстового поля в форме

Остался еще один элемент вебформ, который мы не рассмотрели — Textarea (поле с возможностью ввода многострочного текста). Создается оно с помощью парного Html тега Textarea. Причем, в нем можно переносить текст на новую строку и он будет передаваться на сервер с учетом сделанных переносов.

Итак, для создания многострочного текстового поля нужно прописать открывающий и закрывающий Textarea, а между ними вы можете добавить текст, который будет виден при загрузке страницы с вебформой. Пользователь потом сможет стереть этот текст и написать свой.

<form>
<textarea rows="3" cols="15" name="textt">Что вы можете сообщить о себе?</textarea>
</form>

Что вы можете сообщить о себе?

Вместе с Textarea можно использовать следующие атрибуты:

  1. Name — вы задаете имя для этого элемента вебформы. Оно будет передано на сервер в программу обработчика данных
  2. Cols — вы можете задать с помощью него ширину создаваемого многострочного поля в символах.
  3. Rows — задаем высоту создаваемого многострочного поля (в строках). Если строк у текста, вводимого пользователем, окажется больше, чем высота многострочного поля для текста, то справа от поля в вебформе появится полоса прокрутки.
  4. Readonly — запрет пользователям на изменение или добавление своего текста в это поле (только для чтения).
  5. Disabled — пользователь, так же как в случае с атрибутом Readonly, не сможет изменить содержимое текстового поля в вебформе, но оно изменит свой цвет на серый, обозначающий его неактивность.

Label — для чего нужен этот Html тэг в форме

Html тег Label позволяет реализовать одну очень интересную возможность в формах, которая имеется в операционных системах. Там, если вы помните, для того чтобы активировать какой-либо элемент, не обязательно щелкать именно по нему, можно щелкнуть и по названию этого элемента — все равно произойдет его активация.

В вебформах по умолчанию этого не происходит — нужно щелкать именно по самому элементу Html формы для его активации. Например, нужно щелкать по флажку, для того чтобы поставить в нем галочку. Щелчок же по тексту рядом с флажком результата не принесет. Попробуйте сами:

Как вы можете убедиться, по тексту щелкать для активации этого элемента бесполезно — нужно щелкать именно по нему самому. Вот именно такое положение вещей и призван исправить тэг Label. Он позволить сделать текст рядом с элементом веб формы кликабельным, что несомненно улучшит юзабилити.

Но как связать элемент Html формы и текст? Для этого нужно дописать в атрибут ID с уникальным параметром, а текст нужно окружить открывающим и закрывающим тэгами Label. И это еще не все. В открывающем теге Label нужно прописать атрибут For, параметр которого должен быть точно таким же, как и у атрибута ID в Html теге элемента формы. Получается примерно так:

Как вы можете видеть, теперь, благодаря использованию Label, элементы вебформы можно активировать не только щелчком по нему самому, но и щелчком по тексту, расположенному рядом.

Fieldset и Legend — разбиваем форму на части

Вы, наверное, часто видели, что большие формы в Html бывают разбиты на группы (Fieldset), которые обведены в рамочку и у каждой такой группы имеется свой заголовок (Legend). Реализуется это с помощью всего двух тэгов: Fieldset и Legend. Они парные, т.е. у них должны быть в обязательном порядке открывающий и закрывающий.

Так вот, для создания группы из составных частей вам нужно заключить все эти части в открывающий и закрывающий тэги Fieldset. А для того, чтобы задать для данной группы заголовок (Legend), вам нужно сразу же после открывающего Fieldset прописать конструкцию из открывающего и закрывающего Legend, между которыми необходимо вставить текст заголовка группы.

Вот пример создания групп с помощью Fieldset и Legend:


Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

Тип ввода HTML Атрибут

❮ HTML тег

Пример

HTML-форма с двумя полями ввода; одно текстовое поле и одна кнопка отправки:






Попробуй сам "

Дополнительные примеры "Попробуйте сами" ниже.


Определение и использование

Атрибут типа определяет тип элемент для отображения.

Если атрибут типа не указан, типом по умолчанию является «текст».


Поддержка браузера

Атрибут
тип Есть Есть Есть Есть Есть

Синтаксис

Значения атрибутов

Значение Описание
кнопка Определяет кнопку, на которую можно нажимать (обычно используется с JavaScript для активации скрипта)
флажок Определяет флажок
цвет Определяет палитру цветов
дата Определяет элемент управления датой (год, месяц, день (без времени))
локальная дата и время Определяет дату и время (год, месяц, день, время (без часового пояса)
электронная почта Определяет поле для адреса электронной почты
файл Определяет поле выбора файла и кнопку «Обзор» (для загрузки файлов).
скрыто Определяет скрытое поле ввода
изображение Определяет изображение как кнопку отправки
месяц Определяет месяц и год (без часового пояса)
номер Определяет поле для ввода числа
пароль Определяет поле пароля
радио Определяет переключатель
диапазон Определяет элемент управления диапазоном (например, ползунок).
сброс Определяет кнопку сброса
поиск Определяет текстовое поле для ввода строки поиска
представить Определяет кнопку отправки
тел Определяет поле для ввода телефонного номера
текст По умолчанию. Определяет однострочное текстовое поле
время Определяет элемент управления для ввода времени (без часового пояса)
url Определяет поле для ввода URL
неделя Определяет контроль недели и года (без часового пояса)


Другие примеры

Тип ввода: кнопка

Кнопка, активирующая JavaScript при нажатии:

Попробуй сам "

Тип ввода: флажок

Флажки позволяют пользователю выбрать один или несколько вариантов из ограниченного числа вариантов:









Попробуй сам "

Тип ввода: цвет

Выберите цвет из палитры цветов:


Попробуй сам "

Тип ввода: дата

Определите элемент управления датой:


Попробуй сам "

Тип ввода: datetime-local

Определите дату и время (без часового пояса):


Попробуй сам "

Тип ввода: электронная почта

Определите поле для адреса электронной почты (будет автоматически проверяться при отправке):


Попробуй сам "

Тип ввода: файл

Определите поле выбора файла и кнопку «Обзор». .. "кнопка (для загрузки файлов):


Попробуй сам "

Тип ввода: скрытый

Определите скрытое поле (невидимое для пользователя).

В скрытом поле часто хранится запись в базе данных, которую необходимо обновить. при отправке формы:

Попробуй сам "

Тип ввода: изображение

Определить изображение как кнопку отправки:

Попробуй сам "

Тип ввода: месяц

Определите месяц и год (без часового пояса):


Попробуй сам "

Тип ввода: число

Определите поле для ввода номера (вы также можете установить ограничения на то, какие номера принимаются):


Попробуй сам "

Используйте следующие атрибуты, чтобы указать ограничения:

  • max - указывает максимально допустимое значение
  • мин - указывает минимально допустимое значение
  • Шаг
  • - задает допустимые интервалы номеров
  • Значение
  • - указывает значение по умолчанию

Тип ввода: пароль

Определите поле пароля (символы замаскированы):


Попробуй сам "

Тип входа: радио

Радиокнопки позволяют пользователю выбрать только один из ограниченного числа вариантов:








Попробуй сам "

Тип ввода: диапазон

Определите элемент управления для ввода числа, точное значение которого не имеет значения (например, ползунок). Диапазон по умолчанию - от 0 до 100. Однако вы можете установить ограничения на числа принимаются с атрибутами min, max и step:


Попробуй сам "

Используйте следующие атрибуты, чтобы указать ограничения:

  • max - указывает максимально допустимое значение
  • мин - указывает минимально допустимое значение
  • Шаг
  • - задает допустимые интервалы номеров
  • Значение
  • - указывает значение по умолчанию

Тип входа: сброс

Определите кнопку сброса (сбрасывает все значения формы до значений по умолчанию):

Попробуй сам "

Совет: Осторожно пользуйтесь кнопкой сброса! Это может раздражать пользователей, которые случайно активируют кнопку сброса.

Тип ввода: поиск

Определите поле поиска (например, поиск по сайту или поиск Google):


Попробуй сам "

Тип ввода: представить

Тип входа: тел.

Определите поле для ввода номера телефона:


Попробуй сам "

Тип ввода: текст

Определите два однострочных текстовых поля, в которые пользователь может вводить текст:






Попробуй сам "

Тип ввода: время

Определите элемент управления для ввода времени (без часового пояса):


Попробуй сам "

Тип ввода: url

Определите поле для ввода URL:


Попробуй сам "

Совет: Safari на iPhone распознает тип ввода URL-адреса и изменяет экранную клавиатуру в соответствии с ним (добавляет. com вариант).

Тип ввода: неделя

Задайте контроль недели и года (без часового пояса):


Попробуй сам "
❮ HTML тег

: элемент Input (ввод формы) - HTML: язык разметки гипертекста

accept

Действителен только для файла типа ввода , атрибут accept определяет, какие типы файлов можно выбрать в элементе управления загрузкой файла .См. Тип ввода файла.

альтернативный

Действителен только для кнопки image , атрибут alt предоставляет альтернативный текст для изображения, отображая значение атрибута, если изображение src отсутствует или не загружается по иным причинам. См. Тип ввода изображения.

автозаполнение

(, а не логический атрибут!) Атрибут autocomplete принимает в качестве своего значения строку, разделенную пробелами, которая описывает, какой тип функции автозаполнения должен предоставлять ввод, если таковой имеется. Типичная реализация автозаполнения вызывает предыдущие значения, введенные в то же поле ввода, но могут существовать и более сложные формы автозаполнения. Например, браузер может интегрироваться со списком контактов устройства для автозаполнения адресов электронной почты в поле ввода электронной почты. См. Допустимые значения в разделе «Значения в атрибуте HTML autocomplete».

Атрибут автозаполнения действителен на скрытом , тексте , поиск , url , тел , электронная почта , дата , месяц , неделя , время , datetime-local , номер , диапазон , цвет и пароль .Этот атрибут не влияет на типы ввода, которые не возвращают числовые или текстовые данные, действительный для всех типов ввода, кроме флажка , радио , файла или любого из типов кнопок.

См. Атрибут автозаполнения HTML для получения дополнительной информации, включая информацию о безопасности паролей и о том, как автозаполнение немного отличается для скрытого , чем для других типов ввода.

автофокус

Логический атрибут, который, если он присутствует, указывает, что входные данные должны автоматически иметь фокус, когда страница завершила загрузку (или когда был отображен

, содержащий элемент).

Примечание: Элемент с атрибутом autofocus может получить фокус до того, как будет запущено событие DOMContentLoaded .

Атрибут autofocus может иметь не более одного элемента в документе. Если поместить более одного элемента, первый с атрибутом получает фокус.

Атрибут autofocus нельзя использовать для входов типа , скрытый , поскольку скрытые входы не могут быть сфокусированы.

Предупреждение: Автоматическая фокусировка элемента управления формой может сбить с толку людей с ослабленным зрением, использующих технологию чтения с экрана, и людей с когнитивными нарушениями. Когда назначается автофокус , программы чтения с экрана «телепортируют» своего пользователя в элемент управления формы, не предупреждая его заранее.

Будьте внимательны к доступности при применении атрибута autofocus . Автоматическая фокусировка на элементе управления может вызвать прокрутку страницы при загрузке.Фокус также может вызвать отображение динамической клавиатуры на некоторых сенсорных устройствах. В то время как программа чтения с экрана объявляет метку элемента управления формы, получающего фокус, программа чтения с экрана ничего не объявляет перед меткой, и зрячий пользователь на небольшом устройстве в равной степени пропустит контекст, созданный предыдущим содержимым.

захват

Введенный в спецификацию HTML Media Capture и действительный для файла типа ввода , атрибут capture определяет, какой носитель - микрофон, видео или камера - следует использовать для захвата нового файла для загрузки с загрузкой файла контроль в поддерживающих сценариях. См. Тип ввода файла.

проверено

Действителен для типов radio и , отмечен является логическим атрибутом. Если присутствует в радиоустройстве типа , он указывает, что радио-кнопка является выбранной в данный момент в группе одноименных радио-кнопок. Если присутствует в поле флажка типа , это означает, что флажок установлен по умолчанию (при загрузке страницы). , а не , указывает, установлен ли этот флажок в данный момент: если состояние флажка изменяется, этот атрибут содержимого не отражает изменение.(Только HTMLInputElement проверил атрибут IDL обновлен.)

Примечание: В отличие от других элементов управления вводом, значения флажков и переключателей включаются в отправленные данные только в том случае, если они в настоящее время отмечены . Если да, то отправляются имя и значение (я) отмеченных элементов управления.

Например, если флажок с именем - плод имеет значение из вишня , и флажок установлен, отправленные данные формы будут включать плод = вишня .Если флажок не установлен, он вообще не отображается в данных формы. Значение по умолчанию для флажков и переключателей - на .

имя каталога

Действителен для типов ввода text и search , атрибут dirname разрешает представление направленности элемента. При включении элемент управления формы будет представлен с двумя парами имя / значение: первая - это имя и значение , вторая - значение dirname как имя со значением ltr или rtl устанавливается браузером.

 

При отправке формы выше вводимые данные вызывают отправку пары name / value fruit = cherry и пары dirname / direction fruit.dir = ltr .

отключен

Логический атрибут, который, если он присутствует, указывает, что пользователь не должен иметь возможность взаимодействовать с вводом. Отключенные входы обычно отображаются с более тусклым цветом или с использованием какой-либо другой формы индикации того, что поле недоступно для использования.

В частности, отключенные входы не получают событие click , а отключенные входы не отправляются вместе с формой.

форма

Строка, определяющая элемент

, с которым связан ввод (то есть его владелец формы ). Значение этой строки, если оно есть, должно соответствовать идентификатору id элемента в том же документе. Если этот атрибут не указан, элемент связан с ближайшей содержащей форму, если таковая имеется.

Атрибут form позволяет размещать ввод в любом месте документа, но включать его в форму в другом месте документа.

Примечание: Ввод может быть связан только с одной формой.

формация

Действительно для изображения и представляют только типы ввода . Для получения дополнительной информации см. Тип ввода для отправки.

тип

Действительно для изображения и представляют только типы ввода . Для получения дополнительной информации см. Тип ввода для отправки.

метод формы

Действительно для изображения и представляют только типы ввода . Для получения дополнительной информации см. Тип ввода для отправки.

форма новалидата

Действительно для изображения и представляют только типы ввода . Для получения дополнительной информации см. Тип ввода для отправки.

форма цели

Действительно для изображения и представляют только типы ввода . Для получения дополнительной информации см. Тип ввода для отправки.

высота

Допустимо только для кнопки ввода изображения , высота - это высота файла изображения, отображаемого для представления графической кнопки отправки.См. Тип ввода изображения.

id

Глобальный атрибут, действительный для всех элементов, включая все типы ввода, он определяет уникальный идентификатор (ID), который должен быть уникальным во всем документе. Его цель - идентифицировать элемент при связывании. Значение используется как значение атрибута для , чтобы связать метку с элементом управления формы. См. .

режим ввода

Глобальное значение, действительное для всех элементов, оно дает браузерам подсказку относительно типа конфигурации виртуальной клавиатуры, используемой при редактировании этого элемента или его содержимого.Значения включают нет , текст , тел. , url , адрес электронной почты , числовой , десятичный и поиск .

список

Значение, присвоенное атрибуту списка , должно быть id элемента , расположенного в том же документе. предоставляет список предопределенных значений для предложения пользователю для этого ввода. Любые значения в списке, несовместимые с типом , не включены в предлагаемые варианты. Предоставленные значения являются предложениями, а не требованиями: пользователи могут выбрать из этого предопределенного списка или указать другое значение.

  <специалист по данным>
  
  
  
  
  


  
  
  
  
  
  
  


  
  
  
  
  


  <вариант> https: // разработчик.mozilla.org 
  
  
  
  


Действует на текст , поиск , url , тел , электронная почта , дата , месяц , неделя , время , datetime-local , номер , диапазон и цвет .

Согласно спецификациям, атрибут списка не поддерживается скрытым , паролем , флажком , радио , файлом или любым из типов кнопок.

В зависимости от браузера пользователь может видеть предлагаемую настраиваемую цветовую палитру, метки вдоль диапазона или даже ввод, который открывается как типа hidden, значение ввода автоматически устанавливается пользовательским агентом в кодировку символов, используемую для отправки формы.

  • isindex : По историческим причинам имя isindex недопустимо.
  • имя и радио-кнопки

    Атрибут name создает уникальное поведение для переключателей.

    Одновременно может быть отмечен только один переключатель в одноименной группе переключателей. Выбор любого переключателя в этой группе автоматически отменяет выбор любой выбранной в настоящее время переключателя в той же группе. Значение этого отмеченного переключателя отправляется вместе с именем, если форма отправлена,

    При переходе к серии одноименных групп переключателей, если одна из них отмечена, она получит фокус. Если они не сгруппированы вместе в исходном порядке, если одна из групп отмечена, переход в группу начинается, когда встречается первый в группе, пропуская все те, которые не отмечены.Другими словами, если один из них отмечен, при переходе с помощью табуляции не отмеченные переключатели в группе пропускаются. Если ни один не отмечен, группа переключателей получает фокус при достижении первой кнопки в группе с тем же именем.

    Как только одна из радиокнопок в группе окажется в фокусе, с помощью клавиш со стрелками можно будет перемещаться по всем радиокнопкам с тем же именем, даже если радиокнопки не сгруппированы вместе в исходном порядке.

    HTMLFormElement.elements

    Когда элементу ввода присвоено имя , это имя становится свойством элемента формы HTMLFormElement.элементы недвижимость. Если у вас есть вход, имя которого установлено как гость , а другое имя - размера шляпы , можно использовать следующий код:

      let form = document.querySelector («форма»);
    
    пусть guestName = form.elements.guest;
    let hatSize = form.elements ["размер шляпы"];
      

    При запуске этого кода guestName будет HTMLInputElement для поля guest , а hatSize будет объектом для поля размера шляпы .

    Предупреждение: Избегайте присвоения элементам формы имени , которое соответствует встроенному свойству формы, поскольку в этом случае вы переопределите предопределенное свойство или метод этой ссылкой на соответствующий ввод.

    узор

    Атрибут шаблона , если он указан, представляет собой регулярное выражение, которому должно соответствовать входное значение , чтобы значение прошло проверку ограничения.Это должно быть допустимое регулярное выражение JavaScript, используемое типом RegExp и описанное в нашем руководстве по регулярным выражениям; флаг 'u' указывается при компиляции регулярного выражения, так что шаблон обрабатывается как последовательность кодовых точек Unicode, а не как ASCII. Вокруг текста шаблона не следует указывать косую черту.

    Если атрибут шаблона присутствует, но не указан или недействителен, регулярное выражение не применяется, и этот атрибут полностью игнорируется.Если атрибут шаблона действителен и непустое значение не соответствует шаблону, проверка ограничения предотвратит отправку формы.

    Совет: При использовании атрибута шаблона проинформируйте пользователя об ожидаемом формате, включив рядом пояснительный текст. Вы также можете включить атрибут title , чтобы объяснить, какие требования должны соответствовать шаблону; в большинстве браузеров этот заголовок отображается как всплывающая подсказка. Для доступности требуется видимое объяснение.Всплывающая подсказка - это улучшение.

    Для получения дополнительной информации см. Проверка на стороне клиента.

    заполнитель

    Заполнитель Атрибут - это строка, которая дает пользователю краткую подсказку относительно того, какая информация ожидается в поле. Это должно быть слово или короткая фраза, которая дает подсказку относительно ожидаемого типа данных, а не объяснение или подсказку. Текст не должен включать в себя символы возврата каретки или перевода строки.Так, например, если ожидается, что поле будет содержать имя пользователя, а его метка - «Имя», подходящим заполнителем может быть «например, Мустафа».

    Примечание: Атрибут заполнителя не так семантически полезен, как другие способы объяснения формы, и может вызвать непредвиденные технические проблемы с содержимым. Для получения дополнительной информации см. Ярлыки в : элементе Input (Form Input).

    только чтение

    Логический атрибут, который, если он присутствует, указывает, что пользователь не должен иметь возможность редактировать значение ввода.Поддерживается атрибут только для чтения текст , поиск , url , тел. , электронная почта , дата , месяц , неделя , время , datetime-local , Типы ввода номера и пароля .

    См. Атрибут HTML: только для чтения для получения дополнительной информации.

    требуется

    требуется - это логический атрибут, который, если он присутствует, указывает, что пользователь должен указать значение для ввода перед отправкой формы-владельца. Требуемый атрибут поддерживается текстом , поиском , url , tel , email , date , month , week , time , datetime-local , номер , пароль , флажок , радио и файл входы.

    См. Проверка на стороне клиента и атрибут HTML: требуется для получения дополнительной информации.

    размер
    Действительно для электронной почты , пароля , тел и текста ввод только типов .Определяет, какая часть ввода отображается. В основном создает тот же результат, что и установка свойства width CSS с некоторыми особенностями. Фактическая единица измерения значения зависит от типа ввода. Для пароля и текста это количество символов (или em единиц) со значением по умолчанию 20 , а для других - пикселей с. Ширина CSS имеет приоритет над атрибутом размера.
    SRC

    Допустимо только для кнопки ввода image , src - это строка, определяющая URL-адрес файла изображения для отображения, представляющего графическую кнопку отправки.См. Тип ввода изображения.

    шаг

    Допустимый для числовых типов ввода, включая номер , типы ввода даты / времени и диапазон , атрибут step - это число, которое указывает степень детализации, которой должно придерживаться значение.

    Если явно не указано:

    • шаг по умолчанию равен 1 для номера и диапазона .
    • Для типов ввода даты / времени шаг выражается в секундах, при этом шаг по умолчанию составляет 60 секунд .Коэффициент масштабирования шага равен 1000 (который преобразует секунды в миллисекунды, как это используется в других алгоритмах).

    Значение должно быть положительным числом - целым числом или с плавающей запятой - или специальным значением любое , что означает, что пошаговое выполнение не подразумевается, и допускается любое значение (за исключением других ограничений, таких как мин. и макс. ).

    Если любой не задан явно, допустимые значения для числа , , типов ввода даты / времени и диапазона , типов ввода равны основанию для пошагового выполнения - значение мин, и приращения значения шага, до значения max , если указано.

    Например, если у вас есть , то любое четное целое число, 10 или больше, является допустимым. Если опущено, , любое целое число допустимо, но числа с плавающей запятой (например, 4.2 ) недействительны, потому что step по умолчанию 1 . Чтобы 4.2 был действительным, step должен был быть установлен на , любое значение , 0,1, 0,2 или любое значение min должно было быть числом, заканчивающимся на .2 , например

    Примечание: Когда данные, введенные пользователем, не соответствуют пошаговой конфигурации, значение считается недопустимым при проверке ограничений и будет соответствовать псевдоклассу : недопустимый .

    Для получения дополнительной информации см. Проверка на стороне клиента.

    tabindex

    Глобальный атрибут, действительный для всех элементов, включая все типы ввода, целочисленный атрибут, указывающий, может ли элемент принимать фокус ввода (может ли он фокусироваться), если он должен участвовать в последовательной навигации с клавиатуры.Поскольку все типы ввода, за исключением ввода типа hidden, являются фокусируемыми, этот атрибут не следует использовать в элементах управления формой, поскольку для этого потребуется управление порядком фокуса для всех элементов в документе с риском нарушения удобства использования и доступности, если это будет сделано неправильно.

    титул

    Глобальный атрибут, действительный для всех элементов, включая все типы входных данных, содержащий текст, представляющий консультативную информацию, относящуюся к элементу, которому он принадлежит.Такая информация обычно, но не обязательно, может быть представлена ​​пользователю в виде всплывающей подсказки. Заголовок НЕ должен использоваться в качестве основного объяснения цели элемента управления формой. Вместо этого используйте элемент с атрибутом для , установленным на атрибут id элемента управления формы. См. Ярлыки ниже.

    тип

    Строка, определяющая тип отображаемого элемента управления. Например, для создания флажка используется значение , флажок .Если опущено (или указано неизвестное значение), используется тип ввода текст , создавая поле ввода открытого текста.

    Допустимые значения перечислены в типах выше.

    значение

    Значение элемента управления вводом. Если указано в HTML, это начальное значение, и с этого момента оно может быть изменено или получено в любое время с помощью JavaScript для доступа к соответствующему свойству value объекта HTMLInputElement .Атрибут value всегда является необязательным, хотя должен считаться обязательным для флажка , radio и hidden .

    ширина

    Допустимо только для кнопки ввода изображения , ширина - это ширина файла изображения, отображаемого для представления графической кнопки отправки. См. Тип ввода изображения.

    - HTML: язык разметки гипертекста

    элементы типа текст создают базовые однострочные текстовые поля.

    Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

    Атрибут value - это DOMString , которая содержит текущее значение текста, введенного в текстовое поле. Вы можете получить это, используя свойство value в JavaScript.

      пусть theText = myTextInput.ценность;
      

    Если для входных данных нет ограничений проверки (подробнее см. Проверка), значение может быть пустой строкой ("").

    В дополнение к атрибутам, которые работают со всеми элементами независимо от их типа, текстовые вводы поддерживают следующие атрибуты:

    Атрибут Описание
    перечень Идентификатор элемента , который содержит необязательные предопределенные параметры автозаполнения
    макс. Длина Максимальное количество символов, которое должен принимать ввод
    мин. Длина Минимальное количество символов, которое вводится и может считаться действительным
    узор Регулярное выражение, содержимое ввода должно соответствовать, чтобы быть действительным
    заполнитель Примерное значение для отображения в поле ввода, когда оно пусто
    только чтение Логический атрибут, указывающий, должно ли содержимое ввода быть доступным только для чтения
    размер Число, указывающее, сколько символов должно быть в поле ввода.
    проверка орфографии Определяет, следует ли включать проверку орфографии для поля ввода или следует ли использовать конфигурацию проверки орфографии по умолчанию.

    список

    Значения атрибута списка - это id элемента , расположенного в том же документе. предоставляет список предопределенных значений для предложения пользователю для этого ввода. Любые значения в списке, несовместимые с типом , не включены в предлагаемые варианты. Предоставленные значения являются предложениями, а не требованиями: пользователи могут выбрать из этого предопределенного списка или указать другое значение.

    maxlength

    Максимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести во ввод текста .Это должно быть целочисленное значение 0 или больше. Если maxlength не указана или указано недопустимое значение, ввод text не имеет максимальной длины. Это значение также должно быть больше или равно значению minlength .

    Входные данные не пройдут проверку ограничения, если длина текстового значения поля больше maxlength UTF-16 code units long. Проверка ограничений применяется только тогда, когда значение изменяется пользователем.

    minlength

    Минимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести во ввод текста . Это должно быть неотрицательное целое число, меньшее или равное значению, заданному параметром maxlength . Если не указана минимальная длина или указано недопустимое значение, ввод текста не имеет минимальной длины.

    Входные данные не пройдут проверку ограничения, если длина текста, введенного в поле, меньше minlength UTF-16 кодовых единиц.Проверка ограничений применяется только тогда, когда значение изменяется пользователем.

    образец

    Атрибут шаблона , если он указан, представляет собой регулярное выражение, которому должно соответствовать входное значение , чтобы значение прошло проверку ограничения. Это должно быть допустимое регулярное выражение JavaScript, используемое типом RegExp и описанное в нашем руководстве по регулярным выражениям; флаг 'u' указывается при компиляции регулярного выражения, так что шаблон обрабатывается как последовательность кодовых точек Unicode, а не как ASCII.Вокруг текста шаблона не следует указывать косую черту.

    Если указанный шаблон не указан или недействителен, регулярное выражение не применяется, и этот атрибут полностью игнорируется.

    Совет: Используйте атрибут title , чтобы указать текст, который большинство браузеров будет отображать в виде всплывающей подсказки, чтобы объяснить, какие требования должны соответствовать шаблону. Вы также должны включить рядом другой пояснительный текст.

    Дополнительные сведения и пример см. В разделе «Указание рисунка».

    заполнитель

    Атрибут заполнителя - это строка, которая дает пользователю краткую подсказку относительно того, какая информация ожидается в поле. Это должно быть слово или короткая фраза, демонстрирующая ожидаемый тип данных, а не пояснительное сообщение. Текст не должен включать в себя символы возврата каретки или перевода строки.

    Если содержимое элемента управления имеет одну направленность (LTR или RTL), но должно представлять заполнитель с противоположной направленностью, вы можете использовать символы форматирования двунаправленного алгоритма Unicode, чтобы переопределить направленность внутри заполнителя; см. Переопределение двунаправленного текста с помощью управляющих символов Unicode в Алгоритме двунаправленного текста Unicode для этих символов.

    только для чтения

    Логический атрибут, который, если присутствует, означает, что это поле не может редактироваться пользователем. Его значение , однако, все еще можно изменить с помощью кода JavaScript, напрямую установив свойство HTMLInputElement.value .

    Примечание: Поскольку поле только для чтения не может иметь значение, требуется не оказывает никакого влияния на входы с указанным атрибутом только для чтения .

    размер

    Атрибут размер - это числовое значение, указывающее, сколько символов должно быть в ширину поле ввода.Значение должно быть числом больше нуля, а значение по умолчанию - 20. Поскольку ширина символов различается, это может быть точным, а может и нет, и на это не следует полагаться; результирующий ввод может быть уже или шире, чем указанное количество символов, в зависимости от символов и шрифта (используемые настройки шрифта и ).

    Это означает, что , а не , устанавливает ограничение на количество символов, которые пользователь может ввести в поле. Он лишь приблизительно указывает, сколько людей можно увидеть одновременно.Чтобы установить верхний предел длины входных данных, используйте атрибут maxlength .

    проверка орфографии

    проверка орфографии - это глобальный атрибут, который используется для указания, включать ли проверку орфографии для элемента. Его можно использовать с любым редактируемым контентом, но здесь мы рассмотрим особенности, связанные с использованием проверки орфографии для элементов . Допустимые значения для проверки орфографии :

    ложный
    Отключить проверку орфографии для этого элемента.
    истина
    Включить проверку орфографии для этого элемента.
    "" (пустая строка) или без значения
    Следуйте поведению элемента по умолчанию для проверки орфографии. Это может быть основано на настройке родительской проверки орфографии или других факторах.

    В поле ввода может быть включена проверка орфографии, если для него не установлен атрибут «только чтение» и он не отключен.

    Значение, возвращаемое чтением проверки орфографии , может не отражать фактическое состояние проверки орфографии в элементе управления, если настройки пользовательского агента переопределяют настройку.

    Следующие нестандартные атрибуты также доступны в некоторых браузерах. Как правило, вам следует избегать их использования, если это не поможет.

    Атрибут Описание
    автозамена Строка, указывающая, является ли автокоррекция на или с . Только Safari.
    mozactionhint Строка, указывающая тип действия, которое будет выполнено при нажатии пользователем клавиши Enter или Return при редактировании поля; это используется для определения соответствующей метки для этой клавиши на виртуальной клавиатуре. Firefox только для Android.

    автозамена Этот API не стандартизирован.

    Расширение Safari, атрибут автозамены - это строка, которая указывает, следует ли активировать автоматическое исправление, когда пользователь редактирует это поле. Допустимые значения:

    по
    Включить автоматическое исправление опечаток, а также обработку замен текста, если они настроены.
    выкл
    Отключить автоматическое исправление и замену текста.

    mozactionhint Этот API не стандартизирован.

    Расширение Mozilla, поддерживаемое Firefox для Android, которое дает подсказку о том, какое действие будет выполнено, если пользователь нажмет клавишу Enter или Return при редактировании поля. Эта информация используется, чтобы решить, какую метку использовать на клавише Enter на виртуальной клавиатуре.

    Допустимые значения: перейти , выполнено , следующее , поиск и отправить . С помощью этой подсказки браузер решает, какую метку поставить на клавишу ввода.

    элементы типа text создают базовые однострочные входы. Вы должны использовать их везде, где вы хотите, чтобы пользователь вводил однострочное значение, и нет более конкретного типа ввода, доступного для сбора этого значения (например, если это дата, URL, адрес электронной почты или поисковый запрос, вы У меня есть варианты получше).

    Базовый пример

      
      

    Это выглядит так:

    При отправке на сервер будет отправлена ​​пара имя / значение данных: uname = Chris (если перед отправкой в ​​качестве входного значения было введено «Chris»). Вы должны не забыть включить атрибут name в элемент , иначе значение текстового поля не будет включено в отправленные данные.

    Установка заполнителей

    Вы можете предоставить полезный заполнитель внутри вашего текстового ввода, который может дать подсказку о том, что вводить, включая использование атрибута placeholder . Посмотрите на следующий пример:

      <форма>
      

    Вы можете увидеть, как отображается заполнитель ниже:

    Заполнитель обычно отображается более светлым цветом, чем цвет переднего плана элемента, и автоматически исчезает, когда пользователь начинает вводить текст в поле (или всякий раз, когда поле имеет значение, установленное программно путем установки его value атрибута.

    Размер физического элемента ввода

    Физическим размером поля ввода можно управлять с помощью атрибута size . С его помощью вы можете указать количество символов, которое вводимый текст может отображать одновременно. Это влияет на ширину элемента, позволяя указать ширину в символах, а не в пикселях. В этом примере, например, ширина ввода составляет 30 символов:

      <форма>
      

    элементы типа text не имеют автоматической проверки, примененной к ним (поскольку базовый ввод текста должен быть способен принимать любую произвольную строку), но есть некоторые доступные параметры проверки на стороне клиента, которые мы ' Обсудим ниже.

    Примечание : проверка формы HTML - это , а не , заменяющий серверные сценарии, которые гарантируют, что введенные данные находятся в правильном формате. Для кого-то слишком легко внести изменения в HTML, которые позволят им обойти проверку или полностью удалить ее. Также есть возможность полностью обойти ваш HTML и отправить данные прямо на ваш сервер. Если ваш серверный код не может проверить данные, которые он получает, может случиться катастрофа, когда в вашу базу данных будут введены неправильно отформатированные данные (или данные, которые слишком большие, неправильного типа и т. Д.).

    Примечание по стилю

    Существуют полезные псевдоклассы, доступные для стилизации элементов формы, чтобы помочь пользователю увидеть, допустимы или недействительны их значения. Это : действительный и : недопустимый . В этом разделе мы будем использовать следующий CSS, который поставит галочку (галочку) рядом с входами, содержащими допустимые значения, и крестиком (X) рядом с входами, содержащими недопустимые значения.

      div {
      нижнее поле: 10 пикселей;
      положение: относительное;
    }
    
    input + span {
      отступ справа: 30 пикселей;
    }
    
    input: invalid + span: after {
      позиция: абсолютная; содержание: '✖';
      отступ слева: 5 пикселей;
    }
    
    input: valid + span: after {
      позиция: абсолютная;
      содержание: '✓';
      отступ слева: 5 пикселей;
    }  

    Этот метод также требует, чтобы элемент был помещен после элемента формы, который действует как держатель для значков.Это было необходимо, потому что некоторые типы ввода в некоторых браузерах не очень хорошо отображают значки, расположенные сразу после них.

    Требуется ввод данных

    Вы можете использовать атрибут required как простой способ ввести значение, необходимое для отправки формы:

      <форма>
      

    Это выглядит так:

    Если вы попытаетесь отправить форму без введенного поискового запроса, браузер покажет сообщение об ошибке.

    Длина входного значения

    Вы можете указать минимальную длину (в символах) для введенного значения с помощью атрибута minlength ; аналогично используйте maxlength , чтобы установить максимальную длину введенного значения в символах.

    В приведенном ниже примере требуется, чтобы вводимое значение состояло из 4–8 символов.

      <форма>
      

    Это выглядит так:

    Если вы попытаетесь отправить форму, содержащую менее 4 символов, вы получите соответствующее сообщение об ошибке (которое различается в зависимости от браузера).Если вы попытаетесь ввести более 8 символов, браузер вам не позволит.

    Примечание: Если вы укажете минимальную длину , но не укажете требуется , ввод считается допустимым, поскольку от пользователя не требуется указывать значение.

    Указание шаблона

    Вы можете использовать атрибут pattern , чтобы указать регулярное выражение, которому введенное значение должно совпадать, чтобы считаться допустимым (см. Проверка на соответствие регулярному выражению для простого ускоренного курса по использованию регулярных выражений для проверки ввода ).

    Пример ниже ограничивает значение 4-8 символами и требует, чтобы оно содержало только строчные буквы.

      <форма>
      

    Имена пользователей должны быть в нижнем регистре и иметь длину от 4 до 8 символов.

    Это выглядит так:

    Таблицы BCD загружаются только в браузер

    Тег HTML

    Тег используется в элементе

    и определяет поля для ввода пользователем. Тип поля (текст, флажок, переключатель, поле пароля и т. Д.) Определяется значением атрибута type. Тег не имеет текстового содержания, он содержит только атрибуты.

    Он принадлежит к группе тегов, называемой элементами формы.

    Чтобы связать текст с определенным элементом, мы используем тег

    Синтаксис¶

    Тег пуст, что означает, что закрывающий тег не требуется. Но в XHTML тег () должен быть закрыт ().

    Пример тега HTML : ¶

      
    
      
         Название документа 
      
      
        
          
          
        
      
      
    Попробуйте сами »

    Пример HTML-тега с HTML-тегом

      
    
      
         Название документа 
      
      
        






    Попробуйте сами »

    Result¶

    Attributes¶

    Основным атрибутом, определяющим тип поля ввода, является type. Если атрибут отсутствует, значение по умолчанию - «текст».

    Тег также поддерживает глобальные атрибуты и атрибуты событий.

    Значения атрибута type¶

    Как оформить тег ?

    Общие свойства для изменения визуального веса / выделения / размера текста в теге :

    • Свойство CSS font-style задает стиль шрифта. нормальный | курсив | косой | начальная | наследовать.
    • Свойство CSS font-family определяет приоритетный список из одного или нескольких имен семейств шрифтов и / или родовых имен семейств для выбранного элемента.
    • Свойство CSS font-size устанавливает размер шрифта.
    • Свойство CSS font-weight определяет, должен ли шрифт быть жирным или толстым.
    • Свойство CSS text-transform управляет регистром текста и заглавными буквами.
    • Свойство CSS text-decoration задает украшение, добавленное к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

    Раскрашивание текста в теге :

    • Свойство цвета CSS описывает цвет текстового содержимого и оформления текста.
    • Свойство CSS background-color устанавливает цвет фона элемента.

    Стили макета текста для тега :

    • Свойство CSS text-indent задает отступ первой строки в текстовом блоке.
    • Свойство CSS text-overflow указывает, как пользователь должен сообщить о переполненном содержимом, которое не отображается.
    • CSS свойство white-space определяет, как обрабатывается белое пространство внутри элемента.
    • Свойство CSS word-break указывает, где строки должны быть разорваны.

    Другие свойства, на которые стоит обратить внимание для тега :



    Тег HTML: input | HTML Dog

    input не имеет содержимого и поэтому не требует закрывающего тега.

    Атрибут Описание Возможные значения
    наименование Имя элемента управления формы, которое нужно связать с его значением. Текст (без пробелов).
    тип Тип элемента управления формы.
    • текст : Текстовое поле - текст без разрывов строки. (по умолчанию)
    • пароль : текстовое поле с закрытым вводом .
    • флажок : флажок / флажок.
    • радио : Радиокнопка - позволяет выбрать один элемент управления в группе, имеющей одно и то же значение атрибута name .
    • отправить : кнопка «Отправить» - отправить форму.
    • сброс : Кнопка сброса - сбрасывает элементы управления в форме к их начальным значениям по умолчанию.
    • скрытый : скрытый элемент управления , который не может быть доступен напрямую пользователю, но значение которого отправляется вместе с остальными данными формы.
    • изображение : изображение , которое при нажатии или ином выборе отправляет форму.Координаты точки в пикселе, по которой происходит щелчок по изображению, станут значением элемента управления.
    • файл : Загрузка файла - позволяет выбрать локальный файл для отправки.
    • кнопка : Кнопка без поведения по умолчанию.
    • поиск : текстовое поле для строк поиска .
    • tel : Текстовое поле для телефонных номеров .
    • url : текстовое поле для абсолютных URL-адресов .
    • email : текстовое поле для адресов электронной почты .
    • дата : Дата элемент управления выбором.
    • время : Время управление выбором.
    • число : текстовое поле или счетчик для числовых значений .
    • диапазон : Ползунок или аналогичный для выбора числового значения из потенциально неточного диапазона .
    • цвет : Цветной колодец , с 8-битным значением sRGB.
    значение Начальное значение. В зависимости от типа.
    проверено Устанавливает флажок или радио Тип , который будет отмечен по умолчанию. Нет.
    макс. Длина Максимальное количество допустимых символов в значении. Номер.
    мин. Длина Минимальное количество допустимых символов в значении. Номер.
    SRC Используется и требуется, если тип image . Расположение файла изображения, который будет использоваться. URL.
    альтернативный Используется и требуется, если тип изображение .Альтернативный текст, который заменит изображение, если изображение, указанное в src , недоступно. Текст.
    ширина Используется, если тип изображение . Ширина изображения в пикселях. Номер.
    высота Используется, если тип изображение . Высота изображения в пикселях. Номер.
    принять Используется, если тип файл . Указывает, какие типы файлов принимаются. Один экземпляр или список, разделенный запятыми:
    • аудио / * : аудиофайлы.
    • видео / * : видео файлы.
    • изображение / * : файлы изображений.
    • Тип MIME, например application / pdf .
    • Определенные расширения файлов, например .pdf .
    отключен Отключает элемент управления формой. Нет.
    только чтение Делает элемент управления формой неизменяемым пользователем. Нет.
    автозаполнение Должен ли браузер реализовывать автозаполнение для элемента управления или нет.
    автофокус Указывает, что элемент управления формы должен фокусироваться на загрузке страницы. Следует использовать только в одном элементе управления формы на странице. Нет.
    имя Добавляет дополнительное поле для отправки, содержащее направление значения элемента управления формы. Текст (без пробелов). Например, dirname = "this.dir" добавит this.dir = ltr (слева направо) или this.dir = rtl (справа налево) к отправленным данным.
    форма Явно связывает элемент управления с элементом формы , внутри которого он может или не может быть вложен.Если он отсутствует, элемент управления будет связан с его предком формы . Текст, соответствующий значению , формирует атрибут id элемента .
    формация Используется, если тип отправить или изображение . Адрес, на который должны быть отправлены данные формы. Переопределит атрибут действия элемента form . URL.
    метод формы Используется, если тип отправить или изображение .Метод HTTP, с помощью которого должны быть отправлены данные формы. Переопределит атрибут метода элемента form .
    • get : привязывает значения формы к URL-адресу, на который она отправляется. Используется для простой отправки данных, например, для поисковых запросов.
    • post : Незаметно отправляет данные формы в теле отправленного HTTP-запроса. Используется для более подробной или безопасной отправки данных, например, для контактных форм.
    тип Используется, если тип отправить или изображение . Тип MIME, используемый для кодирования данных формы. Переопределит атрибут enctype элемента form .
    • application / x-www-form-urlencoded : По умолчанию.
    • multipart / form-data : когда в форме используется элемент input input.
    • текст / простой : основной текст.
    форма новалидата Используется, если тип отправить или изображение . Указывает, что форма не должна проверяться перед отправкой. Переопределит атрибут novalidate элемента form . Нет.
    форма цели Используется, если тип отправить или изображение .Контекст просмотра, в котором должен открываться целевой URL отправленной формы. Переопределит атрибут target элемента form .
    • _self : открывается в текущем окне / вкладке.
    • _blank : открывается в новом окне / вкладке.
    перечень Связывает элемент управления формы со списком параметров, предлагаемых пользователю. Текст, соответствующий значению атрибута id элемента datalist .
    макс Используется, когда тип дата , время , номер или диапазон . Максимальное значение. Номер.
    мин Используется, когда тип дата , время , номер или диапазон .Минимальное значение. Номер.
    шаг Используется, когда тип дата , время , номер или диапазон . Шаги, с которыми значение может быть увеличено или уменьшено. Номер или любой .
    кратно Используется, если тип - электронная почта или файл . Указывает, что пользователь может ввести более одного значения. Нет.
    узор Регулярное выражение, по которому можно проверить значение. Регулярное выражение.
    заполнитель Видимая подсказка относительно того, какие данные следует ввести пользователю. Текст.
    требуется Указывает, что поле формы необходимо заполнить. Нет.
    размер Количество символов в элементе управления текстового типа, которое пользователь должен увидеть во время редактирования. Номер.
    Глобальные атрибуты

    Тег ввода HTML - Tutorial Republic

    Тема: Справочник по тегам HTML5 Назад | След.

    Описание

    Тег используется для создания интерактивных элементов управления в форме.

    Элемент может различаться по способу отображения и атрибутам, которые он использует или требует, в зависимости от указанного атрибута типа .

    В следующей таблице приведены контекст использования и история версий этого тега.

    Размещение: Рядный
    Содержимое: Нет.Это пустой элемент.
    Начальный / конечный тег: Начальный тег: требуется , Конечный тег: запрещено
    Версия: HTML 2, 3.2, 4, 4.01, 5

    Синтаксис

    Базовый синтаксис тега задается следующим образом:

    HTML: ; XHTML:

    В следующем примере показан тег в действии.

      

    Совет: Используйте элемент HTML , чтобы определить метки для элементов управления вводом.Это сделает форму более доступной для пользователя.


    Атрибуты, специфичные для тегов

    В следующей таблице показаны атрибуты, относящиеся к тегу .

    Атрибут Значение Описание
    тип кнопка
    флажок
    цвет
    дата
    datetime
    datetime-local
    электронная почта
    файл
    скрыто
    изображение
    месяц
    номер
    пароль
    радио
    диапазон
    сброс
    поиск
    отправить
    тел
    текст
    время
    url
    Задает тип создаваемого элемента управления.См. Руководство по HTML-формам, Новые типы ввода HTML5, чтобы узнать больше об элементах управления вводом.
    принять расширение файла
    тип содержимого

    аудио / *
    видео / *
    изображение / *
    Задает типы файлов, которые принимает сервер (только для type = "file" ).
    выровнять слева
    справа
    вверху
    посередине
    внизу
    Устаревший Определяет выравнивание входного изображения (для type = "image" ).
    альтернативный текст Задает альтернативный текст, который будет использоваться, когда изображение недоступно (для type = "image" ).
    автозаполнение на
    откл
    Указывает, включена ли функция автозаполнения в браузере для элемента ввода.
    автофокус автофокус Этот логический атрибут указывает, что элемент ввода должен автоматически получать фокус при загрузке документа.
    проверено проверено Этот логический атрибут указывает, что элемент управления выбран по умолчанию (для type = "radio" или type = "checkbox" ).
    отключен отключен Этот логический атрибут отключает элемент управления для ввода или взаимодействия пользователя.
    форма идентификатор формы Задает элемент
    , с которым связан элемент ввода (его владелец формы ).
    формация URL Задает URL-адрес программы, которая обрабатывает информацию, представленную на входе (для type = "submit" и type = "image" ).
    тип приложение / x-www-form-urlencoded
    multipart / form-data
    text / plain
    Указывает, как данные формы должны кодироваться при отправке данных формы на сервер (для type = "submit" и type = "image" ).
    метод формы получить
    пост
    Задает метод HTTP, который браузер будет использовать для отправки данных формы (для type = "submit" и type = "image" ).
    форма новалидата форма новалидата Этот логический атрибут указывает, что элемент управления формы не должен проверяться при отправке (для type = "submit" и type = "image" ).
    форма цели _blank
    _self
    _parent
    _top

    framename
    Указывает цель для отображения ответа, полученного после отправки формы (для type = "submit" и type = "image" )
    высота пикселей Задает высоту изображения, отображаемого в виде кнопки (только для type = "image" ).
    перечень идентификатор списка данных Обращается к списку предопределенных опций, предлагаемых пользователю. Значение должно быть id элемента на той же странице.
    макс номер
    дата-время
    Задает максимальное значение для элемента управления вводом, которое не должно быть меньше его минимального ( мин. атрибут) значения.
    макс. Длина номер Задает максимальное количество символов, которое пользователь может ввести в поле ввода.
    мин. номер
    дата-время
    Задает минимальное значение для элемента управления вводом, которое не должно быть больше его максимального ( макс. атрибут) значения.
    мин. Длина номер Задает минимальное количество символов, которое пользователь должен ввести в поле ввода.
    кратно кратно Этот логический атрибут указывает, может ли пользователь ввести более одного значения.
    наименование текст Присвойте имя элементу управления вводом.
    узор регулярное выражение Задает регулярное выражение, по которому проверяется значение входного элемента.
    заполнитель текст Дает подсказку пользователю о том, что можно ввести в элемент управления вводом.Текст-заполнитель не должен содержать разрывов строки.
    только чтение только чтение Этот логический атрибут указывает, что пользователь не может изменить значение элемента управления.
    требуется требуется Этот логический атрибут указывает, что пользователь должен заполнить значение перед отправкой формы.
    размер номер Устанавливает начальную ширину элемента управления вводом в символах. Если не указано, используется значение по умолчанию 20 .
    SRC URL Задает расположение изображения для использования в качестве кнопки отправки (для type = "image" ).
    шаг номер
    дата-время
    Работает с атрибутами min и max , чтобы ограничить приращения, с которыми может быть установлено числовое значение или значение даты и времени.
    значение текст Задает начальное значение элемента управления вводом.
    ширина пикселей Задает ширину изображения, отображаемого в виде кнопки (только для type = "image" ).

    Глобальные атрибуты

    Как и все другие теги HTML, тег поддерживает глобальные атрибуты в HTML5.


    Атрибуты событий

    Тег также поддерживает атрибуты событий в HTML5.


    Совместимость с браузером

    Тег поддерживается во всех основных современных браузерах.

    Базовая поддержка -

    • Firefox 1+
    • Google Chrome 1+
    • Internet Explorer 2+
    • Apple Safari 1+
    • Опера 2.1+

    Дополнительная литература

    См. Руководство по: HTML-формы.

    Другие теги, связанные с формами:

    , , , ,