Атрибуты элементов форм в HTML

0
654
views

Перевод статьи «On attributes for HTML form elements».

Image by krzysztof-m from Pixabay

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

Хьюго Гиродель опубликовал статью «Apollo GraphQL without JavaScript», где описал, как веб-платформа N26 на базе GraphQL может продолжать работать, даже если JavaScript станет недоступен.

Спойлер: благодаря HTML-формам.

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

Да, я практически слышу, как некоторые из вас говорят, что, мол, конечно же мы знаем этот атрибут, мы только вчера в миллионный раз напечатали <input type="text">.

Но поскольку я тот еще зануда, я отвечу, что для атрибута type элемента <input> значение text установлено по умолчанию, так что оно будет работать, даже если вы его не напишете.

Да, друзья мои, некоторые HTML-атрибуты имеют значения, установленные по умолчанию (кстати, то же касается CSS).

Если вы включите в свой код type="text", никто от этого не пострадает, а некоторые люди по каким-то причинам могут даже предпочесть, чтобы атрибут был задан явно, и ничего плохого в этом нет.

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

То же касается и элемента <button>. Его тип по умолчанию — submit. То есть, если у вас есть ванильная HTML-форма следующего вида:

<form action="/login">
  <label for="username">Username</label>
  <input name="username" id="username">

  <label for="password">Password</label>
  <input name="password" type="password">

  <button>Login</button>
</form>

— и вы кликнете кнопку или нажмете клавишу Enter, ваша форма будет отправлена в /login. И знаете, что еще? Атрибут method элемента <form> тоже имеет дефолтное значение — GET.

Пожалуйста, не отправляйте никакую секретную информацию (вроде паролей) в формах при помощи метода GET, потому что она станет видимой в URL. Вот попробуйте взять приведенный выше код и испытать его в пустом HTML-файле. Используя POST, вы отправите данные формы в теле HTTP-запроса.

Так что, если вы хотите, чтобы кнопка делала что-то еще, кроме отправки формы, вы всегда можете использовать <button type="button">. Это даст вам кликабельную кнопку, делающую… ничего не делающую. То есть, вы можете добавить к ней любые прослушиватели событий, и нажатие этой кнопки будет запускать нужный вам процесс.

Мне встречались руководства, где прекрасно объяснялись некоторые аспекты фреймворков, но при этом для разметки использовались просто шокирующие конструкции из вложенных <div>. Или же использовался JavaScript для создания функционала, который вполне можно было сделать с помощью атрибутов HTML.

Мое лицо, когда я в шоке от увиденного. Ну, или близко к этому.

Скажем, вы хотите ограничить количество символов в комментариях. Комментарии при этом — входящие данные, получаемые через <textarea>. Для установки ограничения можно использовать атрибут maxlength. Браузер просто не даст пользователю ввести больше символов, чем вы укажете.

<textarea maxlength="140"></textarea>

Или, если вы хотите, чтобы пользователи оставляли не просто смайлик, а настоящий комментарий, можно использовать атрибут minlength. Пользовательский опыт может отличаться в зависимости от браузера, но вот попробуйте отправить форму, набрав меньше 10 символов:

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

Все эти атрибуты совершенно совместимы с любым вашим фреймворком.

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

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

«Самый лучший код — ненаписанный».

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here