Form html атрибуты: HTML Атрибуты форм – Атрибут form | htmlbook.ru

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

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

Описание

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

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

Помимо этих элементов, внутри формы можно использовать и любые другие HTML-элементы.

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

Атрибуты

accept-charset:

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

Значением по умолчанию является зарезервированная строка «UNKNOWN» (браузеры интерпретируют это значение как кодировку символов идентичную кодировке документа, содержащего элемент <form>).

action:

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

autocomplete:

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

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

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

enctype:

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

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

method:

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

• get: данные передаются в адресной строке браузера в виде пар «имя=значение» путём их добавления в конце URL-адреса. В качестве разделителя между основным URL-адресом и передаваемыми данными используется знак вопроса (?), для разделения передаваемых данных между собой используется символ амперсанда (&). Данный метод применяется при отправке данных небольшого размера.
• post: данные передаются не как часть URL, а в качестве содержимого запроса браузера. Данный метод применяется для отправки данных большого объёма.

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

name:

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

novalidate:

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

<form novalidate>
<form novalidate="novalidate">
<form novalidate="">

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

target:

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

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

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

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

form {
    display: block;
    margin-top: 0em;
} 

Пример

<form action="demo_form.asp">
  Имя: <input type="text" name="fname" value="Mickey"><br>
  Фамилия:<input type="text" name="lname" value="Mouse"><br>
  <input type="submit" value="Submit">
</form> 

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

Атрибут form тега | HTML справочник

Значение и применение

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

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

Синтаксис:

<input form = "form_id">  

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

Отличия HTML 4.01 от HTML 5

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута form HTML тега <input></title>
	</head>
	<body>
		<form id = "myForm" action = "script.php"> <!-- определяем id для нашей формы и адрес, куда отправляется форма -->	
			Логин: <input type = "text" name = "userLogin"><br><br> <!-- определяем элемент управления для ввода текстовой информации -->
			Пароль: <input type = "password" name = "userPass"><br><br> <!-- определяем элемент управления для ввода пароля -->
		</form>
		<input type = "submit" value = "Войти" form = "myForm"> <!-- определяем кнопку отправки формы и указываем, что она принадлежит форме с id myForm -->
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>), глобальным атрибутом id указали для неё идентификатор, атрибутом action указали адрес, куда отправляется форма.

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

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

HTML5 атрибуты форм (часть 2)

От автора: данная статья является выдержкой из книги HTML5 и CSS3 для реального мира, 2-е издание за авторством Алексиса Гольдштейна, Луи Лазариса и Эстель Вейль. Книгу можно найти в магазинах по всему миру, а также купить цифровую версию.

Атрибут pattern

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

Язык регулярных выражений в шаблонах по синтаксису тот же, что и в JS на основе Perl за исключением того, что атрибут pattern должен удовлетворять всему значению, а не какому-то внутреннему набору. При использовании шаблонов пользователю необходимо сообщать разрешенные символы.

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

Заметка: регулярные выражения

Регулярные выражения – функция большинства языков программирования, с помощью которой разработчики могут задавать шаблоны символов и проверять, подходит ли заданная строка под этот шаблон. Для новичков регулярные выражения просто темный лес. Например, выражение для проверки строки на значение цвета в формате hex выглядит следующим образом: #[A-Fa-f0-9]{6}.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

<li> <label for=»password»>I would like my password to be:</label> <p>(at least 6 characters, no spaces)</p> <input type=»password» name=»password» required title=»(at least 6 characters, no spaces)» pattern=»\S{6,}»> </li>

Запись \S означает «любой символ кроме пробела», а {6,} значит «минимум 6 раз». Хотите обозначить максимальное количество символов, можно использовать интервал, например, \S{6,10}.

Как и required, атрибут pattern запрещает отправку формы, если есть несоответствия с шаблоном. Также выскочит сообщение с ошибкой.

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

Атрибут pattern поддерживается в некоторой степени во всех браузерах, начиная с Firefox 4, Safari 5, Chrome 10, Opera 11, IE10 и Android 2.3. Под «в некоторой степени» понимается, что сейчас все браузеры поддерживают pattern. Однако Safari и Android до версии 4.4 позволяют отправку форм с невалидными данными.

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

Атрибут disabled

Булев атрибут disabled появился задолго до HTML5, но в этой спецификации он был значительно расширен. Атрибут работает со всеми полями формы за исключением нового output. В отличие от предыдущих версий HTML спецификация HTML5 позволяет устанавливать атрибут disabled на тег fieldset, тем самым применяя его ко всем тегам внутри набора.

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

Стилизовать отключенные поля можно с помощью псевдокласса :disabled, активные поля с помощью :enabled или :not(:disabled).

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

Атрибут readonly

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

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

<label for=»about»>Article Title</label> <input type=»text» name=»about» readonly value=»http://www.thehtml5herald.com/register.html»>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Атрибут multiple

Наличие атрибута multiple указывает на то, что в поле можно вбить несколько значений. Атрибут был доступен и в предыдущих версиях HTML, но применялся только к тегу select. В HTML5 атрибут можно применять к типам file, email и range. Если атрибут есть, то можно выбрать более одного файла, прописать несколько адресов электронной почты через запятую. У диапазона в таком случае будет два слайдера.

Атрибут multiple для типа file поддерживается во всех браузерах с mobile Safari 7 и IE10, но на полях типа range на момент написания статьи данный атрибут еще не поддерживается ни в одном браузере.

Заметка: пробелы или запятые?

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

Атрибут form

Не путать с тегом form. Атрибут form в HTML5 позволяет связать элементы с формами, в которые они не вложены. То есть теперь можно ассоциировать набор полей или одно поле с любой другой формой в документе. Этот атрибут решает старую проблему с невозможностью вкладывать формы. Сами формы все еще вкладывать нельзя, но можно ассоциировать «вложенные» поля с формой, которая не является им прямым родителем.

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

Если атрибут отсутствует, поле будет передано вместе с той формой, в которую оно вложено. Если атрибут form был сначала добавлен, а потом удален, используйте el.removeAttribute(‘form’), а не el.setAttribute(‘form’, »). Если атрибут form вставлен, но пустой или ведет на неверный ID формы, поле будет исключено из отправки из всех форм, в том числе и из формы-предка.

Атрибут поддерживается во всех браузерах с Android 4 и IE 11.

Атрибут autocomplete

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

Если autocomplete не указан в форме или полях, то значение по умолчанию ставится в on. Вы могли заметить это, когда последний раз заполняли форму. Для отключения автозаполнения используйте autocomplete=»off». Отличная идея для такой чувствительной информации, как номера кредитных карт или данные, которые нельзя повторно использовать, например, CAPTCHA.

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

Элемент datalist и атрибут list

Списки данных поддерживаются во всех браузерах, начиная с IE10 и Android 4.4.3 за исключением Safari. В стандартной форме они выполняют общие требования: текстовое поле с заданными опциями автозаполнения. В отличие от select пользователи могут вбить любое значение, но оно будет представлено с помощью заданного набора опций.

Рисунок 1 элемент datalist в Firefox

Для некоторых типов полей типа text и date выпадающий список опций появляется только после начала ввода, как показано на рисунке 4.4. Для типа range браузер будет показывать маленькую засечку возле слайдера, указывая на то, где найдены предлагаемые опции. Для типа color представлены образцы цвета с опцией переключения на стандартный пикер цвета для устройства, если нужно выбрать другой цвет.

Тег datalist, как и select, является списком опций, которые расположены в тегах option. Datalist ассоциируется с input с помощью атрибута list на инпуте. В качестве значения атрибут list принимает ID тега datalist. Тег datalist можно привязать к нескольким полям.

На практике это выглядело бы так:

<label for=»favcolor»>Favorite Color</label> <input type=»color» list=»colors» name=»favcolor»> <datalist> <option value=»#0000FF» label=»blue»> <option value=»#008000″ label=»green»> <option value=»#ff0000″ label=»red»> <option value=»#663399″ label=»RebeccaPurple»> </datalist>

Атрибут autofocus

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

Поля типа input поддерживают очень много атрибутов, некоторые из которых созданы для определенных типов. Среди них: alt,src, height и width для типа image и step, min и max для числового типа, в том числе дат и диапазонов. Dirname говорит серверу о направленности поля формы. formaction, formenctype, formmethod, formnovalidate и formtarget задают методы перезаписи атрибутов формы. Inputmode говорит браузеру, какую клавиатуру показать, когда устройство может отобразить динамическую клавиатуру. minlength и maxlength задают длину поля. checked, name, size, type и value должны быть вам уже знакомы, а вот псевдоклассы :checked и :default могут быть новыми для вас. В следующей статье мы расскажем вам про некоторые из этих атрибутов и их поля.

Автор: Alexis Goldstein, Estelle Weyl, Louis Lazaris

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

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

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

Описание

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

Синтаксис

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

Значения

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

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

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег fieldset, атрибут form</title>
 </head>
 <body>
  <form>
  </form>
  <fieldset form="data">
   <p>В каком году произошла Отечественная война 1812 года?</p>
   <p><input type="radio" name="answer" value="1380"> 1380</p>
   <p><input type="radio" name="answer" value="1812" checked> 1812</p>
   <p><input type="radio" name="answer" value="1914"> 1914</p>
   <p><input type="radio" name="answer" value="1941"> 1941</p>
   <p><input type="submit" value="Отправить"></p>
  </fieldset>
 </body>
</html>

Браузеры

В Opera 11.0 при добавлении атрибута form к <fieldset> переключатели внутри этого тега воспринимаются как независимые друг от друга. Соответственно, нельзя выбрать только один пункт, щёлкая по разным переключателям.

Атрибут method тега | HTML справочник

Значение и применение

Атрибут method (HTML тега <form>) определяет какой метод HTTP (get или post) используется при передаче формы.

Метод GET в отличии от POST при отправке формы передает собранную информацию как часть URL:

url?name=value&name=value // метод GET использует пары имя = значение

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

Обратите внимание на некоторые нюансы при работе с HTTP методами GET и POST:

• Метод GET ограничивает объём передаваемой в URL информации (около 3000 символов), метод POST не имеет подобных ограничений.
• Никогда не используйте метод GET, если вам необходимо передать конфиденциальные данные (например, пароль пользователя, так как он будет передан в строке URL — в открытом виде).
• Страница, сгенерированную методом GET, можно пометить закладкой (адрес страницы всегда будет уникальный), а страницу, сгенерированную метод POST нельзя, так как адрес страницы не изменяется (данные в URL не передаются).
• Учтите, что с использованием метода GET можно передать данные не через форму, а через URL страницы.

Значение атрибута method может быть переопределено атрибутом formmethod элементов <button>, или <input>.

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

Синтаксис:

<form method = "post | get">

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

Отличия HTML 4.01 от HTML 5

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута method HTML тега <form></title>
	</head>
	<body>
		<form name = "subscribeForm" method = "post" ectype = "multipart/form-data"> <!-- определяем имя для нашей формы, HTTP метод, используемый при передаче формы и способ кодирования. -->	
			Имя: <input type = "text" name = "userName"> <!-- определяем элемент управления для ввода текстовой информации -->
			E-mail: <input type = "email" name = "email"> <!-- определяем элемент управления для ввода адреса электронной почты -->
			<input type = "submit" value = "Подписаться"> <!-- определяем кнопку отправки формы -->
		</form>
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>), атрибутом name определили имя для нашей формы, атрибутом method указали HTTP метод post (данные формы включаются в тело формы и отправляется на сервер), используемый при передаче формы и атрибутом enctype указали способ кодирования при передаче данных формы (multipart/form-data — символы не кодируются).

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

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

Элемент <form> (от англ. «form» ‒ «форма») создаёт HTML-форму для ввода пользователем данных, которые впоследствии можно принять и обработать на стороне сервера.

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

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

Элемент <form> может содержать один или несколько следующих элементов:

• <input>
• <textarea>
• <button>
• <select>
• <option>
• <optgroup>
• <fieldset>
• <label>

Синтаксис

<form>...</form>

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

Обязателен.

Атрибуты

acceptУстарел в HTML5

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

accept-charset

Определяет кодировку, используемую в представленной форме (значением по умолчанию является зарезервированная строка «unknown», которая указывает, что кодировка соответствует кодировке документа, содержащего элемент <form>).

action

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

autocompleteHTML5

Включает автозаполнение полей формы.

enctype

Определяет способ кодирования данных формы при их отправке. Значение по умолчанию application/x-www-form-urlencoded.

method

Атрибут определяет какой метод HTTP (get или post) используется при передаче формы. Метод get используется по умолчанию.

name

Имя формы.

novalidateHTML5

Отменяет встроенную проверку данных формы на корректность ввода.

target

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

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

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

Большинство браузеров отобразит элемент <form> со следующими значениями CSS по умолчанию:

form {
    display: block;
    margin-top: 0em;
}

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

В HTML5 тегу <form> добавлены два новых атрибута: autocomplete и novalidate, а также больше не поддерживается атрибут accept.

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

Элемент <form>

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

Пример HTML:

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

<form enctype = "application/x-www-form-urlencoded | multipart/form-data | text/plain">

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута enctype HTML тега <form></title>
	</head>
	<body>
		<form name = "subscribeForm" method = "post" enctype = "multipart/form-data"> <!-- определяем имя для нашей формы, HTTP метод, используемый при передаче формы и способ кодирования. -->	
			Имя: <input type = "text" name = "userName"> <!-- определяем элемент управления для ввода текстовой информации -->
			E-mail: <input type = "email" name = "email"> <!-- определяем элемент управления для ввода адреса электронной почты -->
			<input type = "submit" value = "Подписаться"> <!-- определяем кнопку отправки формы -->
		</form>
	</body>
</html>