sonyps4.ru

Какие атрибуты у кнопки в html. Использование элемента button

Инструкция

Использование дескриптора добавляет на страницу кнопку с именем name и значением value. Атрибут name задает элементу уникальный идентификатор и используется для определения обработчиком формы его значения. Value выводит необходимый текст поверх. Например, для создания кнопки запишите следующий код:



Данная команда создаст кнопку с именем button и надписью «Отправка» на ней.

Дескриптор

Атрибут form задает идентификатор формы, который будет использоваться для обработки данных. Formaction устанавливает обработчик формы в другой части документа, другом файле или сайте. Formmethod отвечает за определение метода пересылки данных. Name задает имя кнопке, type – тип (обычная, для отправки данных или для очистки формы). Value – значение, которое будет считываться скриптами. На кнопке будет отображаться изображение с указанным адресом и текст.

Чтобы создать кнопку, которая будет обрабатывать введенные данные, необходимо в атрибуте указать соответствующий тип:

Чтобы создать кнопку, стирающую введенные пользователем данные, задайте type = “reset”.

Обратите внимание

Дескриптор должен обязательно использоваться в качестве содержимого тега

. Кнопка

Disabled: Отключает возможность нажатия кнопки. Это можно использовать в случае, когда кнопка должна стать активной при выполнение определенных условий (например, при выборе флажка и тд.), сделать кнопку активной можно будет с помощью JavaScript. Значения для логического атрибута disabled можно задавать следующими способами: form: Указывает к какой форме относится данная кнопка. В качестве значения выступает один или несколько идентификаторов форм, разделенных пробелами. Количество идентификаторов в значении атрибута зависит от количества принадлежащих кнопке форм: Имя:
Фамилия:

Кнопка находится вне элемента form, но является частью формы.

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

Formaction: Определяет адрес, куда пересылаются данные формы при нажатии на кнопку. Если для формы указан атрибут action, то атрибут formaction переопределит его значение:

Имя:
Фамилия:

Атрибут formaction используется только для кнопок с атрибутом type="submit".

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

Formenctype: Указывает, каким способом данные формы должны быть закодированы перед отправкой на сервер. Используется только для кнопок с атрибутом type="submit". Возможные значения атрибута:

  • application/x-www-form-urlencoded - все символы кодируются перед отправкой (значение по умолчанию).
  • multipart/form-data - символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
  • text/plain - пробелы преобразуются в символ "+", но символы не кодируются.
Имя:
Если для формы указан атрибут enctype, то атрибут formenctype переопределит его значение.

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

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

  • get - данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение
  • post - отправляет данные формы, как HTTP после транзакции
Имя:
Фамилия:
Если для формы указан атрибут method, то атрибут formmethod переопределит его значение.

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

Formnovalidate: Указывает, что данные формы не будут проверяться на корректность. Используется только для кнопок с атрибутом type="submit". Значения для логического атрибута autofocus можно задавать следующими способами: Если для формы указан атрибут novalidate, то атрибут formnovalidate переопределит его значение.

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

Formtarget: Указывает, где будет отображен ответ после отправки формы. Используется только для кнопок с атрибутом type="submit". Возможные значения атрибута:

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

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

Name: Указывает имя для элемента

Примечание: некоторые элементы

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

Value: Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

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

(c атрибутом type = "button" ).

Атрибут type тега задает тип, используемой кнопки:


Всегда указывайте для тега





В данном примере мы разместили 3 кнопки , которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width ) размером 80 пикселей и высоту (height ) размером 50 пикселей:

  • Текст внутри первой кнопки мы отформатировали жирным начертанием (тег ). Обратите внимание, что текст, который мы поместили внутри тега отображается на самой кнопке.
  • Внутри второй кнопки элементом мы разместили *.png изображение (с прозрачным задним фоном). Атрибутом alt мы задали альтернативный текст для изображения, для того случая если оно по каким-то причинам не будет загружено (обязательный атрибут), относительный путь к изображению мы задали атрибутом src (обязательный атрибут), атрибутами width (ширина) и height (высота) задали размеры изображения равными 40 на 40 пикселей. Обратите внимание, что в атрибутах, которые задают размер не требуется указывать единицы измерения в отличии от CSS стилей, по той причине, что атрибутами можно указать значение только в пикселях.
  • Текст внутри третьей кнопки мы отформатировали курсивным начертанием (тег ).

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

Отключение кнопки

Атрибут disabled (HTML тега

В данном примере мы указали для второго элемента

В данном примере мы создали две кнопки (HTML тег

Тег

Закрывающий тег обязателен.

WAI ARIA

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

Допустимые значения role:

  • checkbox
  • link
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • option
  • radio
  • switch

Атрибуты

  • autofocus - Устанавливает, что кнопка получает фокус после загрузки страницы.
  • disabled - Блокирует доступ и изменение элемента.
  • form - Связывает между собой форму и кнопку.
  • formaction - Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
  • formenctype - Способ кодирования данных формы.
  • formmethod - Указывает метод пересылки данных формы.
  • formnovalidate - Отменяет проверку формы на корректность.
  • formtarget - Открывает результат отправки формы в новом окне или фрейме.
  • name - Определяет уникальное имя кнопки.
  • type - Устанавливает тип кнопки: обычная; для отправки данных формы на сервер; для очистки формы.
  • value - Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

autofocus

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

Синтаксис

Значения

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

disabled

Блокирует доступ к кнопке и её изменение. Она в таком случае отображается серым цветом и недоступна для активации пользователем. Кроме того, такая кнопка не может получить фокус путём нажатия на клавишу Tab , мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передаётся на сервер.

Синтаксис

Значения

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

По умолчанию это значение выключено.

form

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

, например, при создании её программно.

Синтаксис

Значения

Идентификатор формы (значение атрибута id элемента ).

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

formaction

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

Синтаксис

Значения

formenctype

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype элемента .

Синтаксис

Значения

  • application/x-www-form-urlencoded - Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя).
  • multipart/form-data - Данные не кодируются. Это значение применяется при отправке файлов.
  • text/plain - Пробелы заменяются знаком + , буквы и другие символы не кодируются.

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

  • application/x-www-form-urlencoded

formmethod

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

Синтаксис

Значения

Различают два метода - GET и POST.

  • GET - Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар « имя=значение », которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ &). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup . Объём данных в методе ограничен 4 Кб.
  • POST - Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

formnovalidate

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

Синтаксис

Значения

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

По умолчанию этот атрибут выключен.

formtarget

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

Синтаксис

Значения

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