Элемент 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
В этом примере я опустил атрибуты action и method элемента form и добавил настройки при помощи атрибутов formaction и formmethod элемента button .
Использование элемента button для сброса формы
Если вы установите атрибут type на reset , то при нажатии кнопки все элементы ввода данных, которые присутствуют в форме, будут сброшены и возвращены в исходное состояние. Тут нет никаких дополнительных атрибутов, если элемент button используется таким образом. В показано добавление в документе HTML кнопки сброса.
Листинг 12-16: Использование элемента button для сброса формы
Рисунок 12-12: Добавление общего элемента button
Доброго здоровья всем читателям моего блога! Продолжаем тему построения html форм, сегодня рассмотрим создание кнопок на сайте при помощи тега button и его атрибутов . В прошлой статье я давал вам описание , теперь двинемся дальше.
Прежде чем продолжить, я хочу предостеречь вас, уважаемые читатели, от легкомысленного отношения к изучению языка гипертекстовой разметки html в общем и его основных тегов в частности. Даже при использовании современных средств для построения сайтов, таких как движок WordPress, знание основ языка разметки точно лишним не будет.
Тем более, применение для этих целей таких средств как великолепный плагин для (кстати, последние версии других обладают уже встроенными подобными функциями) или делает этот процесс интересным и увлекательным, потому что во многом облегчают жизнь вебмастеру. Ну а теперь незамедлительно перехожу к сегодняшней теме.
Применение тега button и его атрибутов для создания кнопок
Помните, в прошлой статье я писал о создании кнопок на сайте посредством тега input и с помощью его самого распространенного (который может иметь три значения для создания кнопок: button, reset, submit). Так вот тег button (не путать со значением атрибута type=“button” тега input) может предложить гораздо более широкие возможности. На кнопке, смонтированной с его помощью, можно расположить практически любые элементы, в том числе изображения. Например:
| Кнопка с надписью | Кнопка с надписью | |
| Кнопка с изображением |
Далее. Как вы понимаете, для расширения функциональных возможностей того или иного тега форм используется множество атрибутов, которые могут принимать те или иные значения. Ниже даю примеры применения некоторых атрибутов тега button с необходимыми пояснениями.
1. accesskey - атрибут для определения горячих клавиш, с помощью которых происходит переход фокуса к элементу формы. Проще говоря, для нажатия на кнопку не обязательно подводить к ней курсор мыши, а достаточно нажать на клавишу, название которой задано с помощью этого атрибута. Латинские буквы (a-z) или цифры (0-9). Например, подставив значение 1 и a, получаем горячие клавиши, с помощью которых можно нажимать на кнопку.
Однако надо помнить, что в различных браузерах эта функция реализуется по-разному и используется сочетания клавиш. Для данного примера (горячие клавиши 1 и a) в самых популярных браузерах это выглядит так: Google Chrome () - Alt+1, Alt+A; Firefox - Shift+Alt+1, Shift+Alt+A; Opera ( статья о том, как бесплатно скачать, установить, обновить и настроить браузер Опера) - Shift+1, Shift+A; Internet Explorer - Alt+1, Alt+A
| 1 a |
2. autofocus - этот атрибут позволяет получить установку фокуса после загрузки страницы, то есть можно нажать кнопку без подведения к ней курсора мыши, например, с помощью кнопки Enter на клавиатуре. Обратите внимание, что здесь использован тег fieldset, который мы еще будем рассматривать.
3. disabled - с помощью данного атрибута блокируется доступ к кнопке и ее изменение. Таким образом, она становится недоступной для пользователя. Значение такой кнопки не передается в файл обработчика (скрипта).
|
Активная кнопка Неактивная кнопка |
4. form - этот атрибут используется для того чтобы связать кнопку с формой. Это нужно в тех случаях, когда кнопка не располагается внутри тега form. В качестве значения атрибута form используется значение атрибута id тега form (например, id=“database”).
5. formenctype - этот атрибут тега button позволяет установить способ кодировки при отправке данных обработчику и определяется тремя значениями:
- application/x-www-form-urlencoded - в этом случае при кодировке вместо пробелов ставится +, а вместо русских букв появляются их шестнадцатеричные значения, например, что-то типа такого: %2F%3D%26%3F%2%3D%26%3D
- multipart/form-data - при использовании этого значения данные не кодируются
- text/plain - вместо пробелов используется знак +, буквы и другие символы кодировке не подвергаются
Надо отметить, что если значение атрибута formenctype не проставлено, то по умолчанию используется application/x-www-form-urlencoded, то есть полное кодирование.
6. formaction - этот атрибут определяет адрес обработчика формы (обычно файл, написанный в виде скрипта). Он аналогичен .
7. formmethod - опять же по аналогии с он определяет способ передачи данных (get либо post).
8. formnovalidate - этот атрибут отменяет проверку на корректность данных, которые были введены в форму пользователем. По умолчанию он не действует. Эта проверка осуществляется автоматически при отправке формы для полей input type=“email” и input type=“url”.
9. type - определяет тип кнопки по ее функции. Внешний вид кнопок никак не отличается, однако они обладают различным функционалом, который определяется следующими значениями:
- button - обычная кнопка
- reset - кнопка для очистки данных формы и возвращение их в первоначальное состояние
- submit - кнопка для отправки данных формы обработчику
10. name - уникальное название кнопки. Если на сайте существует несколько различных кнопок и необходимо их разделить, то используют данный атрибут. В качестве значения применяют набор символов их букв или цифр.
Целью данного поста было познакомить вас, уважаемые читатели, со всеми возможностями, которые предоставляет тег button и его атрибуты для создания кнопок на сайте. Надеюсь, для вас не осталось темных пятен по этой теме. Это не последняя публикация, продолжение обязательно последует, поэтому милости прошу подписываться на обновления
Инструкция
Использование дескриптора добавляет на страницу кнопку с именем name и значением value. Атрибут name задает элементу уникальный идентификатор и используется для определения обработчиком формы его значения. Value выводит необходимый текст поверх. Например, для создания кнопки запишите следующий код:
Данная команда создаст кнопку с именем button и надписью «Отправка» на ней.
Дескриптор
Атрибут form задает идентификатор формы, который будет использоваться для обработки данных. Formaction устанавливает обработчик формы в другой части документа, другом файле или сайте. Formmethod отвечает за определение метода пересылки данных. Name задает имя кнопке, type – тип (обычная, для отправки данных или для очистки формы). Value – значение, которое будет считываться скриптами. На кнопке будет отображаться изображение с указанным адресом и текст.
Чтобы создать кнопку, которая будет обрабатывать введенные данные, необходимо в атрибуте указать соответствующий тип:
Чтобы создать кнопку, стирающую введенные пользователем данные, задайте type = “reset”.
Обратите внимание
Дескриптор должен обязательно использоваться в качестве содержимого тега