Що нового в HTML5?
Атрибут autocomplete
Атрибут autocomplete можна застосувати або до елементу <form>, або до будь-якого з типів елемента <input>: color, date, email, password, range, search, tel, text або url.
При включенні атрибута autocomplete заново викликаються раніше введені користувачем дані, які автоматично вводяться в поля в якості пропозицій. Цю властивість також можна відключити шляхом перемикання autocomplete на off.
<form action='myform.php' method='post' autocomplete='on'> <input type='text' name='username'> <input type='password' name='password' autocomplete='off'> </form>
Атрибут autofocus
Атрибут autofocus призводить до миттєвої установки фокусу на елемент при завантаженні сторінки. Може бути застосований до будь-якого елементу <input>, <textarea> або <button>, наприклад:
<input type='text' name='query' autofocus='autofocus'>
Атрибут placeholder
Атрибут placeholder дозволяє поміщати в порожнє поле введення корисну підказку, яка пояснює користувачам, що саме їм потрібно ввести.
<input type='text' name='name' size='50' placeholder="Ім'я та Прізвище">
Атрибут required
Атрибут required призначений для забезпечення обов'язкового заповнення поля перед відправкою форми:
<input type='text' name='creditcard' required='required'>
Атрибути підміни
За допомогою цих атрибутів можна підмінити настройки форми на поелементній основі
<form action='url1.php' method='post'> <input type='text' name='field'> <input type='submit' formaction='url2.php'> </form>
У HTML5 також з'явилася підтримка для атрибутів підміни formenctype, formmethod, formnovalidate і formtarget, які можуть використовуватися так само, як і атрибут formaction для підміни однієї з відповідних їх іменам налаштувань.
Атрибути width і height
Використовуючи ці атрибути, можна змінити розміри зображення
<input type='image' src='picture.png' width='120' height='80'>
Атрибут form
У наступному коді показана створена форма, але з елементом введення, що знаходяться за межами тегів <form> і </form>:
<form action='myscript.php' method='post' id='form1'> </form> <input type='text' name='username' form='form1'>
Щоб мати таку можливість, формі потрібно присвоїти ідентифікатор, скориставшись атрибутом id, і послатися на цей ідентифікатор в атрибуті form елемента input.
Атрибут list
У HTML5 підтримуються списки що прикріпляються для введення даних, які спрощують користувачам вибір із зумовлених списків.
Виберіть потрібний сайт: <input type='url' name='site' list='links'> <datalist id='links'> <option label='Google' value='http://google.com'> <option label='Yahoo!' value='http://yahoo.com'> <option label='Bing' value='http://bing.com'> <option label='Ask' value='http://ask.com'> </datalist>Виберіть потрібний сайт:
Атрибуты min и max
Використовуючи атрибути min і max, можна вказати для полів введення мінімальне і максимальне значення
<input type='time' name='alarm' value='07:00' min='05:00' max='09:00'>
Атрибут step часто використовується з атрибутами min і max і підтримує покроковий перебір значень, пов'язаних з числами і датами, наприклад:
<input type='time' name='meeting' value='12:00' min='09:00' max='16:00' step='3600'>
Тип вводу color
Тип вводу color викликає на екран вікно вибору кольору, що дозволяє вибрати колір простим клацанням кнопкою миші. Він використовується наступним чином:
Виберіть кольор: <input type='color' name='color'>Выберите цвет
Типи вводу number и range
Типи вводу number и range обмежують введення, якe повинно бути або числом, або числом в зазначеному діапазоні, наприклад:
<input type='number' name='age'> <input type='range' name='num' min='0' max='100' value='50' step='1'>
Вікно вибору дати і часу
При виборі типу введення date, month, week, time, datetime или datetimelocal з'являтиметься вікно вибору, в якому користувач може зробити свій вибір
<input type='time' name='time' value='12:34'>