— HTML | MDN

HTML-элемент <button> создаёт кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает user agent, но вы можете изменить внешний вид кнопки, используя CSS.

Элемент поддерживает глобальные атрибуты (en-US).

autofocus HTML5

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

autocomplete Non-standard

Использование данного атрибута на элементе

<button> не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, Firefox сохраняет назначенное динамически отключённое состояние для элемента <button> при последующих загрузках страницы. Установка для данного атрибута значения off отключает подобное поведение. Смотрите баг 654072.

disabled

Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от <fieldset>; если отсутствует элемент-контейнер, с установленным атрибутом

disabled, то кнопка доступна для взаимодействия.Firefox по умолчанию, в отличие от прочих браузеров, сохраняет назначенное динамически отключённое состояние для элемента <button>, даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут autocomplete.

form HTML5

Атрибут form позволяет указать элемент <form>, с которым связана кнопка. Данный атрибут должен хранить значение

id элемента <form>. Если данный атрибут не установлен, то элемент <button> будет связан с родительским элементом <form>, если последний существует.Атрибут работает независимо от расположения элементов в документе, поэтому он позволяет связать элемент <button> с формой, даже в случае, если <button> не является наследником элемента <form>.

formaction HTML5

Ссылка на обработчик формы. Если атрибут определён — он переопределит атрибут action у формы-родителя.

formenctype HTML5

Если button имеет тип submit, то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута:* application/x-www-form-urlencoded: значение по умолчанию, если атрибут не указан.

  • multipart/form-data: следует использовать это значение, если форма содержит элемент <input> со значением атрибута type file.
  • text/plainЕсли этот атрибут определён, он переопределяет атрибут
    enctype     у формы-родителя.
formmethod HTML5

Если button имеет тип submit, то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты:

  • post: данные формы включаются в тело сообщения и отправляются на сервер.
  • get: данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута action и непосредственно данных, отделённых знаком ‘?’. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.
    Если этот атрибут определён, он переопределяет атрибут method у формы-родителя.
formnovalidate HTML5

Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке.Если этот атрибут определён, он переопределяет атрибут novalidate у формы-родителя.

formtarget HTML5

Если button имеет тип submit, этот атрибут является именем или ключевым словом,указывающим, где отображать ответ, полученный после отправки формы. This is a name of, or keyword for, a

browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the button’s form owner. The following keywords have special meanings:* _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.

  • _blank: Load the response into a new unnamed browsing context.
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as
    _self    .
  • _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
name

The name of the button, which is submitted with the form data.

type

The type of the button. Possible values are:* submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

  • reset: The button resets all the controls to their initial values.
  • button: The button has no default behavior. It can have client-side scripts associated with the element’s events, which are triggered when the events occur.
  • menu: The button opens a popup menu defined via its designated <menu> element.
value

The initial value of the button.

<button name="button">Тык!</button>

Clicking and focus

Whether clicking on a <button> causes it to (by default) become focused varies by browser and OS. The results for <input> of type="button" and type="submit" are the same.

Specification
HTML Standard
# the-button-element

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Last modified: , by MDN contributors

Тег input

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮Назад Полный HTML Ссылки Дальше ❯


Пример

HTML-форма с тремя полями ввода; два текстовых поля и одна кнопка Submit:

<form action=»/action_page.php»>
  First name: <input type=»text» name=»fname»><br>
  Last name: <input type=»text» name=»lname»><br>
  <input type=»submit» value=»Submit»>
</form>

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

Тег <input> определяет поле ввода, в которое пользователь может вводить данные.

<input> элементы используются в элементе <input> для объявления элементов управления вводом, которые позволяют пользователям вводить данные.

Поле ввода может меняться различными способами в зависимости от атрибута Type.

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

Элемент
<input>ДаДаДаДаДа

Советы и примечания

Примечание: Элемент <input> пуст, он содержит только атрибуты.

Совет: Используйте <label> для определения меток для <input> элементов.

Различия между HTML 4,01 и HTML5

Атрибут «align» является навестить поддерживается в HTML5.

В HTML5 тег <input> имеет несколько новых атрибутов, а атрибут Type имеет несколько новых значений.

Различия между HTML и XHTML

В HTML тег <input> не имеет конечного тега.

В XHTML тег <input> должен быть правильно закрыт, как это <input />.

Атрибуты

= Новое в HTML5.

АтрибутЗначениеОписание
acceptfile_extension
audio/*
video/*
image/*
media_type		Указывает типы файлов, которые принимает сервер (только для type=»file»)
alignleft
right
top
middle
bottom		Не поддерживается в HTML5.
Задает выравнивание входного изображения (только для type=»image»)
alttextЗадает альтернативный текст для изображений (только для type=»image»)
autocompleteon
off		Указывает, должен ли элемент <input> включать Автозаполнение
autofocusautofocusУказывает, что элемент <input> должен автоматически получать фокус при загрузке страницы
checkedcheckedУказывает, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type=»checkbox» or type=»radio»)
dirnameinputname. dirУказывает, что направление текста будет отправлено
disableddisabledУказывает, что элемент <input> должен быть отключен
formform_idУказывает одну или несколько форм, к которым принадлежит элемент <input>
formactionURLЗадает URL-адрес файла, который будет обрабатывать элемент управления вводом при отправке формы (для type=»submit» and type=»image»)
formenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain		Указывает, как данные формы должны кодироваться при отправке на сервер (для type=»submit» and type=»image»)
formmethodget
post		Определяет метод HTTP для отправки данных в URL-адрес действия (для type=»submit» and type=»image»)
formnovalidateformnovalidateОпределяет, что элементы формы не должны проверяться при отправке
formtarget_blank
_self
_parent
_top
framename		Указывает, где отображать ответ, полученный после отправки формы (для type=»submit» and type=»image»)
heightpixelsЗадает высоту элемента <input> (только для type=»image»)
listdatalist_idСсылается на элемент <datalist>, содержащий предварительно определенные параметры для элемента <input>
maxnumber
date		Задает максимальное значение для элемента <input>
maxlengthnumberУказывает максимальное число символов, допустимое в элементе <input>
minnumber
date		Задает минимальное значение для элемента <input>
multiplemultipleУказывает, что пользователь может ввести более одного значения в элементе <input>
nametextЗадает имя элемента <input>
patternregexpЗадает регулярное выражение, которое проверяется значением <input> элемента
placeholdertextЗадает краткую подсказку, описывающую ожидаемое значение элемента <input>
readonlyreadonlyУказывает, что поле ввода предназначено только для чтения
requiredrequiredУказывает, что поле ввода должно быть заполнено перед отправкой формы
sizenumberЗадает ширину (в символах) элемента <input>
srcURLУказывает URL-адрес изображения для использования в качестве кнопки отправки (только для type=»image»)
step numberЗадает юридические интервалы номеров для поля ввода
typebutton
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week		Указывает тип <input> элемент для отображения
valuetextЗадает значение элемента <input>
 
widthpixelsЗадает ширину элемента <input> (только для type=»image»)

Глобальные атрибуты

Тег <input> также поддерживает Глобальные атрибуты в HTML.

Event Attributes

Тег <input> также поддерживает Атрибуты событий в HTML.

Похожие страницы

HTML Учебник: HTML Forms

HTML DOM Ссылки:

  • Input Button Object
  • Input Checkbox Object
  • Input Color Object
  • Input Date Object
  • Input Datetime Object
  • Input DatetimeLocal Object
  • Input Email Object
  • Input FileUpload Object
  • Input Hidden Object
  • Input Image Object
  • Input Month Object
  • Input Number Object
  • Input Password Object
  • Input Range Object
  • Input Radio Object
  • Input Reset Object
  • Input Search Object
  • Input Submit Object
  • Input Text Object
  • Input Time Object
  • Input URL Object
  • Input Week Object

Параметры CSS по умолчанию

Нет.

❮Назад Полный HTML Ссылки Дальше ❯

Популярное

html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

Тег | 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>

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

html — input type=»submit» По сравнению с тегом кнопки они взаимозаменяемы?

Спросил

Изменено 1 год, 2 месяца назад

Просмотрено 181k раз

тип ввода = "отправить" и кнопка тег взаимозаменяемы? или если есть какая-то разница, то когда использовать input type="submit" и когда кнопку ?

А если нет разницы, то почему у нас 2 тега для одной цели?

  • html
  • доступность
  • w3c
  • веб-стандарты
  • семантическая разметка

3

http://www.w3.org/TR/html4/interact/forms.html#h-17. 5

Кнопки, созданные с помощью элемента BUTTON, функционируют точно так же, как кнопки, созданные с помощью элемента INPUT, но они предлагают более широкие возможности визуализации: элемент BUTTON может иметь содержимое. Например, элемент BUTTON, который содержит изображение, действует подобно элементу INPUT, тип которого установлен на «изображение», и может напоминать его, но тип элемента BUTTON допускает содержимое.

То есть взаимозаменяемы только по функциональности!

(Не забывайте, type="submit" используется по умолчанию с кнопкой , так что оставьте ее отключенной!)

8

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

Еще одна полезная «специальная» кнопка — это , который очистит форму.

2

Хотя оба элемента дают функционально одинаковый результат *, Я настоятельно рекомендую вам использовать .