Html button type: Атрибут type | htmlbook.ru

Leave a Comment / Html / By /

HTML/Атрибут type (Элемент button)

/html/button/type:> Тип интерактивной кнопки_

Синтаксис

(X)HTML

<button type="[значение]"> ... </button>

Описание

Атрибут / параметр type (от англ. «type» ‒ «тип, вид») указывает тип интерактивной кнопки. В завистимости от типа кнопки меняется её поведение, то есть события вызываемые кнопкой.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

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

Верс.Раздел
HTML
2.0—
3. 2—
4.0117.5 The BUTTON element
type = submit|button…
DTD: Transitional Strict Frameset
5.04.10.6 The button element
The type attribute…
5.14.10.6. The button element
The type attribute…
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Значения

button
Ничего не делает. Данное значение предназначено для работы со скриптами.
reset
Сбрасывает (очищает) поля формы. (Работает только если элемент принадлежит форме.)
submit
Отправляет данные формы на сервер. (Работает только если элемент принадлежит форме.)

Значение по умолчанию: «submit».

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Параметр type (Элемент button)</title>
</head>
<body>
<h2>Пример использования атрибута «type»</h2>
<form action=»/examples/php-scripts/FIE.php» method=»post»>

<p>Введите ваше имя: <input type=»text» name=»first_name»></p>
</form>
<p><button type=»submit» form=»myform»> Результат </button></p>
</body>
</html>

Параметр type (Элемент button)

Атрибут type тега | HTML справочник

HTML тег <button>

Значение и применение

Атрибут type (HTML тега <button>) задает тип, используемой кнопки.

Всегда указывайте для тега <button> тип атрибута type = «button» если элемент используется в качестве обычной кнопки.

Поддержка браузерами

Атрибут
Chrome
Firefox
Opera
Safari
IExplorer
Edge
typeДаДаДаДаДаДа

Синтаксис:

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

Значения атрибута

ЗначениеОписание
buttonОбычная кликабельная кнопка, которая не имеет поведения по умолчанию. Может использоваться совместно с клиентскими скриптами.
resetКнопка, которая сбрасывает все значения элементов управления формы к их первоначальным значениям.
submitКнопка, которая служит для отправки данных формы на сервер. Это значение по умолчанию, если атрибут не указан, или если атрибут динамически меняется в пустое или недопустимое значение.

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута type HTML тега <button></title>
	</head>
	<body>
		<button type = "button" onclick = 
 
"alert('Я просто кнопка вне формы')">кнопка вне формы</button><br><br>   
		<form>
			Login: <input type = "text" name = "login"><br><br> 
			Password: <input type = "password" name = "password"><br> <br> 
			<button type = "reset">Сбросить</button><button type = "submit">Отправить</button> 
		</form>	
	</body>
</html>

В данном примере мы указали три разлиных элемента <button>:

  • первая кнопка с типом обычная кликабельная кнопка (type = «button») размещается вне формы. Для неё мы указали атрибут событий onclick, который позволяет задать срабатывание скрипта при клике левой кнопки мыши на элементе (вызываем информационное сообшение при нажатии).
  • вторая кнопка размещена внутри формы и сбрасывает все значения элементов к первоначальным (type = «reset») размещена внутри формы.
  • третяя кнопка размещена внутри формы и служит для отправки данных формы на сервер (type = «submit»).

Внутри формы для первого поля задали тип однострочное текстовое поле <input> (type = «text»), а для второго однострочное текстовое поле, предназначенное для ввода пароля в котором символы, введенные внутри поля скрываются (type = «password»).

Пример использования атрибута type HTML тега <button> (задает тип, используемой кнопки).HTML тег <button>

Тип кнопки HTML Атрибут

❮ Тег HTML
 

Попробуйте сами »

Определение и использование

Атрибут type определяет тип кнопки.

Совет: Всегда указывайте атрибут типа для <кнопка> элемент. Разные браузеры могут использовать разные типы по умолчанию для . <кнопка> элемент.

Поддержка браузера

Атрибут
тип Да Да Да Да Да

Синтаксис

Этот код является допустимым HTML и проходит службу проверки разметки W3C. Однако я считаю, что атрибут типа всегда должен быть включен в кнопку. Если этот атрибут отсутствует, это может привести к потенциально запутанному поведению — и этого достаточно, чтобы иметь дело с веб-разработкой!

Примечание : я использую тег

Эта кнопка отправит данные формы. Кнопки отправки обычно находятся внутри формы, т.е.0023 Тег <форма> .

«кнопка»

Эта кнопка не имеет поведения по умолчанию. JavaScript должен использоваться для определения того, что происходит при нажатии на него.

«сброс»

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

Нет типа

После прочтения предыдущих определений, как вы думаете, как будет вести себя кнопка без атрибута типа? Если атрибут type отсутствует, кнопка ведет себя как кнопка отправки .

Это определенно было не то, что я ожидал — я предполагал, что кнопка без определенного типа ничего не сделает при нажатии. Это может вызвать проблемное поведение (то есть ошибки!) в вашем коде, если вы, как и я, этого не ожидаете.

На следующем gif-файле показана простая форма (оригинал Codepen ниже). Когда форма отправлена, цвет фона страницы изменяется с помощью JavaScript, прослушивая при отправке события . Каждый из упомянутых ранее типов кнопок включен в форму и помечен, чтобы показать значение их типа. Обратите внимание, что происходит при нажатии каждой из них:

Кнопки, демонстрирующие, что происходит для различных значений атрибута типа
  • Кнопка типа отправки изменяет цвет фона и отправляет форму, как и ожидалось.
  • Кнопка-кнопка, как и ожидалось, ничего не делает.
  • Кнопка сброса ничего не делает, так как в этом примере нет входных данных формы для сброса. Это также ожидается.
  • Кнопка без явного значения типа отправляет форму и меняет цвет фона. Мы ожидаем этого после обсуждения выше, но это все еще не кажется интуитивно понятным по сравнению с другими типами кнопок.

Попробуйте поэкспериментировать с CodePen здесь:

Демонстрация типа кнопки Codepen

1) Четкое определение того, что делает кнопка

Когда кнопка не имеет атрибута type, ее использование неясно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *