Тег button и его атрибуты для создания кнопок

Тег button и его атрибуты для создания кнопок

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. Продолжаем тему построения HTML-форм и рассмотрим сегодня процесс создания кнопок на сайте при помощи тега button и его атрибутов. В прошлой статье мы уже отчасти разобрали возможности для формирования различных кнопок с использованием тега input, теперь пришло время расширить наши познания.

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

Тем более, что современные технологии в лице специальных инструментов для разработчиков, которые имеются в любом современном веб-обозревателе (в этом смысле первой ласточкой был небезызвестный плагин Firebug для браузера Firefox), позволяют во многом автоматизировать процесс редактирования и добавления элементов на страницу.

Применение тега button и его атрибутов

Я уже упоминал о прошлой публикации, где был представлен <input> и атрибут type, имеющий три значения (button, reset, submit) для формирования кнопок на сайте.

Так вот тег button (не путать со значением атрибута type="button" тега input) может предложить несравненно более широкие возможности. На кнопке, смонтированной с его помощью, можно расположить практически любые элементы, в том числе изображения:

Кнопка с надписью Кнопка Кнопка с изображением

Как вы понимаете, для расширения функционала тега button используется множество атрибутов, которые могут принимать те или иные значения. Ниже даны варианты их применения с нужными пояснениями, соответствующими HTML-кодами и отображаемыми кнопками.

1. Autofocus [HTML5] . Этот атрибут позволяет получить установку фокуса после загрузки страницы, то есть можно нажать кнопку без подведения к ней курсора мыши, например, с помощью кнопки Enter на клавиатуре. Обратите внимание, что здесь использован тег fieldset.

2. Disabled — с помощью данного атрибута блокируется доступ к кнопке и ее изменение. Таким образом, она становится недоступной для пользователя. Значение такой кнопки не передается в файл обработчика (скрипта).

2. disabled Значений нет Неактивная кнопка

3. Form [HTML5] — этот атрибут используется для того чтобы связать кнопку с формой. Это нужно в тех случаях, когда кнопка не располагается внутри тега form.

4. Formaction [HTML5] — этот атрибут определяет адрес обработчика формы (обычно файл, написанный в виде скрипта). Он аналогичен атрибуту action тега form.

5. Formmethod [HTML5] — опять же по аналогии с атрибутом method тега form определяет способ передачи данных («get» либо «post»).

  • get — предназначен для передачи данных формы в адресной строке парами «имя=значение», которые добавляются к адресу страницы после «?» и разделяются между собой символом амперсанда («&»). Например: https://site.ru/doc/?name=Trash&password=prop. Объём данных лимитирован (4 Кб).
  • post — в этом случае данные на сервер посылаются в запросе веб-браузера, при этом их объем ограничен только серверными настройками.

6. Formenctype [HTML5] — определяет способ кодирования данных формы в случае их отправки на веб-сервер. Указывается явно, когда используется поле для отправки файла (input type="file"). По своим свойствам тождественен атрибуту enctype тега <form>.

  • application/x-www-form-urlencoded (по умолчанию) — пробелы заменяются знаком "+", кодировке в шестнадцатеричной системе подвергаются все символы кроме букв латинского алфавита и цифр. К примеру, слово «сыр» будет преобразовано в «%2F%3D%26%3F%2%3D%26%3D»;
  • multipart/form-data — информация не кодируется. Это значение актуально при отправлении файлов на веб-сервер;
  • text/plain — пробелы заменяются символом "+", остальные знаки не кодируются.

7. Formnovalidate [HTML5] — данный атрибут отменяет проверку на корректность данных, которые были введены в форму пользователем. По умолчанию он не действует. Эта проверка осуществляется автоматически при отправке формы для полей input type="email" и input type="url", а также, если присутствует атрибут pattern или required тега input.

Отправить без проверки

8. Formtarget [HTML5] — устанавливает место (наименование фрейма или окно), куда будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.

  • _blank — в этом случае страница загружается в новую вкладку браузера;
  • _self (по умолчанию) — загрузка страницы происходит в текущую вкладку;
  • _parent — загружает страницу во фрейм-родитель, при отсутствии фреймов работает как _self;
  • _top — отменяет все фреймы и загружает страницу в текущем окне веб-браузера;
  • <frame name> — открывает документ во фрейме с уникальным названием, которое присутствует в качестве значения атрибута name элемента <iframe> и атрибута formtarget для связывания фрейма с кнопкой отправки (пример ниже как раз описывает этот вариант).

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

9. name В качестве значения применяют набор символов из букв или цифр. Необходимо отметить, что JS чувствителен к регистру, а потому при обращении посредством скрипта необходимо использовать тот же формат написания наименования, что и в параметре атрибута name. Особая кнопка 1

10. type — определяет тип кнопки по ее функции. Внешний вид кнопок никак не отличается, но они обладают разным функционалом, который определяется параметрами этого атрибута:

  • button — обычная кнопка;
  • reset — кнопка для очистки данных формы и возвращение их в первоначальное состояние;
  • submit (по умолчанию) — кнопка для отправки данных формы обработчику;
  • menu — раскрывает меню, созданное при помощи одноименного тега.

11. Value — определяет параметр кнопки, который будет отправлен обработчику формы (отправляется пара "имя=значение", где имя устанавливает атрибут name тега button, а значение — атрибут value). Значение value может не совпадать с содержанием текста на кнопке.

Целью данного поста было познакомить вас, уважаемые читатели, со всеми возможностями, которые предоставляет тег button и его атрибуты для создания кнопок на сайте. Надеюсь, для вас не осталось темных пятен по этой теме, и вы с успехом используете полученные знания.

📎📎📎📎📎📎📎📎📎📎