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