Атрибут name
Атрибут / параметр name (от англ. «name» ‒ «имя, название») присваивает элементу формы имя, которое может быть использовано скриптами или серверным обработчиком данных формы (для опознавания элемента).
Поддержка браузерами
Спецификация
| Верс. | Раздел | |
|---|---|---|
| HTML | ||
| 2.0 | Input Field: INPUT | Перевод |
| 3.2 | INPUT text fields, radio buttons, check boxes, . | |
| 4.01 | 17.4 The INPUT element name = cdata [CI]. DTD: Transitional Strict Frameset | |
| 5.0 | 4.10.19.1 Naming form controls: the name attribute The name content. | |
| 5.1 | 4.10.19.1. Naming form controls: the name attribute The name content. | |
| XHTML | ||
| 1.0 | Extensible HyperText Markup Language DTD: Transitional Strict Frameset | |
| 1.1 | Extensible HyperText Markup Language | |
Значения
_charset_ При отправке данных на сервер, скрытому элементу формы автоматически присваивается значение, состоящее из закодированных символов.
Примечание: Действие данного атрибута осуществляется только при выполнении двух условий:
- Если это значение используется в качестве имени скрытого элемента формы;
- Элемент формы не должен иметь атрибут « value ».
Примечание: Действие данного атрибута осуществляется только при выполнении трёх условий:
- Если это значение используется в качестве имени текстового элемента формы;
- Элемент формы является первым элементом формы;
- Форма использует механизм кодирования « application/x-www-form-urlencoded ».
Html элементы форм name
Формы состоят из определенного количества элементов ввода. Все элементы ввода помещаются между тегами
Наиболее распространенным элементом ввода является элемент input . Однако реальное действие этого элемента зависит от того, какое значение установлено у его атрибута type . А он может принимать следующие значения:
- text : обычное текстовое поле
- password : тоже текстовое поле, только вместо вводимых символов отображаются звездочки, поэтому в основном используется для ввода пароля
- radio : радиокнопка или переключатель. Из группы радиокнопок можно выбрать только одну
- checkbox : элемент флажок, который может находиться в отмеченном или неотмеченном состоянии
- hidden : скрытое поле
- submit : кнопка отправки формы
- color : поле для ввода цвета
- date : поле для ввода даты
- datetime : поле для ввода даты и времени с учетом часового пояса
- datetime-local : поле для ввода даты и времени без учета часового пояса
- email : поле для ввода адреса электронной почты
- month : поле для ввода года и месяца
- number : поле для ввода чисел
- range : ползунок для выбора числа из некоторого диапазона
- tel : поле для ввода телефона
- time : поле для ввода времени
- week : поле для ввода года и недели
- url : поле для ввода адреса url
- file : поле для выбора отправляемого файла
- image : создает кнопку в виде картинки
Кроме элемента input в различных модификациях есть еще небольшой набор элементов, которые также можно использовать на форме:
- button : создает кнопку
- select : выпадающий список
- label : создает метку, которая отображается рядом с полем ввода
- textarea : многострочное текстовое поле
Атрибуты name и value
У всех элементов ввода можно установить атрибуты name и value . Эти атрибуты имеют важное значение. По атрибуту name мы можем идентифицировать поле ввода, а атрибут value позволяет установить значение поля ввода. Например:
Здесь текстовое поле имеет значение «Tom» (как указано в атрибуте value), поэтому при загрузке веб-страницы в этом поле мы увидим данный текст.
Поскольку методом отправки данных формы является метод «get», то данные будут отправляться через строку запроса. Так как нам в данном случае не важно, как данные будут приниматься, не важен сервер, который получает данные, поэтому в качестве адреса я установил ту же самую страницу — то есть файл index.html. И при отправке мы сможем увидеть введенные данные в строке запроса:
В строке запроса нас интересует следующий кусочек:
При отправке формы браузер соединяет все данные в набор пар «ключ-значение». В нашем случае две таких пары: login=Tom и password=qwerty . Ключом в этих парах выступает название поля ввода, которое определяется атрибутом name , а значением — собственно то значение, которое введено в поле ввода (или значение атрибута value ).
Получив эти данные, сервер легко может узнать, какие значения в какие поля ввода были введены пользователем.
HTML Атрибут name
Атрибут name можно использовать для ссылки на элемент в JavaScript.
Для элемента form , атрибут name также используется в качестве ссылки при представлении данных.
Для элемента iframe , атрибут name может использоваться для целевой отправки формы.
Для элемента map , атрибут name связан с атрибут usemap создает связь между изображением и картой.
Для элемента meta , атрибут name задает имя для информации / значения атрибута content .
Для элемента param , атрибут name используется вместе с атрибутом value для задания параметров плагина, указанного в теге .
Применение
Атрибут name можно использовать для следующих элементов:
Примеры
Пример
Две кнопки с одинаковыми именами, которые отправляют разные значения при нажатии:
Пример Fieldset
Пример Form
Форма HTML с атрибутом name:
Пример Iframe
Элемент действует как цель для ссылки:
Пример Input
форма HTML с тремя полями ввода; два текстовых поля и одна кнопка отправки:
Пример Map
Изображение-карта с кликабельными областями:
Пример Meta
Атрибут name используется для определения описания, ключевых слов и автора документа HTML:
Пример Object
Пример Output
Выполните расчет и покажите результат в элементе :
Пример Param
Установите «autoplay» параметр к «true», таким образом, звук начнет играть, как только страница будет загружаться:
Пример Select
Раскрывающийся список с атрибутом name:
Пример Textarea
Текстовое поле с атрибутом name:
Поддержка браузеров
Атрибут multiple имеет следующую поддержку браузера для каждого элемента:
| Элемент | |||||
|---|---|---|---|---|---|
| button | Да | Да | Да | Да | Да |
| fieldset | Да | Не поддерживает | Да | Да | Да |
| form | Да | Да | Да | Да | Да |
| iframe | Да | Да | Да | Да | Да |
| input | 1.0 | 2.0 | 1.0 | 1.0 | 1.0 |
| map | Да | Да | Да | Да | Да |
| meta | Да | Да | Да | Да | Да |
| object | Да | Да | Да | Да | Да |
| output | 10.0 | Не поддерживает | 4.0 | 5.1 | 11.0 |
| param | Да | Да | Да | Да | Да |
| select | Да | Да | Да | Да | Да |
| textarea | Да | Да | Да | Да | Да |
Мы только что запустили
SchoolsW3 видео