Button атрибуты. Когда следует использовать элемент Button. Описание параметров тега BUTTON

Faq 05.04.2019
Faq
HTML теги

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

HTML тег





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

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

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

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

Использование атрибутов formnovalidate и formtarget <a href="/tegi-logicheskogo-formatirovaniya-html-tegi-logicheskogo/">HTML тега</a> <button><span> type = "text" name = "ulogin" placeholder = "Ваше имя" >

В данном примере внутри формы мы создали два элемента

Инструкция

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



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

Дескриптор

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

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

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

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

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

. Кнопка

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

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

Атрибуты те же, что и у рядовых кнопок (пример 3), но значение атрибута value теперь можно не указывать, потому что браузер подставит текст самостоятельно, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE - «Подача запроса», Opera и Chrome - «Отправить». Сам текст надписи никак на функционал кнопки не влияет.

Пример 3. Отправка данных на сервер

Кнопка

Кнопка Reset

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

Синтаксис создания указанной кнопки прост и похож на другие кнопки.

В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value элемента . После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».

Элемент button является более гибким, чем это может показаться на первый взгляд. Есть три способа, которыми вы можете использовать кнопку (button). Ключом к этим различным режимам работы является атрибут type , который имеет три значения. Они описаны в таблице .

Таблица 12-10: Значения атрибута type элемента button

В следующих разделах я опишу каждое из этих значений и функционал, который они предлагают.

Использование элемента button для отправки формы

Если атрибут type установлен на submit , при нажатии кнопки будет отправлена форма, которая содержит кнопку. Это поведение по умолчанию, если атрибут type не применяется. Когда вы используете кнопку таким образом, у вас есть доступ к некоторым дополнительными атрибутами, которые описаны в .

Таблица 12-11: Дополнительные атрибуты, которые можно использовать, если атрибут type установлен на submit
Атрибут Описание
form Определяет форму (или формы), с которой связана кнопка. Для более подробной информации смотрите раздел «Работа с элементами вне формы»
formaction Переопределяет атрибут action элемента form и задает новый адрес, на который будет отправлена форма. Для более подробной информации по атрибуту action смотрите раздел «Настройка формы при помощи атрибута action» ранее в этой главе
formenctype Переопределяет атрибут enctype элемента form и указывает кодировку для данных формы. Для более подробной информации по атрибуту enctype смотрите раздел «Настройка кодирования данных» ранее в этой главе
formmethod Переопределяет атрибут method элемента form . Для более подробной информации по атрибуту method смотрите раздел «Использование атрибута method» ранее в этой главе
formtarget Переопределяет атрибут target элемента form . Для более подробной информации по атрибуту target смотрите раздел «Указание цели для ответа формы» ранее в этой главе
formnovalidate Переопределяет атрибут novalidate элемента form , чтобы указать, должна ли быть выполнена валидация со стороны клиента. Информацию по валидации вы можете узнать в главе 14

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

Листинг 12-15: Использование атрибутов элемента button
Example

В этом примере я опустил атрибуты action и method элемента form и добавил настройки при помощи атрибутов formaction и formmethod элемента button .

Использование элемента button для сброса формы

Если вы установите атрибут type на reset , то при нажатии кнопки все элементы ввода данных, которые присутствуют в форме, будут сброшены и возвращены в исходное состояние. Тут нет никаких дополнительных атрибутов, если элемент button используется таким образом. В показано добавление в документе HTML кнопки сброса.

Листинг 12-16: Использование элемента button для сброса формы
Example

Рисунок 12-12: Добавление общего элемента button

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

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


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





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

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

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

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

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

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

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



Рекомендуем почитать