Есть много функций, о которых мы можем не знать

Кнопка позволяет нам делать что-то на веб-странице, когда мы нажимаем на нее.

В этой статье мы рассмотрим части кнопки 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 и т. Д., Чтобы переопределить соответствующие атрибуты, которые были установлены в форме.

Это делает кнопки более гибкими.

Их также можно стилизовать гораздо более гибко, чем для элементов ввода.