Поля для ввода url, email, телефона

Для определение данных полей устанавливается тип тега input соответственно url, email и tel. Для их настройки используют те же атрибуты, что и обычного текстового поля.

 

Поля для ввода email, url, телефона для проверки ввода используют соответствующие шаблоны и если мы введем некорректное значение и попробуем отправить форму, то браузер отобразит сообщение о некорректном формате:

Элементы для ввода даты и времени

Для работы с датами и временем в html5 предназначено несколько типов элементов input:

datetime - local – устанавливает дату и время;

date – устанавливает дату;

month – устанавливает текущий месяц и год;

time – устанавливает время;

week – устанавливает текущую неделю.

<form>

<label for="firstname">Имя: </label>

<input type="text" id="firstname" name="firstname"/>

<p>

<label for="date">Дата рождения: </label>

<input type="date" id="date" name="date"/>

</p>

<p>

<button type="submit">Отправить</button>

</p>

</form>

Отправка файлов

За выбор файлов отвечает элемент input  с атрибутом type =” file ”:

<form enctype="multipart/form-data" method="post" action="http://localhost:8080/postfile.php">

<p>

<input type="file" name="file" />

</p>

<p>

<input type="submit" value="Отправить" />

</p>

</form>

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

Для отправки файла на сервер, форма должна иметь атрибут enctype =” multipart / form - date ”.

С помощью ряда атрибутов можно дополнительно настроить элементы выбора файла:

accept – устанавливает тип файлов, которые допустимы для выбора;

multiple – позволяет выбирать множество файлов (при зажатии клавиши ctrl или shift);

required – требует обязательной установки файла.

Список

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

Выпадающий список:

<form method="get">

<p>

<label for="phone">Выберите модель:</label>

<select id="phone" name="phone">

<option value="iphone 6s">iPhone 6S</option>

<option value="lumia 950">Lumia 950</option>

<option value="nexus 5x">Nexus 5X</option>

<option value="galaxy s7">Galaxy S7</option>

</select>

</p>

<p>

<input type="submit" value="Отправить" />

</p>

</form>

Внутри элемента select помещаются элементы option – элементы списка, который содержит атрибут value для хранения значения элемента.

Для создания списка с множественным выбором к элементу select добавляется атрибут muitiple. Зажав клавишу ctrl можно выбрать несколько элементов.

Select позволяет группировать элементы с помощью тега < optgroup >.

<form method="get">

<p>

<label for="phone">Выберите модель:</label>

<select id="phone" name="phone">

<optgroup label="Apple">

<option value="iphone 6s">iPhone 6S</option>

<option value="iphone 6s plus">iPhone 6S Plus</option>

<option value="iphone 5se">iPhone 5SE</option>

</optgroup>

<optgroup label="Microsoft">

<option value="lumia 950">Lumia 950</option>

<option value="lumia 950 xl">Lumia 950 XL</option>

<option value="lumia 650">Lumia 650</option>

</optgroup>

</select>

</p>

<p>

<input type="submit" value="Отправить" />

</p>

</form>

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

Парный тег textarea позволяет создавать многострочные поля. С помощью атрибутов cols – ширина текстового поля (измеряется в пикселях) и rows – высота текстового поля (в строках), можно настроить элемент textarea:

<form method="get">

<p>

<label for="comment">Ваш комментарий:</label><br/>

<textarea id="comment" name="comment" placeholder="Написать комментарий"

cols="30" rows="7"></textarea>

</p>

<p>

<input type="submit" value="Добавить" />

</p>

</form>

Элементы fieldset и legend

Для группировки элементов формы часто применяется элемент fieldset, который создает границу вокруг вложенных элементов. Элемент legeng – устанавливает заголовок для группы элементов:

<form>

<fieldset>

<legend>Введите данные:</legend>

<label for="login">Логин:</label><br>

<input type="text" name="login" id="login" /><br>

<label for="password">Пароль:</label><br>

<input type="password" name="password" id="password" /><br>

<input type="submit" value="Авторизация">

</fieldset>

</form>

Валидация форм

Нередко пользователь в форму вводит некорректные значения: вместо чисел – букву или наоборот. Для предупреждения и проверки некорректного ввода в html5 существует механизм валидации. Для создания валидации у элементов формы используется ряд атрибутов:

required – требует обязательного ввода значения, практически для всех элементов формы;

min и max – максимальное и минимальное допустимое значение;

pattern – задает шаблон, которому должны соответствовать вводимые данные.