Главная HTML Форма Кнопка button

Элемент формы <button>

Элементы формы

Элемент <button>...</button> (от англ. button - кнопка) создаёт на веб-странице кнопки.

По своему действию <button> напоминает результат, получаемый с помощью <input type="button | reset | submit">.

В отличие от кнопок, созданных <input type="button">, элемент <button>...</button> предлагает расширенные возможности по созданию кнопок.

На подобной кнопке можно размещать любые элементы HTML, в том числе изображения, текст, таблицы... . Используя стили (css) можно определить вид кнопки путём изменения шрифта, цвета фона, размеров и других параметров. (см. Примеры)

Синтаксис: 
<form>
  <button атрибут>...</button>
</form>

или 
вне <form>...</form>
<button атрибут>...</button>

Атрибуты <button>

Атрибут Значение Описание

autofocus

autofocus

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

<button autofocus value="next">Далее</button>

disabled disabled Блокирует доступ к кнопке и её изменение. Кнопка в таком случае отображается серым цветом и недоступна для активации пользователем. Кроме того, такая кнопка не может получить фокус путём нажатия на клавишу Tab. Такое состояние кнопки можно изменять через скрипты.

<button>Активная кнопка</button>
<button disabled>Неактивная кнопка</button>

form

id_form

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

Такая связь необходима в случае, когда кнопка не располагается внутри элемента <form>.

1 
<form id="myform" action="test.php">
  <p><input placeholder="Ваше имя" name="user"></p>
</form>
  <p><button type="submit" form="myform">Отправить форму</button></p>

Кнопка находится вне элемента form, но является частью формы.

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

formaction

="URL"

 Задаёт url-адрес обработчика данных формы, на который пересылаются данные формы при нажатии на кнопку. Если для формы указан атрибут action, то атрибут formaction переопределит его значение.

Применяется для кнопки типа <button type="submit">.

<form action="test1.php">
  <input placeholder="Ваше имя" name="user">
  <button formaction="test2.php">Отправить</button>
</form>

(тип кнопки submit по умолчанию)

formenctype

 application/x-www-form-urlencoded
multipart/form-data
text/plain		 Способ кодирования данных формы.

Этот атрибут по своему действию аналогичен атрибуту enctype элемента <form>.

2 
<form>
  <p>Ваше имя: <input name="user"></p>
  <p>Файл для отправки: <input name="file" type="file"></p>
  <p><button formaction="test.php" formmethod="post" 
      formenctype="multipart/form-data">Отправить</button>
</form>

Ваше имя:

Файл для отправки:

formmethod

get | post

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

<form>
<button formaction="test.php" formmethod="post">Отправить</button>
</form>

formnovalidate

formnovalidate

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

<button formnovalidate>Отправить без проверки</button>

formtarget

= _blank
= _self
= _parent
= _top
=имя фрейма

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

_blank — новое окно;
_self — тот же фрейм;
_parent — родительский фрейм (если он существует, если нет — то в текущий);
_top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм;
имя фрейма - загружает ответ во фрейм с указанным именем.

<button type="submit" formtarget="_blank">
Оправить и открыть ответ в новом окне
</button>

name ="имя" Определяет уникальное имя кнопки. Используется для ссылки на данные формы после ее отправки, или для ссылки на элемент в JavaScript.

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

<form>
Выберите: 
 <button name="send" type="submit" value="html">HTML</button>
 <button name="send" type="submit" value="css">CSS</button>
 <button name="send" type="submit" value="ok">Не знаю</button>
</form>

Выберите:
type ="button"
="reset"
="submit"		 Устанавливает тип кнопки.

"button" - Обычная кнопка.
"reset" - Кнопка для очистки введённых данных формы и возвращения значений в первоначальное состояние.
"submit" - Кнопка для отправки данных формы на сервер (значение по умолчанию).

3 
<form action="test.php" method="POST" target="_blank">
 <fieldset>
  <legend><b>Форма отправки</b></legend>
  <p><input type="text" name="login" placeholder="Login:"></p> 
  <p><input type="password" name="password" placeholder="Password:"></p>
  <p><button type="reset">Сбросить</button> <button type="submit">Отправить</button></p> 
 </fieldset>	
</form>

<p><button type="button" style="color:red;" onclick='alert("Кнопка type=button вне формы")'>кнопка вне формы</button><<p>
Форма отправки

value ="текст" Задает значение по умолчанию, отправляемое при нажатии на кнопку.

<form action="test.php">
   <p><input type="text" name="user" placeholder="Ваше имя"></p>
   <p><button value="01001010011111" name="Vasya Pupkin" type="submit">Отправить форму</button></p>
</form>

После отправки данной формы (method="GET" по умолчанию) в адресной строке будет значение: "user=&Vasya+Pupkin=01001010011111"

Если значение параметра value не указывать, на кнопке автоматически появится надпись «Отправить» или «Подача запроса» (зависит от браузера).

<input type="submit">

Примеры кнопок

1) Стандартные кнопки <input type="button">

<input type="button" value="Кнопка"> <input type="submit" value="Отправить"> <input type="reset" value="Очистить">

2) Стилизованные кнопки <button>...</button>

<button type="button" name="button1" style="width:100px; height:50px; color:red;"><b>Кнопка 1</b></button>

<button type="button" style="background-color:#a5e3fc;"><img src="images/rus_2.png" alt=""> Кнопка с рисунком</button>

<button type="button" name="button2" style="width: 30px; height:30px; background-color: yellow;"><img src="/images/ico.png" alt="up"></button>

<button type="button" name="button3" style="width: 100px; height:30px; background-color: green; color: #ffffff;"><i>Демо</i></button>

 

При нажатие на кнопку ниже раскравается/скрывается таблица с сылками на нормы ГТО.

<script>
function outlineToggle(item)
{
if(null == item)
return false
if(item.style.display == "none")
{item.style.display = ""}
else
{item.style.display = "none"}
return false
}
</script>

<a href="javascript:void(0)" onClick="outlineToggle(outline)">
 <button style="background-color:#f2f2f2; cursor: pointer;">
   <img src="images/logo_olympic.png" style="vertical-align: middle; max-width:50px;">
   &#9660; Нормы ГТО &#9650;
 </button>
</a>

<div id="outline" style="display:none;">
<div style="position:absolute; left:30px;padding-top:7px; z-index:10">
  <table class="tab1">
  <tr><td colspan=2><a href="gto.html" target="_blank">ГТО - главная</a></td></tr>
  <tr>
  <td><a href="gto-stup-01.html">1-ступень</a></td>
  <td></td>
  </tr>
  <tr>
  <td><a href="gto-stup-02.html">2-ступень</a></td>
  <td><a href="gto-stup-03.html">3-ступень</a></td>
  </tr>
    ...
  <tr>
  <td><a href="gto-stup-10.html">10-ступень</a></td>
  <td><a href="gto-stup-11.html">11-ступень</a></td>
  </tr>
  </table>
</div>
</div>