Button — <button> без особых атрибутов


Содержание

HTML :: Создание кнопок при помощи тега

Тег и его атрибут type

Элемент ‘button’ , формирующийся парным тегом (от англ. button – кнопка), используется для создания кнопок, тип которых определяется атрибутом type . В качестве значений атрибут может принимать следующие три:

  • «button» – создает обычную кнопку;
  • «reset» – создает кнопку сброса формы в первоначальное состояние;
  • «submit» – создает кнопку отправки данных формы на сервер.

По своему действию элемент ‘button’ очень похож на элемент ‘input’ с аналогичными значениями атрибута type , но при этом он не является пустым элементом и позволяет размещать внутри себя другие элементы, например, изображения, которые потом становятся одной активной кнопкой. А далее, используя стили CSS , можно изменять внешний вид кнопки по своему усмотрению.

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

Помимо атрибута type элемент ‘button’ имеет еще ряд уже известных нам атрибутов: autofocus , disabled , form , formnovalidate , formaction , formenctype , formmethod , formtarget , name , value . Их можно посмотреть в нашем справочнике здесь.

Опять же, не стоит забывать, что собственные атрибуты кнопок переопределяют значения соответствующих атрибутов, если они указаны в элементе ‘form’.

Использование элемента ‘button’ показано в примере №1.

Пример №1. Использование элемента ‘button’

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

Кнопки UI

Материал из JQuery

Можно объединить несколько кнопок в группу (см. пример «Объединенные кнопки» выше). Для этого нужно вместо метода .button(), воспользоваться .buttonset(). И если .button() нужно применять непосредственно к элементам, которые вы хотите сделать кнопками, то .buttonset() применяется к контейнеру, содержащему все элементы, которые должны стать группой кнопок:

Кроме обычного текста, на кнопки можно добавлять иконки (см. пример «Иконки» выше). Однако, иконки не могут быть добавлены элементам типа button, submit или reset.

HTML теги – тег

Описание


Тег создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега (с атрибутом type=»button | reset | submit»). В отличие от этого тега, предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

Теоретически, тег должен располагаться внутри формы, устанавливаемой элементом

Атрибуты

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Вид кнопок в браузере Safari

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает атрибут value .

Спонсор статьи — помощь веб-разработчику при создании и продвижении сайтов любой сложности.

Вёрстка: в чём разница между кнопками button и submit

Вёрстка у меня всегда была слабой стороной.
Вот и сейчас не могу понять разницу.
Здесь нашёл описание:
button — кнопка
submit — кнопка для отправки данных.
Судя по всему button тоже можно использовать для передачи данных.
Так в чём же разница?

4 ответа 4

Кнопка типа Submit сама отправляет данные формы на сервер, а для Button это нужно делать вручную.
link text

По функционалу это одно и тоже. Разница в том, что в контейнер можно запихать любую разметку (в примере теги ).

UPD: прошу прощения, не до конца вник в вопрос :)


Когда следует использовать элемент Button

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

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

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

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

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

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

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

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

Цукерберг рекомендует:  Работа мечты. Google

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

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

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

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

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

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

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

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


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

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

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

Если вам не нравятся эти бессмысленные ссылки, для существует неплохая альтернатива. Но, к сожалению, вне контекста блока по-прежнему остается бессмысленным элементом.

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

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

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

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

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

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

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

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

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

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

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

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


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

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

Но вы сами еще не совсем в порядке. MDN подробно рассматривает данную проблему :

Обратите внимание: Будьте осторожны при разметке ссылок с функциями кнопки. Действия кнопки, как правило, вызываются с помощью клавиши « Пробел », в то время как действия ссылок вызываются через клавишу Enter.

Другими словами, когда вы используете ссылки, которые должны вести себя, как кнопки, добавления только role=»button» недостаточно.

Также необходимо будет добавить ключ обработчика действий, который будет реагировать на нажатие клавиши « Пробел », чтобы обеспечить соответствие с оригинальной кнопкой.

Что получается? Вы активируете ссылки и кнопки с разными ключами. Поэтому примите это во внимание.

Ну что ж, на этом все. И хм… делайте интерактивные вещи правильно.

Данная публикация представляет собой перевод статьи « When To Use The Button Element » , подготовленной дружной командой проекта Интернет-технологии.ру

Только кнопки

Материал из JQuery

Соответствует элементам, которые являются кнопками: input-элементы с типом button или button-элементы.

$(‘.formBox :button’) вернет все кнопки, находящиеся внутри элементов с классом formBox.

Селектор :button является надстройкой библиотеки jQuery, а не частью официальной css спецификации (как большинство других селекторов). Поэтому, при поиске, jQuery не сможет использовать быструю нативную функцию querySelectorAll(). В связи с этим, для улучшения производительности рекомендуется в начале сузить круг искомых элементов, и уже среди них искать нужные элементы с помощью .filter():

В действии

Найдем кнопки на странице и выделим их красной рамкой и желтым фоном:

Компоненты


Более десятка компонентов, созданных для отображения кнопок, выпадающих списков, навигации, предупреждений и многого другого.

Кнопки

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

Содержание

Примеры

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

Передача значения ассистивным технологиям

Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передаваться пользователям ассистивных технологий — таких как screen readers (программы для чтения экрана). Убедитесь, что информация, выделенная цветом, либо очевидна из самого содержания (например, видимый текст), либо включается с помощью альтернативных средств, таких как дополнительный текст, скрытый классом .sr-only .

Цукерберг рекомендует:  Как стать продакт-менеджером

Теги кнопок

Классы .btn предназначены для использования с элементом / Однако вы также можете использовать эти классы для элементов или (хотя некоторые браузеры могут применять несколько иной рендеринг).

Outline кнопки

Нуждна кнопка, но не цвета фона? Замените классы модификаторов по умолчанию на .btn-outline-* , чтобы удалить все фоновые изображения и цвета на любой кнопке.

Размеры

Необычные большие или маленькие кнопки? Добавьте .btn-lg или .btn-sm для дополнительных размеров.

Создайте кнопки уровня блока, те, которые охватывают всю ширину родителя, добавив .btn-block .

Активное состояние

Кнопки будут отображаться при нажатии (с более темным фоном, более темной рамкой и вставкой тени), когда они активны. Не нужно добавлять класс к s поскольку они используют псевдокласс. Тем не менее, вы все равно можете принудительно использовать тот же активный вид с .active (и включать атрибут aria-pressed=»true» ), если вам нужно будет программно копировать состояние.


Отключенное состояние

Сделайте кнопки неактивными, добавив логический атрибут disabled в любой элемент .

Отключенные кнопки с использованием элемента ведут себя немного по-другому:

Предостережение функциональности ссылок

Плагин кнопок

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

Переключить состояния

Добавьте data-toggle=»button» для переключения active состояния кнопки. Если вы предварительно переключаете кнопку, вы должны вручную добавить класс .active и aria-pressed=»true» на .

Флажки и переключатели

Стили Bootstrap .button могут применяться к другим элементам, таким как , чтобы обеспечить переключение стиля кнопки флажка или переключателя. Добавьте data-toggle=»buttons» в .btn-group , содержащую эти измененные кнопки, чтобы включить их соответствующие стили.

Проверенное состояние этих кнопок обновляется только при click событии на кнопке. Если вы используете другой метод для обновления входных данных, например, с помощью или вручную применяя checked свойство ввода, вам нужно вручную переключить .active на .

Обратите внимание, что кнопки с предварительной проверкой требуют, чтобы вы вручную добавили класс .active в тег .

Когда следует использовать элемент button

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

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

Элемент button , сам по себе, не сможет выполнить “переход на новый URL”. Шло много разговоров об использовании атрибута href : “ href везде”, но ничего не вышло.

Клик по кнопке делает что-то лишь тогда, когда кнопка находится в естественной среде обитания кнопки.


Button есть элемент формы

Формы имеют кнопки отправки. Например:

В форме элемент button , по умолчанию, ведет себя идентично приведенному выше элементу input .

Button может иметь контент

Основная причина для использования button это наличие открывающего и закрывающего тега button . Наличие открывающего и закрывающего тега дает нам возможность размещать внутри кнопки любые html-элементы. Часто можно увидеть следующую картину:

Для input этот смешанный контент было бы трудно осуществить (у input может быть ).

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

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

Давайте считать: “Если кнопка не имеет атрибута href, то это button”

Выше нет необходимости в href . 0 здесь лишь для того, чтобы не прыгать по странице, так как id не может начинаться с числа.

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

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

Что лучше использовать: элемент button или ссылку с фиктивным href?

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

Теоретически, тег должен располагаться внутри формы, устанавливаемой элементом

  • Дата: 2014-02-08
  • Просмотров: 12166

  • Автор: хъ
  • Комментарии к статье

    > Но, к сожалению, за пределами формы элемент button также
    > становится бессмысленным.

    Во-первых, у кнопки можно указать атрибут form=»id формы» и связать кнопку в произвольном месте страницы с произвольной формой.
    А во-вторых, onclick можно обрабатывать JS.

    button

    Поддержка браузеров

    IE Opera Chrome Firefox Safari
    до версии 7 не поддерживает атрибут value + + + +

    Пример

    Описание и использование

    Тег вставляет в документ кнопку.

    Внутри элемента button Вы можете размещать контент (текст, изображения). В этом заключается разница между этим элементом и кнопками, созданными с помощью элемента input.

    Всегда указывайте атрибут type для кнопки. Значение по умолчанию атрибута type в Internet Explorer — «button», в других браузерах — «submit».

    Важно: Если Вы используете элемент button в HTML форме, разные браузеры обработают его по разному. Internet Explorer передаст текст между тегами и , а другие браузеры — содержание атрибута «value». Используйте элемент input для создания кнопок в HTML форме.

    Button — <button> без особых атрибутов

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

    Цукерберг рекомендует:  Онлайн-курсы - Часовые зоны.


    Категории контента Общий поток, текстовый контент, интерактивный контент, listed, labelable, и submittable form-associated элемент, очевидный контент.
    Разрешённый контент Текстовый контент.
    Tag omission None, both the starting and ending tag are mandatory.
    Разрешённый родительский контент Любой элемент с поддержкой текстового контета.
    Разрешённые роли ARIA
    DOM interface объекта интерфейса, он также доступен для них по наследству) для манипулирования расположением и представлением элементами кнопки.»> HTMLButtonElement
    Тип Строчный

    Атрибуты

    autofocus HTML5 Данный булевый атрибут позволяет указать, будет ли кнопка автоматически сфокусирована после загрузки страницы, до тех пор, пока пользователь не изменит фокус в ручную, например выбрав другой элемент. Только один связанный с формой элемент в документе может иметь данный атрибут. autocomplete Использование данного атрибута на элементе не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, Firefox сохраняет назначенное динамически отключенное состояние для элемента при последующих загрузках страницы. Установка для данного атрибута значения off отключает подобное поведение. Смотрите баг 654072. disabled

    Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от ; если отсутсвует элемент-контейнер, с установленным атрибутом disabled, то кнопка доступна для взаимодействия.

    Firefox по умолчанию, в отличие от прочих браузеров, сохраняет назначенное динамически отключенное состояние для элемента , даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут autocomplete .

    formHTML5 Атрибут form позволяет указать элемент ) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.»> , с которым связана кнопка. Данный атрибут должен хранить значение id элемента ) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.»> . Если данный атрибут не установлен, то элемент будет связан с родительским элементом ) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.»> , если последний существует. Атрибут работает независимо от расположения элементов в документе, поэтому он позволяет связать элемент с формой, даже в случае, если не является наследником элемента ) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.»> . formactionHTML5 Ссылка на обработчик формы. Если атрибут определен — он переопределит атрибут action у формы-родителя. formenctypeHTML5 Если button имеет тип submit , то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута:

    • application/x-www-form-urlencoded : значение по умолчанию, если атрибут не указан.
    • multipart/form-data : следует использовать это значение, если форма содержит элемент используется для создания интерактивных элементов управления в веб-формах.»> со значением атрибута type file .
    • text/plain

    Если этот атрибут определен, он переопределяет атрибут enctype у формы-родителя.

    formmethodHTML5 Если button имеет тип submit , то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты:

    • post : данные формы включаются в тело сообщения и отправляются на сервер.
    • get : данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута action и непосредственно данных, отделенных знаком ‘?’. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name& >Если этот атрибут определен, он переопределяет атрибут method у формы-родителя.

    formnovalidate HTML5 Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке. Если этот атрибут определен, он переопределяет атрибут novalidate у формы-родителя. formtarget HTML5 Если button имеет тип submit , этот атрибут является именем или ключевым словом ,

    указывающим, где отображать ответ, полученный после отправки формы . This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the button’s form owner. The following keywords have special meanings:

    • _self : Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
    • _blank : Load the response into a new unnamed browsing context.
    • _parent : Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self .
    • _top : Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self .

    name The name of the button, which is submitted with the form data. type The type of the button. Possible values are:

    • submit : The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
    • reset : The button resets all the controls to their initial values.
    • button : The button has no default behavior. It can have client-side scripts associated with the element’s events, which are triggered when the events occur.
    • menu: The button opens a popup menu defined via its designated element.

    value The initial value of the button.

    Пример

    Please note that this button has CSS applied.

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих