Тег button, копка button, примеры, использование
О теге button
- Что такое button, пример использования
- Использование тега button с button
- Использование тега button за пределами form
Что такое button
Тег button является двойным тегом. т.е. у него есть открывающийся и закрывающийся тег.Синтаксис button
<button></button>
Что лучше использовать button или type submit
Единственное отличие между двумя способами - это то, что button предоставляет больше возможности и с оформлением и расположением!.Кнопка button может находится за тегом form
Еще, как преимущество можно рассматривать то, что кнопка button может располагаться вне зоны тега formОбязательно к изучению свойства css button по умолчанию:
В разных браузерах данные свойства кнопки button могут отличаться кардинально! Я использую самый популярный браузер Яндекс браузер. Насколько я знаю, и Хром и Опера основаны на движке Хромиум...(многие браузеры используют данный движок) В совокупности Яндекс браузер + хром + Опера = 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Для этого нам понадобится кнопка с name="example_button" + type="submit" + value="1" :
Оборачиваем кнопку button в тег form
:<button name="example_button" type="submit" value="1">Отправить</button>
</form>
Далее нам понадобится php + post:
echo $result;
Результат взаимодействия тега button с submit
Для получения результата - нажмите кнопку отправить.
Использование тега button за пределами form
Использование тега button возможно, когда тег button находится за пределами формы.Разберемся, как это может работать, когда тег button за перлами формы. Сразу форму:
<input placeholder="Ваше имя" name ="example_button_2">
</form>
<button type="submit" form="data">Отправить форму</button>
Php? который этот запрос обработает:
echo $result_2;
Для получения результата - нажмите кнопку отправить:
button html html input button button html css html button type button html кнопка html button text html button button html form button тег button html html input type button html button disabled html button style button class html