Разное

Кнопки в html: Атрибут disabled | htmlbook.ru

24.07.2023

HTML/Элемент button

Синтаксис

(X)HTML

<button> ... </button>

Описание

Элемент button (от англ. «button» ‒ «кнопка») cоздаёт в документе интерактивные кнопки. По своему значению элемент button похож на элемент input, но в отличии от input элемент button может отображать на кнопке почти все элементы (кроме элемента карты) вкладываемые в данный элемент.

Примечание

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

Совет

Для корректности работы кнопки во всех браузерах, желательно в данном элементе указывать атрибут «

type» с соответствующим значением.

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

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

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

Верс.Раздел
HTML
2.0—
3.2—
4.0117.5 The BUTTON element
DTD: Transitional Strict Frameset
5.04.10.6 The button element
5.14.10.6. The button element
XHTML
1. 0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1		Extensible HyperText Markup Language

Атрибуты

autofocus
Получение кнопкой фокуса после загрузки страницы.
disabled
Блокирует кнопку.
form
Присоединяет кнопку к форме (с помощью значения параметра «id» присоединяемой формы).
formaction
URL-адрес обработчика формы.
formenctype
Способ кодирования данных формы перед отправкой.
formmethod
Метод передачи данных формы.
formnovalidate
Запрещает проверку данных формы на корректность.
formtarget
Указывает место, в котором должен быть открыт результат отправки данных формы.
name
Имя кнопки.
type
Тип кнопки.
value
Значение кнопки (отправляется вместе с данными формы на сервер).
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

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

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент button</title>
<link type=»text/css» href=»ex-style.css» rel=»stylesheet»>
</head>
<body>
<h2>Пример с элементом «button»</h2>
<!— Создаём форму, поле ввода и две кнопки «очистить» и «отправить» —>
<form action=»/examples/php-scripts/FIE.php» method=»get»>
<p>Введите ваше имя: <input type=»text» name=»first_name»></p>
<p>
<button type=»reset»>Очистить</button>
<button type=»submit»><img src=»http://programmerbook.

ru/favicon.ico» alt=»Эмблема сайта»>Отправить</button>
</p>
</form>
</body>
</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>

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

Как использовать атрибут Value для кнопок HTML

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

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

Если вы хотите внести свой вклад, запросите приглашение, поставив лайк или ответив на эту статью. Узнать больше

— Команда LinkedIn

Последнее обновление: 27 апреля 2023 г.

Кнопки — это распространенные элементы в HTML-формах, которые позволяют пользователям взаимодействовать с веб-страницей. Вы можете использовать атрибут value, чтобы указать текст, который появляется на кнопке, а также данные, которые отправляются на сервер или скрипт при нажатии кнопки. В этой статье вы узнаете, как использовать атрибут value для создания кнопок с разными метками и данными.

    Синтаксис атрибута значения

    Атрибут значения — это необязательный атрибут, который можно добавить в тег

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

    Примеры атрибута значения

    Давайте рассмотрим несколько примеров использования атрибута значения для создания кнопок с различными метками и данными.

    Пример 1: Кнопка, которая отправляет те же данные и метку на сервер.

    Эта кнопка отображает текст «Submit» и отправляет значение «Submit» на сервер при нажатии.

    Пример 2: кнопка, которая отправляет на сервер разные данные и метку.

    Эта кнопка будет отображать текст «Я согласен» и отправлять значение «Да» на сервер при нажатии.

    Пример 3: Кнопка, которая отправляет данные в сценарий.

    Эта кнопка будет отображать текст «Поздороваться» и выполнять сценарий, который предупреждает значение «Привет» при нажатии.

    Советы по атрибуту значения

    При использовании атрибута значения для кнопок рекомендуется включать его, если вы хотите отправлять данные на сервер или в скрипт. Значение должно быть строкой без пробелов и специальных символов, которые могут помешать передаче данных. Доступ к нему можно получить с помощью атрибута name тега

    или атрибута id тега

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

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

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

    «кнопка»

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

    «сброс»

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

    Нет типа

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

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

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

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

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

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

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

    Когда кнопка не имеет атрибута type, ее использование неясно. При написании кода вам может быть очевидно, что кнопка отправляет форму. Но частью того, чтобы быть хорошим разработчиком программного обеспечения, является написание кода, который легко поддерживать и понимать для других. Добавив атрибут type, будущие разработчики или даже Future You можно быстро и легко определить назначение кнопки.

    2) Избегайте ошибок

    «Почему эта форма отправляется, когда я нажимаю эту несвязанную кнопку?» Следуйте этому совету, и вы и все, кто работает с вашим кодом, больше никогда не столкнется с этой ошибкой:

    Для любой кнопки, которая не отправляет или не сбрасывает данные формы, добавьте атрибут типа button .

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

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