Формы ч. 1
Обновлено
12.09.2023Просмотров
457Время прочтения
120 мин.Сложность
Вот вы и добрались до самой сложной и объёмной темы в HTML — форм и пользовательского ввода. Хотя, бесспорно, эта тема самая сложная в HTML, она вряд ли является самой важной, потому что создание форм занимает небольшую часть работы фронтенд разработчика. Как бы там ни было, понимать работу форм и полей ввода вам нужно обязательно, а все атрибуты, значения и примеры всегда можно посмотреть в справочнике.
Итак, форма — это тег <form>, включающий в себя различные элементы пользовательского ввода данных, это теги <input>,<textarea>,<select>,<option>. Если говорить проще, то форма — это компонент веб страницы, позволяющий пользователю ввести какие-то данные и отправить их нам на сервер, чтобы мы смогли их обработать, записать в базу данных и т.д. Примерами работы форм является функционал подписки на новости сайта, регистрации на каком-либо сервисе, отправка заявки на заказ услуг и т.д. Всё это вы встречаете ежедневно в интернете, и всё это формы.
<form>
— (с англ. form — форма, бланк, анкета) — это основной тег-контейнер формы, он необходим для «включения» функционала форм в браузере. Т.е. мы можем конечно разместить поля ввода <input> и вне формы, однако в таком случае отправить данные на сервер мы не сможем. Точнее, сможем, но для этого нам придётся написать немало JavaScript кода. Тег <form> всё упрощает.
Пример простой формы из двух полей представлен ниже:
<form action="https://babyfrontent.ru/lessons/test.php" method="post">
<p>
<label for="username">Имя пользователя:</label>
<input id="username" type="text" name="username">
</p>
<p>
<label for="usersurname">Фамилия пользователя:</label>
<input id="usersurname" type="text" name="usersurname">
</p>
<button type="submit">Отправить</button>
</form>
Вы можете скопировать этот код в свой html-файл, ввести какие-либо данные и отправить их. В результате вы увидите следующую страницу:
Это страница файла test.php, расположенного на сайте школы. Она поможет вам лучше понять формы, показывая, какие данные, с какими именами и как вы отправили в форме. Сохраните себе этот URL, он будет нужен вам постоянно в течение этого и следующего урока:
https://babyfrontent.ru/lessons/test.php
Все приведённые примеры тега <form> из этого урока подразумевают, что вы должны копировать их в свой код, вводить какие-либо данные и отправлять форму на сервер. Там данные будут отображены в потоке документа, так что вы сможете хорошенько разобраться в том, как всё это работает.
Давайте начнём разбираться в том, что происходит. Мы в своём файле html создали форму и указали для неё атрибут action с данным URL. Этот атрибут говорит браузеру, куда мы хотим отправить введённые данные. Это может быть не обязательно файл на языке программирования PHP. Это может быть любой URL, а как он будет обрабатывать наши данные — для нас это не особенно важно. Обработка данных относится к компетенции бэкенд-разработчиков.
Также мы указали атрибут method="
post"
, он говорит браузеру, каким способом мы хотим отправить данные. Основных для фронтенд разработчика способов всего два — GET и POST. Если сказать о них вкратце, чтобы сейчас же стало немного понятно — GET передаётся в URL строке, а POST невидим для пользователя и передаётся в теле запроса. Вот так будет выглядеть URL, если вы измените атрибут формы на method="
get"
и отправите данные:
Данные под соответствующими именами полей <input> появились в строке URL браузера. Это и есть GET запрос. Подробнее о разнице POST и GET будет рассказано в дальнейшем, в разделе продвинутого обучения.
В нашей форме присутствуют поля ввода — теги <input>. Это основные теги для формы, именно они позволяют вводить текст\числа\даты и пр. с клавиатуры, загружать файлы и т.д. В нашем случае у этих тегов определен атрибут type, он отвечает за то, какой тип поля мы получим, а также name, который отвечает за имя введённых данных, которое будет доступно на сервере. Вы уже должны были заметить, что указанные name соответствуют ключам данных, полученным на бэкенде на скриншотах-примерах. Следующее, что у нас здесь есть — это кнопка <button>. Как правило кнопки выполняют особенную роль, определённую для них разработчиком, вызывают окна, запускают анимации, но также HTML предусматривает для кнопок функционал работы с формами. Кнопки в зависимости от type могут отправлять форму, или очищать введённые в форму данные (т.е. сбрасывать значения формы). type="
submit"
говорит форме, что по клику на эту кнопку форма должна отправляться по указанному в action адресу.
Это фронтенд-часть формы, т.е. HTML код, состоящий из тегов, атрибутов, значений, текста. Всё здесь в целом как обычно. Однако формы почти всегда состоят ещё и из бэкенд части, в нашем примере это файл test.php. Он находится на хостинге школы и предсматривает, что к нему будут обращаться пользователи с данными формы. Вот его содержимое:
Это PHP-код и углубляться в него вам не нужно. Он смотрит, в каком типе запроса (POST или GET) присутствуют данные и выводит их нам в html документе. Так вы сможете создать форму и проверить, правильно ли вы указали необходимые атрибуты.
Когда пользователь вводит данные в поля ввода и нажимает кнопку «Отправить», браузер собирает данные из этих полей и добавляет их к запросу на URL, указанный в action. Далее браузер выполняет этот запрос и отображает нам результат. Какой будет результат — зависит только от файла, указанного в action. В нашем случае мы просто видим данные запроса, и больше ничего не происходит. Однако на практике чаще всего данные запроса как-либо обрабатываются и в результате мы попадаем на ещё одну веб страницу. Например, мы авторизуемся через форму, наши данные проверяются на сервере и мы попадаем на страницу личного кабинета, или личных сообщений, и т.д.
Что важно ещё понять — в данном виде браузер отправляет запрос с перезагрузкой страницы\вкладки. Мы нажали «Отправить» и оказались с новым запросом в этой\новой вкладке. Это не единственное возможное поведение форм и браузера. Существует такой подход как AJAX, позволяющий выполнять запросы и получать данные, не перезагружая страницу (даже при использовании <form>). В частности, все SPA и в их числе школа babyfrontent.ru работают на основе AJAX, поэтому отправка данных в формы при регистрации, авторизации, смене пароля, емаила и в других случаях не перезагружает страницу. Данные отправляются на сервер, ожидается ответ. Ответ приходит, ответ обрабатывается. Перезагрузки страницы нет. Ещё раз повторим, это подход AJAX и сейчас он заменяет повсеместно привычную работу форм. Однако это тема для углублённого изучения, и она вовсе не относится к HTML, а полностью относится к JavaScript. Мы рассмотрим формы в классическом варианте работы — отправка данных с перезагрузкой страницы.
Думаю, для начала понятно, что такое формы, для чего нужны, как работают. Если ещё не попрактиковались, скопируйте код примера в свой html файл, попробуйте изменить атрибуты action (при запросе на несуществующий адрес вы увидите ошибку), method с get на post и наоборот (вы увидите изменения на странице test.php), измените name для какого-либо <input>. Всё это вам здорово поможет ориентироваться в формах.
Атрибуты <form>:
accept-charset
— разделённые пробелами кодировки, которые принимает сервер. Если не указано, используется та же кодировка, что и у страницы. Поскольку практически все веб страницы имеют кодировку utf-8, мы можем не указывать данный атрибут.
action
— URL-адрес программы\файла\сайта, который будет обрабатывать данные, отправленные формой. Написание адреса подчиняется все правилам, какие применяются для любого адреса, например src, href и др. Абсолютный и относительный адрес — всё это справедливо и для action. При указании относительного адреса, например action="
/lessons/test.php"
запрос делается, разумеется, на тот же домен, с которого отправляется.
autocomplete
— определяет, может ли браузер выводить подсказку при заполнении полей пользователем. Может принимать значения:
off — запрещает браузеру автоматически выбирать или подсказывать значение для этого поля\формы
on — разрешает браузеру автоматически завершать ввод и показывать подсказки для ввода.
Любое другое символьное значение, например «email», «new-password» и т.д., служащее для идентификации введённых данных и для последующего их использования в качестве подсказки. Подобных значений может быть несколько, в таком случае они подчиняются синтаксису классов (class), т.е. разделяются пробелом. Несколько значений может понадобиться например для ввода двух-трёх адресов, почтового индекса и пр. Подробные примеры и описания значений смотрите в справочнике и в спецификации.
Помимо самой формы, этот атрибут можно указывать и для отдельных элементов пользовательского ввода: <input>,<select>,<textarea>. Поведение различных браузеров в обработке этого атрибута может отличаться, равно как и источник данных, предлагаемых в качестве подсказки. Например, Google Chrome сохраняет данные <input>, идентифицируя их по name и разделяя по доменам. Домену example1.com будут соответствовать одни данные, введённые когда-либо в <input name="
username"
>, а домену example2.com с таким же <input name="
username"
> — другие.
enctype
— тип кодировки отправляемых данных. Напомним ещё раз, что кодировка это не шифрование! Возможные значения:
application/x-www-form-urlencoded — значение по умолчанию, данные кодируются парами как имя-значение. Большинство форм в интернете кодируется именно так.
multipart/form-data — данные формы не кодируются. Используется при наличии в форме поля для загрузки файлов <input type="
file"
>.
text/plain — символы не кодируются, данные отправляются «как есть». Не рекомендуется к использованию, т.к. может вызывать множество ошибок.
method
— определяет метод, который браузер использует для отправки данных. Может быть post или get. Если данный атрибут для формы не указан, используется метод get! Также регистр при указании значения не играет роли, т.е. method="
get"
и method="
GET"
будет работать одинаково. Подробнее будет в последующих уроках.
name
— уникальное имя формы (наподобие id), позволяющее обращаться напрямую к ней при помощи JavaScript. Не путайте с name для <input> и др. элементов ввода, для которых этот атрибут служит именем данных на сервере. Значение атрибута name формы на сервер не передаётся!
novalidate
— булев атрибут, определяет, что форма не проверяется на валидность. Например, мы можем задать обязательное заполнение какого-либо поля <input> при помощи атрибута required. Однако если для всей формы будет установлен novalidate, проверка на заполнение не будет проводиться.
target
— подобно одноимённому атрибуту для ссылок, определяет, в новом или текущем окне будет отображаться результат обработки запроса. По умолчанию _self. Как вы помните, подход frame запрещён, поэтому атрибут может принимать два значения: _blank (в новом окне) и _self (в текущем окне).
<label>
— (с англ. label — этикетка, ярлык) создаёт подпись (аналог ссылки-якоря) к какому-либо элементу на странице. Подобно якорям, они могут быть привязаны к идентификатору любого тега, однако чаще всего используются внутри форм с тегами <input>. Собственно, поэтому они и находятся в данном уроке. Тег имеет единственный атрибут:
for
— указывает на идентификатор id поля ввода, с которым мы хотим связать данный <label>.
В примере формы выше вы уже видели, как данный тег связан с <input>, однако подобный код будет работать, конечно, и вне формы:
<label for="username">Имя пользователя:</label>
<input id="username" type="text" name="username">
Если вы кликните на текст «Имя пользователя», то сфокусируетесь на соответствующем поле ввода. Это произойдёт потому, что for="
username"
указывает на соответствующий id.
Помимо связывания через for и id, есть ещё один способ связать <label> и <input> — это поместить поле ввода внутрь <label>. Поведение будет аналогично коду выше.
<label>Имя пользователя:
<input type="text" name="username"></label>
Обратите внимание, что в таком случае нам уже не нужны атрибуты for и id.
Один важный момент, о котором не всегда говорят, связан с тегом <label>. ВСЕ подписи для полей ввода должны находиться в <label> и должны быть связаны с этими полями. Дело в том, что, когда вы будете работать, в техническом задании (ТЗ) на разработку сайта эти моменты не будут оговорены. Тем не менее, заказчик при проверке обязательно спросит, почему клик на подпись не фокусирует на поле ввода. Подобное поведение подписей подразумевается как должное практически на любом сайте, если обратное не оговорено. Поэтому по умолчанию всегда создавайте такое поведение у подписей.
<input>
— (с англ. input — ввод, входные\введённые данные) самый важный и самый сложный тег форм, используется для создания интерактивных полей ввода данных. В зависимости от атрибута type может принимать различные вид и поведение.
Прежде чем вы начнёте изучение <input>, вы должны запомнить, что все типы данного тега являются интерактивными элементами, а значит не могут быть вложены внутрь ссылок, кнопок и пр.
type
— определяет тип отображаемого элемента и тип данных, которые он может принимать. Значения:
checkbox
— создаёт флажок («чекбокс»), который имеет два состояние — отмечен или не отмечен. Для определения значения, которое будет передано на сервер, используется атрибут value с нужным значением. Булев атрибут checked указывает, что при открытии страницы данный чекбокс будет отмечен.
input type="
checkbox"
Скопируйте себе код из примера ниже, проставьте какие-либо чекбоксы, отправьте данные и посмотрите, какой будет результат. Обратите внимание, что благодаря атрибуту checked чекбокс с вариантом HTML изначально отмечен.
<form action="https://babyfrontent.ru/lessons/test.php/" method="post">
<p>
Какие языки вы уже выучили?
</p>
<p>
<input id="html" type="checkbox" checked name="html" value="true">
<label for="html">HTML</label>
</p>
<p>
<input id="css" type="checkbox" name="css" value="true">
<label for="css">CSS</label>
</p>
<p>
<input id="js" type="checkbox" name="js" value="true">
<label for="js">JavaScript</label>
</p>
<button type="submit">Отправить</button>
</form>
В результирующий массив (упорядоченный набор данных) на сервере попадут только те поля чекбоксов, которые вы отметите. Значениями будут данные, которые вы указали в атрибуте value.
На самом деле это не лучший пример использования чекбокса. В результате мы получим данные под различными именами — html,css,js. В случае, если мы захотим на сервере получить список языков, которые знает пользователь, нам придётся проверять каждое из этих свойств (есть ли оно в полученных данных, или нет). Лучшим решением было бы сохранение всех выбранных чекбоксов в одно свойство в виде массива, это можно сделать, указав для всех общих чекбоксов одинаковые имена с квадратными скобками:
<form action="https://babyfrontent.ru/lessons/test.php/" method="post">
<p>
Какие языки вы уже выучили?
</p>
<p>
<input id="html" type="checkbox" name="language[]" checked value="html">
<label for="html">HTML</label>
</p>
<p>
<input id="css" type="checkbox" name="language[]" value="css">
<label for="css">CSS</label>
</p>
<p>
<input id="js" type="checkbox" name="language[]" value="js">
<label for="js">JavaScript</label>
</p>
<button type="submit">Отправить</button>
</form>
В результате мы увидим массив данных array(1), который будет представлять все полученные с формы данные, а внутри него ещё один массив под ключом «language», содержащий два элемента — «html» и «js» (я отметил и отправил именно их). Когда мы отметили чекбоксы и отправили форму, значения всех чекбоксов с одинаковым именем и квадратными скобками сохранились вместе в один «список». На сервере теперь нам будет удобнее проверять данные, т.к. мы имеем не множество свойств под разными именами, а один список с доступными языками. Ведь языков, какие знает пользователь, может быть не 3, а 10-15, и тогда список с такими языками это определённо лучше, чем 10-15 отдельных свойств.
Данный способ группировки данных можно применять не только к чекбоксам, а также к другим полям ввода. Например, если нам интересны любимые цитаты пользователя, мы можем создать несколько <input type="
text"
name="
favourite-quote[]"
> и получать на сервере массив с любимыми цитатами, а не свойства quote1, quote2 и т.д.
О такой возможности группировки данных знают далеко не все разработчики, хотя вопрос об этом встречается на собеседованиях. Постарайтесь понять и запомнить данный способ, эти знания могут вас однажды отличить.
Внешний вид чекбокса зависит от браузера, и может весьма сильно отличаться. Стилизовать чекбокс при помощи CSS нельзя. Разработчики поэтому используют разные трюки, чтобы создать собственные чекбоксы, соответствующие требуемому дизайну сайта. Об этом будет рассказано в дальнейших уроках.
color
— создаёт небольшой интерактивный виджет выбора цвета. Работа данного виджета полностью обеспечивается браузером и не имеет отношения к CSS и JavaScript (хотя указывать значения value через JavaScript мы можем). По этой причине мы, однако, не можем изменить внешний вид данного виджета. Кроме того, в различных браузерах он может иметь различное отображение и даже работать немного по-разному. Значение, которое будет передано на сервер, является строкой — шестнадцатеричным форматом цвета, например «#b53b3b» (подробнее о цветах и форматах в основах CSS).
input type="
color"
<form action="https://babyfrontent.ru/lessons/test.php/" method="post">
<p>
Какой цвет ваш любимый?
</p>
<p>
<input id="color" type="color" name="user-fav-color">
</p>
<button type="submit">Отправить</button>
</form>
date
— создаёт, подобно виджету цвета, виджет выбора даты (год, месяц, день, без времени!). Всё, что относится к виджету цвета, справедливо отнести и к date-виджету. Он не стилизуется и полностью зависит от браузера. Полученным на сервере значением будет строка типа «2022-05-11».
input type="
date"
<form action="https://babyfrontent.ru/lessons/test.php/" method="post">
<p>
Ваш день рождения?
</p>
<p>
<input type="date" name="user-bday">
</p>
<button type="submit">Отправить</button>
</form>
datetime-local
— datetime-local — аналогично date, но с выбором времени (часы, минуты), пример полученных на сервере данных: "
2022-05-05T22:59"
.
input type="
datetime-local"
email
— текстовое поле, подобно type="
text"
, но проверяющее введённые данные на соответствие формату электронной почты. Т.е. ввести в type="
email"
текст наподобие «myemail-mysite.com» чисто технически получится, однако при отправке форма не примет эти данные и браузер отобразит уведомление, что формат не соответствует электронной почте. Визуально type="
email"
выглядит так же, как и type="
text"
.
input type="
email"
<form action="https://babyfrontent.ru/lessons/test.php/" target="_blank" method="get">
<p>
<label for="username">Имя пользователя:</label>
<input id="username" type="text" name="username">
</p>
<p>
<label for="useremail">Почта пользователя:</label>
<input id="useremail" type="email" name="useremail">
</p>
<button type="submit">Отправить</button>
</form>
Скопируйте код к себе и попробуйте ввести что-то, не являющееся email-адресом. Вы увидите уведомление браузера. Оно показывается, потому что форма сама проверяет введённые данные на соответствие формату, прежде чем отправлять их. Как помните, у формы есть атрибут novalidate, который отключает такую проверку.
Как вы можете догадаться, на стороне клиента (frontend) есть множество способов валидировать введённые данные, устанавливая формат емаила, максимальное количество символов и т.д. и т.п. Однако ни один из этих способов не является достаточным для «слепого» принятия данных на сервере. Скрипт серверного языка программирования обязательно должен самостоятельно проверять полученные данные и никогда (!) не доверять тому, что пришло с фронтенда. Это значит, что если мы установили type="
email"
, на сервере должна быть собственная проверка соответствия полученных данных формату email. Если у нас установлен минимальный возраст регистрации пользователей — 18 лет и пользователь ввёл в <input> возраст 21, мы проверяем эти данные на фронтенде перед отправкой, а также на бэкенде при получении. На фронтенде мы проверяем их только для того, чтобы не делать лишний раз запрос на сервер. В случае, если недобросовестный пользователь сможет обмануть проверку на фронтенде и отправит возраст 16, он будет остановлен во время проверки на сервере, так что зарегистрироваться у него не получится. Проверку на сервере сложно обмануть.
Конечно, это замечание относится к бэкенд разработчикам, но вы должны понимать, как всё работает.
file
— позволяет пользователю выбрать файл на своём устройстве и прикрепить его к форме. Данный тег обыкновенно выглядит как кнопка с текстом «Выберите файл». При клике на неё открывается проводник операционной системы вашего компьютера. После выбора файла рядом с кнопкой появляется имя выбранного файла. Внешний вид данного <input> возможно изменить при помощи CSS лишь частично. Для создания собственных кнопок загрузки файлов разработчики применяют различные хитрости — создают обычные дивы, стилизуют их и добавляют JavaScript, связывая с настоящим, невидимым <input type="
file"
> =)
input type="
file"
Атрибут accept указывает, какой MIME-тип файла можно добавлять к форме. Значения указываются через запятую в виде MIME, либо в виде точки и расширения — «.pdf». Значение со звёздочкой «*» позволит загружать любые форматы определённого типа. Пример кода ниже принимает только изображения, видео в формате mp4 и PDF.
<form action="https://babyfrontent.ru/lessons/test.php/" target="_blank" method="post">
<p>
<label for="username">Имя пользователя:</label>
<input id="username" type="text" name="username">
</p>
<p>
<label for="useremail">Почта пользователя:</label>
<input id="useremail" type="email" name="useremail">
</p>
<p>
<label for="useravatar">Аватар пользователя:</label>
<input id="useravatar" type="file" accept="image/*,video/mp4,.pdf" name="useravatar">
</p>
<button type="submit">Отправить</button>
</form>
Если вы скопируете данный код к себе на страницу, заполните форму и прикрепите файл формата, который форма не принимает, то… ничего особенного не произойдёт, и форма отправится вместе с выбранным файлом! Это не ошибка и не недоразумение, всё работает именно так, как и должно работать. Дело в том, что атрибут accept является не ограничением на форматы файлов, а всего лишь подсказкой для пользователя, когда он выбирает файл на своём компьютере. Если вы указали accept="
image/*"
, то пользователь будет выбирать среди изображений. Однако он может в любой момент изменить «фильтр» и выбрать файл любого типа.
Ограничения на формат файла в HTML и в браузере нет. Мы можем написать собственный обработчик типов файлов на JavaScript, но, как уже было сказано, на фронтенд в вопросах валидации нельзя полагаться. Если мы хотим принимать файлы только PDF, нам необходимо будет создать такую проверку на сервере, и это единственный стопроцентный способ проверки типа загруженных файлов. Несмотря на всё это, фронтенд разработчики должны пользоваться атрибутом accept, тем самым подсказывая пользователю возможный формат, экономя его время и повышая usability сайта.
На сервере отправленные как type="
file"
данные будут доступны в общем массиве полученных данных под соответствующим name. Значением будет строка, содержащая название файла. Так, если вы в примере кода выше выберете на компьютере файл «my-photo1.jpg», то в результате на сервере получите данные под ключом useravatar со значением «myphoto1.jpg». Попробуйте сами и увидите результат.
Эта строка будет всего лишь строкой и не будет непосредственно файлом. Файлы, загруженные вместе с формой, в PHP попадают в отдельную, особенную переменную. Если переменная с основными данными формы называется $_GET или $_POST в зависимости от метода, который мы выбрали, файлы попадают в $_FILES. Далее они могут обрабатываться, сохраняться в нужную нам директорию, копироваться, переименовываться и т.д. Всё это задача уже бэкенд-разработчика.
hidden
— создаёт элемент формы, который не будет отображён для пользователя, но значение которого будет отправлено на сервер. Данный элемент может использоваться для передачи каких-либо значений с сервера на клиент и затем обратно. Например, это может быть числовой идентификатор новости\записи, которую мы хотим отредактировать, или идентификатор пользователя, или что-то подобное. Т.е. когда мы откроем веб страницу, язык программирования PHP создаст для нас разметку и в скрытый <input> добавит в качестве значения данный идентификатор. Затем, когда мы заполним форму и отправим её, PHP получит обратно наши данные и в том числе этот идентификатор, который необходим для обработки наших данных. Пример кода:
<form action="https://babyfrontent.ru/lessons/test.php/" target="_blank" method="post">
<input type="hidden" name="post-id" value="423">
<p>
<label for="username">Имя пользователя:</label>
<input id="username" type="text" name="username">
</p>
<p>
<label for="useremail">Почта пользователя:</label>
<input id="useremail" type="email" name="useremail">
</p>
<button type="submit">Отправить</button>
</form>
Разумеется, данный идентификатор 423 будет доступен по ключу «post-id» в общем массиве данных, полученных на сервере.
Важно понимать, что данный type предназначен всего лишь для указания в форме заранее известных данных, которые не должны редактироваться пользователем. Он не имеет отношения к безопасности, т.к. доступен к изменению в инструментах разработчика любого браузера, поэтому вы не должны в нём передавать секретные данные, такие как токен доступа, токен аутентификации и пр.
month
— создаёт элемент ввода, подобный date, но только для ввода месяца и года. Всё здесь идентично type="
date"
, поэтому останавливаться и приводить примеры не будем. Полученные на сервере данные будут иметь вид «2022-07».
number
— создаёт элемент ввода, способный принимать только символы от 0 до 9, а также запятую или точку в качестве разделителя дробной части.
input type="
number"
Если вы попытаетесь ввести в такое поле символ любого алфавита, он не будет введён. Данный элемент отображается почти так же, как type="
text"
, за исключением того, что он дополнительно имеет две кнопки-стрелки «увеличить» и «уменьшить», которые соответственно увеличивают или уменьшают введённое значение.
<form action="https://babyfrontent.ru/lessons/test.php/" target="_blank" method="post">
<input type="hidden" name="post-id" value="423">
<p>
<label for="username">Имя пользователя:</label>
<input id="username" type="text" name="username">
</p>
<p>
<label for="useremail">Почта пользователя:</label>
<input id="useremail" type="email" name="useremail">
</p>
<p>
<label for="userage">Возраст пользователя:</label>
<input id="userage" type="number" name="userage" min="18" max="65" step="1">
</p>
<button type="submit">Отправить</button>
</form>
Среди атрибутов, используемых с данным элементом, min и max, устанавливающие минимальное и максимальное значение (max не должен быть меньше min!), которое можно принять в качестве данных, а также step, определяющий величину шага, на который будет увеличиваться\уменьшаться введённое значение при клике на кнопки-стрелки «увеличить» \ «уменьшить». Попробуйте скопировать приведённый выше код и поменять значение при помощи стрелок. Вы будете двигаться с шагом 1, минимальное значение будет 18, а максимальное 65. Если вы введёте с клавиатуры другие значения, форма не будет отправлена. Также не будет отправлено дробное значение.
Помимо шага значения, атрибут step определяет, какие значения в принципе может принимать данный элемент, т.е. с точностью десятичной, сотой, тысячной доли. Для ввода чисел с дробной частью различной точности используйте различные шаги step:
<input type="number" step="0.001">
<input type="number" step="0.01">
<input type="number" step="0.1">
<input type="number" step="1">
<input type="number" step="10">
<input type="number" step="100">
Когда мы сказали, что в type="
number"
не получится ввести символ алфавита, мы не упомянули одно исключение — латинскую букву «e». Дело в том, что в веб разработке поддерживается экспоненциальная запись чисел, например 2e5, 3e-8 и пр. Как видите, в таком случае число записывается при помощи формулы, в которой «e» играет ключевую роль. Данная формула имеет какое-то число, которое мы берём за основу вычислений (мантисса). В примере 2е5 мантиссой является 2. Буква е означает экспоненту, т.е. умножение на 10 в степени n. Степенью n, или порядком, является число, следующее после e, т.е. в нашем примере это 5. Итого мы получаем при работе с 2е5: число 2, умноженное на 10 в степени 5. Это 2*100000, или 200000.
Несмотря на возможность в HTML ввести данные в type="
number"
в экспоненциальном формате, эти данные будут отправлены на сервер как строка и не будут автоматически конвертированы в число. Это означает, данные «2е5», введённые в поле, в таком же виде «2е5» и будут получены на сервере!
Сейчас же стоит отметить, что экспоненциальная запись величин поддерживается в любых свойствах CSS, а также в JavaScript. Более того, при работе с большими величинами в JavaScript это очень частая запись.
password
— создаёт элемент ввода текста, в котором введённое значение скрывается под символами «*».
input type="
password"
Как можно догадаться по названию, данный элемент используется для ввода пользователем паролей и других данных, которые не должны становиться известными другим лицам. Важно понимать, что сам по себе данный <input> не шифрует введённые данные. Всё, что он делает — вместо действительного значения в поле отображает специальные символы, например «*» (символ зависит от браузера), чтобы никто, находясь рядом и наблюдая за монитором пользователя, не смог увидеть пароль. На сервер пароль поступит в обычном, незашифрованном виде! Например, если пароль пользователя asd123 и он так будет введён в соответствующий <input>, так же он и поступит на сервер. Вы можете убедиться в этом сами:
<form action="https://babyfrontent.ru/lessons/test.php/" target="_blank" method="post">
<input type="hidden" name="post-id" value="423">
<p>
<label for="username">Имя пользователя:</label>
<input id="username" type="text" name="username">
</p>
<p>
<label for="useremail">Почта пользователя:</label>
<input id="useremail" type="email" name="useremail">
</p>
<p>
<label for="userpassword">Пароль пользователя:</label>
<input id="userpassword" type="password" minlength="10" maxlength="20" name="userpassword" >
</p>
<button type="submit">Отправить</button>
</form>
Хотя подобное может показаться странным, шифрование нам здесь и не нужно. Важно, чтобы при регистрациях, авторизациях на различных сервисах, а также при прочих действиях, связанных с безопасностью, ваше соединение с сайтом осуществлялось по протоклу HTTPS, а не по обычному HTTP. Это обеспечит надёжное шифрование и безопасную передачу всех ваших данных. Никогда не вводите пароли при подключении через обычный HTTP!
Два атрибута, которые часто используются вместе с type="
password"
это minlength и maxlength, которые устанавливают минимальное и максимальное количество символов для валидации данного поля. Если вы в коде выше в поле с паролем введёте меньше 10 или больше 20 символов, то форма не отправится и вы увидите уведомление. Повторим, что данная проверка не может быть надёжной и необходима повторная проверка соблюдения этих условий на сервере.
radio
— создаёт кнопку-переключатель («радиокнопку», radiobutton), который позволяет выбрать одно значение из нескольких вариантов.
input type="
radio"
Мы видели нечто похожее в type="
checkbox"
, однако на самом деле эти элементы работают совершенно по-разному. В чекбоксах мы могли выбрать несколько вариантов, т.е. указать несколько известных нам языков, и все эти значения попали бы на сервер. В случае с radio мы выбираем только один вариант, и именно его значение попадает на сервер. Например, мы можем выбрать наш любимый язык:
<form action="https://babyfrontent.ru/lessons/test.php/" target="_blank" method="post">
<input type="hidden" name="post-id" value="423">
<p>
<label for="username">Имя пользователя:</label>
<input id="username" type="text" name="username">
</p>
<p>
Какой ваш любимый язык?<br>
<label><input type="radio" name="user-fav-language" checked value="html">HTML</label>
<label><input type="radio" name="user-fav-language" value="css">CSS</label>
<label><input type="radio" name="user-fav-language" value="js">JavaScript</label>
</p>
<button type="submit">Отправить</button>
</form>
В этой форме вы сможете выбрать только один язык при помощи радиокнопок. Радиокнопки связываются между собой при помощи одинакового атрибута name. Те кнопки, у которых значение атрибута будет одинаковым, будут «конкурировать» между собой. Если вы «включите» одну такую кнопку, другая «выключится». Значение «включенной» радиокнопки под указанным именем будет передано на сервер.
Обратите внимание, что мы можем при помощи атрибута checked указать кнопку, которая будет изначально «включена». Такой же атрибут используется и для type="
checkbox"
. Как и чекбокс, радиокнопка может выглядеть по-разному в разных браузерах, и стилизовать её при помощи CSS нельзя. По этой причине разработчики и здесь изобрели различные трюки, чтобы придать радиокнопкам внешний вид, соответствующий дизайну.
range
— создаёт элемент интервала для ввода числа, точное значение которого не имеет значения.
input type="
range"
<form action="https://babyfrontent.ru/lessons/test.php/" target="_blank" method="post">
<input type="hidden" name="post-id" value="423">
<p>
<label for="username">Имя пользователя:</label>
<input id="username" type="text" name="username">
</p>
<p>
<label for="grade">Как вам нравится наш сайт?</label>
<input type="range" name="grade" id="grade" min="0" max="100" step="1">
</p>
<button type="submit">Отправить</button>
</form>
Как видите, атрибуты такие же, как и у type="
number"
. Действительно, эти два элемента очень похожи. Главным их отличием является визуальная составляющая — в range мы выбираем число из интервала «на глазок», перетягивая ползунок в одну или другую сторону, а в number указываем точное число, которое нас интересует.
Несмотря на симпатичный внешний вид и удобство, type="
range"
не используется в коммерческой разработке. Причина вновь та, о которой уже говорили: его практически нельзя стилизовать при помощи CSS, а также в различных браузерах он выглядит по-разному. Если вам нужен подобный элемент на сайте, вы должны пользоваться специально разработанными библиотеками, имитирующими поведение range.
search
— элемент для ввода текста, который будет искомой строкой.
input type="
search"
Используется в тех случаях, когда мы создаём форму поиска на сайте. Практически не отличается от type="
text"
. Некоторые браузеры могут добавлять иконку крестика, клик по которой удалит текст, введённый в данное поле. Также виртуальные клавиатуры (это те, которые появляются на мобильных телефонах при фокусе в поле) могут отображать специальную иконку лупы вместо обычной иконки-стрелки, наподобие ↵. Кроме этих нюансов, type="
search"
не имеет особенного поведения.
tel
— создаёт элемент для ввода телефона.
input type="
tel"
В целом он не отличается внешне и по функционалу от обычного type="
text"
, за исключением того, что на мобильных телефонах при фокусе на этом поле будет показана не текстовая клавиатура, а клавиатура с цифрами.
Несмотря на то, что телефонные поля в наше время стали очень популярны и присутствуют практически на каждом сайте, продающем какие-то товары или услуги, HTML продвинулся в этом направлении крайне слабо. Всё, чего вы сможете добиться при помощи type="
tel"
— добавить немного больше удобства для пользователя по сравнению с type="
text"
.
Ключевой вопрос в проблеме телефонных номеров — формат вводимого номера. Хотя в HTML есть атрибут pattern, позволяющий проверять, соответствуют ли введённые данные шаблону, этот атрибут работает не идеально. Подобно прочим атрибутам валидации, он проверяет данные только при попытке отправить форму (с показом соответствующего уведомления).
Кроме того, что это не удобно, это ещё и морально устарело. В наши дни сайты должны быть и удобны, и красивы, чтобы выделяться среди конкурентов, поэтому разработчики должны создавать собственные валидации для телефонных номеров.
Пример кода, при котором type="
tel"
используется классическим и работающим, но устаревшим способом:
<form action="https://babyfrontent.ru/lessons/test.php/" target="_blank" method="post">
<input type="hidden" name="post-id" value="423">
<p>
<label for="username">Имя пользователя:</label>
<input id="username" type="text" name="username">
</p>
<p>
<label for="usertel">Телефон пользователя:</label>
<input id="usertel" type="tel" name="usertel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
</p>
<button type="submit">Отправить</button>
</form>
На смену такому подходу пришли телефонные маски. Что это такое? Это написанные на JavaScript небольшие плагины\библиотеки, позволяющие создать маску для <input> в определённом формате, например всем известную в России +7(987)6543210. Маска не позволит пользователю ввести меньше\больше цифр, чем требуется, не позволит ввести буквы, т.е. снизит вероятность ошибки пользователя до минимума. О масках ещё пойдёт разговор в дальнейших уроках, поскольку это весьма важная тема.
В дополнение к pattern в type="
tel"
часто используется атрибут placeholder — это текст, который будет виден в <input> до того, как пользователь начнёт ввод. Этот текст является всего лишь подсказкой, он исчезнет сразу, как только в поле будет введён хотя бы один символ. Этот текст как правило по внешнему виду отличается от введённых данных: placeholder всегда бледнее, прозрачнее.
<p>
<label for="usertel">Телефон пользователя:</label>
<input id="usertel" type="tel" name="usertel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="333-333-4444">
</p>
Если бы pattern и placeholder было бы достаточно для удовлетворения всех потребностей разработчиков, телефонные маски не получили бы распространения. Однако сейчас они используются практически на всех сайтах, где есть type="
tel"
. Это убеждает в том, что они действительно необходимы.
text
— пожалуй, наиболее часто используемый тип, представляет собой обычное поле для ввода любого текстового содержимого.
input type="
text"
Используется для сбора информации самого различного характера — номера счетов и договоров, имена и фамилии пользователей, адреса рождения, проживания и пр. Данный тип легко и полностью стилизуется при помощи CSS, доступен для взаимодействия через JavaScript.
Особенностью данного типа и ему подобных (email,password и т.д.) является их однострочность. Пользователь видит и может ввести всегда только одну строку текста. Ввести несколько абзацев невозможно.
Большинство атрибутов для полей ввода могут применяться к type="
text"
. Среди наиболее часто используемых это pattern, minlength, maxlength (минимальное и максимальное количество символов), placeholder, required (делает поле обязательным для заполнения), readonly (делает поле доступным только для чтения, т.е. вводить текст нельзя), value (определяет уже введённое значение для поля).
Пример использования type="
text"
вы уже видели много раз в примерах кода выше. Имя пользователя всегда является type="
text"
.
time
— создаёт небольшое поле для выбора времени в 24-часовом формате.
input type="
time"
В результате на сервер будут отправлены данные в таком виде: «02:37». Как и прочие поля для ввода времени, не может быть стилизовано.
url
— создаёт поле, аналогичное типу text, но с валидацией введённых данных под URL формат.
input type="
url"
Валидация под URL предусматривает, что адрес должен быть абсолютным и начинаться с названия протокола, затем должен иметь разделение «://» и какую-либо часть доменного имени. Разные браузеры могут обладать разными требованиями к type="
url"
, поэтому заучивать данный вопрос не нужно.
<form action="https://babyfrontent.ru/lessons/test.php/" target="_blank" method="post">
<p>
<label for="username">Имя пользователя:</label>
<input id="username" type="text" name="username">
</p>
<p>
<label for="usersocial">Ссылка на социальную сеть:</label>
<input type="url" name="usersocial" id="usersocial">
</p>
<p>
<label for="usertel">Телефон пользователя:</label>
<input id="usertel" type="tel" name="usertel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="333-333-4444">
</p>
<button type="submit">Отправить</button>
</form>
Поскольку, как мы уже говорили, современные сайты должны быть максимально удобными, мы не можем удовлетвориться функционалом type="
url"
, который предоставляет HTML и браузеры по умолчанию. Нам обычно необходимо контролировать, что пользователь вводит правильный адрес, включая протокол, доменное имя и доменную зону. Убедиться в этом мы можем, создав шаблон при помощи атрибута pattern, однако он будет проверяться только при попытке отправить форму, что нельзя назвать «максимально удобным». Поэтому такие поля, в которых требуется соответствие данных определённому шаблону, проверяются при помощи JavaScript и регулярных выражений «на лету», т.е. по мере ввода символов. Выглядит это примерно так: пользователь вводит символ, поле становится красным и отображается сообщение о несоответствии данных формату. Пользователь вводит ещё символы и видит сообщение до тех пор, пока данные не станут соответствовать шаблону. Наверняка вы видели такое поведение форм при регистрации на различных сервисах. В будущих видеоуроках по JavaScript мы обязательно изучим, как создаются такие проверки.
week
— создаёт поле для выбора года и недели, полученные на сервере данные будут в формате: «2022-W13». Не может быть стилизовано при помощи CSS.
input type="
week"
Как видите, атрибут type тега <input> играет важнейшую роль при создании формы. Основных типов, конечно, не так много. Например, типы для ввода времени и дат используются довольно редко. Текстовый тип, емаил, пароль, file — повсеместно. Мы рассмотрели вкратце все типы и некоторые атрибуты. О прочих атрибутах и о некоторых типах будет рассказано далее.
Прочие атрибуты <input>:
autocomplete
— этот атрибут мы уже упоминали, рассказывая о <form>. С <input> он работает схожим образом, вы указываете значение «on» или «off», и браузер предложит вам подходящие значения, что уже вводились в данное поле. Работа этого атрибута сильно зависит от браузера, например Google Chrome имеет собственные подсказки, не зависящие от autocomplete. Я бы посоветовал вам указывать autocomplete="
on"
для каких-либо второстепенных данных, от которых не зависит работа сайта или принятие решений.
autocapitalize
— определяет, каким регистром будет предложено пользователю вводить текст. Этот атрибут влияет только на поведение мобильных\виртуальных клавиатур и устройств голосового ввода. Применяется для тегов <input> и <textarea>. При попытке ввода с компьютерной клавиатуры никакого эффекта происходить не будет. Может принимать значения:
off,none — все буквы в нижнем регистре
on,sentences — режим по умолчанию, первая буква каждого предложения заглавная, все остальные в нижнем регистре
words — первая буква каждого слова заглавная
characters — все буквы заглавные. Ниже представлен рабочий пример (повторимся, работать будет только на мобильном):
input autocapitalize="
sentences"
input autocapitalize="
words"
input autocapitalize="
characters"
Обратите внимание, что данный атрибут не форматирует введённый текст, а только лишь определяет подсказку регистра символов! Вы по-прежнему можете ввести символы любого регистра в любое поле.
autofocus
— булев атрибут, может применяться ко всем type, кроме hidden. Определяет, что при загрузке документа фокус пользователя будет установлен на данный элемент. Разумеется, только один тег <input> в вашем документе должен обладать этим атрибутом. Если всё же таких тегов будет несколько, автофокус получит первый из них.
<!-- данный инпут получит фокус при загрузке страницы -->
<input type="text" name="test" autofocus>
Также этот атрибут применяется к тегам, которые обладают атрибутом contenteditable="
true"
, т.е. содержимое которых можно редактировать.
К использованию данного атрибута следует подходить осторожно, поскольку его неаккуратное использование может привести к автоматической прокрутке страницы до определённого места, что может раздражать пользователя, снижать usability и конверсии, получаемые с сайта (актуально для интернет магазинов, лендингов, принимающих какие-либо заявки и пр.).
disabled
— булев атрибут, определяет, что в данный момент поле ввода отключено. Особенно важно в работе атрибута то, что такие поля формы не передаются на сервер, даже если имеют значение!
<form action="https://babyfrontent.ru/lessons/test.php/" target="_blank" method="post">
<p>
<label for="username">Имя пользователя:</label>
<input id="username" disabled value="evgen" type="text" name="username">
</p>
<p>
<label for="usertel">Телефон пользователя:</label>
<input id="usertel" type="tel" name="usertel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="333-333-4444">
</p>
<button type="submit">Отправить</button>
</form>
Как видите, username имеет значение «evgen» и атрибут disabled. Поле будет недоступно к редактированию и, хотя значение есть, при отправке формы эти данные не попадут на сервер. Также отключенные поля не могут получить focus во время навигации клавишей TAB, не обрабатывают события мыши click и другие. Отключать можно любой тип <input>, однако внешний вид отключенных элементов типа checkbox, radio и некоторых других вы по-прежнему не сможете изменить через CSS!
enterkeyhint
— определяет вид кнопки ввода для мобильных\виртуальных клавиатур. Применяется к тегам <input>,<textarea>, а также ко всем остальным, если для них задан contenteditable="
true"
. Конечный вид кнопки зависит от браузера и не может быть изменён стилями CSS или при помощи Javascript. Возможны значения: enter,done,go,next,previous,search,send. Вам станет понятно, о чём идёт речь, после просмотра примера, взятого из Twitter-аккаунта разработчика Stefan Judis:
Синтаксис приведён ниже, а подробное описание значений смотрите в справочнике.
<input type="text" enterkeyhint="search" name="search_string" id="search-input">
Подразумевается, что разработчик должен использовать то значение, которое подходит к соответствующему действию. Так, если в определённый <input> пользователь вводит фразу для поиска, следует указывать enterkeyhint="
search"
. Тогда вместо привычного значка ↵ пользователь увидит «Search» или значок поиска (увеличительное стекло). Такие небольшие приятности улучшают usability и дают плюс в карму разработчику.
form
— определяет, с какой формой связан данный <input>, если он находится в разметке вне формы. В качестве значения указывается идентификаторв (id) формы. В примере ниже поле username находится вне формы, но связано с ней через атрибуты.
<p>
<label for="username">Имя пользователя:</label>
<input id="username" form="main-form" required type="text" name="username">
</p>
<form action="https://babyfrontent.ru/lessons/test.php/" target="_blank" method="post" id="main-form">
<p>
<label for="usertel">Телефон пользователя:</label>
<input id="usertel" type="tel" name="usertel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="333-333-4444">
</p>
<button type="submit">Отправить</button>
</form>
Обратите внимание, что поскольку поле username связано с формой и является обязательным (required), форма не может быть отправлена при пустом поле username. Подобным образом вы можете связать с любой формой любой элемент ввода в документе. Разумеется, идентификатор у каждой формы должен быть уникальным, а значит один <input> можно связывать только с одной формой!
inputmode
— режим ввода, определяет вид виртуальной клавиатуры на мобильных устройствах (на самом деле не определяет, а только подсказывает браузеру, какой вид был бы лучше). Подходит только для type text, password, email, url. Основные значения:
numeric, tel, decimal — схожие клавиатуры с цифровой основой. Для tel и decimal на кнопках с цифрами также располагается текстовая клавиатура.
email, url, search — клавиатуры с текстовой основой. Для email вероятно будет присутствовать символ «@», для url «/».
Поскольку работа данного атрибута полностью зависит от конкретного мобильного браузера, точно определять какие-либо стандарты для него сложно. Если вы решили использовать его и повысить usability, обратите внимание на значения, указанные выше, а также обязательно посетите эту страницу CSS tricks (англ.).
list
— связывает выбранный <input> с каким-либо предопределённым списком значений, находящихся в теге <datalist>. Подробнее будет рассказано позже.
minlength,maxlength
— устанавливают минимальное или максимальное количество символов для ввода в данное поле. Само собой, максимум не может быть меньше минимума. Эти атрибуты указываются для type text, email, password, tel, url. Допустимы значения больше нуля. Отрицательные значения будут рассмотрены как значение по умолчанию — как будто эти атрибуты не указаны. Примеры смотрите выше.
multiple
— булев атрибут, применяется только для type email, file. Определяет, что данный элемент может принимать несколько значений, т.е. можно ввести несколько email-адресов, разделив их запятыми, или выбрать несколько файлов. Email адреса поступят на сервер в том же виде, в каком были введены, т.е. вместе с запятой: «example1@mail.com,example2@mail.com». Файлы, как мы помним, хранятся в отдельной переменной-массиве, и они оба будут переданы туда. В переменной формы, которая будет содержать имя файла, будет имя только последнего из выбранных файлов.
<input type="file" name="userfiles" multiple>
pattern
— шаблон, формат данных, которые могут быть введены. Описывается в виде регулярного выражения. Может применяться к type text,search,tel,url,email. Регулярные выражения это отдельная тема, очень большая и сложная, поэтому здесь мы её затрагивать не будем. Об основах регулярных выражений будет рассказано в будущих видеоуроках по JavaScript.
Пока что вам достаточно знать, что pattern позволяет проверить данные перед отправкой на соответствие регулярному выражению, т.е. проверить, состоит ли введённое значение из пяти цифр, дефиса и пяти букв, или из трёх цифр, затем дефиса, затем вновь трёх цифр, и так далее. Благодаря гибкости регулярных выражений мы можем указать любой интересующий нас формат. Значение, введённое в <input>, будет проверено непосредственно перед отправкой формы, однако, поскольку регулярные выражения присутствуют также в JavaScript, подобные проверки мы можем делать «на лету» и сразу показывать результат пользователю. Благодаря этому по завершению ввода данных и до отправки формы пользователь будет уже знать, что данные нам подходят. Простейший пример регулярного выражения:
\d{3}-[A-Za-z]{3}-\d{2}$
Здесь сказано, что подходящий нам шаблон состоит из трёх цифр, затем дефиса, затем трёх букв латинского алфавита, затем дефиса, затем двух цифр. Такому шаблону соответствуют например строки: «231-xcd-23», «000-sVS-23» и т.д.
Регулярные выражения встречаются в работе фронтенд разработчика не часто, но встречаются. Заучивать их не нужно, однако хотя бы раз нужно изучить их и понять. В дальнейшем вы сможете при необходимости освежать эти знания и писать самостоятельно несложные выражения.
Написание больших и сложных регулярных выражений требует глубокого понимания их синтаксиса и постоянной практики. Похвастаться этим может мало какой разработчик. Говорят, что некоторые разработчики занимаются исключительно написанием регулярных выражений и неплохо зарабатывают на этом.
placeholder
— текст-подсказка для пользователя, который отображается в <input>, пока там ещё нет введённых данных. Подходит для type text, search, tel, url, email.
<input id="username" placeholder="Введите имя..." type="text" name="username">
Placeholder, как уже было не один раз сказано, не должен быть внешне схож с введённым в поле текстом, иначе вы введёте пользователя в заблуждение. Как правило текст-подсказка бледнее, прозрачнее основного текста. Такой текст делает интуитивно понятным, что это не данные и поле свободно для ввода.
readonly
— булев атрибут, делает поле доступным только для чтения. Как правило применяется в том случае, когда у <input> уже есть какое-то значение в атрибуте value. Так мы обращаем внимание пользователя на какую-либо информацию, позволяем ему выделить её, скопировать и т.д.
<input id="username" value="Evgeniy" readonly type="text" name="username">
Так, пользователь увидит поле с текстом «Evgeniy». Он сможет его выделить курсором мыши, скопировать в буфер обмена, но изменить это значение не сможет. Такие поля могут понадобиться, если вы хотите в форме всегда получать какое-то предопределённое значение, на которое пользователь не сможет повлиять, например выбор бонуса. Вы захотели сами определять бонус пользователя в зависимости от дня недели, поэтому ограничили поле с бонусом и сделали его доступным только для чтения.
Не полагайтесь в вопросах безопасности, а также при указании важных данных, на атрибут readonly. Любой пользователь может открыть панель разработчика, убрать данный атрибут у тега, отредактировать значение в поле и отправить его на сервер. Мы уже говорили, но повторим: все проверки и ограничения на стороне клиента (фронтенда) необходимы только для предотвращения излишних запросов на сервер и не должны быть окончательными!
required
— булев атрибут, делает поле обязательным для отправки формы. Обязательным в компетенции required означает, что в поле должен быть введён как минимум один символ. Если вас это не устраивает и вы хотите более полные данные, то необходимо указать атрибут minlength.
<input id="username" required type="text" name="username">
Форма выполняет проверки по всем атрибутам во время отправки. Браузер показывает дефолтное уведомление для полей, которые не подходят по каким-то критериям и нуждаются в редактировании. Если вам нужно какое-то особенное поведение, например такое, какое было описано в pattern для email, то вы должны создавать эту логику самостоятельно при помощи JavaScript, или использовать готовые библиотеки.
step
— определяет величину (шаг), на которую может уменьшаться\увеличиваться значение в данном элементе. Работает вместе с min и max. Может быть определён как строка «any», в таком случае шаг может быть любой. Другие значения — положительные числа, целые или нецелые.
Как уже было сказано, от step зависит формат, который можно вводить в type="
number"
. Если вы хотите принимать числа с точностью до тысячной доли, то необходимо указать step="
0.001"
. Пример уже был выше.
value
— определяет значение, которое будет иметь <input> при загрузке страницы и которое будет передаваться на сервер при отправке формы. Является обязательным при type checkbox, radio, поскольку пользователь не вводит в них значение, а только выбирает из предложенных вариантов, оперируя атрибутом checked.
Значение не может быть задано предварительно для type="
file"
. Более того, из соображений безопасности, вы не можете добавлять значение в этот тип при помощи JavaScript. Ни в одном браузере нет возможности преодолеть этот запрет. Единственный способ выбрать какой-то файл и добавить его к форме — сделать это пользователю самостоятельно.
Это не все атрибуты <input>. Некоторые из непопавших в список запрещены, некоторые применяются только с тегами, которые не рекомендуются использовать, некоторые атрибуты уже были описаны прежде. Прочие атрибуты:
accesskey
— описан в уроке «Запрещённые атрибуты». Отвечает за навигацию по тегам при помощи клавиатуры. Не имеет единых стандартов для всех браузеров, поэтому не применяется.
autosave
— атрибут, доступный только в браузерах Safari. Отсутствует в спецификации HTML.
size
— определяет размеры некоторых типов <input>. Поскольку ширина и высота элементов должна определяться в CSS, данный атрибут не следует применять.
spellcheck
— описан в уроке «Глобальные атрибуты».
Тест к уроку
Формы ч.1
80
Тест на самую сложную тему в HTML. Первая часть коснётся непосредственно тегов