+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Улучшаем формы с помощью HTML5

С помощью javascript мы можем проверить правильность введенной информации в поля формы. При этом проверка будет проходить на стороне клиента. HTML5 избавит Вас от необходимости писать лишний код.

Итак, пишем следующее
<form method="post" oninput="level.value=flevel.valueAsNumber">
Ваше имя:<br>
<input type="text" name="name" required><br>

E-mail:<br>
<input type="email" name="email" required><br>

Адрес:<br>
<input type="url" name="url" required><br>

Комментарий:<br>
<textarea name="comment" required></textarea><br>

Количество:<br>
<input type="number" min="0" max="16" step="3" value="1"><br>
<!--
min - минимальное значение
max - максимальное значение
step - шаг
-->

Бегунок:<br>
<input type="range" name="flevel" id="flying" min="0" max="10" step="2" value="0">
<output for="flying" name=level>0</output><br><br>
<!-- в теге output будет отображаться
значение ползунка, для этого в тег form
добавляем следующее: oninput="level.value=flevel.valueAsNumber"
-->

Дата:<br>
<input type="date"><br>
<!-- выбор даты
используйте datetime для выбора даты и времени
-->
Цвет:<br>
<input type="color" name="color" value="#00a2e8"><br>
<!--
позволяет пользователю выбирать цвет
value - значение цвета по умолчанию
-->

Телефон 8-xxx-xxx-xx-xx:<br>
<input type="tel" name="tel" pattern="8-[0-9]{3}-[0-9]{3}-[0-9]{2}-[0-9]{2}" required><br>
<!--
проверка телефона
с 8 номер начинается, дефис, три цифры, дефис, три цифры, дефис, две цифры, дефис, две цифры,
-->

<input type="submit" value="Отправить">
</form>
Стоит нам в поле добавить required и при попытке отправить форму, пользовательский агент (Ваш браузер) проверит все ли условия выполняются. Если нет, пользователь увидит соответствующее сообщение. Также используя type="email" вместо type="text" браузер будет проверять корректно ли указан email

Демонстрация


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 2102