Кнопки
Используйте стили кнопок Bootstrap для взаимодействия с формами, диалогами, т.п. Имеется поддержка некоторых контекстуальных вариаций, размеров, состояний и т.п.
Примеры
Bootstrap имеет некоторые предопределенные стили кнопок, каждый из которых имеет свою семантическую цель, и имеет дополнительные параметры для большего контроля и гибкости.
Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный Линк
type="button" class="btn btn-primary">Главный type="button" class="btn btn-secondary">Вторичный type="button" class="btn btn-success">Успех type="button" class="btn btn-danger">Опасность type="button" class="btn btn-warning">Предупреждение type="button" class="btn btn-info">Инфо type="button" class="btn btn-light">Светлый type="button" class="btn btn-dark">Темный type="button" class="btn btn-link">Линк Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.
Тэг «кнопка»
Классы .btn созданы для использования с элементом . Однако их также можно использовать внутри или (хотя из-за этого некоторые браузеры могут рендерить это немного иначе).
class="btn btn-primary" href="#" role="button">Link class="btn btn-primary" type="submit">Button class="btn btn-primary" type="button" value="Input"> class="btn btn-primary" type="submit" value="Submit"> class="btn btn-primary" type="reset" value="Reset">Контурные кнопки (без фона)
Нужна кнопка, но без «тяжелых» фоновых цветов? Замените дефолтные классы-модификаторы на классы .btn-outline-* для удаления всех фоновых изображений и цветов в любой кнопке.
Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный
type="button" class="btn btn-outline-primary">Главный type="button" class="btn btn-outline-secondary">Вторичный type="button" class="btn btn-outline-success">Успех type="button" class="btn btn-outline-danger">Опасность type="button" class="btn btn-outline-warning">Предупреждение type="button" class="btn btn-outline-info">Инфо type="button" class="btn btn-outline-light">Светлый type="button" class="btn btn-outline-dark">Темный Размеры
Нужно изменить размеры кнопки? Добавьте в нее классы .btn-lg или .btn-sm для получения дополнительных размеров.
Большая кнопка Большая кнопка
type="button" class="btn btn-primary btn-lg">Большая кнопка type="button" class="btn btn-secondary btn-lg">Большая кнопка Маленькая кнопка Маленькая кнопка
type="button" class="btn btn-primary btn-sm">Маленькая кнопка type="button" class="btn btn-secondary btn-sm">Маленькая кнопка Создайте кнопки блочного уровня – которые занимают полную ширину родительского элемента – добавлением класса .btn-block .
Кнопка блочного уровня Кнопка блочного уровня
type="button" class="btn btn-primary btn-lg btn-block">Кнопка блочного уровня type="button" class="btn btn-secondary btn-lg btn-block">Кнопка блочного уровня Активное состояние
Когда кнопки нажимают, появляется более темный фон, границы и внутренняя тень. В BS4 нет необходимости добавлять класс в , т.к. тут используется псевдо-класс. Однако вы можете вызвать «активное» поведение и соответствующий внешний вид, добавив класс .active (и включив атрибут aria-pressed=»true» ) , когда необходимо прямо объявить такое поведение.
href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Главная ссылка href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Ссылка «Отключенние» кнопки
Заставьте кнопки выглядеть «неактивными» добавлением булеанова атрибута disabled к любому элементу .
Главная кнопка Кнопка
type="button" class="btn btn-lg btn-primary" disabled>Главная кнопка type="button" class="btn btn-secondary btn-lg" disabled>Кнопка «Отключенные» кнопки, созданные из элемента , ведут себя немного иначе:
- Элемент не поддерживает атрибут disabled , так что для соответствующих свойств вместо него надо добавлять класс .disabled ;
- Некоторые future-friendly стили, которые поддерживаются не всеми юзер-агентами, (т.е. «возможно будут поддерживаться в будущем») включены в для отключения всех событий pointer-events на кнопках-якорях. В браузерах, которые поддерживают это свойство, вы вовсе не увидите деактивированный курсор.
- Отключенные кнопки должны содержать атрибут aria-disabled=»true» для указания вспомогательным технологиям состояния элемента.
href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Главный линк href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Линк Оговорка о некоторых аспектах функциональности ссылок
Плагины кнопок
Контролируйте состояния кнопок или создавайте группы кнопок для компонентов, таких как «тулбары».
Переключение состояний
Добавьте data-toggle=»button» для переключения на активное состояние кнопки. Если вы делаете это, вы должны вручную добавить в класс .active и aria-pressed=»true» .
Одиночный переключатель
type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> Одиночный переключатель Переключатели («галочки») и «кнопки радио»
Стили классов .button могут применяться к прочим элементам, таким как , для создания переключателей («галочек») или «кнопок радио». Добавьте data-toggle=»buttons» к классу .btn-group , содержащему эти измененные кнопки, для включения «переключателей» в их соответствующих стилях.
Состояние выбора (т.е. когда ставится «галочка») обновляется лишь событием клика click по кнопке. Если вы используете другой метод для обновления ввода – например или вручную применяя свойство ввода checked – вам потребуется вручную применить класс .active к .
Заметьте, что кнопки с предустановленным выбором требуют вручную добавить класс .active к элементу ввода .
class="btn-group-toggle" data-toggle="buttons"> class="btn btn-secondary active"> type="checkbox" checked autocomplete="off"> Checked Active Radio Radio
class="btn-group btn-group-toggle" data-toggle="buttons"> class="btn btn-secondary active"> type="radio" name="options" id="option1" autocomplete="off" checked> Active class="btn btn-secondary"> type="radio" name="options" id="option2" autocomplete="off"> Radio class="btn btn-secondary"> type="radio" name="options" id="option3" autocomplete="off"> Radio Методы
| Метод | Описание |
|---|---|
| $().button(‘toggle’) | Задействует состояние «нажатия». Дает кнопке вид активированной (нажатой) кнопки. |
| $().button(‘dispose’) | Уничтожает кнопку элемента (в элементе). |
Кнопки
Используйте настраиваемые стили кнопок Bootstrap для взаимодействия с формами, диалоговыми окнами, т.п. Имеется поддержка нескольких размеров, состояний и т.д.
На этой странице
Примеры
Bootstrap имеет некоторые предопределенные стили кнопок, каждый из которых имеет свою семантическую цель, и имеет дополнительные параметры для большего контроля и гибкости.
Primary Secondary Success Danger Warning Info Light Dark Link
button type="button" class="btn btn-primary">Primarybutton> button type="button" class="btn btn-secondary">Secondarybutton> button type="button" class="btn btn-success">Successbutton> button type="button" class="btn btn-danger">Dangerbutton> button type="button" class="btn btn-warning">Warningbutton> button type="button" class="btn btn-info">Infobutton> button type="button" class="btn btn-light">Lightbutton> button type="button" class="btn btn-dark">Darkbutton> button type="button" class="btn btn-link">Linkbutton>Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация обозначенная цветом, также доступна и из самого контента (например, видимый текст) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .visually-hidden текст.
Отключение переноса текста
Если вы не хотите переносить текст кнопки, вы можете добавить к ней класс .text-nowrap . В Sass вы можете установить $btn-white-space: nowrap чтобы отключить перенос текста для каждой кнопки.
Тэг «кнопка»
Классы .btn созданы для использования с элементом . Однако их также можно использовать внутри или (хотя из-за этого некоторые браузеры могут рендерить это немного иначе).
a class="btn btn-primary" href="#" role="button">Linka> button class="btn btn-primary" type="submit">Buttonbutton> input class="btn btn-primary" type="button" value="Input"> input class="btn btn-primary" type="submit" value="Submit"> input class="btn btn-primary" type="reset" value="Reset">Контурные кнопки (без фона)
Нужна кнопка, но без «тяжелых» фоновых цветов? Замените дефолтные классы-модификаторы на классы .btn-outline-* для удаления всех фоновых изображений и цветов в любой кнопке.
Primary Secondary Success Danger Warning Info Light Dark
button type="button" class="btn btn-outline-primary">Primarybutton> button type="button" class="btn btn-outline-secondary">Secondarybutton> button type="button" class="btn btn-outline-success">Successbutton> button type="button" class="btn btn-outline-danger">Dangerbutton> button type="button" class="btn btn-outline-warning">Warningbutton> button type="button" class="btn btn-outline-info">Infobutton> button type="button" class="btn btn-outline-light">Lightbutton> button type="button" class="btn btn-outline-dark">Darkbutton>В некоторых стилях кнопок используется относительно светлый цвет переднего плана. И для того, чтобы обеспечить достаточный контраст их следует использовать только на темном фоне.
Размеры
Нужно изменить размеры кнопки? Добавьте в нее классы .btn-lg или .btn-sm для получения дополнительных размеров.
Large button Large button
button type="button" class="btn btn-primary btn-lg">Large buttonbutton> button type="button" class="btn btn-secondary btn-lg">Large buttonbutton>Small button Small button
button type="button" class="btn btn-primary btn-sm">Small buttonbutton> button type="button" class="btn btn-secondary btn-sm">Small buttonbutton>«Отключенние» кнопки
Заставьте кнопки выглядеть «неактивными» добавлением булеанова атрибута disabled к любому элементу . Отключенные кнопки имеют значение pointer-events: none , что предотвращает срабатывание состояния наведения и активного состояния.
Primary button Button
button type="button" class="btn btn-lg btn-primary" disabled>Primary buttonbutton> button type="button" class="btn btn-secondary btn-lg" disabled>Buttonbutton>«Отключенные» кнопки, созданные из элемента , ведут себя немного иначе:
- Элемент не поддерживает атрибут disabled , так что для соответствующих свойств вместо него надо добавлять класс .disabled ;
- Некоторые future-friendly стили, которые поддерживаются не всеми юзер-агентами, (т.е. «возможно будут поддерживаться в будущем») включены в для отключения всех событий pointer-events на кнопках-якорях. В браузерах, которые поддерживают это свойство, вы вовсе не увидите деактивированный курсор.
- Отключенные кнопки должны содержать атрибут aria-disabled=»true» для указания вспомогательным технологиям состояния элемента.
a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary linka> a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Linka>Предупреждение о функциональности ссылок
Блочные кнопки
Создавайте гибкие стопки полноразмерных «кнопок блока», как в Bootstrap 4, с помощью наших утилит display и разрывов. Используя утилиты вместо классов, специфичных для кнопок, мы получаем гораздо больший контроль над интервалами, выравниванием и адаптивным поведением.
Button Button
div class="d-grid gap-2"> button class="btn btn-primary" type="button">Buttonbutton> button class="btn btn-primary" type="button">Buttonbutton> div>Здесь мы создаем адаптивный вариант, начиная с вертикально расположенных кнопок до точки останова md , где .d-md-block заменяет класс .d-grid , тем самым сводя на нет параметры gap-2 . Измените размер окна браузера, чтобы увидеть изменения.
Button Button
div class="d-grid gap-2 d-md-block"> button class="btn btn-primary" type="button">Buttonbutton> button class="btn btn-primary" type="button">Buttonbutton> div>Вы можете настроить ширину кнопок блока с помощью классов ширины столбцов сетки. Например, для «кнопки блока» половинной ширины используйте .col-6 . Отцентрируйте его также по горизонтали с помощью .mx-auto .
Button Button
div class="d-grid gap-2 col-6 mx-auto"> button class="btn btn-primary" type="button">Buttonbutton> button class="btn btn-primary" type="button">Buttonbutton> div>Дополнительные утилиты можно использовать для регулировки выравнивания кнопок по горизонтали. Здесь мы взяли наш предыдущий адаптивный пример и добавили несколько утилит гибкости и утилит ширины на кнопку, чтобы выровнять кнопки по правому краю, когда они больше не сложены.
Button Button
div class="d-grid gap-2 d-md-flex justify-content-md-end"> button class="btn btn-primary me-md-2" type="button">Buttonbutton> button class="btn btn-primary" type="button">Buttonbutton> div>Плагины кнопок
Контролируйте состояния кнопок или создавайте группы кнопок для компонентов, таких как «тулбары».
Визуально эти кнопки переключения идентичны кнопкам чекбоксам и радиокнопкам. Однако вспомогательные технологии передают их по-другому: переключатели чекбоксов будут объявлены программами чтения с экрана как «отмечено»/«не отмечено» (поскольку, несмотря на их внешний вид, они по сути остаются чекбоксами), тогда как эти переключатели будут объявлены как «Кнопка»/«кнопка нажата». Выбор между этими двумя подходами будет зависеть от типа создаваемого вами переключателя, а также от того, будет ли этот переключатель иметь смысл для пользователей, когда он будет объявлен как чекбокс или как фактическая кнопка.
Переключение состояний
Добавьте data-bs-toggle=»button» для переключения на активное active состояние кнопки. Если вы предварительно переключаете кнопку, вам необходимо вручную добавить класс .active и aria-pressed=»true» для гарантированой правильной передачи вспомогательным технологиям.
Toggle button Active toggle button Disabled toggle button
button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle buttonbutton> button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle buttonbutton> button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle buttonbutton>a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle linka> a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle linka> a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle linka>Методы
Вы можете создать кнопки с помощью конструктора кнопки, например:
var button = document.getElementById('myButton') var bsButton = new bootstrap.Button(button) | Метод | Описание |
|---|---|
| toggle | Переключает состояние нажатия. Придает кнопке вид, что она была активирована. |
| dispose | Уничтожает элемент кнопку. (Удаляет сохраненные данные в элементе DOM) |
Например, чтобы переключить все кнопки
var buttons = document.querySelectorAll('.btn') buttons.forEach(function (button) var button = new bootstrap.Button(button) button.toggle() >) Sass
Переменные
$btn-padding-y: $input-btn-padding-y; $btn-padding-x: $input-btn-padding-x; $btn-font-family: $input-btn-font-family; $btn-font-size: $input-btn-font-size; $btn-line-height: $input-btn-line-height; $btn-white-space: null; // Set to `nowrap` to prevent text wrapping $btn-padding-y-sm: $input-btn-padding-y-sm; $btn-padding-x-sm: $input-btn-padding-x-sm; $btn-font-size-sm: $input-btn-font-size-sm; $btn-padding-y-lg: $input-btn-padding-y-lg; $btn-padding-x-lg: $input-btn-padding-x-lg; $btn-font-size-lg: $input-btn-font-size-lg; $btn-border-width: $input-btn-border-width; $btn-font-weight: $font-weight-normal; $btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075); $btn-focus-width: $input-btn-focus-width; $btn-focus-box-shadow: $input-btn-focus-box-shadow; $btn-disabled-opacity: .65; $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125); $btn-link-color: $link-color; $btn-link-hover-color: $link-hover-color; $btn-link-disabled-color: $gray-600; // Allows for customizing button radius independently from global border radius $btn-border-radius: $border-radius; $btn-border-radius-sm: $border-radius-sm; $btn-border-radius-lg: $border-radius-lg; $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; $btn-hover-bg-shade-amount: 15%; $btn-hover-bg-tint-amount: 15%; $btn-hover-border-shade-amount: 20%; $btn-hover-border-tint-amount: 10%; $btn-active-bg-shade-amount: 20%; $btn-active-bg-tint-amount: 20%; $btn-active-border-shade-amount: 25%; $btn-active-border-tint-amount: 10%; Миксины
Есть три миксина для кнопок: миксины для кнопок и вариантов контура кнопки (оба основаны на $theme-colors ), плюс миксин размера кнопки.
@mixin button-variant( $background, $border, $color: color-contrast($background), $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), $hover-color: color-contrast($hover-background), $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), $active-color: color-contrast($active-background), $disabled-background: $background, $disabled-border: $border, $disabled-color: color-contrast($disabled-background) ) color: $color; @include gradient-bg($background); border-color: $border; @include box-shadow($btn-box-shadow); &:hover color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; > .btn-check:focus + &, &:focus color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; @if $enable-shadows @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); > @else // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); > > .btn-check:checked + &, .btn-check:active + &, &:active, &.active, .show > &.dropdown-toggle color: $active-color; background-color: $active-background; // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); border-color: $active-border; &:focus @if $enable-shadows @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); > @else // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); > > > &:disabled, &.disabled color: $disabled-color; background-color: $disabled-background; // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); border-color: $disabled-border; > > @mixin button-outline-variant( $color, $color-hover: color-contrast($color), $active-background: $color, $active-border: $color, $active-color: color-contrast($active-background) ) color: $color; border-color: $color; &:hover color: $color-hover; background-color: $active-background; border-color: $active-border; > .btn-check:focus + &, &:focus box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); > .btn-check:checked + &, .btn-check:active + &, &:active, &.active, &.dropdown-toggle.show color: $active-color; background-color: $active-background; border-color: $active-border; &:focus @if $enable-shadows @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5)); > @else // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); > > > &:disabled, &.disabled color: $color; background-color: transparent; > > @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) padding: $padding-y $padding-x; @include font-size($font-size); // Manually declare to provide an override to the browser default @include border-radius($border-radius, 0); > Циклы
Варианты кнопок (для обычных и контурных кнопок) используют соответствующие миксины с нашей картой $theme-colors для генерации классов модификаторов в scss/_buttons.scss .
@each $color, $value in $theme-colors .btn-#$color> @include button-variant($value, $value); > > @each $color, $value in $theme-colors .btn-outline-#$color> @include button-outline-variant($value); > > Пример кнопки с иконкой
Кнопка с иконкой
button type="button" class="btn btn-primary"> i class="bi bi-cloud-upload-fill">i> Кнопка с иконкой button> — элемент кнопки
HTML-элемент создаёт кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает user agent, но вы можете изменить внешний вид кнопки, используя CSS.
| Категории контента | Общий поток (en-US) , текстовый контент (en-US) , интерактивный контент (en-US) , listed (en-US) , labelable (en-US) , и submittable (en-US) form-associated (en-US) элемент, очевидный контент. |
|---|---|
| Допустимое содержимое | Текстовый контент (en-US) . |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент с поддержкой текстового контента (en-US) . |
| Допустимые ARIA-роли | checkbox , link (en-US) , menuitem (en-US) , menuitemcheckbox (en-US) , menuitemradio (en-US) , radio (en-US) , switch (en-US) , tab (en-US) |
| DOM-интерфейс | HTMLButtonElement |
Атрибуты
Данный булевый атрибут позволяет указать, будет ли кнопка автоматически сфокусирована после загрузки страницы, до тех пор, пока пользователь не изменит фокус в ручную, например выбрав другой элемент. Только один связанный с формой элемент в документе может иметь данный атрибут.
Использование данного атрибута на элементе не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, Firefox сохраняет назначенное динамически отключённое состояние для элемента при последующих загрузках страницы. Установка для данного атрибута значения off отключает подобное поведение. Смотрите Firefox bug 654072.
Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от ; если отсутствует элемент-контейнер, с установленным атрибутом disabled, то кнопка доступна для взаимодействия.Firefox по умолчанию, в отличие от прочих браузеров, сохраняет назначенное динамически отключённое состояние для элемента , даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут autocomplete .
Ссылка на обработчик формы. Если атрибут определён — он переопределит атрибут action у формы-родителя.
Если button имеет тип submit , то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута:
- application/x-www-form-urlencoded : значение по умолчанию, если атрибут не указан.
- multipart/form-data : следует использовать это значение, если форма содержит элемент со значением атрибута type file .
- text/plain Если этот атрибут определён, он переопределяет атрибут enctype у формы-родителя.
Если button имеет тип submit , то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты:
- post : данные формы включаются в тело сообщения и отправляются на сервер.
- get : данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута action и непосредственно данных, отделённых знаком ‘?’. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.Если этот атрибут определён, он переопределяет атрибут method у формы-родителя.
Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке.Если этот атрибут определён, он переопределяет атрибут novalidate у формы-родителя.
Если 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 .
Название кнопки, которая отправляется вместе с данными формы.
Устанавливает тип кнопки. Достпуные значения:
- submit : Кнопка отправляет данные формы на сервер. Это значение по умолчанию, если атрибут не указан или если атрибут динамически изменен на пустое или недопустимое значение.
- reset : Кнопка сбрасывает все элементы управления к их начальным значениям. Удаляет данные, введенные в форму.
- button : Кнопка не имеет поведения по умолчанию. При этом на странице могут быть скрипты, активируемые при возникновении определённых событий на кнопке.
- menu : Кнопка открывает всплывающее меню, определяемое с помощью соответствующего элемента.
Начальное значение кнопки.
Пример
button name="button">Тык!button>
Кнопка
Кнопка (англ. button) — управляющий элемент интерфейса в компьютерных программах и устройствах.
Самое лаконичное описание кнопки знакомо нам по песне 90-х: «Нажми на кнопку — получишь результат». Это именно то, что делает кнопка — запускает выполнение какого-либо действия.
Кнопки в программах сделаны по образу и подобию обычных. Они так же содержат графический элемент, обозначающий границы активной области и надпись рядом с кнопкой или на ней, кратко описывающую, что произойдёт после нажатия.
Пример кнопки для скачивания программы, расположенной на сайте BestFREE.ru. Здесь она просто переадресует Вас на страницу с этой программой:
Интересно, что кнопки на реальных клавиатурах ещё называются клавишами. В то же время, если клавиатура нарисована на экране, то кнопки на ней клавишами уже не называют.