Доброго здоровья всем читателям моего блога! Продолжаем тему построения 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

1a

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 и его атрибуты для создания кнопок на сайте. Надеюсь, для вас не осталось темных пятен по этой теме. Это не последняя публикация, продолжение обязательно последует, поэтому милости прошу подписываться на обновления

Описание

HTML тег создает кнопку, похожую на кнопку элемента со значением submit, reset, button или image атрибута type. Однако, в отличие от элемента , элемент не относится к пустым элементам, то есть у него есть открывающий и закрывающий тег, между которыми можно расположить текст, изображения или другие HTML-элементы.

Когда браузер отображает элемент

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

Примечание: для изменения стандартного вида курсора при наведении на кнопку используйте CSS свойство cursor .

Атрибуты

autofocus: Указывает браузеру, что кнопка должна получить фокус после загрузки страницы. Значения для логического атрибута autofocus можно задавать следующими способами:

Disabled: Отключает возможность нажатия кнопки. Это можно использовать в случае, когда кнопка должна стать активной при выполнение определенных условий (например, при выборе флажка и тд.), сделать кнопку активной можно будет с помощью JavaScript. Значения для логического атрибута disabled можно задавать следующими способами: form: Указывает к какой форме относится данная кнопка. В качестве значения выступает один или несколько идентификаторов форм, разделенных пробелами. Количество идентификаторов в значении атрибута зависит от количества принадлежащих кнопке форм:

Имя:
Фамилия:

Кнопка находится вне элемента form, но является частью формы.

Отправить

Примечание: атрибут не поддерживается в Internet Explorer.

Formaction: Определяет адрес, куда пересылаются данные формы при нажатии на кнопку. Если для формы указан атрибут action, то атрибут formaction переопределит его значение:

Имя:
Фамилия:
Отправить
Отправить от имени администратора

Атрибут formaction используется только для кнопок с атрибутом type="submit".

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

Formenctype: Указывает, каким способом данные формы должны быть закодированы перед отправкой на сервер. Используется только для кнопок с атрибутом type="submit". Возможные значения атрибута:

• application/x-www-form-urlencoded - все символы кодируются перед отправкой (значение по умолчанию).
• multipart/form-data - символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
• text/plain - пробелы преобразуются в символ "+", но символы не кодируются.

Имя:
Отправить с кодирование символов Отправить без кодирования символов

Если для формы указан атрибут enctype, то атрибут formenctype переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

Formmethod: Указывает, какой метод HTTP будет использован при отправке данных формы. Используется только для кнопок с атрибутом type="submit". Возможные значения атрибута:

• get - данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение
• post - отправляет данные формы, как HTTP после транзакции

Имя:
Фамилия:
Отправить Отправить используя POST

Если для формы указан атрибут method, то атрибут formmethod переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

Formnovalidate: Указывает, что данные формы не будут проверяться на корректность. Используется только для кнопок с атрибутом type="submit". Значения для логического атрибута autofocus можно задавать следующими способами: Если для формы указан атрибут novalidate, то атрибут formnovalidate переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях, и в Safari.

Formtarget: Указывает, где будет отображен ответ после отправки формы. Используется только для кнопок с атрибутом type="submit". Возможные значения атрибута:

• _blank - открывает ответ в новом окне или вкладке.
• _self - открывает ответ в той же директории, где располагается ссылка (значение по умолчанию).
• _parent - открывает ответ в родительском окне.
• _top - открывает ответ во всю ширину окна.
• имя_фрейма - открывает ответ в iframe, имя которого было указано в качестве значения.

Имя:
Фамилия:
Отправить Оправить и открыть ответ в новом окне

Если для формы указан атрибут target, то атрибут formtarget переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

Name: Указывает имя для элемента . Он используется для ссылки на данные формы после ее отправки, или для ссылки на элемент в JavaScript.

Выберите одно из двух:

HTML CSS

Примечание: некоторые элементы могут совместно использовать одно и то же имя. Это позволяет иметь несколько кнопок с одинаковыми именами, которым можно отправить разные значение при использование формы.

Type: Определяет тип кнопки:

• button - активная кнопка
• reset - кнопка, очищающая форму от введенных данных
• submit - кнопка для отправки данных формы (значение по умолчанию)

Имя:
Фамилия:

Отправить Стереть

Примечание: всегда указывайте атрибут type для кнопок, потому что различные браузеры могут использовать разные значения по умолчанию для атрибута type.

Value: Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Примечание: если вы используете элемент в HTML-форме, то IE7 и более ранние версии этого браузера, при отправке формы будут отправлять текст располагающийся между и . В то время как другие браузеры будут отправлять содержимое атрибута value.

04.02.14 4.9K

Вы используете его, хм … ну, когда хотите разместить на странице кнопку, по которой пользователь может кликнуть, не так ли? К сожалению, все немного сложнее. В принципе это близко к истине, но давайте изучим вопрос глубже.

Сам элемент выглядит таким образом:

Сделать что-нибудь

Что является самым распространенным результатом клика на что-нибудь на веб-сайте? Переход на новый URL-адрес, как если бы вы нажали ссылку (элемент ).

Элемент сам по себе, не может этого сделать. Было много разговоров о том, чтобы разрешить «href везде », но ничего из этого так и не вышло.

При нажатии на кнопку действительно производятся определенные действия, если используется соответствующий контекст…

Кнопка – это элемент формы

Веб-формы могут содержать кнопки для выполнения (подтверждения) действий. Вы можете подумать, что это выглядит приблизительно так:

Элемент в оболочке

, по умолчанию, ведет себя именно так, как и показано выше.

Submit

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

Reset

Нажатие на эту кнопку приведет к удалению всех других полей ввода (и текстовых областей) из родительского блока .

Кнопки могут содержать контент

Основной причиной использования элемента

является то, что он содержит и открывающийся, и закрывающийся теги (). А это значит, что его можно разграничить с любым другим кодом. На практике часто возникает такая ситуация:

Подтвердить

Пока будет сохраняться, этот смешанный контент будет отображаться на экране.

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

Давайте оставим пока тему стилей для , хотя разные браузеры обычно имеют специальные стили, которые применяются к кнопкам. Если захотите, вы можете оставить стили, применяемые браузерами, или же полностью удалить их, и тогда ваш стиль по умолчанию будет заменять стили браузеров.

Учтите: «если кнопка не имеет валидного href, это просто элемент »

Помните, раньше я писал, что эта тема доставляет мне истинное наслаждение . Это то, что вдохновило меня на написание данной статьи. Я представлял себе, какое удовольствие получу, рассматривая различные казусы. Как, например:

Меня уже достали такие кнопки.

Скорее всего, выше приведенный код означает что-то типа: Я собираюсь кликнуть кнопку, чтобы сделать что-то с JavaScript. Так или иначе, это, кажется, лучше, чем использовать обычный

, потому что вы получаете возможность изменения вида курсора и все остальные стили по умолчанию.

Вне

я бесполезна.

Однако все равно, кажется, лучше

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

Хорошо. Давайте вставим JavaScript

Это, наверное, лучшее решение. Если JavaScript требуется для любых действий связанных с кликами, то для элемента

в принципе можно обходиться и без запуска JS.

Но мы можем сделать следующее:

// 1. Создаем кнопку var button = document.createElement("button"); button.innerHTML = "Do Something"; // 2. Размещаем ее var body = document.getElementsByTagName("body"); body.appendChild(button); // 3. Добавляем обработку действия button.addEventListener ("click", function() { alert("did something"); });

Вы можете легко сделать «кнопку добавления » частью рабочего процесса JavaScript.

Когда целесообразнее использовать ссылки

Если у вас есть какие-нибудь гипертекстовые переходы на другие страницы, то целесообразнее оформлять их ссылкой, чтобы можно было использовать анкор. Даже если вы переназначаете ее поведение через JavaScript.

Это прогрессивное улучшение в лучшем его применении. Например:

• Кнопка поиска обычно порождает запуск поисковых сценариев Ajax — в то время как ссылка просто может указывать на страницу поиска;
• Кнопка «опубликовать » запускает следующий шаг публикации чего-то, что нужно пользователю — но ссылка может просто вести на страницу / опубликовать /;
• Кнопка с миниатюрой изображения открывает отдельную панель, на которой выводится изображение в большем размере — а ссылка может просто указывать URL-адрес этого увеличенного изображения.

Если ничего больше не подходит, вставляйте кнопку с JavaScript.

Связанные проблемы

У вас может получиться что-то похожее на то, что получилось у меня!

Кнопки являются одним из популярных элементов интерфейса и часто применяются внутри форм, например, для отправки введённой информации в форме на сервер.

Кнопки на веб-странице можно создать несколькими способами - с помощью элемента или элемента

.

Рассмотрим вначале добавление кнопки через и его синтаксис.

Атрибуты кнопки перечислены в табл. 1.

Создание кнопки показано в примере 1.

Пример 1. Добавление кнопки

Примите во внимание, что учитываются все пробелы в надписи на кнопке, в отличие от обычного текста HTML, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Но правильнее, конечно же, задавать вид кнопки через CSS. Результат примера показан на рис. 1.

Рис. 1. Вид кнопки

Для таких кнопок есть ряд обязательных правил:

• ;
• нельзя вкладывать внутрь кнопки

;

значение атрибута value не может быть пустым.

Второй способ создания кнопки основан на использовании элемента

. Он по своему действию напоминает результат, получаемый с помощью . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью .

Рис. 2. Кнопки, созданные с помощью

Синтаксис создания такой кнопки следующий.

Надпись на кнопке

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

Пример 2. Рисунок на кнопке

Кнопка с текстом Кнопка с рисунком

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

Для

также есть ряд ограничений:

нельзя вкладывать внутрь ссылки ;

один

нельзя вкладывать внутрь другого.

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на неё происходит переход к обработчику формы по адресу, указанному атрибутом action элемента

. Программа-обработчик, получает данные, введённые пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.

Синтаксис создания кнопки Submit зависит от используемого элемента или

.

Надпись на кнопке

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

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

Кнопка Reset

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

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

Надпись на кнопке

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

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

Кнопку на веб-странице можно создать двумя способами - с помощью тега и тега .

Рассмотрим вначале добавление кнопки через и его синтаксис.

Атрибуты кнопки перечислены в табл. 1.

Создание кнопки показано в примере 1.

Пример 1. Добавление кнопки

HTML5 IE Cr Op Sa Fx

Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.

Рис. 1. Вид кнопки

Второй способ создания кнопки основан на использовании тега

. Он по своему действию напоминает результат, получаемый с помощью тега . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью .

Рис. 2. Кнопки, созданные с помощью

Синтаксис создания такой кнопки следующий.

Надпись на кнопке

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

Пример 2. Рисунок на кнопке

HTML5 IE Cr Op Sa Fx

Кнопка с текстом Кнопка с рисунком

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

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action тега

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

Синтаксис создания кнопки Submit зависит от используемого тега или

.

Надпись на кнопке

Атрибуты те же, что и у рядовых кнопок (пример 3).

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

HTML5 IE Cr Op Sa Fx

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

Кнопка Reset

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

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

Надпись на кнопке

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

Пример 4. Кнопка для очистки формы

HTML5 IE Cr Op Sa Fx

Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value , на кнопке по умолчанию будет добавлен текст «Очистить».

Поделись статьей: