Тег button, копка button, примеры, использование

Что такое button, как используется кнопка button в html, отправка формы с помощью button button. "Button" - это тег похожий по своим свойствам на {submit}.

О теге button

1. Что такое button, пример использования
2. Использование тега button с button
3. Использование тега button за пределами form

Что такое button

Тег button является двойным тегом. т.е. у него есть открывающийся и закрывающийся тег.

Синтаксис button

<button></button>

Что лучше использовать button или type submit

Единственное отличие между двумя способами - это то, что button предоставляет больше возможности и с оформлением и расположением!.

Кнопка button может находится за тегом form

Еще, как преимущество можно рассматривать то, что кнопка button может располагаться вне зоны тега form

Обязательно к изучению свойства css button по умолчанию:

В разных браузерах данные свойства кнопки button могут отличаться кардинально!

Самый популярный браузер Яндекс браузер.
Насколько я знаю, и Хром и Опера основаны на движке Хромиум...(многие браузеры используют данный движок).
В совокупности Яндекс браузер + Google Chrome + Опера = 60% всех пользователей.
Все остальные, на уровне погрешности... 5-7%( в догонку график по браузерам) .
Поэтому! Яндекс браузер как маяк, на что нужно опираться!
А если вы так не считаете, то это проблема не моя, а ваша!

button {

appearance: button;

-webkit-writing-mode: horizontal-tb !important;

text-rendering: auto;

color: -internal-light-dark(black, white);

letter-spacing: normal;

word-spacing: normal;

text-transform: none;

text-indent: 0px;

text-shadow: none;

display: inline-block;

text-align: center;

align-items: flex-start;

cursor: default;

background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));

box-sizing: border-box;

margin: 0em;

font: 400 13.3333px Arial;

padding: 1px 6px;

border-width: 2px;

border-style: outset;

border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));

border-image: initial;

}

Атрибуты кнопки button

accesskey

Доступ к элементам формы с помощью горячих клавиш.

autofocus

Устанавливает, что кнопка получает фокус после загрузки страницы.

disabled

Блокирует доступ и изменение элемента.

form

Связывает между собой форму и кнопку.

formaction

Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.

formenctype

Способ кодирования данных формы.

formmethod

Указывает метод пересылки данных формы.

formnovalidate

Отменяет проверку формы на корректность.

formtarget

Открывает результат отправки формы в новом окне или фрейме.

name

Определяет уникальное имя кнопки.

type

Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы.

value

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



Использование тега button с submit

Рассмотрим использование тега button с {submit}

HTML :

Для этого нам понадобится кнопка с name="example_button" + type="submit" + value="1" :

<button name="example_button" type="submit" value="1">Отправить</button>

Оборачиваем кнопку button в тег form

:

<form method="post">
<button name="example_button" type="submit" value="1">Отправить</button>
</form>


Далее нам понадобится php + post:

if($_POST['example_button']) { $result = 'Вы нажали кнопку отправить button' ;}

echo $result;

Результат взаимодействия тега button с submit

Для получения результата - нажмите кнопку отправить.

Отправить



Использование тега button за пределами form

Как вы наверное знаете, что использование тега button за пределами формы не приведет ни к какому результату:

Например:

<form method="post">

<input placeholder="Ваше имя" name ="example_button_3" required>

</form>

<button type="submit">Отправить форму</button>

Попробуйте нажать на кнопку "Отправить форму"

Разместим приведенный код с тегом button за пределами form - прямо здесь.

Попробуйте отправить какие-то данные с помощью данной кнопки...

Отправить форму

Кнопка button за пределами формы:

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

В тег form добавляем id

id="data"

В тег button добавляем атрибут "form" со значением "data":

form="data"

Соберем всю форму с кнопкой button за пределами form

Html :

<form id="data" method="post" >
<input placeholder="Ваше имя" name ="example_button_2">
</form>
<button type="submit" form="data">Отправить форму</button>


Php :

Php скрипт, который обработает запрос post:

if($_POST['example_button_2']) { $result_2= 'Вы нажали кнопку отправить example_button' ;}
echo $result_2;


Пример тег button за пределами формы:

Выше приведенный код с кнопкой button за пределами формы - разместим прямо здесь:

Для получения результата - нажмите кнопку отправить:

Отправить форму