Формы в HTML5

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

Синтаксис¶

Закрывающий тег обязателен.

Атрибуты¶

autofocus Устанавливает, что кнопка получает фокус после загрузки страницы. disabled Блокирует доступ и изменение элемента. form Связывает между собой форму и кнопку. formaction Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку. formenctype Способ кодирования данных формы. formmethod Указывает метод пересылки данных формы. formnovalidate Отменяет проверку формы на корректность. formtarget Открывает результат отправки формы в новом окне или фрейме. name Определяет уникальное имя кнопки. type Устанавливает тип кнопки: обычная; для отправки данных формы на сервер; для очистки формы. value Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты.

autofocus¶

Атрибут autofocus устанавливает, что кнопка получает фокус после загрузки страницы. Такую кнопку можно нажать сразу без перевода на неё фокуса, например, с помощью клавиатуры.

Значение по умолчанию

По умолчанию это значение выключено.

disabled¶

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

Значение по умолчанию

По умолчанию это значение выключено.

form¶

Связывает кнопку с формой по её идентификатору. Такая связь необходима в случае, когда кнопка не располагается внутри элемента , например, при создании её программно.

Идентификатор формы (значение атрибута id элемента ).

Значение по умолчанию

formaction¶

Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента . Если одновременно указать action и formaction , то при нажатии на кнопку атрибут action игнорируется и данные пересылаются по адресу, указанному в formaction .

formenctype¶

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла ( input type=»file» ). Этот атрибут по своему действию аналогичен атрибуту enctype элемента .

button formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain" > . button> 

application/x-www-form-urlencoded Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя). multipart/form-data Данные не кодируются. Это значение применяется при отправке файлов. text/plain Пробелы заменяются знаком + , буквы и другие символы не кодируются.

Значение по умолчанию

formmethod¶

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

button formmethod="get | post">. button> 

Различают два метода — GET и POST.

GET Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар « имя=значение », которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ & ). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup . Объём данных в методе ограничен 4 Кб. POST Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

formnovalidate¶

Отменяет встроенную проверку данных введённых пользователем в форме на корректность при нажатии на кнопку. Такая проверка делается браузером автоматически при отправке формы на сервер для полей , , а также при наличии атрибута pattern или required у элемента .

button formnovalidate>. button> 

Значение по умолчанию

По умолчанию этот атрибут выключен.

formtarget¶

Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.

button formtarget=" | _blank | _self | _parent | _top" > . button> 

_blank Загружает страницу в новую вкладку браузера. _self Загружает страницу в текущую вкладку. _parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .

name¶

Определяет уникальное имя кнопки. Как правило, это имя используется при отправке значения кнопки на сервер или для доступа к кнопке через скрипты.

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name .

Значение по умолчанию

type¶

Определяет тип кнопки, который устанавливает её поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.

button type="button | reset | submit">. button> 

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

Значение по умолчанию

value¶

Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара « имя=значение », где имя задаётся атрибутом name элемента , а значение — атрибутом value . Значение может как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value применяется для доступа к данным через скрипты.

Значение по умолчанию

Спецификации¶

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

 html> head> meta charset="utf-8" /> title>BUTTONtitle> head> body> p style="text-align: center"> button>Кнопка с текстомbutton> button> img src="image/umbrella.gif" alt="Зонтик" style="vertical-align: middle" /> Кнопка с рисунком button> p> body> html> 

Источник

Html сделать кнопку отмена

Кнопки представлены элементом button . Они обладают широкими возможностями по конфигурации. Так, в зависимости от значения атрибута type мы можем создать различные типы кнопок:

• submit : кнопка, используемая для отправки формы
• reset : кнопка сброса значений формы
• button : кнопка без какого-либо специального назначения

Если кнопка используется для отправки формы, то есть у нее установлен атрибут type=»submit» , то мы можем задать у нее ряд дополнительных атрибутов:

• form : определяет форму, за которой закреплена кнопка отправки
• formaction : устанавливает адрес, на который отправляется форма. Если у элемента form задан атрибут action , то он переопределяется
• formenctype : устанавливает формат отправки данных. Если у элемента form установлен атрибут enctype , то он переопределяется
• formmethod : устанавливает метод отправки формы (post или get). Если у элемента form установлен атрибут method , то он переопределяется

Например, определим на форме кнопку отправки и кнопку сброса:

       
Отправить Отмена 
 
   

Кроме элемента button для создания кнопок можно использовать элемент input , у которого атрибут равен submit или reset . Например:

И еще один элемент input с атрибутом type=»image» позволяет использовать в качестве кнопки изображение:

Кроме наличия изображения в остальном эта кнопка будет аналогична стандартной кнопке отправки input type=»submit» или button type=»submit» .

Источник