Html form name css

Тег form в html

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

Из всех атрибутов элемента два являются особенно важными, они используются во всех формах: action и method . Атрибут action указывает на расположение скрипта, который обрабатывает информацию, передаваемую браузером при отправке данных формы. Скрипт может быть написан на любом языке, исполняемом на стороне сервера.

Атрибут method указывает метод отправки данных формы. Рекомендуется использовать метод POST , потому что он скрывает отправляемую информацию и позволяет передавать двоичные данные. Тем не менее, в некоторых частных случаях необходимо использовать метод GET .

Кроме этого HTML тег form представляет собой контейнер для других элементов управления. Ниже приведен их перечень:

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

• submit: отправляет данные формы на сервер;
• reset: сбрасывает значения всех элементов управления к состоянию по умолчанию;
• button: не выполняет никаких действий;
• menu: выводит меню.

• fieldset: группирует наборы элементов управления по определенному критерию;
• input: в зависимости от значения атрибута type данный элемент управления может использоваться для различных целей:

• hidden: скрытый элемент управления, используемый для передачи информации на сервер, как правило, управляется скриптом;
• text: элемент управления, используемый для ввода фрагмента текста одной строкой;
• search: используется для ввода поисковой строки;
• tel: элемент управления тега form , используемый для предоставления номера телефона;
• url: текстовое поле, используемое для ввода одного абсолютного URL-адреса ;
• email: элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты;
• password: текстовое поле для ввода паролей, в котором символы скрыты точками;
• datetime: элемент управления для ввода даты и времени;
• date: элемент управления для ввода определенной даты;
• month: элемент управления для ввода определенного месяца;
• week: элемент управления для ввода определенной недели;
• time: элемент управления для ввода о времени;
• number: элемент управления для ввода определенного числа;
• range: для ввода одного или двух чисел в указанном диапазоне;
• color: для ввода цвета;
• checkbox: для ввода логического значения ( истина / ложь );
• radio: элемент управления, используемый для выбора одного из нескольких вариантов;
• file: элемент управления, используемый для загрузки файлов на сервер;
• submit: кнопка для отправки данных HTML тега form ;
• image: то же самое, что submit , но с возможностью вывести вместо кнопки по умолчанию пользовательское изображение;
• reset: кнопка, используемая для сброса значений элементов управления формы;
• button: кнопка без назначенного действия по умолчанию.

• keygen: элемент управления, используемый для генерации открытой / секретной пары ключа;
• label: используется для вывода подписей для элементов управления формы;
• object: объект представления и отображения вложенного контента;
• output: элемент управления, используемый для просмотра результатов вычислений, выполняемых на странице, или результатов взаимодействия пользователя с различными элементами управления формы;
• select: элемент управления для выбора одного или нескольких вариантов из списка;
• textarea: элемент управления, используемый для ввода фрагмента текста, состоящего из одной или более строк;
• img: используется для вывода изображения.

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

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

Примеры

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

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

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

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

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

Full name:

Gender: Male Female

Address:

Interests: Books Movies Videogames

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

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

Обратите внимание, что мы используем для атрибута method значение » GET » просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение.

Что-то наподобие этого: «?fullname=john&birthdate=15/10/2002&. » .

Basic information

Full name:

Birth date:

Gender: Male Female

Address:

Phone number:

Extra information

Interests: Books Movies Videogames

Favorite color:

И, наконец, мы создадим тег form с возможностью загрузки файла. В этом примере нам нужно обратить внимание на пару атрибутов: method , который может принимать только значение » POST «, так как это единственный метод, который может передавать двоичные данные. И enctype , который должен иметь значение » multipart/form-data «. Если данная настройка не соблюдается, загрузка файлов будет невозможна.

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

Атрибуты

Специальные атрибуты тега form :

ACCEPT-CHARSET

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

ACTION

URI , указывающий местоположение скрипта, отвечающего за обработку данных, передаваемых через форму. Этот скрипт написан на языке, исполняемом на стороне сервера: ASP , PHP , Python и т.д.

AUTOCOMPLETE

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

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

ENCTYPE

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

• application/x-www-form-urlencoded: пробелы заменяются знаком плюс ( «+» ), а специальные символы преобразуются в значения HEX . Это значение по умолчанию;
• multipart/form-data: кодирование не производится. Указывается при загрузке файлов;
• text/plain: только пробелы заменяются знаком плюс ( «+» ).

Помните, что вы должны использовать значение «multipart/form-data», когда в теге form присутствует поле для загрузки файлов. Без него загрузка файлов не сможет быть выполнена.

METHOD

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

• get: данные прикрепляются к URL-адресу ( указанному в атрибуте action ). Пары имя-значение добавляются в виде » name=value » и отделяются одна от другой знаком амперсанда ( «&» ). Вся строка добавляется к URL-адресу после знака вопроса ( «?» ). Например, строка GET может выглядеть следующим образом: «form-result.php?user=john&pass=123456» ;
• post: данные прикрепляются к телу запроса;
• dialog: специальное значение для HTML тег form внутри элемента dialog . Указывает браузеру закрыть диалоговое окно после отправки формы. Результаты должны обрабатываться с помощью скриптов.

NAME

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

Этот атрибут тега form был удален из предыдущих версий стандарта. В HTML5 он был восстановлен, чтобы дать возможность ссылаться на форму в наборе форм по ее имени.

NOVALIDATE

Логическое значение, указывающее браузеру не производить валидацию данных формы после отправки данных. Если этот атрибут принимает значение » NOVALIDATE » или пустую строку ( » » ),браузер должен пропустить валидацию формы.

TARGET

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

• _blank: в новом окне / вкладке;
• _parent: непосредственно в родительском контексте;
• _self: в текущем окне;
• _top: в главном окне.

Атрибут тега form target был удален из предыдущих версий HTML , но был восстановлен в HTML5 , так как он стал использоваться с элементом iframe .

ACCEPT

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

Атрибут accept формы был удален из HTML5, так он является излишним. Вместо этого авторы должны использовать атрибут accept в элементах управления.

Вадим Дворников автор-переводчик статьи « FORM ELEMENT »

Источник

HTML name Attribute

The name attribute specifies a name for an HTML element.

This name attribute can be used to reference the element in a JavaScript.

For a element, the name attribute is used as a reference when the data is submitted.

For an element, the name attribute can be used to target a form submission.

For a element, the name attribute is associated with the ‘s usemap attribute and creates a relationship between the image and the map.

For a element, the name attribute specifies a name for the information/value of the content attribute.

For a element, the name attribute is used together with the value attribute to specify parameters for the plugin specified with the tag.

Applies to

The name attribute can be used on the following elements:

Examples

Example

Two buttons with equal names, that submit different values when clicked:

Fieldset Example

Form Example

An HTML form with a name attribute:

Iframe Example

An that act as a target for a link:

Input Example

An HTML form with three input fields; two text fields and one submit button:

Map Example

An image map, with clickable areas:

Meta Example

Use the name attribute to define a description, keywords, and the author of an HTML document:

Object Example

An element with a name attribute:

Output Example

Perform a calculation and show the result in an element:

Param Example

Set the «autoplay» parameter to «true», so the sound will start playing as soon as the page loads:

Select Example

A drop-down list with a name attribute:

Textarea Example

A text area with a name attribute:

Browser Support

The multiple attribute has the following browser support for each element:

Element
button	Yes	Yes	Yes	Yes	Yes
fieldset	Yes	Not supported	Yes	Yes	Yes
form	Yes	Yes	Yes	Yes	Yes
iframe	Yes	Yes	Yes	Yes	Yes
input	1.0	2.0	1.0	1.0	1.0
map	Yes	Yes	Yes	Yes	Yes
meta	Yes	Yes	Yes	Yes	Yes
object	Yes	Yes	Yes	Yes	Yes
output	10.0	Not supported	4.0	5.1	11.0
param	Yes	Yes	Yes	Yes	Yes
select	Yes	Yes	Yes	Yes	Yes
textarea	Yes	Yes	Yes	Yes	Yes

Источник