Перевод статьи «On attributes for HTML form elements».
Мне часто встречаются статьи о создании форм в вебе. И несмотря на все новомодные подходы и фреймворки, с помощью которых мы можем осуществлять разнообразные действия над веб-страницами, старая верная 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 и применять их, когда это возможно и уместно.
Все эти атрибуты совершенно совместимы с любым вашим фреймворком.
Сказанное особенно касается начинающих разработчиков, которые, может, слышат об этих атрибутах впервые или просто никогда не имели с ними дела.
В общем, рискуя показаться старым занудой, гоняющим детей с лужайки, я хочу процитировать одного уважаемого мной сеньора из компании, где мне довелось работать:
«Самый лучший код — ненаписанный».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]