Кнопки представлены элементом button. Они обладают широкими возможностями по конфигурации. Так, в зависимости от значения атрибута
type
мы можем создать различные типы кнопок:
submit
: кнопка, используемая для отправки формы
reset
: кнопка сброса значений формы
button
: кнопка без какого-либо специального назначения
Если кнопка используется для отправки формы, то есть у нее установлен атрибут type="submit"
, то мы можем задать у нее ряд дополнительных атрибутов:
form
: определяет форму, за которой закреплена кнопка отправки
formaction
: устанавливает адрес, на который отправляется форма. Если у элемента form задан атрибут action
, то он переопределяется
formenctype
: устанавливает формат отправки данных. Если у элемента form установлен атрибут enctype
, то он переопределяется
formmethod
: устанавливает метод отправки формы (post или get). Если у элемента form установлен атрибут method
, то он переопределяется
Например, определим на форме кнопку отправки и кнопку сброса:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы в HTML5</title> </head> <body> <form> <p><input type="text" name="login"/></p> <p><input type="password" name="password"/></p> <p> <button type="submit" formmethod="get" formaction="index.html">Отправить</button> <button type="reset">Отмена</button> </p> </form> </body> </html>
Кроме элемента button
для создания кнопок можно использовать элемент input
, у которого атрибут равен submit
или reset
. Например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы в HTML5</title> </head> <body> <form> <p><input type="text" name="login"/></p> <p><input type="password" name="password"/></p> <p> <input type="submit" value="Отправить" /> <input type="reset" value="Отмена" /> </p> </form> </body> </html>
И еще один элемент input с атрибутом type="image"
позволяет использовать в качестве кнопки изображение:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Форма ввода в HTML5</title> </head> <body> <form> <p> <input type="text" name="search" /> <input type="image" src="search.png" name="submit" /> </p> </form> </body> </html>
Кроме наличия изображения в остальном эта кнопка будет аналогична стандартной кнопке отправки input type="submit"
или button type="submit"
.