Coding-space.ru
menu

Индикатор выполнения и изменения в формах

Сегодня мы продолжить изучать новшества HTML5. Не будем медлить!

Индикатор выполнения <progress>

Элемент <progress> используется чтобы создать полосу выполнения. Вы можете взаимодействовать с ней через JavaScript и создавать действительно живые сайты.

Атрибуты:
1) min - обычно начинается с нуля
2) max - максимально допустимое значение
3) value - указывает текущее значение

<progress min="0" max="100" value="75"></progress>

Результат:

С элементом <progress> + JavaScript можно творить чудеса!

Изменения в формах

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

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

<form>
Любимый фрукт: <input type="text" placeholder="например, яблоки">
</form>

Результат:

placeholder ex

Новые поля ввода

Давайте рассмотрим новые поля, которые облегчают проверку данных, отправляемых в HTML-формах:

<form>
<input type="email" placeholder="myemai@example.com">
<input type="tel" placeholder="+111 111 111">
<input type="url" placeholder="site.com">
</form>
При просмотре с мобильного Ваш телефон распознает поле и откроет соответствующую клавиатуру.

Появился и тип для указания поля поиска - type="search"

<form>
<input type="search">
</form>
search type

Новые теги для форм

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

Тег <label>

<label> позволяет установить связь между определенным элементом формы и текстом. Таким образом мы можем сделать так, чтобы по клику на текст нас фокусировало на элементе <input>

<form>
<label>Ваша почта:<label>
<input type="email" placeholder="myemai@example.com">
</form>
label ex
Теперь по клику на текст происходит фокусировка на инпуте.

Тег <datalist>

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

<form>
<input type="text" list="names">
<datalist id="names">
<option value="John">
<option value="Nick">
<option value="Steve">
</datalist>
</form>
Связывание input и option

Чтобы input понимал какой список ему отображать нужно задать ему атрибут list и списку id с одинаковыми значениями.

Результат:

datalist ex
Вы можете создать сколько угодно элементов option.

Атрибут required

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

<form>
<input type="text" required>
<input type="email" required>
<input type="submit" required>
</form>

Результат:

required ex
Как видите, одно поле мы заполнили, а второе - нет. Отправка формы не была совершена, а пользователь получил уведомление.

Но что если мы заполним второе поле и напишем туда произвольный набор символом? - Правильно, отправка все-равно не произойдёт:

required ex email

Это произошло из-за того, что мы указали тип данного поля как email, поэтому у нас потребовали более корректный ввод данных.

Задачи

Мои навыки

Предлагаем Вам сделать список своих навыков, выглядит он примерно так:

task

Маленькая подсказка: используйте тег <span> (он позволит Вам разместить текст и прогрес бар в одном ряде)

<h1>Мои навыки:</h1>
<span>Готовка: </span><progress value="35" max="100">красный</progress><span> 35/100</span><br>
<span>Плаванье: </span><progress value="65" max="100">красный</progress><span> 65/100</span><br>
<span>Фехтование: </span><progress value="82" max="100">красный</progress><span> 82/100</span><br>

Помогайте другим!

Ниже находится секция с комментариями, мы призываем всех делиться своими знаниями по данной теме, помогать другим.
Так же Вы можете скидывать свои задачи и самые интересные мы обязательно опубликуем в уроке!