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

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

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

Как создать HTML-кнопки посредством тега button

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

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

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

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

Кнопка с надписью
<button>Кнопка</button>
Кнопка с изображением
<button><img style="vertical-align: middle"
src="/images/gortenziia.jpg" alt="Гортензия"></button>

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

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

1. autofocus
Значений (параметров) нет.
<form>
<fieldset>Нажимая кнопку &#171;Далее&#187; вы соглашаетесь со всеми правилами и условиями
<button autofocus value="next">Далее</button>
</fieldset>
</form>
Нажимая кнопку «Далее» вы соглашаетесь со всеми правилами и условиями

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

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

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

3. form
В качестве значения атрибута form используется параметр атрибута id тега form (например, id=»database»).
<form id="database"><input placeholder="ваш e-mail" name="user"></form>
<button type="submit" form="database">Ответить</button>

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

4. formaction
В качестве параметра указывается адрес обработчика
<form> 
   <p><input placeholder="Ваше имя" name="user"></p>
   <p><button formaction="email.php">Отправить</button></p>
</form>

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

5. formmethod
Параметры (названия методов передачи данных):
  • get — предназначен для передачи данных формы в адресной строке парами «имя=значение», которые добавляются к адресу страницы после «?» и разделяются между собой символом амперсанда («&»). Например: https://site.ru/doc/?name=Trash&password=prop. Объём данных лимитирован (4 Кб).
  • post — в этом случае данные на сервер посылаются в запросе веб-браузера, при этом их объем ограничен только серверными настройками.
<form>
  <p>Загрузите файл:</p> 
  <p><input name="file" type="file"></p>
  <p><button formaction="formdata.php" formmethod="post" 
      formenctype="multipart/form-data">Отправить</button></p>
</form>

Загрузите файл:

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

6. formenctype

Значения:

  • application/x-www-form-urlencoded (по умолчанию) — пробелы заменяются знаком «+», кодировке в шестнадцатеричной системе подвергаются все символы кроме букв латинского алфавита и цифр. К примеру, слово «сыр» будет преобразовано в «%2F%3D%26%3F%2%3D%26%3D»;
  • multipart/form-data — информация не кодируется. Это значение актуально при отправлении файлов на веб-сервер;
  • text/plain — пробелы заменяются символом «+», остальные знаки не кодируются.
<form>
  <p>Загрузите файл:</p> 
  <p><input name="file" type="file"></p>
  <p><button formaction="formdata.php" formmethod="post" 
      formenctype="multipart/form-data">Отправить</button></p>
</form>

Загрузите файл:

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

7. formnovalidate
Значения отсутствуют
<form action="place.php">
  <p><input required placeholder="Имя"></p>
  <p><input type="email" required placeholder="Ваш email"></p>
  <p><input type="url" required placeholder="Сайт"></p>
  <p><button formnovalidate>Отправить без проверки</button></p>
</form>

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

8. formtarget

Параметры:

  • _blank — в этом случае страница загружается в новую вкладку браузера;
  • _self (по умолчанию) — загрузка страницы происходит в текущую вкладку;
  • _parent — загружает страницу во фрейм-родитель, при отсутствии фреймов работает как _self;
  • _top — отменяет все фреймы и загружает страницу в текущем окне веб-браузера;
  • <frame name> — открывает документ во фрейме с уникальным названием, которое присутствует в качестве значения атрибута name элемента <iframe> и атрибута formtarget для связывания фрейма с кнопкой отправки (пример ниже как раз описывает этот вариант).
<form>
   <p><iframe name="out" height="40" width="180"></iframe></p>
   <p>Ваше имя:</p> 
   <p><input name="user"></p>
   <p><button formaction="place.php" formtarget="out">Отправить</button>
  </form>

Ваше имя:

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

9. name
В качестве значения применяют набор символов из букв или цифр. Необходимо отметить, что JS чувствителен к регистру, а потому при обращении посредством скрипта необходимо использовать тот же формат написания наименования, что и в параметре атрибута name.
<button name="send" value="ОК" type="submit">Особая кнопка 1</button>

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

10. type
Значения:
  • button — обычная кнопка;
  • reset — кнопка для очистки данных формы и возвращение их в первоначальное состояние;
  • submit (по умолчанию) — кнопка для отправки данных формы обработчику;
  • menu — раскрывает меню, созданное при помощи одноименного тега.
<form action="place.php">
   <p><input type="text" name="user"></p>
   <p><button type="reset">Очистить форму</button></p> 
   <p><button type="submit">Отправить форму</button></p>
  </form>

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

11. value
Значение: любой текст либо набор символов, включающий буквы и/или цифры.
<form action="place.php">
   <p><input type="text" name="user"></p>
   <p><button value="12345abcde" name="hidden" type="submit">Отправить форму</button></p>
  </form>

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

Поделиться с друзьями
Игорь Горнов

Создатель и администратор сайта Goldbusinessnet.com. Участник нескольких успешных проектов и автор более 1000 статей о работе в интернете, создании сайтов, полезных программах и сервисах.

Работа в интернете
Добавить комментарий

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. Ivan

    Скажите плиз как в такую кнопку добавит выпадающий текст, хочу меню из таких кнопок но что бы подвел курсор и при этом появилось подменю

    Ответить
    1. Игорь Горнов автор

      Ivan, выплывающее меню реализуется с помощью следующих средств CSS, прописываемых именно для подменю:
      li ul {
      position: absolute; /* Подменю позиционируются абсолютно */
      display: none; /* Скрываем подменю */
      }
      li:hover ul {
      display: block; /* При выделении пункта курсором мыши отображается подменю */
      }

      Ответить
      1. Ivan

        И скажите плиз куда в css это вставлять ведь код css очень большой

        Ответить
        1. Игорь Горнов автор

          Я привел Вам просто пример, какими средствами можно это реализовать. Для каждой конкретной темы требуется индивидуальный подход для внедрения этого функционала. Любое правило CSS прописывается в файл стилей, обычно это style.css.

          Ответить
  2. Руслан

    Спасибо! Очень помогла статья! Все оказалось очень просто! Нашлепал кнопок себе на сайт!

    Ответить
    1. Игорь Горнов автор

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

      Ответить
  3. Paladin

    Отличные рекомендации. Возьму на вооружение, чтобы убрать всякие плагины форм — надо делать своими руками и облегчить жизнь Вордпресу. 🙂

    Ответить