Есть много функций, о которых мы можем не знать
Кнопка позволяет нам делать что-то на веб-странице, когда мы нажимаем на нее.
В этой статье мы рассмотрим части кнопки HTML, о существовании которых мы могли не знать.
Атрибуты
Кнопки HTML имеют различные атрибуты. Это следующие:
disabled
- предотвращает нажатие кнопки, если онаtrue
form
- идентификаторform
элемента, с которым связана кнопка. Это позволяет нам размещать кнопку за пределами формы, но при этом позволяет нам делать с ней что-то, когда на нее нажимают.formaction
- URL-адрес, обрабатывающий информацию, отправленную кнопкой. Он переопределяет атрибутaction
владельца формы кнопки, если он указанformenctype
- тип кодировки данных, который используется для отправки формы на сервер. Возможные значения:application/x-www-form-urlencoded
, значение по умолчанию,multipart/form-data
для форм с файловыми входами иtext/plain
, которое используется только для отладки. Это переопределит атрибутenctype
владельца формы кнопки.formmethod
- если кнопка является кнопкой отправки, атрибут указывает метод HTTP, который браузер использует для отправки формы. Возможные значения:get
иpost
. Это значение переопределит атрибутmethod
владельца формы кнопки.formnovalidate
- логический атрибут, указывающий, что форма не проверяется при отправке. Он переопределяет атрибутnovalidate
владельца формы кнопки.formtarget
- переопределяет атрибутtarget
владельца формы кнопки. Это может быть_self
,_blank
,_parent
или_top
._self
загружает ответ в тот же контекст просмотра, что и текущий. Это значение по умолчанию, которое_blank
загружается в новый контекст просмотра, такой как новая вкладка или окно._parent
загружает ответ в родительский контекст просмотра текущего_top
загружает ответ в контекст просмотра верхнего уровняname
- имя кнопки, которая отправляется как пара сvalue
кнопки как часть данных формы.type
- поведение кнопки по умолчанию. Возможные значения:submit
для отправки данных на сервер,rset
для сброса всех элементов управления до начальных значений илиbutton
, который не имеет поведения по умолчанию.value
- начальное значение кнопки. Он определяет значение, связанное сname
кнопки, когда она отправляется с данными формы.
Пример
Мы можем использовать элемент button
с элементом form
следующим образом:
<form id="form"> <input type="text" value="foo" /> </form> <button type="reset" form="form">Reset</button>
Мы устанавливаем идентификатор form
, а затем можем добавлять кнопки вне формы, которые управляют формой, как мы это делали с кнопкой сброса.
Мы можем добавить кнопку отправки следующим образом:
index.html
:
<form id="form"> <input type="text" value="foo" name="name" /> </form> <button type="submit" form="form">Submit</button> <button type="reset" form="form">Reset</button>
index.js
:
const form = document.getElementById("form"); form.onsubmit = e => { e.preventDefault(); alert( [...form.elements].find(e => e.tagName.toLowerCase() === "input").value ); };
В приведенном выше коде мы получаем элементы form
и распределяем их в массив, чтобы мы могли использовать метод find
.
Мы вызываем preventDefault()
, чтобы предотвратить отправку по умолчанию.
Затем мы находим наш элемент input
, проверяя тег input
.
Наконец, мы можем получить его значение и отобразить его в окне предупреждения.
Как мы видим, мы можем разместить наш элемент кнопки где угодно и по-прежнему управлять формой, если мы установим атрибут form
на идентификатор формы, которую мы хотим контролировать.
Укладка
Элементы кнопок намного проще стилизовать, чем элементы ввода. Мы можем добавлять в него стили, например em
, strong
или img
.
Кроме того, мы можем использовать псевдоэлементы ::after
и ::before
, чтобы добавить более сложный стиль.
Мы должны установить для кнопки тип button
, если мы не используем ее для отправки данных.
Заключение
Нам не нужно размещать кнопку внутри формы, чтобы управлять формой. Это потому, что мы можем указать атрибут form
со значением идентификатора формы.
Кроме того, мы можем указать formmethod
, formenctype
, formtarget
и т. Д., Чтобы переопределить соответствующие атрибуты, которые были установлены в форме.
Это делает кнопки более гибкими.
Их также можно стилизовать гораздо более гибко, чем для элементов ввода.