Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. Продолжаем тему построения HTML-форм и рассмотрим сегодня процесс создания кнопок на сайте при помощи тега button и его атрибутов. В прошлой статье мы уже отчасти разобрали возможности для формирования различных кнопок с использованием тега input, теперь пришло время расширить наши познания.
Прежде чем продолжить, я хочу предостеречь вас от легкомысленного отношения к изучению HTML в общем и его основных тегов, в частности. Даже при использовании современных средств создания сайтов в лице CMS (здесь обзор самых популярных движков), базовые знания языка гипертекстовой разметки точно лишними не будут. По большому счету, это основа основ.
Тем более, что современные технологии в лице специальных инструментов для разработчиков, которые имеются в любом современном веб-обозревателе (в этом смысле первой ласточкой был небезызвестный плагин 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>Нажимая кнопку «Далее» вы соглашаетесь со всеми правилами и условиями <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 |
---|
Параметры (названия методов передачи данных):
|
<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 |
---|
Значения:
|
<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 |
---|
Параметры:
|
<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 |
---|
Значения:
|
<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 и его атрибуты для создания кнопок на сайте. Надеюсь, для вас не осталось темных пятен по этой теме, и вы с успехом используете полученные знания.
Отличные рекомендации. Возьму на вооружение, чтобы убрать всякие плагины форм - надо делать своими руками и облегчить жизнь Вордпресу. 🙂
Спасибо! Очень помогла статья! Все оказалось очень просто! Нашлепал кнопок себе на сайт!
Руслан, здорово, что Вы так быстро разобрались, значит моя публикация действительно помогла.
Скажите плиз как в такую кнопку добавит выпадающий текст, хочу меню из таких кнопок но что бы подвел курсор и при этом появилось подменю
Ivan, выплывающее меню реализуется с помощью следующих средств CSS, прописываемых именно для подменю:
li ul {
position: absolute; /* Подменю позиционируются абсолютно */
display: none; /* Скрываем подменю */
}
li:hover ul {
display: block; /* При выделении пункта курсором мыши отображается подменю */
}
И скажите плиз куда в css это вставлять ведь код css очень большой
Я привел Вам просто пример, какими средствами можно это реализовать. Для каждой конкретной темы требуется индивидуальный подход для внедрения этого функционала. Любое правило CSS прописывается в файл стилей, обычно это style.css.