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

Leave a Comment / Html / By /

Атрибут 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 тег <button> создает кнопку, похожую на кнопку элемента <input> со значением submit, reset, button или image атрибута type. Однако, в отличие от элемента <input>, элемент <button> не относится к пустым элементам, то есть у него есть открывающий и закрывающий тег, между которыми можно расположить текст, изображения или другие HTML-элементы.

Когда браузер отображает элемент <button> на веб-странице, то весь элемент со всем его содержимым становится одной активной кнопкой. По умолчанию он будет иметь такой же внешний вид, как и кнопка, созданная с помощью <input type=»button»>, но из-за возможности содержать другие HTML-элементы он имеет гораздо больше возможностей для применения к нему CSS стилей.

Примечание: для изменения стандартного вида курсора при наведении на кнопку используйте CSS свойство cursor.

Атрибуты

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

<button autofocus></button>
<button autofocus="autofocus"></button>
<button autofocus=""></button>

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

disabled:
Отключает возможность нажатия кнопки. Это можно использовать в случае, когда кнопка должна стать активной при выполнение определенных условий (например, при выборе флажка и тд.), сделать кнопку активной можно будет с помощью JavaScript. Значения для логического атрибута disabled можно задавать следующими способами: 
 

<button disabled></button>
<button disabled="disabled"></button>
<button disabled=""></button>
form:
Указывает к какой форме относится данная кнопка. В качестве значения выступает один или несколько идентификаторов форм, разделенных пробелами. Количество идентификаторов в значении атрибута зависит от количества принадлежащих кнопке форм: 

<!DOCTYPE html>
<html>
<body>

  <form action="demo_form.html" method="get">
    Имя: <input type="text" name="fname"><br>
    Фамилия: <input type="text" name="lname">
  </form>

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

  <button type="submit" form="nameform" value="Submit">Отправить</button>

</body>
</html>

Примечание: атрибут не поддерживается в Internet Explorer.

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

<!DOCTYPE html>
<html>
<body>

  <form action="demo_form.asp" method="get">
    Имя: <input type="text" name="fname"><br>
    Фамилия: <input type="text" name="lname"><br>
    <button type="submit">Отправить</button><br>
    <button type="submit" formaction="demo_admin.html">
	  Отправить от имени администратора
	</button>
</form>

</body>
</html>
Атрибут formaction используется только для кнопок с атрибутом type=»submit».

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

formenctype:
Указывает, каким способом данные формы должны быть закодированы перед отправкой на сервер. Используется только для кнопок с атрибутом type=»submit». Возможные значения атрибута:
  • application/x-www-form-urlencoded — все символы кодируются перед отправкой (значение по умолчанию).
  • multipart/form-data — символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
  • text/plain — пробелы преобразуются в символ «+», но символы не кодируются.

<!DOCTYPE html>
<html>
<body>

  <form action="demo_post_enctype.asp" method="post">
    Имя: <input type="text" name="fname" value="Стив Баттлер"><br>
    <button type="submit" >Отправить с кодирование символов</button>
    <button type="submit" formenctype="text/plain">
	  Отправить без кодирования символов
	</button>
  </form>

</body>
</html>
Если для формы указан атрибут enctype, то атрибут formenctype переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

formmethod:
Указывает, какой метод HTTP будет использован при отправке данных формы. Используется только для кнопок с атрибутом type=»submit». Возможные значения атрибута:
  • get — данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение
  • post — отправляет данные формы, как HTTP после транзакции

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
  Имя: <input type="text" name="fname"><br>
  Фамилия: <input type="text" name="lname"><br>
  <button type="submit" >Отправить</button>
  <button type="submit" formmethod="post" formaction="demo_post.asp">
    Отправить используя POST
  </button>
</form>

</body>
</html>
Если для формы указан атрибут method, то атрибут formmethod переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

formnovalidate:
Указывает, что данные формы не будут проверяться на корректность. Используется только для кнопок с атрибутом type=»submit». Значения для логического атрибута autofocus можно задавать следующими способами: 

<button formnovalidate></button>
<button formnovalidate="formnovalidate"></button>
<button formnovalidate=""></button>
Если для формы указан атрибут novalidate, то атрибут formnovalidate переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях, и в Safari.

formtarget:
Указывает, где будет отображен ответ после отправки формы. Используется только для кнопок с атрибутом type=»submit». Возможные значения атрибута:
  • _blank — открывает ответ в новом окне или вкладке.
  • _self — открывает ответ в той же директории, где располагается ссылка (значение по умолчанию).
  • _parent — открывает ответ в родительском окне.
  • _top — открывает ответ во всю ширину окна.
  • имя_фрейма — открывает ответ в iframe, имя которого было указано в качестве значения.

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
  Имя: <input type="text" name="fname"><br>
  Фамилия: <input type="text" name="lname"><br>
  <button type="submit">Отправить</button>
  <button type="submit" formtarget="_blank">
    Оправить и открыть ответ в новом окне
  </button>
</form>

</body>
</html>
Если для формы указан атрибут target, то атрибут formtarget переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

name:
Указывает имя для элемента <button>. Он используется для ссылки на данные формы после ее отправки, или для ссылки на элемент в JavaScript. 

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
  Выберите одно из двух:
  <button name="subject" type="submit" value="HTML">HTML</button>
  <button name="subject" type="submit" value="CSS">CSS</button>
</form>

</body>
</html>

Примечание: некоторые элементы <button> могут совместно использовать одно и то же имя. Это позволяет иметь несколько кнопок с одинаковыми именами, которым можно отправить разные значение при использование формы.

type:
Определяет тип кнопки:
  • button — активная кнопка
  • reset — кнопка, очищающая форму от введенных данных
  • submit — кнопка для отправки данных формы (значение по умолчанию)

<!DOCTYPE html>
<html>
<body>

<form action="demo_form. asp" method="get">
  Имя: <input type="text" name="fname"><br>
  Фамилия: <input type="text" name="lname"><br>
  <button type="submit" value="Submit">Отправить</button>
  <button type="reset" value="Reset">Стереть</button>
</form>

</body>
</html>

Примечание: всегда указывайте атрибут type для кнопок, потому что различные браузеры могут использовать разные значения по умолчанию для атрибута type.

value:
Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Примечание: если вы используете элемент <button> в HTML-форме, то IE7 и более ранние версии этого браузера, при отправке формы будут отправлять текст располагающийся между <button> и </button>. В то время как другие браузеры будут отправлять содержимое атрибута value.

Тег <button> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример


<button type="button">Нажми на меня!</button>

Результат данного примера в окне браузера:

javascript — Какой смысл?

спросил

Изменено 11 месяцев назад

Просмотрено 54к раз

Является ли

против

 <форма>

Предполагается, что первым будет type=submit , поскольку атрибут type не указан.

Если вы , а не в элементе

, у кнопки не будет ничего для отправки, так что это не имеет большого значения. 🙂

Семантика обычно становится важной в какой-то момент жизненного цикла вашего приложения, поэтому неплохо было бы завести привычку указывать тип .

Единственная другая причина, которая может иметь значение, это наличие правила стиля, определяющего [type=button] или что-то в этом роде. Однако это не рекомендуется.

Тип кнопки по умолчанию — «Отправить». MDN не говорит об этом, насколько я понимаю, но это доступно в спецификации html5.

Отсутствующее значение по умолчанию — это состояние кнопки отправки.

Таким образом, установка типа «кнопка» отключает поведение по умолчанию при отправке формы, поэтому вам не нужно использовать preventDefault для обработки этого в javascript.

<кнопка> по умолчанию тип = "отправить" это означает, что если он находится внутри элемента формы, он попытается отправить форму. Вы можете привязать к нему событие клика и выполнить какое-то действие.

<тип кнопки="кнопка"> означает, что это обычная кнопка, а вы должны привязать к ней событие click , чтобы выполнить какое-либо действие.

Также есть

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

В нашем последнем примере будет показана особенность элемента кнопки , которая позволяет ему содержать другие неинтерактивные элементы. Это одно из основных отличий от элемента input (type=button).

Атрибуты

Специальные атрибуты

автофокус

Логическое значение, указывающее браузеру установить фокус на этот элемент управления после завершения загрузки документа или при отображении диалогового окна , в котором находится элемент управления. Если атрибут имеет значение «автофокус» или пустую строку («»), или если он просто присутствует, элемент управления должен получить фокус как можно скорее, после загрузки страницы или диалогового окна .

Пример
отключен

Логическое значение, указывающее, отключен элемент управления или нет. Если атрибут принимает значение «отключено» или пустую строку («»), или если он просто присутствует, элемент управления будет отключен.

Отключенные элементы управления отображаются серым цветом (если они видны), блокируются для взаимодействия с пользователем и, что более важно, их значения (если есть) не отправляются, когда 9Представлена ​​форма 0011 .

Пример
форма

Значение атрибута id формы, с которой связан данный элемент управления.

Этот атрибут является новым в HTML 5 и помогает определить релевантность элементов управления во вложенных или удаленных формах.

Пример

 <форма action="../../form-result.php">
  
Фамилия:

Фамилия:

название

Имя элемента управления. Это имя будет отправлено браузером агенту обработки вместе с содержимым атрибута value . Оба атрибута вместе будут соответствовать паре имя-значение, которая будет использоваться для обработки данных формы.

В настоящее время значение isindex , ранее использовавшееся особым образом некоторыми браузерами и включенное в стандарт HTML , не разрешено в этом атрибуте.

Пара имя-значение кнопки отправляется вместе с другими данными формы, только если кнопка использовалась для отправки формы.

Пример

 <форма action="../../form-result.php">
  

    Имя пользователя:
тип

Значение, указывающее ожидаемое поведение кнопки. Существует четыре возможных значения (без учета регистра), которые определяют действие по умолчанию, выполняемое кнопкой при ее нажатии:

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

Если этот атрибут отсутствует, кнопка ведет себя как кнопка «Отправить».

Пример
значение

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

Пара имя-значение кнопки отправляется вместе с другими данными формы, только если кнопка использовалась для отправки формы.

Пример

 <форма action=".

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

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