HTML5 атрибути форм (частина 2)

36

Від автора: дана стаття є витягом з книги HTML5 і CSS3 для реального світу, 2-е видання за авторством Алексіса Гольдштейна, Луї Лазариса і Естель Вейль. Книгу можна знайти в магазинах по всьому світу, а також купити цифрову версію.

Атрибут pattern

Атрибут pattern задає регулярний вираз, яким повинні задовольняти дані, що вводяться користувачем, щоб бути валідними. За допомогою атрибута pattern можна обмежити дані на всі поля, де доступний введення тексту в довільній формі.

Мова регулярних виразів в шаблонах з синтаксису той же, що і в JS на основі Perl за винятком того, що атрибут pattern повинен задовольняти всім значенням, а не якогось внутрішнього набору. При використанні шаблонів користувачеві необхідно повідомляти дозволені символи.

Глобальний атрибут title має особливе значення в парі з pattern. Зараз браузери відображають значення атрибута title при наведенні курсору у вигляді зринаючі підказки. Інструкції ж в шаблоні більш детальні, ніж плейсхолдеры, і формують більш зв’язне роз’яснення. Атрибут title буде відображатися з повідомленням про помилку за замовчуванням в браузерах з підтримкою нативної валідації. Про це ми поговоримо в наступній главі.

Замітка: регулярні вирази

Регулярні вирази – функція більшості мов програмування, за допомогою якої розробники можуть задавати шаблони символів і перевіряти, чи підходить задана рядок під цей шаблон. Для новачків регулярні вирази просто темний ліс. Наприклад, вираз для перевірки рядка на значення кольору у форматі hex виглядає наступним чином: #[A-Fa-f0-9]{6}.

Повний урок з синтаксису регулярних виразів лежить за межами даної книги, але в мережі безліч чудових ресурсів, уроків і шпаргалок. Або ж можна просто погуглити потрібний шаблон або запитати на форумах.

В якості базового прикладу давайте додамо атрибут pattern на поле з паролем в нашій формі. Потрібно, щоб пароль був мінімум 6 символів без пробілів:

  • I would like my password to be:

    (at least 6 characters, no spaces)

  • Запис \S означає «будь-який символ окрім пробілу», а {6,} означає «мінімум 6 разів». Хочете позначити максимальна кількість символів, можна використовувати інтервал, наприклад, \S{6,10}.

    Як і required, атрибут pattern забороняє відправку форми, якщо є невідповідності з шаблоном. Також вискочить повідомлення з помилкою.

    Якщо ви поставили неправильний регулярний вираз, воно буде проігноровано в цілях валідації.

    Атрибут pattern підтримується в деякій мірі у всіх браузерах, починаючи з Firefox 4, Safari 5, Chrome 10, Opera 11, IE10 і Android 2.3. Під «деякою мірою» розуміється, що зараз всі браузери підтримують pattern. Однак Safari і Android до версії 4.4 дозволяють відправку форм з невалидными даними.

    Крім того, як з placeholder і required, ви можете використовувати значення цього атрибута для JS валідації в браузерах без підтримки.

    Атрибут disabled

    Булев атрибут disabled з’явився задовго до HTML5, але в цій специфікації він був значно розширений. Атрибут працює з усіма полями форми за винятком нового output. На відміну від попередніх версій HTML специфікація HTML5 дозволяє встановлювати атрибут disabled на тег fieldset, тим самим застосовуючи його до всіх тегам всередині набору.

    Як правило, вміст полів з disabled виділено сірим кольором за замовчуванням. Браузери не дозволяють полів з disabled отримувати фокус. За допомогою цього атрибута часто відключають кнопку «надіслати» до тих пір, поки не будуть правильно заповнені всі поля.

    Стилізувати відключені поля можна з допомогою псевдокласу :disabled, активні поля з допомогою :enabled або :not(:disabled).

    Поля з атрибутом disabled не відправляються на сервер, тобто ви не зможете їх обробити. Якщо необхідно, щоб користувач бачив значення і міг його відправляти, але не редагував його, використовуйте атрибут readonly.

    Атрибут readonly

    Атрибут readonly схожий на disabled: користувачеві забороняється редагування поля. Але на відміну від disabled таке поле може отримати фокус, і його значення передається на сервер.

    У формі коментарів можна додати поля з URL сторінки або заголовком статті, на яку залишається коментар, даючи користувачеві зрозуміти, що ми збираємо цю інформацію без можливості її змінювати:

    Article Title

    Атрибут multiple

    Наявність атрибут multiple вказує на те, що в полі можна вбити кілька значень. Атрибут був доступний і в попередніх версіях HTML, але застосовувався тільки до тегу select. В HTML5 атрибут можна застосовувати до типів file, email і range. Якщо атрибут є, то можна вибрати більше одного файлу, прописати кілька адрес електронної пошти через кому. У діапазону в такому випадку буде два слайдера.

    Атрибут multiple для типу file підтримується у всіх браузерах з mobile Safari 7 і IE10, але на полях range на момент написання статті даний атрибут ще не підтримується ні в одному браузері.

    Замітка: пробілами або комами?

    Ви могли помітити, що на клавіатурі на iOS в полях типу email дозволений пробіл. Прогалини неприпустимі в адресах, але браузери дозволяють розділяти на кілька адрес за допомогою пробілу і обов’язкової коми. Спочатку прогалини були заборонені в деяких браузерах, але пізніше в специфікацію включили можливість додавання пробілу після коми.

    Атрибут form

    Не плутати з тегом form. Атрибут form HTML5 дозволяє зв’язати елементи з формами, в які вони не вкладені. Тобто тепер можна асоціювати набір полів або одне поле з будь-якою іншою формою в документі. Цей атрибут вирішує стару проблему з неможливістю вкладати форми. Самі форми все ще вкладати не можна, але можна асоціювати «вкладені» поля з формою, яка не є їм прямим батьком.

    В якості значення атрибута form приймає ID тега form, з яким потрібно асоціювати набір або одне поле.

    Якщо атрибут відсутній, поле буде передано разом з тією формою, в яку вкладено. Якщо атрибут form був спочатку доданий, а потім видалений, використовуйте el.removeAttribute(‘form’), а не el.setAttribute(‘form’, «). Якщо атрибут form вставлений, але порожній або веде на невірний ID форми, поле буде виключено з відправлення з усіх форм, в тому числі і з форми-предка.

    Атрибут підтримується у всіх браузерах з Android 4 і IE 11.

    Атрибут autocomplete

    Атрибут autocomplete відповідає за те, чи буде форма або її поля заповнюватися автоматично. Для більшості полів функціонал реалізується через випадаючий список, який з’являється, як тільки користувач починає друкувати. З полями типу password атрибут зберігає пароль в браузер.

    Якщо autocomplete не вказано в формі або полях, то значення за замовчуванням ставиться в on. Ви могли помітити це, коли останній раз заповнювали форму. Для відключення автозаповнення використовуйте autocomplete=»off». Відмінна ідея для такої чутливої інформації, як номери кредитних карт або дані, які не можна повторно використовувати, наприклад, CAPTCHA.

    Автозаповнення контролюється браузером і ігнорує налаштування розробника. За замовчуванням варто значення on, однак браузер повинен активувати автозаповнення для своєї роботи. Однак, якщо задати autocomplete в off, це переписує значення on для відповідних полів форми.

    Елемент datalist і атрибут list

    Списки даних підтримуються у всіх браузерах, починаючи з IE10 і Android 4.4.3 за винятком Safari. У стандартній формі вони виконують загальні вимоги: текстове поле з заданими параметрами автозаповнення. На відміну від select користувачі можуть вбити будь-яке значення, але воно буде представлено за допомогою заданого набору опцій.

    HTML5 атрибуты форм

    Малюнок 1 елемент datalist в Firefox

    Для деяких типів полів типу text та date випадаючий список опцій з’являється тільки після початку введення, як показано на рисунку 4.4. Для типу range браузер буде показувати маленьку зарубку біля слайдера, вказуючи на те, де знайдені пропоновані опції. Для типу color представлені зразки кольору з опцією перемикання на стандартний пікер кольору для пристрою, якщо потрібно вибрати інший колір.

    Тег datalist, як і select, є списком опцій, які розташовані в тегах option. Datalist асоціюється з input за допомогою атрибута list на инпуте. В якості значення атрибута list приймає ID тега datalist. Тег datalist можна прив’язати до декільком полям.

    На практиці це виглядало б так:

    Favorite Color

    Атрибут autofocus

    Булев атрибут autofocus моментально привласнює полю форми фокус. Отримати автофокус може тільки один елемент на сторінці. Для кращого користувацького досвіду та доступності краще не використовувати даний атрибут.

    Поля типу input підтримують дуже багато атрибутів, деякі з яких створені для певних типів. Серед них: alt,src, height і width для типу image і step, min і max для числового типу, в тому числі дат і діапазонів. Dirname говорить серверу про спрямованості поля форми. formaction, formenctype, formmethod, formnovalidate і formtarget задають методи перезапису атрибутів форми. Inputmode говорить браузеру, яку клавіатуру показати, коли пристрій може відобразити динамічну клавіатуру. minlength і maxlength задають довжину поля. checked, name, size, value type і повинні бути вам вже знайомі, а ось псевдокласи :checked :default можуть бути новими для вас. У наступній статті ми розповімо вам про деякі з цих атрибутів та їх поля.