Form & HTML5

Сброс введенных значений[2/28]

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

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

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

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

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

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

Простая кнопка[3/28]

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

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

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

Кнопка-изображение[4/28]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обязательные поля[6/28]

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

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

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

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

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

<input type="text" required>

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

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

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

Поле выбора даты[7/28]

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

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

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

<input type="date">

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

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

Поле выбора времени[8/28]

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

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

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

<input type="time">

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

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

Список возможных значений[9/28]

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

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

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

<input type="text" list="browsers" name="browser">
<datalist id="browsers">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Safari">
</datalist>

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

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

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

Поле ввода числового значения[10/28]

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

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

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

<input type="number">

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

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

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

Поле поиска[11/28]

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

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

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

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

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

<input type="search">

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

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

Автофокус[12/28]

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

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

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

<input type="text" autofocus>

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

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

Другие поля для ввода дат[13/28]

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

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

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

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

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

Выбор из диапазона[14/28]

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

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

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

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

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

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

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

Область для вывода результата[15/28]

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

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

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

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

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

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

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

Группировка полей формы[16/28]

Когда формы становятся очень большими, возникает потребность зрительно отделить одни поля от других. Для группировки полей используется тег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>

Паттерны значений полей[17/28]

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

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

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

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

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

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

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

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

Поле ввода телефона[18/28]

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

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

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

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

Подсказка при заполнении полей[19/28]

У полей, в которые вводятся текстовые значения (textarea, разные типы input и т.д.) есть возможность вывести подсказку.

Для этого используется специальный атрибутplaceholder:

<input type="text" placeholder="Текст подсказки">

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

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

Поля ввода адресов сайтов и email[20/28]

Вот поддержка браузерами полей для ввода email и полей для ввода адресов сайтов

В HTML5 добавлены два типа полейemailиurl, предназначенные для ввода электронной почты и адреса сайта. Особенностью этих полей является то, что они автоматически проверяют формат введённых данных.

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

<input type="email">
<input type="url">

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

Когда вы начинаете заполнять такое поле на мобильнике, там автоматически переключается раскладка клавиатуры. Например, дляemailотобразятся латинские символы, цифры, знак@и некоторые другие. Посмотрите на скриншоты:

Поле выбора цвета[21/28]

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

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

В HTML5 добавили новый типcolor, предназначенный для полей выбора цвета. При клике на такое поле появляется окно с возможностью выбрать цвет из палитры.

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

<input type="color">

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

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

Группировка элементов списка[22/28]

И последнее по очерёдности, но очень важное, поле в нашей форме — поле выбора гастрономических предпочтений Кексика.

Так как список выбора может быть довольно большой, в тегеselectиспользуем возможность объединятьoptionв группы. Обычно это используется для большей наглядности и удобства поиска нужного варианта.

Для формирования группы используется тегoptgroup. Атрибутlabelэтого тега определяет заголовок группы.

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

<select name="variants">
    <optgroup label="Группа вариантов 1">
        <option value="1">Вариант 1</option>
        <option value="2">Вариант 2</option>
        <option value="3">Вариант 3</option>
    </optgroup>
    <optgroup label="Группа вариантов 2">
        <option value="4">Вариант 4</option>
        <option value="5">Вариант 5</option>
        <option value="6">Вариант 6</option>
    </optgroup>
</select>

Вложенность групп не ограничена, внутрь каждой группы можно вложить другие группы.

Аналогично можно группировать элементы и в списках со множественным выбором.

Запрет редактирования полей[23/28]

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

Есть два способа: использование атрибутаreadonlyи использование атрибутаdisabled

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

<input type="text" readonly>
<input type="text" disabled>

В чем же отличие между ними?

Атрибутreadonlyне дает пользователю изменять поле (вводить новый текст, модифицировать существующий). Введенное значение можно выделить и скопировать. Данные из этого поля отправляются на сервер.

Атрибутdisabledне дает пользователю изменять поле (вводить новый текст, модифицировать существующий). Нельзя поставить фокус в это поле, введенное значение нельзя выделять и копировать. Данные из этого поля НЕ отправляются на сервер.

Управление автозаполнением полей[24/28]

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

Он может принимать два значенияonиoff. Первое включает автозаполнение, второе — отключает. Отключение автозаполнения обычно используется из соображений безопасности, например, чтобы не сохранялись пароли, номера банковских карт и т.д.

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

<input type="text" autocomplete="off">

Значение по умолчанию зависит от настроек браузера.

Переключение между полями[25/28]

При нажатии клавишиTabбраузер передает управление (фокус) от одного элемента к другому в том порядке, в котором они были объявлены на странице. Этим порядком можно управлять при помощи атрибутаtabindex.

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

<input type="text" tabindex="3">

В качестве значения может использоваться любое целое положительное число. Значения выстраиваются последовательно и переход между элементами происходит от меньшего значения к большему. Значения меньше нуля игнорируются.