Home

Що нового в 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'>