Html нажатая кнопка. Кнопка – это элемент формы. Применение тега button и его атрибутов для создания кнопок

Элемент button является более гибким, чем это может показаться на первый взгляд. Есть три способа, которыми вы можете использовать кнопку (button). Ключом к этим различным режимам работы является атрибут type , который имеет три значения. Они описаны в таблице .

Таблица 12-10: Значения атрибута type элемента button

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

Использование элемента button для отправки формы

Если атрибут type установлен на submit , при нажатии кнопки будет отправлена форма, которая содержит кнопку. Это поведение по умолчанию, если атрибут type не применяется. Когда вы используете кнопку таким образом, у вас есть доступ к некоторым дополнительными атрибутами, которые описаны в .

Таблица 12-11: Дополнительные атрибуты, которые можно использовать, если атрибут type установлен на submit

По большей части эти атрибуты позволяют изменить или дополнить конфигурацию элемента 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

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 тег используется для размещения кнопки. Внутри тега вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега (c атрибутом type = "button" ).

Всегда указывайте для тега

тип атрибута type = "button" если элемент используется в качестве обычной кнопки. Если вы используете тег внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы. Рекомендуется в этом случае использовать элемент для отправки HTML форм.

Поддержка браузерами

Тег			Opera		IExplorer	Edge
	Да	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значение	Описание
	autofocus	Логический атрибут, который указывает, что кнопка должна автоматически получить фокус при загрузке страницы.
disabled	disabled	Является логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем).
	form_id	Задает форму (элемент ) к которой кнопка принадлежит. В качестве значения должен выступать идентификатор формы () в этом же документе.
	URL	Указывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для type = "submit" > ).
	application/x-www-form-urlencoded multipart/form-data text/plain	Определяет, как данные формы должны быть закодированы при передаче на сервер (только для type = "submit" > ).
	get post	Определяет, какой метод HTTP использовать при отправке данных формы (только для type = "submit" > ).
	formnovalidate	Указывает, что проверка данных на корректность, введенных пользователем в форму не производится (только для type = "submit" > ).
	_blank _self _parent _top framename	Задаёт браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self - отображает ответ в текущем окне. Используется только для type = "submit" > .
name	name	Задает имя для кнопки, которое передается при отправке формы.
type	button reset submit	Указывает тип кнопки. Значение по умолчанию submit .
value	text	Определяет начальное значение для кнопки.

Пример использования

Кнопка 1



Кнопка 3

В данном примере мы разместили 3 кнопки , которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width ) размером 80 пикселей и высоту (height ) размером 50 пикселей:

• Текст внутри первой кнопки мы отформатировали жирным начертанием (тег ). Обратите внимание, что текст, который мы поместили внутри тега отображается на самой кнопке.
• Внутри второй кнопки элементом мы разместили *.png изображение (с прозрачным задним фоном). Атрибутом alt мы задали альтернативный текст для изображения, для того случая если оно по каким-то причинам не будет загружено (обязательный атрибут), относительный путь к изображению мы задали атрибутом src (обязательный атрибут), атрибутами width (ширина) и height (высота) задали размеры изображения равными 40 на 40 пикселей. Обратите внимание, что в атрибутах, которые задают размер не требуется указывать единицы измерения в отличии от CSS стилей, по той причине, что атрибутами можно указать значение только в пикселях.
• Текст внутри третьей кнопки мы отформатировали курсивным начертанием (тег ).

Результат нашего примера:

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

type = "text" name = "ulogin" placeholder = "Ваше имя" >

Отправить

В данном примере внутри формы мы создали два элемента

Кнопку можно задать с помощью парного тега ... . Внутри элемента button можно размещать другие HTML-элементы, так что можно сделать кнопку с текстом и рисунком.

Атрибуты тега

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

Disabled Блокирует кнопку. Используется, когда кнопка становится активной только после выполнения определенных условий. Значение можно задать тремя способами: ... ... ... form Идентификатор формы, к которой относится кнопка.

Атрибут не работает в Internet Explorer.

Formaction Адрес, куда пересылаются данные формы при нажатии на кнопку. Если для тега

указан атрибут action , то атрибут formaction переопределяет его значение. Используется только для кнопок типа submit .

Атрибут не работает в Internet Explorer версии 9 и ниже.

Formenctype Способ кодирования данных формы. Используется только для кнопок типа submit . Возможные значения:

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

Атрибут не работает в Internet Explorer версии 9 и ниже.

Formmethod Метод пересылки данных формы. Используется только для кнопок типа submit . Возможные значения:

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

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

Атрибут не работает в Internet Explorer версии 9 и ниже.

Formnovalidate Отмена проверки формы на корректность. Используется только для кнопок типа submit . Значение можно задать тремя способами: ... ... ...

Атрибут не работает в Internet Explorer версии 9 и ниже.

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

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

Атрибут не работает в Internet Explorer версии 9 и ниже.

Name Имя кнопки. type Тип кнопки. Возможные значения:

• button – Просто кнопка (по умолчанию),
• submit – Кнопка завершения работы и передачи данных,
• reset – Кнопка сброса.

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.

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

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