Input type text значение по умолчанию: Атрибут value — значение по умолчанию поля ввода

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

пример

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

Birthday (date and time): <input type=»datetime-local» name=»bdaytime»>

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

Тип входа: email

пример

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

E-mail: <input type=»email» name=»usremail»>

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

Совет: Safari на iPhone распознает тип электронной почты, а также изменение экранной клавиатуры , чтобы соответствовать его (добавляет @ и .com опции).

Тип ввода: file

пример

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

Select a file: <input type=»file» name=»img»>

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

Тип входа: hidden

пример

Скрытое поле часто сохраняет значение по умолчанию, или может быть его значение изменилось с помощью JavaScript:

<input type=»hidden» name=»country» value=»Norway»>

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

Тип входа: image

пример

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

<input type=»image» src=»img_submit.gif» alt=»Submit»>

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

Тип входа: month

пример

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

Birthday (month and year): <input type=»month» name=»bdaymonth»>

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

Тип входа: number

пример

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

Quantity (between 1 and 5): <input type=»number» name=»quantity» min=»1″ max=»5″>

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

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

• max — определяет максимальное допустимое значение
• min — определяет минимальное допустимое значение
• step — указывает интервалы номер юридического
• value — задает значение по умолчанию

Тип входа: password

пример

Определить поле пароля (символы маскируются)

<input type=»password» name=»pwd»>

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

Тип входа: radio

пример

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

<input type=»radio» name=»gender» value=»male»> Male<br>
<input type=»radio» name=»gender» value=»female»> Female<br>
<input type=»radio» name=»gender» value=»other»> Other

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

Тип входа: range

пример

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

<input type=»range» name=»points» min=»0″ max=»10″>

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

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

• max — определяет максимальное допустимое значение
• min — определяет минимальное допустимое значение
• step — указывает интервалы номер юридического
• value — задает значение по умолчанию

Тип входа: reset

пример

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

<input type=»reset»>

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

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

Тип входа: search

пример

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

Search Google: <input type=»search» name=»googlesearch»>

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

Тип входа: submit

пример

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

<input type=»submit»>

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

Тип входа: tel

пример

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

Telephone: <input type=»tel» name=»usrtel»>

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

Тип входа: text

пример

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

First name: <input type=»text» name=»fname»><br>
Last name: <input type=»text» name=»lname»><br>

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

Тип входа: time

пример

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

Select a time: <input type=»time» name=»usr_time»>

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

Тип входа: url

пример

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

Add your homepage: <input type=»url» name=»homepage»>

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

Совет: Safari на iPhone распознает тип ввода URL — адреса, а также изменение экранной клавиатуры , чтобы соответствовать его (добавляет опции . com).

Тип входа: week

пример

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

Select a week: <input type=»week» name=»week_year»>

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

<HTML <input> Тег

Тег | HTML справочник

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

Описание

HTML тег <input> — является пустым элементом и содержит только атрибуты. Используется в пределах элемента <form>, объявляя элементы управления для пользовательского ввода, которые позволяют пользователю вводить различные данные. Связать текст с определенным элементом формы(сделать его активным) можно с помощью тега <label>.

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

Атрибуты

accept:

Указывает типы файлов, которые могут быть переданы на сервер через поле загрузки файлов. Если тип загружаемого файла не совпадает ни с одним из типов файлов, указанных в значении, то файл будет игнорироваться. При указании нескольких значений, они должны разделяться запятой. Атрибут accept работает только совместно с атрибутом type=»file», его возможные значения:

• audio/* — принимаются все звуковые файлы.
• video/* — принимаются все видео файлы.
• image/* — принимаются все файлы изображений.
• MIME_тип — принимается допустимый MIME-тип без параметров.

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

Примечание: атрибут accept не поддерживается в IE9 и более ранних версиях.

alt:

Предоставляет альтернативный текст для пользователя, если он по каким-либо причинам не может просматривать изображения. Атрибут alt может использоваться только совместно с атрибутом type=»image».

autocomplete:

Определяет, будет ли включено автозаполнение для поля ввода данных:

• on — браузер автоматически показывает значения вводимые ранее пользователем (значение по умолчанию).
• off — пользователь должен сам вводить значения для поля при каждом использовании формы. Ранее вводимые значения показываться не будут.

Примечание: атрибут autocomplete работает со следующими значениями атрибута type элемента <input>: text, search, url, tel, email, password, datepickers, range и color.

autofocus:

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

<input autofocus>
<input autofocus="autofocus">
<input autofocus="">

Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях.

checked:

Указывает, что данный элемент будет выбран по умолчанию при загрузке страницы. Работает только с атрибутом type=»checkbox» или type=»radio». Значения для логического атрибута checked можно задавать следующими способами:

<input checked>
<input checked="checked">
<input checked="">

Пример »

disabled:

Указывает, что элемент <input> должен быть выключен (выключенный элемент является неактивным). Значения для логического атрибута disabled можно задавать следующими способами:

<input disabled>
<input disabled="disabled">
<input disabled="">

Пример »

Примечание: атрибут disabled не работает с <input type=»hidden»>.

form:

Определяет форму с которой связан элемент <input>. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать элемент <input> в произвольном месте документа, а не только в качестве потомка элемента <form>. Элемент <input> может быть связан только с одной формой.

Если атрибут form не указан, то элемент <input> должен быть потомком элемента <form>.

Примечание: атрибут form не поддерживается в IE.

formaction:

Указывает URL-адрес файла, который будет обрабатывать данные ввода, при отправке формы. Атрибут formaction используется только с type=»submit» или type=»image», и переопределяет атрибут action элемента <form>.

Примечание: атрибут formaction не поддерживается в IE9 и более ранних версиях.

formenctype:

Определяет способ кодирования данных формы при отправке на сервер. Может использоваться только совместно с атрибутом method=»post» элемента <form>. Возможные значения:

• application/x-www-form-urlencoded — значение по умолчанию: все символы кодируются перед отправкой (пробелы преобразуются в символ «+», а специальные символы в значения ASCII HEX).
• multipart/form-data — символы не кодируются. Используется для элементов <input>, у которых в атрибуте type установлено значение «file».
• text/plain — пробелы преобразуются в символ «+», но не кодирует в шестнадцатеричные значения спецсимволы, такие как апострофы.

Атрибут formenctype используется только совместно с type=»submit» или type=»image», и переопределяет атрибут enctype элемента <form>.

Примечание: атрибут formenctype не поддерживается в IE9 и более ранних версиях.

formmethod:

Определяет HTTP метод для отправки данных на указанный URL (для type=»submit» и type=»image»):

• get — данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение (значение по умолчанию).
• post — отправляет данные формы, как HTTP после транзакции.

Атрибут formmethod может использоваться только совместно с type=»submit» или type=»image», и переопределяет атрибут method элемента <form>.

Примечание: атрибут formmethod не поддерживается в IE9 и более ранних версиях.

formnovalidate:

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

<input formnovalidate>
<input formnovalidate="formnovalidate">
<input formnovalidate="">

Примечание: атрибут formnovalidate не поддерживается в IE9 и более ранних версиях, и в Safari.

formtarget:

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

• _blank — открывает документ в новом окне или вкладке.
• _self — открывает документ в той же директории, где располагается ссылка (значение по умолчанию).
• _parent — открывает документ в родительском фрейме.
• _top — открывает документ во всю ширину окна.
• имя_фрейма — открывает документ в iframe, имя которого было указано в качестве значения.

Атрибут formtarget может использоваться только совместно с type=»submit» или type=»image», и переопределяет атрибут target элемента <form>.

Примечание: атрибут formtarget не поддерживается в IE9 и более ранних версиях.

height:

Определяет высоту элемента в пикселях, используется только с <input type=»image»> (пример:).

list:

Устанавливает взаимосвязь между элементом <datalist> и <input>, позволяя для поля ввода указать список предварительно определенных вариантов. В качестве значения для атрибута выступает идентификатор элемента <datalist>. Пример »

Примечание: атрибут list не поддерживается в IE9 и более ранних версиях, и в Safari.

max:

Указывает максимальное значение для ввода числа или даты. Можно использовать атрибут max совместно с атрибутом min для создания диапазона допустимых значений.

• число — указывает максимально допустимое значение.
• дата — указывает максимальную дату, разрешенную для ввода.

Атрибуты min и max работают со следующими значениями атрибута type: number, range, date, datetime, datetime-local, month, time и week.

Примечание: атрибут max не поддерживается в IE9 и более ранних версиях, и в Firefox.

maxlength:

Определяет максимальное количество символов, которое можно будет ввести в поле ввода. Этот атрибут можно использовать для ограничения количества символов, которое разрешается пользователю ввести в данное поле. Например при запросе года можно ограничить количество символов, установив значение атрибута maxlength равным 4. Пример »

min:

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

• число — указывает минимально допустимое значение.
• дата — указывает минимальную дату, разрешенную для ввода.

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.php">

  Введите дату до 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>

  Введите дату после 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>

  Введите число (от 1 до 5):
  <input type="number" name="quantity" min="1" max="5"><br>

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

</body>
</html>

Примечание: атрибут min не поддерживается в IE9 и более ранних версиях, и в Firefox.

multiple:

Указывает, что пользователь может ввести более одного значения. Атрибут multiple работает только с type=»email» и type=»file». Возможные значения логического атрибута multiple:

<input multiple>
<input multiple="multiple">
<input multiple="">

Пример »

Примечание: атрибут multiple не поддерживается в IE9 и более ранних версиях.

name:

Атрибут name определяет имя элемента, оно отправляется на сервер вместе с введенными в поле данными. Имя может использоваться в JavaScript для ссылки на элемент или для идентификации переданных данных на сервере (например, при обработке данных на сервере, имя элемента позволяет определить, что было введено в качестве имени пользователя, а что — в качестве пароля).

pattern:

Указывает регулярное выражение, которое определяет синтаксис данных, ввод которых должен быть разрешен в поле ввода. Шаблон регулярного выражения должен соответствовать введенному значению целиком. Для описания работы шаблона можно воспользоваться глобальным атрибутом title. Атрибут pattern работает со следующими значениями атрибута type: text, search, url, tel, email и password.

Примечание: атрибут pattern не поддерживается в IE9 и более ранних версиях, и в Safari.

placeholder:

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

Атрибут placeholder работает со следующими значениями атрибута type: text, search, url, tel, email и password. Пример »

Примечание: атрибут placeholder не поддерживается в IE9 и более ранних версиях.

readonly:

Указывает, что поле ввода может быть использовано только для чтения и не может быть изменено (однако, текст можно выделить и скопировать). Возможные значения логического атрибута readonly:

<input readonly>
<input readonly="readonly">
<input readonly="">

Пример »

required:

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

Атрибут required работает со следующими значениями атрибута type: text, search, url, tel, email, password, date pickers, number, checkbox, radio и file. Возможные значения логического атрибута required:

<input required>
<input required="required">
<input required="">

Примечание: атрибут required не поддерживается в IE9 и более ранних версиях, и в Safari.

size:

Указывает ширину поля ввода (в качестве единицы измерения выступает количество видимых символов). Так, например, значение 3 создает поле ввода текста, ширина которого достаточна для отображение трех введенных символов (хотя пользователь при желании может ввести и большее количество). Атрибут size работает со следующими значениями атрибута type: text, search, tel, url, email и password. Для указания максимального количества вводимых знаков, воспользуйтесь атрибутом maxlength. Пример »

src:

Указывает путь к графическому файлу для поля с изображением. Атрибут src является обязательным для элементов <input> с type=»image» и может использоваться только с ними.

step:

Определяет интервал чисел для элемента <input>. Пример: если step=»3″, то возможные значения чисел могут быть: -3, 0, 3, 6 и тд. Атрибут step может использоваться совместно с атрибутами max и min, для создания диапазона допустимых значений.

Примечание: атрибут step не поддерживается в IE9 и более ранних версиях, и в Firefox.

type:

Указывает, какой тип элемента управления будет отображен. По умолчанию браузеры используют <input type=»text»>, если не указано другое или неизвестное значение атрибута type. Таким образом, браузеры, не поддерживающие новые значения, просто заменят их значением по умолчанию и отобразят обычное текстовое поле ввода.

• button — определяет активную кнопку (главным образом используется с JavaScript для активации скрипта).
• checkbox — определяет элементы управления флажки, которые могут быть либо установлены, либо сняты. Можно установить сразу несколько флажков или не устанавливать ни один из них. Это отличает флажки от радио-кнопок (type=»radio»).
• color — генерирует палитру цветов, давая возможность пользователям выбирать значения цветов в шестнадцатеричном формате.
• date — позволяет получить доступ к встроенному в браузер виджету выбора даты.
• datetime — определяет элемент управления датой и временем (год, месяц, день, час, минута, секунда и доли секунды, основанный на часовом поясе UTC).
• datetime-local — определяет элемент управления датой и временем (год, месяц, день, час, минуты, секунды и доли секунды (без часового пояса)).
• email — определяет поле для адреса электронной почты.
• file — определяет элемент управления с кнопкой «Обзор», для выбора и загрузки файлов.
• hidden — определяет скрытые поля ввода.
• image — определяет изображение, как кнопку для отправки.
• month — позволяет выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца (например: 2014-05).
• number — определяет поле для ввода чисел.
• password — определяет поле для ввода пароля (замаскированные символы).
• radio — создает радио-кнопки, которые являются взаимоисключающими, если выбрать одну радио-кнопку, то все остальные становятся неактивными.
• range — создает элемент управления ползунок, диапазон ползунка по умолчанию — от 0 до 100. Для изменения диапазона используются атрибуты min и max с желаемыми значениями. Обратите внимание, что данный элемент управления не отображает текущее значение.
• reset — определяет кнопку сброс (сбрасывает все поля формы в значения по умолчанию).
• search — определяет текстовое поле для ввода строки поиска.
• submit — определяет кнопку «Отправить».
• tel — определяет поле для ввода телефонного номера.
• text — определяет однострочное текстовое поле (ширина по умолчанию составляет 20 символов).
• time — допускает ввод значений в 24-часовом формате, например: 12:34. В поддерживающих браузерах элемент управления отображается как числовое поле ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
• url — определяет поле для ввода URL-адреса.
• week — позволяет выбрать одну неделю, после чего обеспечит ввод данных в формате года и недели (например: 2014-W15).

Пример »

value:

Указывает значение элемента <input>, и используется по-разному для разных типов ввода:

• Для «button», «reset», и «submit» — определяет текст на кнопке
• Для «text», «password», «hidden» — определяет начальное (по умолчанию) значение поля ввода
• Для «checkbox», «radio», «image» — определяет значение, связанное с вводом (значение, которое передается при отправке)

Атрибут value не может использоваться с type=»file», и обязательно должен присутствовать при type=»checkbox» и type=»radio». Пример »

width:

Определяет ширину элемента в пикселях, используется только с <input type=»image»> (пример:).

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

Стиль по умолчанию

Нет.

Пример

<form action="demo_form.asp">
  Имя: <input type="text" name="fname"><br>
  Фамилия: <input type="text" name="lname"><br>
  <input type="submit" value="Отправить">
</form> 

Результат данного примера в окне браузера:

Идентификатор и значение по умолчанию

Элементы управления | Yocton

Атрибут	Описание
class	Обозначает класс элемента управления
id	Обозначает идентификатор элемента управления
type	Определяет тип элемента управления. Допустимые значения: hidden, text, tel, url, email, password, date, time, number, range, color, checkbox, radio, file, submit, image, reset и button. Если атрибут не указан или браузер не поддерживает указанный тип, используется значение по умолчанию text.
name	Указывает имя элемента управления
disabled	Логическое значение, указывающее, что элемент должен быть отключен. Отключенные элементы управления не могут редактироваться, не могут получать фокус и при отправке формы данные от них не отправляются.
checked	Если значением атрибута type является checkbox или radio, наличие этого логическогого атрибута указывает, что элемент управления выбран по умолчанию; в противном случае он игнорируется.
multiple	Атрибут HTML5. Указывает, что можно передавать несколько файлов или значений (применяется только к элементам типа file и email)
placeholder	Атрибут HTML5. Подсказка пользователю о том, что можно ввести в элемент управления. Текст заполнитель не должен содержать возврат каретки или перевод на новую строку.
autocomplete	Атрибут HTML5. Указывает, будет ли значение элемента управления автоматически завершено браузером.
readonly	Логическое значение, указывающее, что элемент не редактируется. Элементы readonly отправляются при отправке формы, но не получают фокуса. В HTML5 этот атрибут игнорируется, когда значение атрибута type: hidden, range, color, checkbox, radio, file или button.
required	Атрибут HTML5. Указывает, что значение должно присутствовать или элемент должен быть проверен перед отправкой формы.
alt	Альтернативный текст для изображений, если они не отображаются.
autofocus	При загрузке страницы элемент <input> должен получить фокус.
value	Указывает значение для элемента<input>
step	Атрибут step задает допустимые интервалы. Он работает со следующими типами элементов управления: number, range, date, локальной датой, месяцем, временем и неделей.

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

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

<input type="text">

или (без указания типа, используя атрибут по умолчанию)

<input>

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

<input type="text" size="50">

Атрибут size заметно отличается от установки свойства width с помощью CSS. Использование ширины задает конкретное значение (в пикселех или процентах от родительского элемента), что точно задает ширину поля. Использование атрибута size требует вычисления ширины поля на основе используемого шрифта и зависит от размера символов.

Использование атрибута size не ограничивает количество символов, которые могут быть введены в поле, а только ограничивают отображаемую ширину поля. Для ограничения длины ввода см. раздел «Проверка ввода».

Текстовое поле допускает только одну строку текста. Если вам нужен многострочный текстовый элемент для значительного объема текста, используйте вместо него элемент <textarea>.

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

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

Один отдельный элемент флажок используется для одной логической операции выбора, например вопрос «да» или «нет». Флажки являются независимыми, что означает, что пользователь может выбрать в группе флажков столько вариантов, сколько захочет. Другими словами, выбор одного флажка не отменяет выбор других флажков в группе. Переключатели обычно объединены в группы (если переключатель не сгруппирован с другими переключателями, скорее всего, вы должны использовать флажок), указанием одного и того же имени на всех переключателях этой группы. Выбор переключателей является взаимоисключающим, что означает, что пользователь может выбрать только один вариант из группы переключателей. Когда переключатель установлен, любая другая радиокнопка с тем же именем, которая была ранее отмечена, снимается. Например:

<input type="radio" name="color" value="#F00">
<input type="radio" name="color" value="#0F0">
<input type="radio" name="color" value="#00F">

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

флажки и переключатели имеют ряд атрибутов для управления их поведением:

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

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

<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">

Отсутствие атрибута checked является единственным допустимым синтаксисом для неотмечанного элемента:

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

При сбросе формы флажки и переключатели возвращаются к состоянию указанному в атрибуте checked.

Чтобы дать и показать пользователям описания для каждого элемента, каждый из них должен иметь метку. Это можно сделать, используя элемент <label>, чтобы обернуть элемент. Кроме того, это позволяет делать кликабельной метку при выборе соответствующего элемента. Например:

<label>
    <input type="radio" name="color" value="#F00">
    Красный
</label>

или с элементом <label>, имеющим атрибут for, равный атрибуту id элемента:

<input type="checkbox" name="color" value="#F00">
<label for="red">Красный</label>

Поскольку каждый переключатель влияет на остальные в группе, обычно указывается описание для всей группы переключателей. Чтобы предоставить метку для всей группы, переключатели должны быть включены в элемент <fieldset> с элементом <legend> внутри него.

<fieldset>
    <legend>Цвет темы:</legend>
    <p>
        <input type="radio" name="color" value="#F00">
        <label for="red">Красный</label>
    </p>
    <p>
        <input type="radio" name="color" value="#0F0">
        <label for="green">Зеленый</label>
    </p>
    <p>
        <input type="radio" name="color" value="#00F">
        <label for="blue">Синий</label>
    </p>
</fieldset>

Флажки могут быть аналогично сгруппированы с помощью элементов fieldset и legend, идентифицирующий группу связанных флажков. Однако имейте в виду, что флажки не должны иметь одно и то же имя, поскольку они не являются взаимоисключающими. Это приведет к тому, что форма, представляющая несколько значений для одного и того же имени, а не все серверные языки обрабатывают это одинаково (т.к. это неопределенное поведение). Каждый флажок должен иметь либо уникальное имя, либо использовать набор квадратных скобок ([]), чтобы указать, что форма должна представить массив значений для этого ключа. Какой метод вы выбираете, зависит от того, как вы планируете обрабатывать данные формы на стороне клиента или на стороне сервера. Вы также должны придерживаться короткой легенды, т.к. некоторые браузеры читают легенду перед каждым полем ввода в fieldset.

Проверка элементов управления HTML автоматически выполняется браузером на основе специальных атрибутов элемента. Это может частично или полностью заменить проверку с помощью JavaScript. Этот вид проверки может быть легко обойден пользователем через специально созданные HTTP-запросы, поэтому он не заменяет проверку ввода на стороне сервера. Проверка выполняется только при попытке отправить форму (если вы не используете JavaScript), поэтому все проверяемые элементы должны быть внутри валидируемой формы. Имейте в виду, что отключенные элементы управления или доступные только для чтения не будут проверяться. Некоторые новые типы элемента (например, email, url, tel, date и многие другие) автоматически проверяются и не требуют собственных правил проверки.

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

<input required>

Минимум/максимум длины Используйте атрибуты minlength и maxlength, чтобы указать требования к длине. Большинство браузеров сразу не позволяют пользователю вводить в поле больше, чем указанное максимальное количество символов, что предотвращает их неправильность еще до отправки формы.

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

Указание диапазона Используйте атрибуты min и max, чтобы ограничить диапазон чисел, которые пользователь может ввести в элемент типа number или range.

<input type="number" size="6" name="marks" min="0" max="100" />
<input type="range" size="2" name="feedback" min="1" max="5" />

Для большего контроля используйте атрибут pattern, чтобы указать регулярное выражение, которому должен соответствовать проверяемый элемент. Вы также можете указать атрибут title, который отображаться в случае не прохождения проверки.

<input pattern="\d*" title="Numbers only, please.">

Вот сообщение, показанное в Google Chrome версии 51 при попытке отправить форму с недопустимым значением внутри этого поля: Не все браузеры отображают сообщение о недопустимых шаблонах, хотя в большинстве используемых современных браузеров есть полная поддержка атрибута pattern. Проверьте поддержку этого атрибута на CanIUse.

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

<input type="file" accept="image/*" title="Разрешены только изображения">

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

<input type="file" accept="image/*,.rar,application/zip">

Добавление атрибута novalidate к элементу form или атрибута formnovalidate к кнопке отправки формы submit, предотвращает проверку элементов формы. Например:

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>
    <input type="submit" value="Publish"> <!-- форма будет проверена -->
    <input type="submit" value="Save" formnovalidate> <!-- форма НЕ будет проверена -->
</form>

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

<form novalidate> <!-- форма НЕ будет проверена -->
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>
    <input type="submit" value="Publish"> 
</form>

В HTML5 появился тип элемента управления color:

<input type="color" name="favcolor" value="#ff0000">

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

При щелчке по этой кнопке откроется виджет для выбора цвета в операционной системе.

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

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

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

<input type="password" name="password" placeholder="Секретный пароль">

Текст подсказки отображается в виде простого текста (обычно серого цвета) и автоматически исчезает, когда пользователь начинает вводить текст.

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

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

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

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

<form action="upload_file.php" method="post" enctype="multipart/form-data">
   Выберите файл для загрузки:
   <input type="file" name="fileSubmission">
   <input type="submit" value="Upload your file" name="submit">
</form>

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

<input type="file" name="fileSubmission" multiple>

Атрибут accept определяет типы файлов, которые пользователь может выбрать. Например. . png, .gif, .jpeg.

<input type="file" name="fileSubmission" accept="image/x-png,image/gif,image/jpeg" />

<input type="button" value="Название кнопки">

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

<button type="button">Название кнопки</button>

Кнопки обычно используют событие onclick:

<input type="button" value="Нажми меня">

или

<button type="button">Нажми меня</button>

Уникальное имя кнопки, которое отправляется вместе с данными формы.

Тип кнопки Возможны значения:

• submit — кнопка передает данные формы на сервер. Это значение по умолчанию, если атрибут не указан, или если атрибут динамически изменен на пустое или недопустимое значение.
• reset — кнопка сбрасывает все элементы управления до их начальных значений.
• button — кнопка не имеет поведения по умолчанию. Она может иметь клиентские сценарии, связанные с событиями элемента, которые запускаются при возникновении событий.
• menu — кнопка открывает всплывающее меню, определенное через элемент <menu>. Пример:

  <!-- Кнопка, отображающая меню при щелчке -->
  <button type="menu" menu="popup-menu">
  Нажми меня
  </button>
  <!-- Меню -->
  <menu type="context">
  <menuitem>Действие 1</menuitem>
  <menuitem>Действие 2</menuitem>
  <hr>
  <menuitem>Дополнительное действие</menuitem>
  </menu>

  Пока данный функционал не поддерживается браузерами

  Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задается атрибутом name тега <button>, а значение — атрибутом value. Значение может, как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value применяется для доступа к данным через сценарии.

  Атрибут	Описание
  form	Задает идентификатор формы, к которой принадлежит кнопка. Если он не указан, то кнопка будет принадлежать элементу формы предка (если он существует).
  formaction	Определяет адрес, на который надо отправлять данные формы с помощью этой кнопки.
  formenctype	Указывает, как данные формы должны быть закодированы при отправке на сервер. Может использоваться только с formmethod = "post".
  formmethod	Указывает HTTP-метод (POST или GET) при отправке данных формы.
  formnovalidate	Указывает, что данные формы не должны проверяться при отправке.
  formtarget	Открывает результат отправки формы в новом окне или фрейме.

  Элемент управления с типом submit создает кнопку, которая отправляет при нажатии форму, внутри которой находится данный элемент.

  <input type="submit" value="Отправить">

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

  <button type="submit">
  <img src="submit-icon.jpg" /> Отправить
  </button>

  <input type="reset" value="Очистить форму">

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

• Текст в поле ввода будет сброшен до пустого или значения по умолчанию (указанного с использованием атрибута value).
• Пункты из раскрывающегося списка будут отменены, если у них нет атрибута selected.
• Все флажки и переключатели будут отменены, если у них нет атрибута checked.

  Чтобы кнопка сброса работала она должна быть внутри формы или присоединена (через атрибут form) к элементу <form> .

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

  <input type="hidden" name="inputName" value="inputValue">

  <input type="tel" value="+79876543210">

  Элемент управления с атрибутом type="tel", представляет собой однострочное текстовое поле для ввода номера телефона.

  Элемент управления с атрибутом type="email", представляет собой однострочное текстовое поле для ввода адреса электронной почты.

  <form>
  <label>E-mail: <label>
  <input type="email" name="email">
  </form>

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

  E-mail:

<input type="number" value="0" name="quantity">

Элемент управления с атрибутом type="number" представляет собой текстовую строку для ввода числа.

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

Элемент управления для ввода числа в определенном диапазоне.

<input type="range" min="" max="" step="" />

Элемент управления с атрибутом type="search" — однострочное текстовое поле для ввода поисковое строки, в которой автоматически удаляются разрывы строк. ``htmlЭлемент управления с атрибутомtype=»search»`

## Изображения (Image)
```html
<input type="image" src="img.png" alt="image_name"/>

Создает графическую кнопку. Вы должны использовать атрибут src для указания источника изображения и атрибут alt для определения альтернативного текста. Вы можете использовать атрибуты height и width для указания размера изображения в пикселях.

<input type="week" />

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

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

Этот элемент используется для полей ввода, которые должны содержать адрес URL. В зависимости от поддержки браузера поле url может быть автоматически проверено при отправке. Некоторые смартфоны распознают тип urlи добавляют «.com» к клавиатуре, чтобы облегчить ввод.

<input type="datetime-local" />

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

<input type="month" />

В зависимости от поддержки браузера элемент управления отобразит месяц.

<input type="time" />

Элемент для ввода времени принимает значения в формате в соответствии со стандартом RFC 3339, например:

19:04:39

08:20:39.04

В настоящее время все версии Edge, Chrome, Opera и Chrome для Android поддерживают этот элемент управления.

Элемент управления с атрибутом type="datetime" предназначен для ввода строки, представляющей глобальную дату и время (с информацией о часовом поясе).

<fieldset>
   <p><label>Время встречи: <input type=datetime name="meeting.start"></label>
</fieldset>

Эта функция устарела. Хотя данный элеметн может по-прежнему работать в некоторых браузерах, его использование не рекомендуется, поскольку оно может быть удалено в любое время. Старайтесь не использовать его. Вместо этого браузеры реализуют (и разработчикам рекомендуется использовать) <input type = "datetime-local">.

<input type="date" />

На экране появится подсказка для выбора даты. Этот элемент не поддерживается в Internet Explorer. Можно использовать дополнительные атрибуты:

<input type="date"   value="2018-09-22"   min="2018-01-01" max="2018-12-31" />

Формы

предыдущий   следующий   содержание   элементы   атрибуты   индекс

Оглавление

1. Введение
2. Элементы управления (ЭУ)
   • типы элементов управления
3. Элемент FORM
4. Элемент INPUT
   • типы элементов управления, создаваемы в INPUT
   • примеры форм, содержащих элементы управления
5. Элемент BUTTON
6. Элементы SELECT, OPTGROUP и OPTION
   • предустановленные опции
7. Элемент TEXTAREA
8. Элемент ISINDEX
9. Лэйблы
   • элемент LABEL
10. Структурирование формы: элементы FIELDSET и LEGEND
11. Передача элементу фокуса ввода
    • навигация при помощи табуляции
    • клавиши быстрого доступа
12. Элементы управления — недоступные и «только для чтения»
    • недоступные
    • «только для чтения»
13. Отправка формы
    • метод отправки
    • «действующие» элементы управления
    • Обработка данных формы
      • Шаг 1: идентификация «успешных» элементов управления
      • Шаг 2: создание набора данных формы
      • Шаг 3: кодирование набора данных формы
      • Шаг 4: отправка кодированного набора данных формы
    • Типы содержимого формы
      • application/x-www-form-urlencoded
      • multipart/form-data

Форма HTML это раздел документа, содержащий обычные данные, разметку, специальные элементы, называемые «элементы управления» (переключатель, radio-кнопка, меню и т.д.), и лэйблы для этих элементов управления.
Пользователи обычно «заполняют» форму, изменяя содержимое её элементов (вводя текст, выбирая пункты меню и т.д.), прежде чем отправить её агенту для обработки (напр., Web-серверу, mai-серверу и т.п.)

Вот пример простой формы, включающей лэйблы, radio-кнопки и кнопки push (для очистки или отправки формы):

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    <LABEL for="firstname">First name: </LABEL>
              <INPUT type="text"><BR>
    <LABEL for="lastname">Last name: </LABEL>
              <INPUT type="text"><BR>
    <LABEL for="email">email: </LABEL>
              <INPUT type="text"><BR>
    <INPUT type="radio" name="sex" value="Male"> Male<BR>
    <INPUT type="radio" name="sex" value="Female"> Female<BR>
    <INPUT type="submit" value="Send"> <INPUT type="reset">
    </P>
 </FORM>

Примечание. Эта спецификация содержит более развёрнутую информацию о формах в разделе вопросы отображения форм.

Пользователь взаимодействует с формой посредством элементов управления.

Имя элемента управления (ЭУ),  «control name», задаётся атрибутом name. Областью видимости атрибута name ЭУ внутри формы является элемент FORM.

Каждый ЭУ имеет начальное и текущее значение типа «символьная строка». См. определение каждого ЭУ для спецификации начальных значений и возможные ограничения значений, принимаемых ЭУ. В целом, «начальное значение\initial value» может быть установлено атрибутом value ЭУ.  Однако начальное значение ЭУ TEXTAREA задаётся его содержимым, а начальное значение ЭУ OBJECT в форме определяется реализацией данного объекта (т.е. находится вне пределов данной спецификации).

«Текущее значение\current value» ЭУ вначале устанавливается в первоначальное значение. После этого текущее значение ЭУ можно изменять, взаимодействуя с пользователем, и с помощью скриптов (сценариев).

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

При отправке формы на обработку, некоторые ЭУ образуют пары «имя/значение», которые затем пересылаются с формой. ЭУ, чьи пары имя/значение высланы, называются «действующие ЭУ».

HTML определяет следующие типы ЭУ:

кнопки

Авторы могут создавать кнопки трёх типов:

Авторы создают кнопки, используя ЭУ BUTTON, или ЭУ INPUT. См. определение этих ЭУ .

Примечание. Авторы должны иметь в виду, что возможности ЭУ BUTTON  богаче, чем у INPUT.

переключатели/checkboxes

Переключатели (и radio-кнопки) это переключатели типа вкл. /выкл., управляемые пользователем. Переключатель «включён», если установлен атрибут checked ЭУ. Если форма отправлена, только переключатель «включён» может быть «действующим».

Несколько переключателей в форме могут использовать одно имя ЭУ. Так, например, переключатели позволяют пользователям выбрать несколько значений для одного свойства. ЭУ INPUT используется для создания переключателей.

radio-кнопки

Radio-кнопки похожи на переключатели/checkboxes, за исключением того, что, при использовании одного и того же имени ЭУ, они действуют взаимоисключающе: если одна выбрана «включено», все остальные с тем же именем «выключены». Элемент INPUT используется для создания  ЭУ «radio-кнопка».

Если ни одна radio-кнопка из использующих общее имя первоначально не установлена во «включено», поведение пользовательского агента (ПА) по установлению того, какая из кнопок включена, не определено.
Примечание. Поскольку существующие приложения обрабатывают эту ситуацию по-разному, данная спецификация отличается от RFC 1866 ([RFC1866] раздел 8.1.2.4) в следующем:

В определённый момент времени только одна radio-кнопка из набора может быть «включена». Если ни один из элементов <INPUT> набора radio-кнопок не установлен (`CHECKED’), тогда ПА обязан вначале включить первую из кнопок набора.

Поскольку поведение ПА различно, авторы должны убедиться, что в каждом наборе radio-кнопок одна «включена».

меню

Меню дают возможность выбора из списка значений. Элемент SELECT создаёт меню в комбинации с элементами OPTGROUP и OPTION.

текстовые поля

Авторы могут создавать поля для ввода текста двух видов. Элемент INPUT создаёт однострочный ЭУ, а элемент TEXTAREA — многострочный. В обоих случаях, введённый текст становится текущим значением.

выбор файла/file select

ЭУ этого типа позволяют пользователям выбрать файлы, и их содержимое может пересылаться с формой. Элемент INPUT используется для создания ЭУ выбор файла/file select.

hidden control/скрытый ЭУ

Авторы могут создавать невидимые ЭУ, значения которых пересылаются вместе с формой. Обычно ЭУ этого типа используются для хранения информации при обмене клиент/сервер, которая иначе может быть утеряна из-за нестатичной природы HTTP (см. [RFC2616]). Элемент INPUT используется для создание скрытых ЭУ/hidden control.

ЭУ object

Авторы могут вставлять в форму общие объекты, чьи ассоциированные значения пересылаются вместе с другими данными. Авторы создают объект с помощью ЭУ OBJECT.

Элементы, используемые для создания ЭУ, обычно размещаются внутри элемента FORM, но могут также находиться и вне объявления элемента FORM, если используются для создания пользовательского интерфейса. Этот вопрос рассматривается в разделе внутренние события. Обратите внимание — ЭУ вне формы не могут быть «действующими ЭУ».

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- интерактивная форма -->
<!ATTLIST FORM
  %attrs;                              -- %coreattrs, %i18n, %events --
  action%URI;          #НЕОБХОДИМ -- обработчик на стороне сервера --
  method      (GET|POST)     GET       -- HTTP метод отправки формы--
  enctype%ContentType;  "application/x-www-form-urlencoded"
  accept%ContentTypes; #ПРЕДПОЛАГАЕТСЯ  -- список типов MIME для загрузки файлов --
  nameCDATA          #ПРЕДПОЛАГАЕТСЯ  -- имя формы (для скриптов) --
  onsubmit%Script;       #ПРЕДПОЛАГАЕТСЯ  -- событие: форма отправлена --
  onreset%Script;       #ПРЕДПОЛАГАЕТСЯ  -- событие: форма очищена --
  accept-charset%Charsets;   #ПРЕДПОЛАГАЕТСЯ  -- список поддерживаемых наборов символов --
  >

Начальный тег: необходим, Конечный тег: необходим

Определения атрибутов

action = uri [CT]

Определяет обработчик формы. Поведение пользовательского агента (ПА) для значений, отличных от HTTP URI не определено.

method = get|post [CI]

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

enctype = content-type [CI]

Определяет тип содержимого/content type при отправке формы на сервер (если значение method’a —  «post»). Значением по умолчанию этого атрибута является  «application/x-www-form-urlencoded». Значение  «multipart/form-data» должно использоваться в комбинации с элементом INPUT, type=»file».

accept-charset = список наборов символов [CI]

Определяет список кодировок для вводимых данных, принимаемых сервером, обрабатывающим данную форму. Значением является список  наборов символов, разделённых пробелами и/или запятыми. Клиент должен интерпретировать этот список как список XOR (exclusive-or), т.е. сервер может принять любой отдельный символ кодировки на каждый полученный объект.

Значением по умолчанию этого атрибута является зарезервированная строка «UNKNOWN».
ПА могут интерпретировать это значение как кодировку символов, использованную для передачи документа, содержащего форму FORM.

accept = content-type-list [CI]

Определяет список разделённых запятыми типов содержимого, которые сервер-обработчик формы будет обрабатывать корректно. ПА могут использовать эту информацию для фильтрации несоответствующих файлов при запросе пользователя на выбор файлов, пересылаемых серверу (сравните элемент INPUT с type=»file»).

name = cdata [CI]

Этот атрибут именует элементы таким образом, что на них можно ссылаться из таблицы стилей или скрипта (сценария).
Примечание. Этот атрибут введён для обеспечения обратной совместимости. Приложения должны использовать атрибут id для идентификации элементов.

Атрибуты, определённые в другом месте

• id, class (идентификаторы документа)
• lang (язык), dir (направление текста)
• style (инлайн-стиль)
• title (название элемента)
• target (целевой фрэйм)
• onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Элемент FORM действует как контейнер для  ЭУ. Он определяет:

• Вид формы (в зависимости от содержимого элементов).
• Программу, которая будет обрабатывать заполненную и отправленную форму — обработчик формы (указанный в атрибуте action). Программа должна разбирать пары имя/значение для их последующего использования.
• Метод отправки данных пользователя на сервер (атрибут method).
• Кодировку символов, понимаемую сервером — для обработки формы (атрибут accept-charset).
  ПА должны уведомлять пользователя о значении атрибута accept-charset  и/или ограничивать возможность введения пользователем нераспознаваемых символов.

Форма может содержать текст и разметку (параграфы, списки и т.п.) в дополнение к  ЭУ формы.

В следующем примере показана форма,  обрабатываемая программой «adduser» после отправки.
Форма будет отправлена программе методом «post».

 <FORM action="http://somesite.com/prog/adduser" method="post">
 ...содержимое формы...
 </FORM>

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

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

<!ENTITY % InputType
  "(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)"
   >
<!-- имя атрибута требуется для всех, кроме submit и reset -->
<!ELEMENT INPUT - O EMPTY              -- ЭУ формы -->
<!ATTLIST INPUT
  %attrs;                              -- %coreattrs, %i18n, %events --
  type%InputType;    TEXT      -- тип ЭУ --
  nameCDATA          #ПРЕДПОЛАГАЕТСЯ  -- отправляется как часть формы --
  valueCDATA          #ПРЕДПОЛАГАЕТСЯ  -- для radio-кнопок и переключателей --
  checked     (checked)      #ПРЕДПОЛАГАЕТСЯ  -- для radio-кнопок и переключателей --
  disabled    (disabled)     #ПРЕДПОЛАГАЕТСЯ  -- недоступен в данном контексте --
  readonly    (readonly)     #ПРЕДПОЛАГАЕТСЯ  -- для text и passwd --
  sizeCDATA          #ПРЕДПОЛАГАЕТСЯ  -- специфичен для каждого типа поля --
  maxlengthNUMBER         #ПРЕДПОЛАГАЕТСЯ  -- максимальное к-во символов для полей text --
  src%URI;          #ПРЕДПОЛАГАЕТСЯ  -- для полей с изображениями --
  altCDATA          #ПРЕДПОЛАГАЕТСЯ  -- краткое описание --
  usemap%URI;          #ПРЕДПОЛАГАЕТСЯ  -- использовать клиентские карты изображений --
  ismap       (ismap)        #ПРЕДПОЛАГАЕТСЯ  -- использовать серверные карты изображений --
  tabindexNUMBER         #ПРЕДПОЛАГАЕТСЯ  -- позиция в порядке табуляции --
  accesskey%Character;    #ПРЕДПОЛАГАЕТСЯ  -- символ быстрого доступа --
  onfocus%Script;       #ПРЕДПОЛАГАЕТСЯ  -- элемент получил фокус --
  onblur%Script;       #ПРЕДПОЛАГАЕТСЯ  -- элемент потерял фокус --
  onselect%Script;       #ПРЕДПОЛАГАЕТСЯ  -- текст был выделен --
  onchange%Script;       #ПРЕДПОЛАГАЕТСЯ  -- значение элемента было изменено --
  accept%ContentTypes; #ПРЕДПОЛАГАЕТСЯ  -- список типов MIME для загрузки файлов --
  >

Начальный тег: необходим, Конечный тег: запрещён

Определения атрибутов

type = text|password|checkbox|radio|submit|reset|file|hidden|image|button [CI]

Определяет  тип создаваемого ЭУ. Значение этого атрибута по умолчанию —  «text».

name = cdata [CI]

Имя ЭУ.

value = cdata [CA]

Начальное значение ЭУ. Не обязательно, если только атрибут type не имеет значение «radio» или «checkbox».

size = cdata [CN]

Сообщает пользовательскому агенту начальную ширину ЭУ. Ширина задаётся в пикселах, за исключением случаев, когда атрибут type имеет значение «text» или «password». В этом случае значение атрибута — (integer) целое число символов.

maxlength = number [CN]

Если атрибут typeимеет значение «text» или «password», этот атрибут определяет максимальное количество символов, которое может ввести пользователь. Это число может оказаться больше установленного размера (size). В этом случае ПА должен предоставить возможность прокрутки. По умолчанию значением этого атрибута является неограниченное количество.

checked [CI]

Если атрибут typeимеет значение «radio» или «checkbox», данный булев атрибут определяет , что кнопка нажата. ПА должны игнорировать этот атрибут в ЭУ всех других типов.

src = uri [CT]

Если атрибут typeимеет значение «image», этот атрибут устанавливает место нахождения изображения, используемого в качестве кнопки submit.

Атрибуты, определённые в другом месте

• id, class (идентификаторы документа)
• lang (язык), dir (направление текста)
• title (название элемента)
• style (инлайн-стиль)
• alt (альтернативный текст)
• align (выравнивание)
• accept (доступные для сервера типы содержимого)
• readonly (ЭУ «только для чтения»)
• disabled (недоступен)
• tabindex (позиция при табуляции)
• accesskey (символ быстрого доступа)
• usemap (клиентская карта изображений)
• ismap (серверная карта изображений)
• onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Тип ЭУ, определяемый элементом INPUT, зависит от значения атрибута type:

text

Однострочный ЭУ для ввода текста.

password

Как  «text», но вводимый текст изображается так, чтобы скрыть вводимые символы (напр., серией «звёздочек»). ЭУ этого типа часто используется для ввода специальной информации, напр., пароля. Заметьте, что текущее значение, это текст, введённый пользователем, а не текст, изображаемый ПА.

Примечание. Разработчики программного обеспечения должны иметь в виду, что этот механизм обеспечивает лишь некоторую защиту. Хотя пароль маскируется ПАгентом от случайного просмотра, он передаётся на сервер в виде обычного текста и может быть прочитан кем-нибудь, имеющим низкоуровневый доступ к сети.

checkbox

Создаёт переключатель.

radio

Создаёт кнопку radio.

submit

Создаёт кнопку submit.

image

Создаёт кнопку submit. Значение атрибута src определяет URI изображения, служащего для украшения кнопки. Из соображений доступности, авторы должны предоставлять альтернативный текст установкой атрибута alt.

Если для щелчка на кнопке image используется указательное устройство (мышь и т.п.), форма отправляется и координаты щелчка передаются серверу. Значение Х измеряется в пикселах от левого края изображения, а значение У — в пикселах от верхнего края изображения. Отправленные данные включают значения name.x=x-value и name.y=y-value, где «name» это значение атрибута name, а x-value и y-value это значения координат x и y соответственно.

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

• Использовать несколько кнопок submit (каждая со своим изображением) вместо единой графической кнопки submit. Авторы могут использовать таблицы стилей для управления положением кнопок.
• Использовать клиентские карты изображений в сочетании со скриптами.

reset

Создаёт a кнопку reset.

button

Создаёт кнопку push. ПА должны использовать значение атрибута value как лэйбла кнопки.

hidden

Создаёт элемент hidden.

file

Создаёт ЭУ file select. ПА могут использовать значение атрибута value начальное имя файла.

Следующий фрагмент HTML определяет простую форму, которая даёт пользователю возможность ввести имя, фамилию, email адрес и пол. При активации кнопки submit, форма посылается программе, указанной в атрибуте action.

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    First name: <INPUT type="text" name="firstname"><BR>
    Last name: <INPUT type="text" name="lastname"><BR>
    email: <INPUT type="text" name="email"><BR>
    <INPUT type="radio" name="sex" value="Male"> Male<BR>
    <INPUT type="radio" name="sex" value="Female"> Female<BR>
    <INPUT type="submit" value="Send"> <INPUT type="reset">
    </P>
 </FORM>

Эта форма будет выглядеть примерно так:

В разделе элемента LABEL мы обсуждаем установку лэйблов, таких как «First name».

В этом примере, функция verify JavaScript включается при возникновении события «onclick»:

<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
</HEAD>
<BODY>
 <FORM action="..." method="post">
    <P>
    <INPUT type="button" value="Click Me">
 </FORM>
</BODY>

См. раздел внутренние события о сценариях и событиях.

В следующем примере показано, как содержимое определённого пользователем файла может пересылаться с формой. Пользователь запрашивается о его (или её) имени и списке имён файлов, содержимое которых должно быть отправлено с формой. При установке значения enctype в «multipart/form-data»  содержимое каждого файла упаковывается для отправки отдельным разделом составного документа.

<FORM action="http://server.dom/cgi/handle"
    enctype="multipart/form-data"
    method="post">
 <P>
 Ваше имя? <INPUT type="text" name="name_of_sender">
 Какие файлы Вы отправляете? <INPUT type="file" name="name_of_files">
 </P>
</FORM>

<!ELEMENT BUTTON - -
     (%flow;)* -(A|%formctrl;|FORM|FIELDSET)
     -- кнопка push -->
<!ATTLIST BUTTON
  %attrs;                              -- %coreattrs, %i18n, %events --
  nameCDATA          #ПРЕДПОЛАГАЕТСЯ
  valueCDATA          #ПРЕДПОЛАГАЕТСЯ  -- отсылается на сервер при отправке формы --
  type        (button|submit|reset) submit   -- используется как кнопка формы --
  disabled    (disabled)     #ПРЕДПОЛАГАЕТСЯ  -- недоступен в этом контексте --
  tabindexNUMBER         #ПРЕДПОЛАГАЕТСЯ  -- позиция при табуляции --
  accesskey%Character;    #ПРЕДПОЛАГАЕТСЯ  -- символ быстрого доступа --
  onfocus%Script;       #ПРЕДПОЛАГАЕТСЯ  -- элемент получил фокус --
  onblur%Script;       #ПРЕДПОЛАГАЕТСЯ  -- элемент потерял фокус --
  >

Начальный тег: необходим, Конечный тег: необходим

Определения атрибутов

name = cdata [CI]

Определяет имя ЭУ.

value = cdata [CS]

Устанавливает начальное значение кнопки.

type = submit|button|reset [CI]

Объявляет тип кнопки. Возможные значения:

• submit: создаёт кнопку submit. Это значение по умолчанию.
• reset:  создаёт кнопку reset.
• button: создаёт кнопку push.

Атрибуты, определённые в другом месте

• id, class (идентификаторы документа)
• lang (язык), dir (направление текста)
• title (название элемента)
• style (инлайн-стиль)
• disabled (недоступен)
• accesskey (символ быстрого доступа)
• tabindex (позиция при табуляции)
• onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Кнопки, созданные элементом BUTTON работают почти так же, как и кнопки, созданные элементом INPUT, но дают больше возможностей представления: элемент BUTTON может иметь содержимое. Например, элемент BUTTON, содержащий изображение, работает и может выглядеть как элемент INPUT, чей type установлен «image», но элемент BUTTON может иметь содержимое.

Визуальные ПА могу представлять кнопку BUTTON с рельефом и смещением вверх/вниз при нажатии, в то время как они могут рассматривать кнопки INPUT только как «плоские» изображения.

Этот пример расширяет предыдущий, но создаёт кнопки submit и reset элементом BUTTON вместо INPUT. Кнопки содержат изображения так же, как элемент IMG.

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    First name: <INPUT type="text" name="firstname"><BR>
    Last name: <INPUT type="text" name="lastname"><BR>
    email: <INPUT type="text" name="email"><BR>
    <INPUT type="radio" name="sex" value="Male"> Male<BR>
    <INPUT type="radio" name="sex" value="Female"> Female<BR>
    <BUTTON name="submit" value="submit" type="submit">
    Send<IMG src="/icons/wow. gif" alt="wow"></BUTTON>
    <BUTTON name="reset" type="reset">
    Reset<IMG src="/icons/oops.gif" alt="oops"></BUTTON>
    </P>
 </FORM>

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

Недопустимо ассоциировать карту изображений с IMG, который является содержимым элемента BUTTON.

НЕВЕРНОЕ ИСПОЛЬЗОВАНИЕ:
Это неверный HTML.

<BUTTON>
<IMG src="foo.gif" usemap="...">
</BUTTON>

<!ELEMENT SELECT - - (OPTGROUP|OPTION)+ -- селектор опций -->
<!ATTLIST SELECT
  %attrs;                              -- %coreattrs, %i18n, %events --
  nameCDATA          #ПРЕДПОЛАГАЕТСЯ   -- имя поля --
  sizeNUMBER         #ПРЕДПОЛАГАЕТСЯ  -- видимые ряды --
  multiple    (multiple)     #ПРЕДПОЛАГАЕТСЯ   -- по умолчанию в одном выделении --
  disabled    (disabled)     #ПРЕДПОЛАГАЕТСЯ   -- недоступен в данном контексте --
  tabindexNUMBER         #ПРЕДПОЛАГАЕТСЯ   -- позиция при табуляции --
  onfocus%Script;       #ПРЕДПОЛАГАЕТСЯ   -- элемент получил фокус --
  onblur%Script;       #ПРЕДПОЛАГАЕТСЯ   -- элемент потерял фокус --
  onchange%Script;       #ПРЕДПОЛАГАЕТСЯ   -- значение элемента изменено --
  >

Начальный тег: необходим, Конечный тег: необходим

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

name = cdata [CI]

Устанавливает имя ЭУ.

size = number [CN]

Если элемент SELECT представлен в виде прокручиваемого списка, этот атрибут определяет количество видимых одновременно рядов в списке. Визуальные ПА не требуют представления элемента SELECT как прокручиваемого списка; они могут использовать для этого ниспадающее меню.

multiple [CI]

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

Атрибуты, определённые в другом месте

• id, class (идентификаторы документа)
• lang (язык), dir (направление текста)
• title (название элемента)
• style (инлайн-стиль)
• disabled (недоступен)
• tabindex (табуляция)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Элемент SELECT создаёт меню. Каждая опция выбора представляется элементом OPTION. Элемент SELECT должен содержать не менее одного элемента OPTION.

Элемент OPTGROUP позволяет группировать опции логически. Это особенно удобно, когда пользователь должен выбрать из большого списка опций: группы связанных опций легче осмыслить и запомнить, чем один большой список опций. В HTML 4 все элементы OPTGROUP должны быть определены непосредственно в элементе SELECT (т.е. группы не могут быть вложенными).

17.6.1 Предустановленные опции

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

• Если ни один элемент OPTION не имеет установленного атрибута selected, поведение ПА по определению предустановленной опции не определено.
  Примечание. Поскольку существующие программы обрабатывают эту ситуацию по-разному, данная спецификация отличается от RFC 1866 ([RFC1866] раздел 8. 1.3):

  Первоначально выбранной является опция 1, если только отсутствует атрибут SELECTED или любой из элементов <OPTION>.

  Поскольку поведение ПА различно, авторы должны удостовериться, что каждое меню включает предустановленную опцию (OPTION)по умолчанию.

• Если один из элементов OPTION имеет установленный атрибут selected, он должен быть предустановленным.
• Если элемент SELECT имеет установленный атрибут multiple, и более чем один элемент OPTION имеет установленный атрибут selected, они все должны быть предустановлены.
• Считается ошибкой, если более чем один элемент OPTION имеет установленный атрибут selected, и элемент SELECT не имеет установленного атрибута multiple. ПА могут по-разному обрабатывать такие ошибки, но не должны предустанавливать более чем одну опцию выбора.

<!ELEMENT OPTGROUP - - (OPTION)+ -- группа опций -->
<!ATTLIST OPTGROUP
  %attrs;                              -- %coreattrs, %i18n, %events --
  disabled    (disabled)     #ПРЕДПОЛАГАЕТСЯ  -- недоступен в этом контексте --
  label%Text;         #НЕОБХОДИМ -- для использования в иерархическом меню --
  >

Начальный тег: необходим, Конечный тег: необходим

Определение атрибута элемента OPTGROUP

label = text [CS]

Определяет лэйбл для группы опций.

Атрибуты, определённые в другом месте

• id, class (идентификаторы документа)
• lang (язык), dir (направление текста)
• title (название элемента)
• style (инлайн-стиль)
• disabled (недоступен)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Примечание. Разработчики должны помнить, что следующие версии HTML могут расширить механизм группировки, чтобы разрешить вложенные группы (т.е., элементы OPTGROUP могут быть вложенными). Это позволит авторам определять возможность более сложного выбора.

<!ELEMENT OPTION - O (#PCDATA)         -- опции выбора -->
<!ATTLIST OPTION
  %attrs;                              -- %coreattrs, %i18n, %events --
  selected    (selected)     #ПРЕДПОЛАГАЕТСЯ
  disabled    (disabled)     #ПРЕДПОЛАГАЕТСЯ  -- недоступен в данном контексте --
  label%Text;         #ПРЕДПОЛАГАЕТСЯ  -- для использования в иерархических меню --
  valueCDATA          #ПРЕДПОЛАГАЕТСЯ  -- значения по умолчанию для содержимого элемента --
  >

Начальный тег: необходим, Конечный тег: не обязателен

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

selected [CI]

Если установлен, этот булев атрибут определяет, какая из опций предустановлена.

value = cdata [CS]

Определяет начальное значение ЭУ. Если не установлен, начальное значение установлено на содержимое элемента OPTION.

label = text [CS]

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

Атрибуты, определённые в другом месте

• id, class (идентификаторы документа)
• lang (язык), dir (направление текста)
• title (название элемента)
• style (инлайн-стиль)
• disabled (недоступен)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

При рассмотрении выбора опции меню ПА должен использовать значение атрибута label элемента OPTION в качестве выбора. Если этот атрибут не установлен, ПА должен использовать содержимое элемента OPTION.

Атрибут label элемента OPTGROUP определяет лэйбл для группы выбора.

В следующем примере создаётся меню, позволяющее пользователю выбрать, какой из 7 программных компонентов устанавливать. Первый и второй компоненты предустановлены, но могут быть отключены пользователем. Остальные компоненты не предустановлены. Атрибут size устанавливает, что видны только 4 ряда меню, хотя пользователь может выбирать из 7 опций. Другие опции могут стать доступными путём прокрутки.

После SELECT идут кнопки submit и reset.

<FORM action="http://somesite.com/prog/component-select" method="post">
   <P>
   <SELECT multiple size="4" name="component-select">
      <OPTION selected value="Component_1_a">Component_1</OPTION>
      <OPTION selected value="Component_1_b">Component_2</OPTION>
      <OPTION>Component_3</OPTION>
      <OPTION>Component_4</OPTION>
      <OPTION>Component_5</OPTION>
      <OPTION>Component_6</OPTION>
      <OPTION>Component_7</OPTION>
   </SELECT>
   <INPUT type="submit" value="Send"><INPUT type="reset">
   </P>
</FORM>

Только выбранные опции будут действующими (используя имя ЭУ «component-select»). Если ни одна опция не выбрана, ЭУ является недействующим, и ни имя, ни какое-либо его значение не отсылаются серверу при отправке формы. Заметьте, что если атрибут value установлен, он определяет начальное значение ЭУ и является в то же время содержимым элемента.

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

<FORM action="http://somesite.com/prog/someprog" method="post">
 <P>
 <SELECT name="ComOS">
     <OPTION selected label="none" value="none">None</OPTION>
     <OPTGROUP label="PortMaster 3">
       <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</OPTION>
       <OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7</OPTION>
       <OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</OPTION>
     </OPTGROUP>
     <OPTGROUP label="PortMaster 2">
       <OPTION label="3.7" value="pm2_3. 7">PortMaster 2 with ComOS 3.7</OPTION>
       <OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5</OPTION>
     </OPTGROUP>
     <OPTGROUP label="IRX">
       <OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</OPTION>
       <OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</OPTION>
     </OPTGROUP>
 </SELECT>
</FORM>

представляет такую группировку:

  None
  PortMaster 3
      3.7.1
      3.7
      3.5
  PortMaster 2
      3.7
      3.5
  IRX
      3.7R
      3.5R

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

Графический ПА может представить это так:

Этот рисунок показывает элемент SELECT как выпадающее меню. Верхний лэйбл меню показывает выбранное в данный момент значение (PortMaster 3, 3.7.1). Пользователь раскрыл два ниспадающих меню, но ещё не выбрал новое значение (PortMaster 2, 3. 7). Заметьте, что каждое каскадное меню отображает лэйбл элемента OPTGROUP или OPTION.

<!ELEMENT TEXTAREA - - (#PCDATA)       -- многострочное текстовое поле -->
<!ATTLIST TEXTAREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  nameCDATA	     #ПРЕДПОЛАГАЕТСЯ
  rowsNUMBER         #НЕОБХОДИМ
  colsNUMBER         #НЕОБХОДИМ
  disabled    (disabled)     #ПРЕДПОЛАГАЕТСЯ  -- недоступен в данном контексте --
  readonly    (readonly)     #ПРЕДПОЛАГАЕТСЯ
  tabindexNUMBER         #ПРЕДПОЛАГАЕТСЯ  -- позиция при табуляции --
  accesskey%Character;    #ПРЕДПОЛАГАЕТСЯ  -- символ быстрого доступа --
  onfocus%Script;       #ПРЕДПОЛАГАЕТСЯ  -- элемент получил фокус --
  onblur%Script;       #ПРЕДПОЛАГАЕТСЯ  -- элемент потерял фокус --
  onselect%Script;       #ПРЕДПОЛАГАЕТСЯ  -- некоторый текст выделен --
  onchange%Script;       #ПРЕДПОЛАГАЕТСЯ  -- значение элемента изменено --
  >

Начальный тег: необходим, Конечный тег: необходим

Определения атрибутов

name = cdata [CI]

Устанавливает имя элемента.

rows = number [CN]

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

cols = number [CN]

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

Атрибуты, определённые в другом месте

• id, class (информация о документе)
• lang (язык), dir (направление текста)
• title (название элемента)
• style (инлайн-стиль)
• readonly (элемент ввода «только для чтения»)
• disabled (недоступен)
• tabindex (табуляция)
• onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Элемент TEXTAREA создаёт многострочный ЭУ для ввода текста. ПА должны использовать содержимое этого элемента как начальное значение элемента и отображать этот текст как начальный.

В этом примере создаётся ЭУ TEXTAREA, в котором 20 рядов и 80 столбцов, содержащий 2 строки начального текста. За ЭУ TEXTAREA идут кнопки submit и reset.

<FORM action="http://somesite.com/prog/text-read" method="post">
   <P>
   <TEXTAREA name="thetext" rows="20" cols="80">
   Первая строка начального текста.
   Вторая строка начального текста.
   </TEXTAREA>
   <INPUT type="submit" value="Send"><INPUT type="reset">
   </P>
</FORM>

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

ISINDEX  не рекомендуется. Этот элемент создаёт однострочное окно для ввода текста. Авторы должны использовать элемент INPUT для создания элементов для ввода текста.

См. формальное определение:  Переходное ОТД/Transitional DTD.

Определение атрибута

prompt = text [CS]

Не рекомендуется. Этот атрибут определяет строку промпта для текстового поля.

Атрибуты, определённые в другом месте

• id, class (идентификаторы документа)
• lang (язык), dir (направление текста)
• title (название элемента)
• style (инлайн-стиль)

Элемент ISINDEX создаёт однострочный ЭУ для ввода текста, позволяющий вводить любое количество символов. ПА должны использовать значение атрибута prompt как название промпта.

НЕ РЕКОМЕНДУЕТСЯ:
Следующее объявление ISINDEX:

<ISINDEX prompt="Введите Ваш текст для поиска: ">

можно переписать для INPUTтак:

<FORM action=". .." method="post">
<P>Введите Ваш текст для поиска: <INPUT type="text"></P>
</FORM>

Семантика ISINDEX. В настоящее время семантика элемента ISINDEX определяется хорошо, если только URI документа является HTTP URI. На практике строка ввода ограничивается набором символов Latin-1, так как отсутствует URI механизм определения другого набора символов.

Некоторые ЭУ автоматически содержат лэйблы, ассоциированные с ними (кнопки), а другие — нет (поля ввода текста, переключатели, radio-кнопки и меню).

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

Элемент LABEL используется для определения лэйблов в ЭУ, не имеющих встроенных лэйблов.

17.9.1  Элемент

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- текст лэйбла элемента формы -->
<!ATTLIST LABEL
  %attrs;                              -- %coreattrs, %i18n, %events --
  forIDREF          #ПРЕДПОЛАГАЕТСЯ  -- соответствует значению ID поля --
  accesskey%Character;    #ПРЕДПОЛАГАЕТСЯ  -- символ быстрого доступа --
  onfocus%Script;       #ПРЕДПОЛАГАЕТСЯ  -- элемент получил фокус --
  onblur%Script;       #ПРЕДПОЛАГАЕТСЯ  -- элемент потерял фокус --
  >

Начальный тег: необходим, Конечный тег: необходим

Определение атрибутов

for = idref [CS]

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

Атрибуты, определённые в другом месте

• id, class (идентификаторы документа)
• lang (язык), dir (направление текста)
• title (название элемента)
• style (название стиля)
• accesskey (символ быстрого доступа)
• onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Элемент LABEL может использоваться для присоединения информации к ЭУ. Каждый элемент LABEL ассоциирован только с одним ЭУ формы.

Атрибут for явно ассоциирует лэйбл с другим ЭУ: значение атрибута for должно быть тем же, что и атрибута id ассоциированного ЭУ. Более, чем один LABEL может быть ассоциирован с элементом путём создания множественных ссылок атрибута for.

В этом примере создаётся таблица, для выравнивания двух ЭУ text и ассоциированных с ними лэйблов. Каждый лэйбл ассоциируется только с одним ЭУ text:

<FORM action="..." method="post">
<TABLE>
  <TR>
    <TD><LABEL for="fname">First name</LABEL>
    <TD><INPUT type="text" name="firstname">
  <TR>
    <TD><LABEL for="lname">Last name</LABEL>
    <TD><INPUT type="text" name="lastname">
</TABLE>
</FORM>

Этот пример дополняет предыдущий включением элементов LABEL:

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    <LABEL for="firstname">First name: </LABEL>
              <INPUT type="text"><BR>
    <LABEL for="lastname">Last name: </LABEL>
              <INPUT type="text"><BR>
    <LABEL for="email">email: </LABEL>
              <INPUT type="text"><BR>
    <INPUT type="radio" name="sex" value="Male"> Male<BR>
    <INPUT type="radio" name="sex" value="Female"> Female<BR>
    <INPUT type="submit" value="Send"> <INPUT type="reset">
    </P>
 </FORM>

Чтобы ассоциировать лэйбл  с другим ЭУ неявно, ЭУ должен находиться внутри содержимого элемента LABEL. В этом случае LABEL может содержать только один элемент управления. Лэйбл может находиться перед или после ассоциированного ЭУ.

В этом примере мы неявно ассоциируем два лэйбла с двумя ЭУ text:

<FORM action="..." method="post">
<P>
<LABEL>
   First name
   <INPUT type="text" name="firstname">
</LABEL>
<LABEL>
   <INPUT type="text" name="lastname">
   Last name
</LABEL>
</P>
</FORM>

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

Если  LABELполучает фокус/focus, он передаёт фокус ассоциированному ЭУ. См. ниже раздел о клавишах быстрого доступа/access keys.

Лэйблы могут рассматриваться ПА различными способами (напр., визуально, речевым синтезатором и т.д.)

<!--
  #PCDATA здесь решает проблему смешанного содержимого,
  по спецификации здесь допустимы только пробелы!
 -->
<!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*) -- группа ЭУ -->
<!ATTLIST FIELDSET
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT LEGEND - - (%inline;)*       -- "легенда" набора полей -->
<!ATTLIST LEGEND
  %attrs;                              -- %coreattrs, %i18n, %events --
  accesskey%Character;    #ПРЕДПОЛАГАЕТСЯ  -- символ быстрого доступа --
  >

Начальный тег: необходим, Конечный тег: необходим

Определение атрибута элемента LEGEND

align = top|bottom|left|right [CI]

Не рекомендуется. Этот атрибут определяет позицию «легенды» в том, что касается набора полей. Возможные значения:

• top: «Легенда» находится сверху над набором полей. Это значение по умолчанию.
• bottom: «Легенда» находится под набором полей..
• left: «Легенда» находится слева от набора полей.
• right: «Легенда» находится справа от набора полей.

Атрибуты, определённые в другом месте

• id, class (идентификаторы документа)
• lang (язык), dir (направление текста)
• title (название элемента)
• style (название стиля)
• accesskey (символ быстрого доступа)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Элемент FIELDSET позволяет тематически группировать ЭУ и лэйблы. Группирование ЭУ облегчает пользователю понимание их назначение, одновременно облегчая навигацию табуляцией для визуальных ПА и речевую навигацию для ПА, ориентированных на голосовое управление. Правильное использование этого элемента делает документы более доступными.

Элемент LEGEND даёт возможность установить заглавие к FIELDSET. «Легенда» улучшает доступность, если FIELDSET просматривается невизуально.

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

<FORM action="..." method="post">
 <P>
 <FIELDSET>
  <LEGEND>Персональная информация</LEGEND>
  Фамилия: <INPUT name="personal_lastname" type="text" tabindex="1">
  Имя: <INPUT name="personal_firstname" type="text" tabindex="2">
  Адрес: <INPUT name="personal_address" type="text" tabindex="3">
  . ..другая информация...
 </FIELDSET>
 <FIELDSET>
  <LEGEND>История болезни</LEGEND>
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Smallpox" tabindex="20"> Оспа
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Mumps" tabindex="21"> Свинка
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Dizziness" tabindex="22"> Головокружение
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Sneezing" tabindex="23"> Кашель
  ...другие данные...
 </FIELDSET>
 <FIELDSET>
  <LEGEND>Текущее лечение</LEGEND>
  Лечитесь ли Вы сейчас? 
  <INPUT name="medication_now" 
         type="radio" 
         value="Yes" tabindex="35">Да
  <INPUT name="medication_now" 
         type="radio" 
         value="No" tabindex="35">Нет
  Если Вы лечитесь, укажите ниже, как:
  <TEXTAREA name="current_medication" 
            rows="20" cols="50"
            tabindex="40">
  </TEXTAREA>
 </FIELDSET>
</FORM>

Заметьте, что в этом примере мы улучшили визуальное представление формы выравниванием элементов в каждом FIELDSET (с помощью таблиц стилей), изменив цвета и шрифты (с помощью таблиц стилей), добавив скрипты (т. е., чтобы открыть только «Текущее лечение», если пользователь укажет, что он/она лечится в данный момент) и т.д.

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

Существует несколько способов передачи фокуса элементу:

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

17.11.1   Навигация  с помощью табуляции

Определение атрибута

tabindex = number [CN]

Определяет позицию элемента в порядке табуляции в текущем документе. Это должно быть цифровое значение в диапазоне от 0 до 32767. ПА должны игнорировать ведущие нули.

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

Элементы, которые могут получать фокус, «перебираются» пользовательским элементом в соответствии со следующими правилами:

1. Элементы, поддерживающие атрибут tabindex, и имеющие для него положительное значение, перебираются в первую очередь. Навигация проходит от элемента с наименьшим значением tabindex к элементу с наибольшим значением. Значения могут не быть непрерывной последовательностью или начинаться каким то определённым значением. Элементы, имеющие одинаковые значения tabindex, должны перебираться в том порядке, в котором они появляются в потоке символов.
2. Элементы, не поддерживающие атрибут tabindex или поддерживающие его и устанавливающие значение «0», считаются текстом. Эти элементы перебираются в порядке, в котором они следуют в потоке символов.
3. Недоступные элементы не перебираются при табуляции.

Следующие элементы поддерживают атрибут tabindex: A, AREA, BUTTON, INPUT, OBJECT, SELECT и TEXTAREA.

В этом примере порядок табуляции: BUTTON, элементы INPUT по порядку (заметьте, что «field1» и кнопка разделяют один индекс табуляции, но «field1» появляется позже в потоке символов), и наконец — гиперссылка, созданная элементом A.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict. dtd">
<HTML>
<HEAD>
<TITLE>A document with FORM</TITLE>
</HEAD>
<BODY>
...ещё текст...
<P>Go to the 
<A tabindex="10" href="http://www.w3.org/">W3C Web site.</A>
...ещё...
<BUTTON type="button" name="get-database"
           tabindex="1">
Get the current database.
</BUTTON>
...ещё...
<FORM action="..." method="post">
<P>
<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
</P>
</FORM>
</BODY>
</HTML>

Клавиши табуляции. Реальная последовательность клавиш, вызывающая навигацию при помощи табуляции или активацию элементов, зависит от конфигурации ПА (напр., клавиша «tab» используется для навигации, а клавиша «enter» — для активации выбранного элемента).

ПА должны также определять последовательность клавиш для навигации в обратную сторону. Если достигнут конец (или начало) ряда табуляции, ПА должен «зацикливаться» на начало (или конец).

Определение атрибута

accesskey = символ/character [CN]

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

Нажатие клавиши доступа, назначенной элементу, передаёт фокус этому элементу. Действие после получения фокуса зависит от элемента. Например, если пользователь активизирует гиперссылку, определённую элементом A, ПА обычно переходит по ссылке. Если пользователь активизирует radio-кнопку, ПА изменяет значение radio-кнопки. Если пользователь активирует поле text, оно становится доступным для ввода и т.д.

Следующие элементы поддерживают атрибут accesskey: A, AREA, BUTTON, INPUT, LABEL, LEGEND и TEXTAREA.

В следующем примере клавиша «U» устанавливается для лэйбла, ассоциированного с ЭУ INPUT. Нажатие клавиши доступа передаёт фокус лэйблу, который, в свою очередь, передаёт его ассоциированному ЭУ. Пользователь может вводить текст в поле INPUT.

<FORM action="..." method="post">
<P>
<LABEL for="fuser" accesskey="U">
User name
</LABEL>
<INPUT type="text" name="user">
</P>
</FORM>

В следующем примере мы устанавливаем клавишу доступа гиперссылке, определённой элементом A. Нажатие клавиши переводит пользователя к другому документу, в данном случае — к оглавлению.

<P><A accesskey="C" 
      rel="contents"
      href="http://someplace.com/specification/contents.html">
    Table of Contents</A>

Вызов быстрых клавиш зависит от операционной системы. Например, на машинах с MS Windows обычно нужно нажимать «alt» одновременно с клавишей доступа. В системе Apple — «cmd» одновременно с клавишей доступа.

Отображение клавиш доступа зависит от ПА. Мы рекомендуем, чтобы авторы включали клавиши доступа в лэйблы. ПА должны рассматривать значение клавиш доступа так, чтобы подчеркнуть их значение и выделить из окружающего текста (например, подчёркиванием).

В тех случаях, когда ввод данных пользователем не нужен или не желателен, важно иметь возможность делать ЭУ недоступными или «только для чтения». Например, кнопка submit может быть недоступной, пока пользователь не введёт нужные данные. Также автор может включить отрывок текста «только для чтения», который должен быть отправлен вместе с формой. Следующий раздел описывает Недоступные и «Только для чтения» ЭУ.

17.12.1 Недоступные ЭУ

Определение атрибута

disabled [CI]

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

Установленный атрибут disabled действует на ЭУ следующим образом:

• Недоступный ЭУ не может получить фокус.
• Недоступный ЭУ скрыт от навигации табуляцией.
• Недоступный ЭУ не может быть «действующим».

Следующие ЭУ поддерживают атрибут disabled: BUTTON, INPUT, OPTGROUP, OPTION, SELECT и TEXTAREA.

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

То, как недоступные ЭУ отображаются, зависит от ПА. Например, некоторые ПА выделяют серым цветом недоступные элементы меню, лэйблы кнопок и т.п.

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

<INPUT disabled name="fred" value="stone">

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

Определение атрибута

readonly [CI]

Если установлен, этот булев атрибут запрещает изменение ЭУ.

Атрибут readonly определяет, может ли ЭУ быть модифицирован  пользователем.

Если установлен, атрибут readonly действует на элемент следующим образом:

• ЭУ «только для чтения» может получить фокус, но не может быть модифицирован пользователем.
• ЭУ «только для чтения» включён в навигацию табуляцией.
• ЭУ «только для чтения» может быть «действующим».

Следующие ЭУ поддерживают атрибут readonly: INPUT и TEXTAREA.

То, как ЭУ «только для чтения» отображаются, зависит от ПА.

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

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

17.13.1  Метод отправки формы

Атрибут method элемента FORM определяет метод HTTP, используемый для отправки формы программе-обработчику. Этот атрибут может иметь два значения:

• get: методом «get» HTTP набор данных формы присоединяется к URI, определённому атрибутом action  (со знаком «?» в качестве разделителя), и этот новый URI высылается программе-обработчику.
• post: методом «post» HTTP набор данных формы включается в тело формы и высылается программе-обработчику.

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

Если сервис, ассоциированный с обработчиком формы, имеет побочный эффект (например, если форма модифицирует базу данных или подписку на сервис), должен использоваться метод «post».

Примечание. Метод «get» ограничивает набор данных формы символами ASCII. Только метод «post» (с  enctype=»multipart/form-data») специфицирован для использования с полным набором символов [ISO10646].

17.13.2   «Действующие» ЭУ

Действующий ЭУ — это ЭУ, «годный» для отправки. Каждый действующий ЭУ имеет пару: имя ЭУ и текущее значение как часть отправляемого с формой набора данных формы. Действующий ЭУ должен быть определён внутри элемента форма/FORM и должен иметь имя ЭУ.

В то же время:

• Недоступные  ЭУ — те, которые не могут быть «действующими».
• Если форма содержит больше одной кнопки submit, только активированная кнопка submit может быть действующей.
• Все «on» переключатели могут быть действующими.
• Из radio-кнопок, использующих одно значение атрибута name, только «on/включённая» radio-кнопка может быть действующей.
• Для menu  имя ЭУ предоставляется элементом SELECT, а значения предоставляются элементом OPTION. только выбранная опция может быть действующей. Если ни одна опция не выбрана, ЭУ является «недействующим», и ни имя, ни любое другое значение не пересылается серверы при отправке формы.
• Текущее значение  file select  — это список из одного или более имён файлов. При отправке формы содержимое каждого файла отправляется вместе с данными формы. Содержимое файлов упаковывается в соответствии с типом содержимого формы.
• Текущее значение объекта ЭУ определяется реализацией объекта.

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

Также ПА не должны рассматривать следующие объекты как действующие:

• Кнопки Reset.
• Элементы OBJECT, чей атрибут declare установлен.

Скрытые ЭУ ЭУ, которые не отображаются из-за установок в таблицах стилей, могут быть действующими. Например:

<FORM action="..." method="post">
<P>
<INPUT type="password" name="invisible-password"
          value="mypassword">
</FORM>

создаёт значение в паре с «invisible-password», которое отправляется вместе с формой.

17.13.3  Обработка данных формы

Если пользователь отправил форму (напр., активацией кнопки submit), ПА обрабатывает её следующим образом:

Шаг 1: Идентификация «действующих» ЭУ

Шаг 2: Создание набора данных формы

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

Шаг 3:  Кодирование набора данных формы

Набор данных формы кодируется в соответствии с типом содержимого, определённым атрибутом enctype элемента FORM.

Шаг 4:  Отправка кодированного набора данных формы

Наконец кодированные данные пересылаются обработчику, определённому в атрибуте action с использованием протокола, указанного в атрибуте method.

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

• Если method — «get» и action — HTTP URI, ПА берёт значение action, добавляет `?’ к нему, затем присоединяет набор данных формы, кодированный с использованием  типа содержимого «application/x-www-form-urlencoded». Затем ПА перенаправляет всё по гиперссылке на этот URI. В этом сценарии данные формы ограничены кодами ASCII.
• Если method — «post» и action — HTTP URI, ПА проводит транзакцию HTTP «post», используя значение атрибута action и сообщение, созданное в соответствии с типом содержимого, определённым атрибутом enctype.

Для любых других значений action или method поведение не определено.

ПА должен уметь принять ответ от транзакций HTTP «get» и «post».

17.13.4  Типы содержимого формы

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

См. раздел о использовании escape-последовательностей для обозначения амперсандов в значениях атрибутов URI.

application/x-www-form-urlencoded  

Это тип содержимого по умолчанию. Формы отправленные с содержимым этого типа, должны кодироваться так:

1. Имена ЭУ и значения переводятся в escape-последовательности. Символы пробелов заменяются `+’, и затем зарезервированные символы переводятся в escape-последовательности, как описано в [RFC1738], раздел 2.2:
   Неалфавитные символы заменяются `%HH’, знаком процента и двумя 16-ричными цифрами, представляющими ASCII-код символа. Символы новой строки представляются парами «CR LF» (напр., `%0D%0A’).
2. Пары имя/значение перечисляются в том порядке, в котором они появляются в документе. Имя отделено от значения знаком `=’ и пары имя/значение отделены друг от друга знаком `&’.

multipart/form-data  

Примечание. См. в [RFC2388] информацию о подгрузке файлов, включая проблемы обратной совместимости, взаимоотношения между «multipart/form-data» и другими типами содержимого, вопросы функционирования и т. д.

Пожалуйста прочтите дополнительно о проблемах безопасности в формах.

Типа содержимого «application/x-www-form-urlencoded» недостаточно для пересылки данных большого объёма данных бинарного типа или текста, содержащего не-ASCII символы. Тип содержимого «multipart/form-data» должен использоваться для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные.

Содержимое «multipart/form-data» следует правилам всех составных MIME-данных, как описано в  [RFC2045]. Определение «multipart/form-data» можно найти в регистре [IANA].

Сообщение «multipart/form-data» содержит несколько частей, каждая из которых представляет «действующий» ЭУ. Эти части пересылаются обработчику в том же порядке, в каком соответствующие ЭУ появляются в потоке документа. Границы частей не должны появляться внутри каких-либо данных; то, как это достигается, находится за рамками данной спецификации.

Как и все многочастные типы MIME, каждая часть может иметь заголовок «Content-Type», который по умолчанию содержит «text/plain». ПА должны предоставлять заголовок «Content-Type» вместе с параметром «charset».

Каждая часть должна содержать:

1. заголовок «Content-Disposition», значением которого является «form-data».
2. атрибут имя, определяющий имя соответствующего ЭУ. Имена ЭУ, кодированные в оригинале в не-ASCII наборе символов, могут быть кодированы с использованием метода, описанного в [RFC2045].

Таким образом, для ЭУ с именем «mycontrol», соответствующая часть будет определена:

Content-Disposition: form-data; name="mycontrol"

Как и в других передачах MIME, «CR LF» (т.е., `%0D%0A’) используется для разделения строк данных.

Каждая часть может кодироваться, и заголовок «Content-Transfer-Encoding» предоставляется, если значение этой части не соответствует кодировке по умолчанию(7BIT) (см. [RFC2045], раздел 6)

Если содержимое файла отправляется с формой, ввод файла должен идентифицироваться соответствующим типом содержимого (напр. , «application/octet-stream»). Если несколько файлов возвращено как результат единого ввода формы, они должны быть возвращены как «multipart/mixed», внедрённые в «multipart/form-data».

ПА должен попытаться предоставить имя для каждого пересылаемого файла. Имя файла может быть определено параметром «filename» в заголовке ‘Content-Disposition: form-data’  или, в случае с нескольким файлами, заголовком  ‘Content-Disposition: file’ подраздела. Если имя файла клиентской операционной системы не-US-ASCII, имя файла может быть приближено или кодировано с использованием метода [RFC2045]. Это подходит для всех тех случаев, когда, например, подгруженные файлы могут содержать ссылку друг на друга (напр.,  TeX файл и его «.sty» — дополнительное описание стиля).

Следующий пример иллюстрирует кодирование «multipart/form-data». Предположим, у нас есть такая форма:

 <FORM action="http://server.com/cgi/handle"
       enctype="multipart/form-data"
       method="post">
   <P>
   Как Вас зовут? <INPUT type="text" name="submit-name"><BR>
   Какие файлы Вы послали? <INPUT type="file" name="files"><BR>
   <INPUT type="submit" value="Send"> <INPUT type="reset">
 </FORM>

Если пользователь вводит «Larry» в окне ввода текста и выделяет текстовый файл «file1. txt», ПА должен выслать обратно следующие данные:

   Content-Type: multipart/form-data; boundary=AaB03x
   --AaB03x
   Content-Disposition: form-data; name="submit-name"
   Larry
   --AaB03x
   Content-Disposition: form-data; name="files"; filename="file1.txt"
   Content-Type: text/plain
   ... содержимое файла file1.txt ...
   --AaB03x--

Если пользователь выделит второй (image) файл «file2.gif», ПА может создать части так:

   Content-Type: multipart/form-data; boundary=AaB03x
   --AaB03x
   Content-Disposition: form-data; name="submit-name"
   Larry
   --AaB03x
   Content-Disposition: form-data; name="files"
   Content-Type: multipart/mixed; boundary=BbC04y
   --BbC04y
   Content-Disposition: file; filename="file1.txt"
   Content-Type: text/plain
   ... содержимое файла file1.txt ...
   --BbC04y
   Content-Disposition: file; filename="file2.gif"
   Content-Type: image/gif
   Content-Transfer-Encoding: binary
   ...содержимое файла file2.gif...
   --BbC04y--
   --AaB03x--

HTML | DOM Input Text defaultValue Свойство

Просмотреть обсуждение

Улучшить статью

Сохранить статью

• Последнее обновление: 26 авг, 2022

Посмотреть обсуждение

Улучшить статью

Сохранить статью

Свойство Input Text defaultValue в HTML DOM используется для установки или возврата значения по умолчанию для текстового поля. Это свойство используется для отражения атрибута значения HTML. Основное различие между значением по умолчанию и значением заключается в том, что значение по умолчанию указывает значение по умолчанию, а значение содержит текущее значение после внесения некоторых изменений. Это свойство полезно, чтобы узнать, было ли изменено текстовое поле или нет.

Синтаксис:

• Возвращает свойство defaultValue.

 textObject.defaultValue 

• Используется для установки свойства defaultValue.

 textObject.defaultValue = значение 

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

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

Пример 1: В этом примере показано, как вернуть свойство input Text defaultValue.

HTML

Форма > < BR >

<

991919>0066 Кнопка ONCLICK = "MYGEEKS ()"> Нажмите здесь! Кнопка >

< P ID = "GFG"> P ID = "GFG"> P ID = "GFG"> < P ID = "GFG"> < P ID = ".

< сценарий >

9 Функция MyGeeks () {

9 .0066 var txt = document.getElementById("text_id").defaultValue;

             document.getElementById("GFG").innerHTML = txt;

         }

     script >

body >

html >

Выход:  

Перед нажатием кнопки:  

После нажатия кнопки:

HTML

Output:  

Перед нажатием кнопки:

После нажатия кнопки:

Поддерживаемые браузеры: Браузер, поддерживаемый DOM input Text defaultValue Свойство перечислены ниже:

• Google Chrome 1 и выше
• Edge 12 и выше
• Firefox 1 и выше
• Opera
• Safari 1 и выше
Next






Пропорциональное изменение размера изображения с помощью CSS

Рекомендуемые статьи

Страница :

- HTML: Язык гипертекстовой разметки

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

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

 пусть theText = myTextInput.value;
 

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

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

list

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

maxlength

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

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

minlength

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

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

шаблон

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

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

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

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

заполнитель

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

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

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

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

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

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

size

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

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

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

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

ложь

Отключить проверку орфографии для этого элемента.

правда

Включить проверку орфографии для этого элемента.

"" (пустая строка) или нет значения

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

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

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

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

autocorrect

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

на

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

от

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

mozactionhint

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

Этот атрибут устарел: используйте вместо него глобальный атрибут enterkeyhint .

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

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

 <форма>
  <дел>
    Выберите имя пользователя: 
    <тип ввода="текст" имя="имя" />