Елементи вебформ, добавлені в HTML5
В HTML5 добавили нові елементи вебформ, що в майбутньому дозволить відмовитися від додаткових js-плагінів, які реалізовували календарі, ползунки та інші візуальні елементи.
Станом на кінець 2017 року з їх підтримкою у браузерах є серйозні проблеми: браузери відображають елементи по-різному, а деякі елементи досі не підтримуються. Порівняйте вигляд елементів, представлених у лекції, в різних браузерах (Chrome, Firefox, IE/Edge).
Звичайне текстове поле type="text" отримало декілька різновидів, що майже нічим від свого батьківського блока не відрізняються.
Це зроблено по-перше - для семантичної ідентифікації елементів, по-друге - на мобільних гаджетах при отриманні фокуса буде виникати більш зручна віртуальна клавіатура, де до основного набору клавіш будуть входити додаткові клавіші, наприклад, для набору е-мейлів, телефону і т.п.
type="email" - поле для вводу адреси електронної пошти.
type="tel" - поле для вводу телефона.
type="url" - поле для вводу URL.
type="search" - поле для пошуку.
Поля для вводу дати, часу і т.п.:
type="date".
type="datetime".
type="time".
type="datetime-local".
type="month".
type="week".
Вибір кольору:
Ввід числа:
Ввід числа з певного діапазона:
<input type="range" min="1" max="10">
Полоса прогресу (керування нею здійснюється за допомогою JavaScript):
<progress value="20" max="100">Завантажено: 20%</progress>
Список вибору:
Цей елемент схожий на select, але в нього можна ввести будь-яке значення, в тому числі і таке, якого немає в списку.
Сам список задається в окремому тезі datalist і зв'язується з інпутом через ідентифікатор та атрибут list:
<label><input list="drop_list_1"></label>
<datalist id="drop_list_1">
<option value="Текст1">
<option value="Текст2">
</datalist>
Список datalist може знаходитися в будь-якому місці сторінки, наприклад, в самому низу поряд зі скриптами, закриваючим тегом body.