Html строка ввода: Тег

Содержание

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

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

Синтаксис

HTML	`<input атрибуты>`
XHTML	`<input атрибуты />`

Атрибуты

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

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

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

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

Пример

HTML5IECrOpSaFx6

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT</title>
 </head>
 <body>

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

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид элементов формы в браузере

Атрибут type | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

Синтаксис

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

Обязательный атрибут

Да

Значения

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

В HTML5 добавлены новые значения, представленные в табл. 2.

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

Поддержка этих значений браузерами показана в табл. 3.

Табл. 3. Поддержка браузерами значений HTML5
Значение	Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
color		21.0+	11.01+
date		5.0+	10.62+	5.0+			5.0+
datetime		5.0+	10.62+	5.0+			5.0+
datetime-local		5.0+	10.62+	5.0+			5.0+
email	10.0	5.0+	10.62+	5.0+	4.0+	2.3+	3.1+
month		5.0+	10.62+	5.0+			5.0+
number	10.0	6.0+	10.62+	5.0+		2.3+	4.0+
range	10.0	5.0+	10.62+	5.0+	23.0+		5.0+
search	10.0	5.0+	11.01+	5.0+	4.0+		4.0+
tel	10.0	5.0+	11.01+	5.0+	4.0+		3.1+
time		5.0+	10.62+	5.0+			5.0+
url	10.0	5.0+	10.62+	5.0+	4.0+	2.3+	3.1+
week		5.0+	10.62+	5.0+			5.0+

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

text

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут type</title>
 </head>
 <body>  
 
  <form action="input10.php">
   <p><input type="radio" name="drink" value="rad1"> Пиво<Br>
   <input type="radio" name="drink" value="rad2"> Чай<Br>
   <input type="radio" name="drink" value="rad3"> Кофе</p>
   <p><input type="image" src="images/imgbutton.gif"></p>
  </form>

 </body>
</html>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут type</title>
 </head>
 <body>   
  <form>
  <p>Введите число от 1 до 10</p>
  <p><input type="range" min="1" max="10"></p>
  </form>
 </body>
</html>

Шаблон ввода данных | htmlbook.ru

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

Табл. 1. Регулярные выражения
Выражение	Описание
\d [0-9]	Одна цифра от 0 до 9.[ 0-9]+$	Любое число.

В примере 1 показано, как сделать ввод IP-адреса

Пример 1. Шаблон ввода IP-адреса

HTML5IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ввод IP-адреса</title>
 </head>
 <body>
  <form>
   <p>Введите IP-адрес:</p>
   <p><input name="ip" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

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

Рис. 1. Ввод неверных данных

Тег HTML текстовая область, многострочное поле

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

Текстовое поле для ввода, созданное с помощью тега <textarea>, не имеет ограничений по количеству вводимых символов.

Размеры textarea HTML регулируются с помощью атрибутов rows и cols. Атрибут тега <textarea> rows регулирует высоту области, задавая количество строк, выводимых на экран без прокрутки (скроллинга). Атрибут тега <textarea> cols регулирует ширину текстовой области, рассчитывается в пикселях, как средняя ширина символа, умноженная на значение атрибута.

По умолчанию изменять размер textarea можно растягивая текстовую область за правый нижний край. Если нужно сделать <textarea> фиксированного размера, следует использовать CSS-правило resize: none;. Это отключит возможность растягивать область ввода.

Тег <textarea> HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

Синтаксис

<textarea>текст</textarea>

Примеры использования <textarea> в HTML коде

HTML код текстовой области <textarea>

<textarea name="message" cols="30" rows="4" placeholder="Введите сообщение"></textarea>

<textarea> с фиксированным размером (no resize textarea)

По умолчанию пользователь может изменять размер текстовой области <textarea> (растягивать область ввода за край).

Для того, чтобы запретить изменение размера <textarea> используйте CSS свойство resize. Значение none поставит запрет на изменение размеров текстовой области, как ширины, так и высоты.

Если необходимо, чтобы у textarea была фиксированная ширина, установите значение у CSS свойства resize в vertical, при этом высоту области можно будет изменить. Если нужно иметь возможность изменять ширину <textarea> при фиксированной высоте, используйте значения horizontal.

Отображение в браузере:

HTML код <textarea> с фиксированной шириной и высотой

<style type="text/css"> 
textarea[name="details"] { 
resize: none; 
} 
</style>
<textarea name="details" cols="30" rows="3" placeholder="Введите дополнительную информацию"></textarea>

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

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

Атрибут	Значения	Описание
autofocus	не указывается / autofocus	Логический атрибут. Если указан, при загрузке документа фокус будет переведен на текстовую область.
cols	число	Определяет ширину текстовой области. Ширина области рассчитывается в пикселях как ширина символа, умноженная на значение этого атрибута. Значение приблизительно равняется количеству символов моноширинного шрифта, которые должны занимать полную строку в текстовой области.
disabled	не указывается / disabled	Логический атрибут. Если указан, делает текстовую область неактивной. Данные текстовой области, отмеченной этим атрибутом, не будут переданы на сервер при отправке формы. Также отключает возможность ввода текста в текстовую область.
form	id формы	Указывает на форму, к которой относится текстовая область. Используется, если <textarea> находится вне HTML кода формы. Если текстовая область находится внутри тега <form>, то использовать атрибут form не нужно, текстовая область по умолчанию привязана к форме, внутри которой находится.
maxlength	число	Определяет максимальное количество символов, которые пользователь может ввести в текстовую область. По умолчанию объем текста в текстовой области не ограничен.
name	текст	Имя текстовой области. Используется при передаче данных формы на сервер. Значение (текст) текстовой области будет передано в переменной, имеющей имя, указанное в этом атрибуте.
placeholder	текст	Текст, который будет отображаться внутри текстовой области, когда она не заполнена текстом. Обычно это описание того, что должен ввести пользователь, либо пример заполнения.
readonly	не указывается / readonly	Логический атрибут. Если указан, пользователь не сможет изменить значение (текст) в текстовой области. Используется для создания текстовых областей, доступных только для чтения.
required	не указывается / required	Логический атрибут. Если указан, текстовая область будет определена как обязательная для заполнения. Форма не будет отправлена на сервер, если текстовая область не будет заполнена. Заполнение контролируется браузером. При попытке отправить форму с незаполненной обязательной текстовой областью, браузеры обычно выводят на экран ошибку заполнения.
rows	число	Определяет высоту текстовой области. В качестве значения необходимо указать количество строк, которые должны быть видны без прокрутки (скроллинга).
wrap	hard soft	Определяет правила переноса строк: Значение hard: символы переноса строки будут добавлены в конце каждой строки в текстовой области. Таким образом, введенный текст из текстовой области переданный на сервер будет иметь ширину не больше, чем ширина <textarea>. Для использования этого значения необходимо указать атрибут cols. Значение soft: символы переноса ставятся там, где их ставил пользователь. Таким образом текст из текстовой области, переданный на сервер в дальнейшем сможет растягиваться под ширину тега-контейнера. Значение по умолчанию.

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

Тег input — поле ввода

Тег input создает различные элементы HTML формы: обычное поле ввода, поле для ввода пароля, флажок checkbox (чекбокс), радио кнопочки (radio), кнопку.

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

Не требует закрывающего тега.

Атрибуты

Атрибут	Описание
type	Задает тип поля ввода. Варианты см. ниже.
value	Значение по умолчанию в поле ввода. В случае с кнопкой задает ее текст. Подробнее см. атрибут value.
placeholder	Подсказка в поле ввода, подробнее см. атрибут placeholder.
name	Имя поля ввода. Нужно для того, чтобы достать данные поля ввода в PHP. Для корректной работы формы имена полей ввода не должны совпадать друг с другом (в одной форме). Если они совпадают — в PHP придут данные того поля ввода, которое ниже в HTML коде.
disabled	Блокирует элемент формы (не только input, а практически любой), подробнее см. атрибут disabled.

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

Значение	Описание
text	Создает обычное текстовое поле ввода.
password	Создает текстовое поле ввода для пароля. Попробуйте вбить в него текст — он отобразится звездочками.
checkbox	Создает флажок чекбокс. Подробнее см. checkbox.
radio	Создает радио переключатель. Подробнее см. radio.
hidden	Создает скрытый инпут, который не будет виден на экране, но будет отправлять содержащиеся в атрибуте value данные на сервер.
button	Создает кнопку. Нажатие на эту кнопку не будет отправлять форму на сервер. Она может быть использована внутри ссылки или через JavaScript. По умолчанию кнопка не имеет текста (пример кнопки без текста: ), он задается с помощью value. См. также тег button, который также делает кнопку.
submit	Создает кнопку, которая будет отправлять данные на сервер. Текст кнопки зависит от браузера, его можно сменить с помощью value. См. также тег button, который также делает кнопку.
reset	Создает кнопку, которая очищает заполненную форму. Текст кнопки зависит от браузера, его можно сменить с помощью value.
file	Создает кнопку выбора файла. Дизайн этой кнопки запрещено менять через CSS (однако есть хитрые способы). Если вам требуется такое поле в форме, то тег form должен иметь атрибут enctype в значении multipart/form-data.

Новые в HTML5 значения атрибута type

Данные значения атрибута новые, появились только в HTML5, поэтому в некоторых браузерах они могут не работать или работать по-разному в разных браузерах.

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

Посмотрите приведенные ниже примеры в разных браузерах. Попробуйте вводить в инпуты текст и нажать на кнопку отправки. Если текст некорректный или поле пустое — браузер выдаст ошибку. К примеру, если в поле с типом email вбить некорректный email — браузер не даст отправить форму и выдаст сообщение об ошибке (текст ошибки и ее внешний вид на html css менять нельзя). Если поле пустое — браузер тоже выдаст ошибку, это достигается с помощью атрибута required:

Значение	Описание
email
number
url
tel
search
color
date
month
week
datetime
datetime-local
range

Смотрите также

тег textarea,
который создает многострочное поле ввода
атрибут pattern,
который осуществляет валидацию полей

Учебник HTML 5. Статья «Формы»

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

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

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

Элемент имеет следующий синтаксис:

<form>
элементы формы
</form>

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

Значение	Описание
button	Определяет кнопку. Как правило, используется в основном совместно с языком программирования JavaScript для активации скрипта.
checkbox включено выключено	Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Элемент также называют флажок, флаговая кнопка, чекбокс, галочка.
color	Элемент управления для задания цвета (определяет палитру цветов).
date	Элемент управления для ввода даты в формате DD.MM.YYYY (день, месяц и год). В элементе не указывается время.
datetime-local	Элемент управления для ввода даты в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты). В элементе не указывается часовой пояс.
email	Определяет поле для ввода адреса электронной почты.
file	Элемент управления, который позволяет пользователю выбрать файл.
hidden	Элемент управления, который определяет скрытое поле ввода.
image	Элемент управления, который определяет графическую кнопку «отправить форму» (значение submit). По аналогии с тегом <img> вы должны использовать атрибут src, чтобы задать путь к изображению и атрибут alt, чтобы указать альтернативный текст, если изображение не будет загружено по каким-то причинам. Размеры изображения задаются атрибутами width (ширина) и height (высота).
month	Элемент управления для ввода месяца и года (Month YYYY). В элементе не указывается часовой пояс.
number	Элемент управления для ввода числа с плавающей точкой.
password	Определяет однострочное текстовое поле, предназначенное для ввода пароля (символы, введенные внутри поля скрываются). Используйте атрибут maxlength HTML тега <input>, чтобы задать максимальную длину значения, которое может быть введено в поле.
radio выбрано не выбрано	Элемент графического пользовательского интерфейса, который позволяет пользователю выбрать одно значение из предопределенной группы значений. Элемент, как правило, называют радиокнопка (radio button) или переключатель.
range	Элемент управления для ввода номера (регулятор), в котором ввод точного значения не является важным. Этот тип управления использует следующие значения по умолчанию, если атрибуты не указаны: min = «0» max = «100» value = min + (max — min) / 2, или min (если max меньше чем min) step = «1»
reset	Определяет кнопку сброса содержимого формы до значений, установленных по умолчанию.
search	Определяет однострочное текстовое поле для ввода строки поиска
submit	Определяет кнопку отправки формы
tel	Определяет элемент управления для ввода телефонного номера.
text	Определяет однострочное текстовое поле (по умолчанию имеет ширину в 20 символов). Это значение по умолчанию.
time	Определяет элемент управления для ввода времени без указания часового пояса (hh:mm).
url	Определяет поле для ввода абсолютного URL-адреса.
week	Определяет элемент управления для ввода порядкого номера недели в году и самого года (Неделя NN, YYYY). В элементе не указывается часовой пояс.

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

checkbox (флаговая кнопка).
radio (радиокнопка).
submit (кнопкa отправки формы).
text (однострочное текстовое поле).

Давайте рассмотрим пример использования этих элементов управления внутри формы:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML формы</title>
	</head>
	<body>
		<form>
			Имя: <input type = "text"  name = "firstname" value =  "Введите имя"> <br> <br>
			Фамилия: <input type = "text" name = "lastname" value =  "Введите фамилию"> <br> <br>
			Мужчина <input  type = "radio" name = "sex" value =  "male" checked>
			Женщина <input type = "radio" name = "sex" value =  "female"> <br> <br>
			О себе: <br>
			<input type = "checkbox" name = "type1" value = "low">Меньше 18<br>
			<input type = "checkbox" name = "type2" value = "2old">От 18 до 35<br>
			<input type = "checkbox" name = "type3" value = "high">Больше 35<br>
			<input type = "checkbox" name = "type4" value = "busy">Женат /-а<br>
			<input type = "checkbox" name = "type5" value = "cat">Есть кошка<br>
			<br>
			<input type = "submit" name = "submit" value = "отправить">
		</form>
	</body>
</html>

И так по порядку, что мы сделали в этом примере:

Разместили два однострочных текстовых поля (<input type = «text»>) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.

первой

Разместили пять флaговых кнопок (чекбоксов), которые позволяют пользователям указать необходимые параметры (выбрать необходимые значения). Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили для этих полей необходимые значения.
Заключительный элемент, который мы разместили внутри формы это кнопка, которая служит для отправки формы (<input type = «submit»>). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

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

Рис 32 HTML формы.

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

Обработчик формы это, как правило, обычная страница сервера, которая с помощью скрипта обрабатывает входные (полученные) данные. Чтобы указать обработчик формы, необходимо использовать тег <form> совместно с атрибутом action:

<form action = "example.php">

Обратите внимаение, что в атрибуте action указывается URL адрес того места, куда отправляется форма. Если для формы не задан атрибут action, то значением по умолчанию этого атрибута считается текущая страница (обработчик формы — текущая страница). В приведенном выше примере, предпологается, что скрипт обработки формы находится внутри страницы «example.php».

Расширение *.php используется для файлов, написанных на языке PHP (Hypertext Preprocessor — препроцессор гипертекста, произносится как «пи-эйч-пи») — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.

Еще одним важным атрибутом при работе с элементом <form> является атрибут method, он определяет метод HTTP (get или post), который используется при передаче формы:

<form action =  "example.php" method =  "get">
или:
<form  action = "example.php"  method = "post">

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

http://www.kakoitosait.ru/example.php?firstname=Вася&lastname=Пупкин

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

Группировка данных формы

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

Тег <legend> определяет заголовок для <fieldset> элемента, с помощью которого группируются элементы формы.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Группировка данных формы</title>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>Пожалуйста, представьтесь</legend>
				Имя: <input type =  "text" name = "firstname" value =  "Введите имя"> <br> <br>
				Фамилия: <input type =  "text" name = "lastname" value =  "Введите фамилию"> <br> <br>
				Мужчина <input type =  "radio" name = "sex" value =  "male" checked>
				Женщина <input type =  "radio" name = "sex" value =  "female"><br> <br>
				<input type = "submit" name = "submit" value = "отправить">
			</fieldset>
		</form>
	</body>
</html>

В этом примере мы:

Разместили внутри формы (парный тег <form>) элемент <fieldset>, благодаря которому мы группируем элементы формы, вокруг формы появляется рамка (внешний вид рамки может отличаться в зависимости от браузера). Тегом <legend> мы определяем для нашей рамки заголовок «Пожалуйста, представьтесь».
Разместили два однострочных текстовых поля (<input type = «text»>) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
Заключительный элемент это кнопка, которая служит для отправки формы (<input type = «submit»>). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

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

Рис 33 Группировка элементов формы.

Текстовая метка

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

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега <label>. Значение атрибута for должно соответствовать значению глобального атрибута id того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент <input> будет находиться внутри элемента <label>.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <label></title>
	</head>
	<body>
		<form>
			<label for = "yes">Да</label> <!--Здесь мы создаём метку для тега input c id = "yes"-->
			<input type = "radio" id = "yes"name = "choice" value = "yes" checked> 
			<label for = "no">Нет</label><!--Здесь мы создаём метку для тега input c id = "no"-->
			<input type = "radio"id = "no" name = "choice" value = "no">
		</form><br>
		<form>
			<label>Да <input type = "radio" name = "choice2" value = "yes"> </label><!--Здесь мы  помещаем теги <input>
			внутрь тегов <label> (при этом атрибут for не требуется)-->
			<label>Нет <input type = "radio"name = "choice2" value = "no" checked></label> 
		</form> 
	</body>
</html>

В этом примере мы:

Внутри первой формы:
- Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя, значения мы указали разные. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes). Кроме того, мы указали для радиокнопок глобальные атрибуты id, которые определяют уникальный идентификатор для элемента.
- Разместили два элемента <label>, которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for, чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута id необходимой нам радиокнопки.
Внутри второй формы:
- Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
- Разместили два элемента <label>, внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты id (идентификатор для элемента), а для текстовых меток использовать атрибут for, чтобы на них сослаться (сделать привязку).

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

Рис. 34 Использование текстовой метки (тег <label>).

Подсказка для полей ввода

Атрибут placeholder (HTML тега <input>) указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение.

Обратите внимание на то, что браузер Internet Explorer имеет поддержку данного атрибута только с 10-ой версии, в некоторых случаях вы можете использовать атрибут value в качестве подсказки для поддержки более ранних версий этого браузера (пример мы рассматривали выше).

Атрибут может быть использован с полями данных следующих типов (атрибут type):

email (поле для адреса электронной почты).
password (поле с паролем, в котором скрываются символы).
search (текстовое поле для ввода строки поиска).
text (однострочное текстовое поле).
tel (поле для ввода номера телефона).
url (поле для ввода URL-адреса).

Давайте рассмотри пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута placeholder</title>
	</head>
	<body>
		<form>
			Login: <input type = "text"  name = "login" placeholder = "Введите ваш логин"><br><br>
			Password: <input type = "password"  name = "password" placeholder = "Введите ваш пароль"><br>
			<button type = "submit">Далее</button>
		</form>
	</body>
</html>

В данном примере мы указали для элемента <input> с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Рис. 34а Атрибут placeholder HTML тега <input> (создание текстовой подсказки).

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Используя полученные знания составьте следующую форму оформления заказа:

Практическое задание № 22.

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

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

HTML | входное значение Атрибут

Значение Атрибут для элемента в HTML используется для указания начального значения элемента ввода. Имеет разное значение для разных типов ввода:

Свойства «button», «reset» и «submit» определяют текст на кнопке.
Свойства «текст», «пароль» и «скрытый» определяют начальное значение поля ввода.
Свойство «флажок», «радио» и «изображение» указывает значение, связанное с вводом.

Синтаксис:

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

Пример 1: В этом примере описывается атрибут значения .

< html >

< голова >

< заголовок > Входное значение HTML Атрибут заголовок >

головка >

< body style = "text-align: center" >

< h2 стиль = "цвет: зеленый;" >

GeeksforGeeks

h2 >

< h3 >

Входное значение HTML Атрибут

h3 >

Ввод: < вход тип = «текст»

значение = "GeeksforGeeks" >

корпус >

html >

Вывод:

Пример 2: В этом примере описывается атрибут значения .

< html >

< голова >

< заголовок > Входное значение HTML Атрибут заголовок >

головка >

< body style = "text-align: center" >

< h2 стиль = "цвет: зеленый;" >

GeeksforGeeks

h2 >

< h3 >

Входное значение HTML Атрибут

h3 >

< ввод тип = «кнопка» значение = «Отправить» >

корпус >

html >

Выход:

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

Apple Safari 1.0
Google Chrome 1.0
Firefox 1.0
Opera 1.0
Internet Explorer 2.0

HTML-тег

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

Синтаксис

Тег записывается как (без конечного тега).Тегу обычно присваивается атрибут типа , чтобы указать тип элемента управления, и атрибут name , чтобы обработчик формы мог ссылаться на него. Часто атрибут value используется для указания значения по умолчанию для элемента управления формы.

Есть много других атрибутов, которые можно использовать с тегом . Они перечислены ниже в разделе «Шаблон».

Вот базовый пример синтаксиса тега с некоторыми атрибутами:

Вот пример, который содержит три элемента в типичной форме:

Примеры

Основная форма

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

Форма Атрибут

Можно связать элемент с формой с помощью атрибута form элемента .

При использовании атрибута form элемента необходимо указать id формы, с которой вы хотите связать элемент.

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

Имя:

Фамилия:

Кнопки радио

В этом примере мы создаем радиокнопки.Мы делаем это, задавая атрибуту type значение radio . Каждая радиокнопка в группе должна иметь одно и то же значение name - так они связаны. Значение - это то, что отличает разные варианты.

Какой приз вам больше нравится?

<форма> Дом 1 миллион долларов Нет приза, спасибо, я уже счастлив 🙂

Элементы, связанные с формой

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

Вот элементы HTML, связанные с формой.

Атрибуты

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

Элемент принимает следующие атрибуты.

Атрибут Описание

accept

Задает список типов контента, разделенных запятыми, которые принимает сервер.

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

аудио / *
видео / *
изображение / *
[допустимый тип MIME, без параметров]
[строка, первый символ которой является (U + 002E) символом FULL STOP] (для указания расширения файла)

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

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

Запрещает браузеру использовать "автозаполнение" с этим элементом управления. Может быть полезно для конфиденциальных данных, таких как банковские реквизиты и т. Д.

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

автофокус

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

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

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

проверено Элемент управления вводом уже будет выбран при загрузке страницы.Используется с type = "radio" или type = "checkbox" .

отключено

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

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

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

dirname Определяет направление текста, представленного в поле input . Значением этого атрибута может быть строка текста, например имя поля. Например, если вы укажете атрибут как dirname = "text_dir" , после отправки формы данные могут выглядеть следующим образом: text_dir = ltr .

форма

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

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

[ID элемента формы в владельце элемента Документ ]

formaction Задает URL-адрес файла, который будет обрабатывать элемент управления при отправке.

formenctype

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

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

application / x-www-form-urlencoded (по умолчанию)
multipart / form-data (используйте это при загрузке файлов)
текст / обычный (используйте это при загрузке файлов)

formmethod

Задает метод HTTP, который будет использоваться при отправке элемента управления.

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

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

formnovalidate

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

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

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

[Пустая строка]
novalidate

formtarget

Задает контекст просмотра для загрузки пункта назначения, указанного в атрибуте action .

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

_ пустой
_ себя
_top
_ родительский

высота Задает высоту элемента управления.

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

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

maxlength Задает максимальное количество символов, которое пользователь может вводить в текстовое поле.

мин. Задает минимальное значение для элемента управления.

minlength Определяет нижнюю границу количества символов, которые может ввести пользователь.

несколько

Указывает, разрешено ли пользователю вводить более одного значения.

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

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

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

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

заполнитель

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

Примечание. Для более длинной подсказки или другого рекомендательного текста более подходит глобальный атрибут title.

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

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

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

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

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

требуется

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

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

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

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

src Если type = "image" , этот атрибут определяет расположение изображения.

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

type

Задает тип управления.

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

Значение	Тип данных	Тип управления
`скрыто`	Произвольная строка	НЕТ
`текст`	Текст без разрывов строки	Текстовое поле
`поиск`	Текст без разрывов строки	Текстовое поле
`тел.`	Текст без разрывов строки	Текстовое поле
`url`	Абсолютный URL	Текстовое поле
`электронная почта`	Адрес электронной почты или список адресов электронной почты	Текстовое поле
`пароль`	Текст без разрывов строк (конфиденциальная информация)	Текстовое поле, которое скрывает ввод данных (например, скрывает пароль с помощью звездочек (******) или аналогичных)
`datetime`	Дата и время (год, месяц, день, час, минута, секунда, доли секунды) с часовым поясом, установленным на UTC	Дата и время управления
`дата`	Дата (год, месяц, день) без часового пояса	Контроль даты
`месяц`	Дата, состоящая из года и месяца без часового пояса	Контроль месяца
`неделя`	Дата, состоящая из номера недели-года и номера недели без часового пояса	Управление неделей
`время`	Время (час, минута, секунды, доли секунды) без часового пояса	Контроль времени
`datetime-local`	Дата и время (год, месяц, день, час, минута, секунда, доли секунды) без часового пояса	Контроль даты и времени
`число`	Числовое значение	Текстовое поле или элемент управления счетчиком
`диапазон`	Числовое значение с дополнительной семантикой, что точное значение не важно	Ползунок или аналогичный
`цвет`	Цвет sRGB с 8-битными красными, зелеными и синими компонентами	Цвет хорошо.Позволяет пользователю выбрать цвет.
`флажок`	Набор из нуля или более значений из заранее определенного списка	флажок
`радио`	Перечислимое значение	Радиокнопка
`файл`	Ноль или более файлов, каждый из которых имеет тип MIME и, возможно, имя файла	Метка и кнопка
`submit`	Перечислимое значение с дополнительной семантикой, заключающееся в том, что оно должно быть последним выбранным значением и инициирует отправку формы	Кнопка
`image`	Координата относительно размера конкретного изображения с дополнительной семантикой, заключающейся в том, что это должно быть последнее выбранное значение и инициировать отправку формы	Либо изображение, по которому можно щелкнуть, либо кнопка
`сброс`	НЕТ	Кнопка
`кнопка`	НЕТ	Кнопка

значение Задает значение по умолчанию для элемента управления. Примечание : Если type = "checkbox" или type = "radio" , этот атрибут является обязательным.

ширина Задает ширину элемента управления.

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

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

ключ доступа
автокапитализировать
класс
контентный
данные- *
директор
перетаскиваемый
скрыто
id
режим ввода
это
идентификатор товара
itemprop
itemref
шт. Объем
тип позиции
язык
часть
слот
проверка орфографии
стиль
tabindex
титул
перевести

Полное описание этих атрибутов см. В разделе Глобальные атрибуты HTML 5.

Обработчики событий

Атрибуты содержимого обработчика событий позволяют вызывать сценарий из HTML-кода. Сценарий вызывается при наступлении определенного «события». Каждый атрибут содержимого обработчика событий имеет дело с отдельным событием.

onabort
onauxclick
onblur
отмена
oncanplay
может пройти через
на замену
onclick
вкл.
контекстное меню
копия
на смену
врезка
ondblclick
ондраг
ондрагенд
ондрагентер
ондрагэксит
ondragleave
вперед
ондрагстарт
капля
на замену
без мусора
завершено
ошибка
onfocus
onformdata
на входе
недействительно
нажатие клавиши
onkeypress
onkeyup
onlanguagechange
загрузка
загруженные данные
загруженные метаданные
onloadstart
onmousedown
onmouseenter
onmouseleave
onmousemove
на мышке
на мыши над
onmouseup
паста
на паузу
в игре
на ходу
на ходу
на скорости изменения
возврат
по размеру
в прокрутке
нарушение политики безопасности
востребовано
в поиске
при выборе
на смену
установлен
onsubmit
приостановлено
ontimeupdate
рычаг
по объему Изменение
ожидает
на колесе

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

Подробнее см. Атрибуты содержимого обработчика событий HTML.

HTML Тег: ввод | HTML Dog

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

Номер

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

Тег | htmlbook.ru

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

Описание

Синтаксис

Атрибуты

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

Атрибут type | htmlbook.ru

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

Описание

Синтаксис

Обязательный атрибут

Значения

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

Шаблон ввода данных | htmlbook.ru

Тег HTML текстовая область, многострочное поле

Синтаксис

Примеры использования <textarea> в HTML коде

HTML код текстовой области <textarea>

<textarea> с фиксированным размером (no resize textarea)

HTML код <textarea> с фиксированной шириной и высотой

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

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

Тег input — поле ввода

Атрибуты

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

Новые в HTML5 значения атрибута type

Смотрите также

Учебник HTML 5. Статья «Формы»

Группировка данных формы

Текстовая метка

Подсказка для полей ввода

Вопросы и задачи по теме

HTML | входное значение Атрибут

HTML-тег

Синтаксис

Примеры

Основная форма

Форма Атрибут

Кнопки радио

Элементы, связанные с формой

Атрибуты

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

Обработчики событий

HTML Тег: ввод | HTML Dog

Добавить комментарий Отменить ответ