HTML_Формы ч.1

Первая форма

Текстовое поле ввода

Идентификатор и значение по умолчанию

Подпись для поля ввода

Связываем подпись и поле по id

Поле для ввода пароля

Кнопка отправки формы

Многострочное поле ввода

Чекбокс или «галочка»

Переключатель или «радиобаттон»

Группа переключателей

Раскрывающийся список или «селект»

«Мультиселект»

Поле для загрузки файлов

Скрытое поле

Первая форма

(Наверх)

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

Чтобы создать форму, нужно использовать парный тег <form>, внутри которого размещаются поля формы. У тега <form> есть два важных атрибута:

• action задаёт адрес, URL, отправки формы;
• method задаёт метод отправки формы.

Пример:

<form action="https://echo.htmlacademy.ru" method="get">
  поля формы
</form>

Для отправки формы обычно используют методы get или post. Если не указать атрибут method, то будет использован get.

Метод get посылает данные формы в строке запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса. Например:

https://www.google.com/search?q=htmlacademy

Метод get лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты поиска и передать её кому-то.

Метод post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. Например, при редактировании личного профиля.

Текстовое поле ввода

(Наверх)

Большинство полей форм создаётся с помощью одиночного тега <input>. У этого тега два обязательных атрибута:

• type задаёт тип поля;
• name задаёт имя поля.

Тип поля влияет на то, как оно будет отображаться и вести себя. Самый распространённый тип — это text, который обозначает текстовое поле. Он же используется по умолчанию. Пример:

<form action="https://echo.htmlacademy.ru" method="get">
  <input type="text" name="search">
</form>

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

Идентификатор и значение по умолчанию

(Наверх)

Атрибут id поля ввода обозначает идентификатор. Он должен быть уникальным не только в пределах формы, но и на всей странице.

Обычно идентификаторы используют для повышения удобства работы с формой, например, создают подписи, связанные с мелкими полями. При нажатии на такие подписи активируется связанное поле. И это удобно, так как по большой подписи попасть легче, чем по маленькому полю. Также идентификаторы используют в JavaScript для работы с полями.

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

Атрибут value задаёт значение поля ввода по умолчанию. Это тоже повышает удобство.

Согласитесь, приятно зайти в огромную анкету на каких-нибудь госуслугах, а там ваши паспортные данные уже подставлены в нужные поля и заполнять их не надо. И всё благодаря тому, что программист добавил к полям атрибут value с нужными данными.

Подпись для поля ввода

(Наверх)

Можно подумать, что сделать подпись к полю очень просто. Пишем текст рядом с полем и всё готово:

Подпись <input type="text" name="username">

На самом деле этого недостаточно — мы получили просто кусок текста и поле, которые расположены рядом друг с другом, но логически никак не связаны.

Есть специальный тег, который позволяет смело сказать: «Этот кусок текста действительно подпись к этому полю!». Это парный тег <label>.

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

Создавать подписи к полям с помощью <label> — хороший приём. Используйте его.

Первый способ создать подпись — просто обернуть текст подписи и тег поля в тег <label>, вот так:

<label>
  Подпись <input type="text" name="username">
</label>

Надо отметить, что при оборачивании текста в тег <label> он визуально никак не меняется, ведь главная задача подписи — создать логическую связь.

Связываем подпись и поле по id

(Наверх)

Иногда обернуть поле и текст подписи в тег <label> нельзя. Например, когда они размещены в разных ячейках таблицы.

В этом случае можно связать подпись с полем с помощью атрибута id. Алгоритм такой:

1. Добавляем к полю ввода идентификатор с помощью атрибута id.
2. Оборачиваем текст подписи в тег <label>.
3. Добавляем тегу <label> атрибут for.
4. В атрибут for записываем такое же значение, что и в атрибуте id у поля.

Например:

<label for="user-field-id">Имя пользователя</label>
...
много-много других тегов
...
<input id="user-field-id" type="text" name="username">

Поле для ввода пароля

(Наверх)

Мы создаём простую форму входа. Уже есть два поля и связанные с ними подписи. Одно из полей предназначено для ввода пароля, но сейчас оно является простым текстовым полем.

Чтобы сделать его настоящим полем для ввода пароля, в котором текст будет отображаться «звёздочками», нужно просто изменить значение атрибута type на password.

Кнопка отправки формы

(Наверх)

Форма практически готова. Осталось добавить кнопку для отправки формы. Такая кнопка создаётся с помощью тега <input> c типом submit.

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

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

Многострочное поле ввода

(Наверх)

Мы научились создавать простейшие формы с текстовыми полями и кнопками. А теперь познакомимся с более сложными элементами формы.

Многострочное текстовое поле создаётся с помощью парного тега <textarea>. У него есть атрибуты name и id, которые аналогичны атрибутам текстового поля.

Атрибут rows принимает целочисленное значение и задаёт высоту многострочного поля в строках. Атрибут cols задаёт ширину поля в символах. В качестве ширины символа берётся некоторая «усреднённая ширина».

Атрибут value у многострочного поля отсутствует, а значение по умолчанию задаётся по-другому. Текст, расположенный между открывающим и закрывающим тегом <textarea> и является значением по умолчанию. Вот так:

<textarea>Значение по умолчанию</textarea>

Чекбокс или «галочка»

(Наверх)

Поле-галочка — это тег <input> с типом checkbox.

Галочка работает по принципу «либо да, либо нет». Если галочка стоит, то браузер посылает переменную с именем поля на сервер, если галочки нет, то не посылается ничего. Таким образом, атрибут value не является обязательным.

Чтобы галочка стояла по умолчанию, нужно добавить к тегу атрибут checked. Вот так:

<input type="checkbox" checked>

Чекбокс не подразумевает выбор одного элемента из нескольких. Поэтому если в одной форме есть несколько чекбоксов, то имена у них должны быть разными.

Переключатель или «радиобаттон»

(Наверх)

Поле-переключатель — это тег <input> с типом radio.

Обычно переключатели размещают группами по несколько штук. Причём у переключателей из одной группы должно быть одинаковое имя и разные значения, которые задаются c помощью value.

Таким образом, атрибут value является для переключателей обязательным. Браузер отправляет на сервер значение value выбранного переключателя.

В этом задании мы начнём создавать переключатель.

Группа переключателей

(Наверх)

Теперь добавим ещё один вариант ответа в наш переключатель. Для этого нужно добавить ещё один <input> с таким же именем, но другим значением value.

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

Чтобы сделать какой-либо вариант в переключателе выбранным по умолчанию, нужно добавить к соответствующему тегу <input> атрибут checked, как у поля-галочки.

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

Раскрывающийся список или «селект»

(Наверх)

Раскрывающийся список так же, как и переключатель, позволяет выбрать один вариант ответа из нескольких.

Раскрывающийся список создаётся с помощью парного тега <select>, у которого есть знакомые атрибуты name и id.

Варианты ответов задаются с помощью парных тегов <option>, которые должны располагаться внутри тега <select>. Например:

<select name="theme">
  <option value="light">Светлая тема</option>
  <option value="dark">Тёмная тема</option>
  ...
</select>

В атрибуте value тега <option> задаётся значение варианта ответа, а внутри этого тега располагается подпись варианта ответа.

Если при отправке формы у выбранного варианта задан value, то на сервер отправится значение этого атрибута. В противном случае будет отправлен текст подписи.

«Мультиселект»

(Наверх)

Раскрывающийся список можно превратить в так называемый «мультиселект», то есть список, в котором можно выбрать не один, а несколько вариантов.

Чтобы сделать это, нужно добавить к тегу <select> атрибут multiple.

Выбрать несколько вариантов можно, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на MacOS.

Высоту мультиселекта можно изменять с помощью атрибута size тега <select>.

Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам <option> добавить атрибут selected.

При отправке данных мультиселекта на сервер с PHP после имени в значении атрибута name ставятся символы квадратных скобок []. Например, <select name="days[]">. Это необязательное требование для имени мультиселекта, а нужно только для корректной обработки данных в PHP.

Поле для загрузки файлов

(Наверх)

Поле для загрузки файлов — это тег <input> с типом file. Для этого поля обязательным атрибутом является имя.

Чтобы поле заработало и браузер смог передать выбранный файл на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data. Не полю, а форме.

Кстати, внешний вид таких полей очень сильно отличается в зависимости от операционной системы и очень плохо изменяется с помощью стилей.

Скрытое поле

(Наверх)

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

Например, это могут быть реквизиты заказа или номер пользователя в форме оплаты.

Скрытое поле — это тег <input> с типом hidden.

Сброс введенных значений

Сначала разберёмся с возможностями кнопок, не рассмотренными в базовом курсе про формы.

Экспериментировать будем над формой логина в котопрофайл.

В HTML-формах есть специальная кнопка, которая сбрасывает введённые значения и возвращает изначально установленные. Это поле ввода с типом reset.

Пример использования:

<input type="reset" value="Сбросить">

Обратите внимание, что кнопка не обнуляет значения, а возвращает те, которые были установлены в полях формы по умолчанию.

Простая кнопка

Помимо кнопок отправки формы или сброса введенных значений, существуют и «просто кнопки». При нажатии на такую кнопку никаких действий не происходит, а все необходимые действия обычно задаются при помощи JavaScript.

Пример записи:

<input type="button" value="Кнопка">

Кнопка-изображение

В качестве кнопки отправки формы можно использовать изображение.

Для этого у тега input нужно указать тип image.

Аналогично обычным изображениям на сайте у кнопки-изображения есть еще два атрибута:

srcадрес изображения

altальтернативный текст, отображаемый в том случае, если изображение не загружено

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

Альтернативный способ задания кнопок

Помимо тега <input> для добавления кнопок можно использовать тег <button>. Он расширяет возможности создания кнопок.

Внутри тега <button> можно размещать любые HTML-элементы, в том числе изображения. Например:

<button>Календарь <img src="calend.png" alt=""></button>

В данном случае кнопка будет выглядеть примерно вот так: 

Если в атрибуте type тега <button> указать значение submit или reset, то кнопка будет отправлять данные на сервер или сбрасывать введенные значения.

По умолчанию значение атрибута type — submit.

То есть внутри формы кнопка <button> по нажатию отправит форму на сервер.

Значениями атрибута type также могут быть button и reset.

Кнопка button со значением type="reset" аналогично input type="reset" сбрасывает значения полей формы к изначальным.

А вот значение type="button" избавит кнопку от всей изначальной функциональности. То есть кнопка просто будет выглядеть как кнопка, но ничего по умолчанию не делать. Это удобно, если вы хотите сами добавить кнопке дополнительное действие с помощью JavaScript.

Обязательные поля

Ура, товарищи! Мы успешно разобрались с возможностями кнопок в формах и залогинились в профайл Кексика.

Теперь нам предстоит изучить новые возможности форм, большая часть которых была добавлена в HTML5. А в процессе мы будем помогать Кексику строить формы, используя полученные знания.

Итак, начнём...

Кексик, как и любой уважающий себя кот, любит рыбу. Но при этом каждый раз ходить в рыбную лавку за лососем ему лень. Поэтому он, как уважающий себя инженер, решил облегчить свою жизнь автоматизацией процесса: он собрался сделать форму доставки любимых лакомств на дом, чтобы ей мог пользоваться он сам и его друзья-котаны. Кексик начал её верстать, и ему надо помочь в этом нелёгком деле.

Сначала давайте разберёмся с обязательными полями. Чтобы указать, что поле обязательно для заполнения, нужно добавить ему пустой атрибут required:

<input type="text" required>

При попытке отправить форму с незаполнеными обязательными полями браузер выведет всплывающее предупреждение, которое в Chrome и Firefox выглядит вот так:

Эта проверка работает на клиентской части и упрощает валидацию форм.

Но всегда нужно проверять отправленные данные и на стороне сервера.

Поле выбора даты

Поля для задания даты и времени уже поддерживаются в этих браузерах.

В форму заказа важно включить поле даты доставки. А для выбора даты из календаря существует новый тип поля ввода — date. При клике на данное поле в форме всплывает календарик.

Пример записи:

<input type="date">

В Chrome это выглядит так:

Если браузер не поддерживает поле для ввода даты, то вместо него отображается обычное текстовое поле.

Поле выбора времени

Поля для задания даты и времени уже поддерживаются в этих браузерах.

В предыдущем задании мы рассмотрели использование тега <input> с типом date. Но иногда нужно указывать дату в других форматах, и для этого существуют дополнительные «временные» типы полей, например, time для выбора времени.

Используем поле выбора времени в нашей форме:

<input type="time">

В Chrome это выглядит так:

Если браузер не поддерживает поле для ввода времени, то вместо него отображается обычное текстовое поле.

Список возможных значений

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

Для текстовых полей можно заранее определить список возможных значений, которые отображаются, когда вы начинаете вводить текст в поле. Для этого существует специальный тег <datalist>.

Пример использования:

<input type="text" list="browsers" name="browser">

<datalist id="browsers">
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Safari"></option>
</datalist>

В Chrome это выглядит так:

Связывание текстового поля и списка осуществляется при помощи атрибута list у тега input — значение list должно быть таким же, как значение атрибута id у списка.

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

Поле ввода числового значения

Поля для ввода числовых значений уже поддерживаются в этих браузерах.

Для ввода числовых значений существует специальный тип поля ввода number. Рядом с полем браузер автоматически подставляет две стрелочки для увеличения и уменьшения числового значения.

Пример записи:

<input type="number">

В Chrome это выглядит так:

При помощи вспомогательных атрибутов min и max можно установить верхнюю и нижнюю границу допустимых значений. А атрибут step устанавливает величину шага изменения значения.

Также стоит отметить, что поле ввода числа, как и некоторые другие поля, которые будут рассмотрены дальше, по-особому ведёт себя в мобильных браузерах: например, при фокусе на такое поле появляется клавиатура, позволяющая вводить соответствующие символы.

Поле поиска

Отлично! Мы справились с формой заказа и можем смело двигать дальше.

Кексик давно намеревался побывать в Норвегии и отведать хвалёной местной рыбки. Чтобы упростить себе жизнь и не ходить в турфирму, он решил создать страницу с формой бронирования отеля.

И тут без вашей помощи никак не обойтись.

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

Пример записи:

<input type="search">

Это поле почти не отличается от обычного текстового поля. В некоторых браузерах внутри него появляется крестик для сброса введённого значения.

В Chrome это выглядит так:

Автофокус

Автофокус уже поддерживается в этих браузерах.

При загрузке страницы можно сообщить браузеру в какое поле установить курсор по умолчанию. Для этого используется пустой атрибут autofocus.

Пример записи:

<input type="text" autofocus>

Автофокус улучшает процесс работы с формами, ведь пользователь избавляется от лишних щелчков мышки, там где они не нужны, а может сразу начинать вводить текст в поле.

Обратите внимание, что такой атрибут должен быть только один на странице.

Другие поля для ввода дат

Поля для задания даты и времени уже поддерживаются в этих браузерах.

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

datetimeвыбор даты с указанием времени (c учетом временной зоны)datetime-localвыбор даты с указанием времени (без учета временной зоны)weekвыбор порядкового номера недели в году и годаmonthвыбор месяца и годаИспользуем поле для выбора месяца в нашей форме. А для выбора числа используем уже знакомый тип number.

Вот так выбор месяца выглядит в Chrome:

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

Выбор из диапазона

Поле для выбора из диапазона значений уже поддерживаются в этих браузерах

В нашей форме обязательно должна быть возможность выбрать количество дней, на которое будет осуществляться бронирование. Для этой цели подходит тип поля range.

Такое поле выглядит как шкала с ползунком и позволяет выбрать число из некоторого интервала значений.

Пример записи:

<input type="range" min="1" max="10">

В Chrome и Firefox это поле выглядит так:

Атрибуты min и max устанавливают нижнюю и верхнюю границу допустимых значений. А атрибут step устанавливает величину шага изменения значения.

Область для вывода результата

Область для вывода результата уже поддерживаются в этих браузерах

Чтобы видеть количество дней в брони, используем новый HTML5-тег <output>.

Тег <output> представляет собой область, куда выводятся какие-либо результаты вычислений, обычно полученные при помощи JavaScript.

Пример записи:

<output name="sum">[значение по умолчанию]</output>

Значение по умолчанию при этом можно не задавать, тогда область вывода будет пустой.

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

Группировка полей формы

Когда формы становятся очень большими, возникает потребность зрительно отделить одни поля от других. Для группировки полей используется тег fieldset.

Пример:

<fieldset>
  <input type="text">
  <input type="text">
  <input type="text">
</fieldset>
<fieldset>
  <textarea></textarea>
</fieldset>

По умолчанию браузеры отображают результат в виде рамки вокруг этой группы полей, но при помощи CSS можно изменить его внешний вид.

Также для каждой группы можно добавить её заголовок. Для этого внутрь тега fieldsetнадо поместить тег legend:

<fieldset>
  <legend>Заголовок группы</legend>
  <input type="text">
</fieldset>

Паттерны значений полей

Паттерны значений полей уже поддерживаются в этих браузерах.

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

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

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

Поэтому первым делом добавим в форму поле для номера котопаспорта. Это обычное текстовое поле, но с ограничениями на формат номера, чтобы не злить лишний раз норвежского посла ошибками и опечатками.

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

В Chrome и Firefox подобное поле с неправильно введёнными данными выглядит так:

Поле ввода телефона

Для получения визы нужно сообщить и номер телефона Кексика, поэтому добавим в форму ещё одно поле с типом tel.

Новый тип поля tel появился в HTML5 и отвечает за ввод телефонных номеров.

Также воспользуемся атрибутом pattern, чтобы исключить ошибки при заполнении формы.

В мобильных браузерах при фокусе на такое поле появляется клавиатура, позволяющая вводить только цифры и символы телефонных номеров.