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

35

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

Атрибут required

Булев атрибут required говорить браузеру, що форму можна надіслати тільки при заповненні цього поля. Тобто поле не може бути порожнім. Однак це також означає, що поле може підтримувати тільки задані типи значень. Далі у цій главі ми розповімо про різні способи встановлення певних типів даних для форми.

Якщо обов’язкове поле пусте, форма не відправиться. Opera, Firefox, Internet Explorer 10+ Chrome і видають користувачеві повідомлення з помилкою. Наприклад, «будь ласка, заповніть поле» або «необхідно вказати значення».

Замітка: пора зосередитися

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

По термінології JS подія focus спрацьовує на елементі, коли він отримує фокус, а подія blur запускається при втраті фокуса.

В CSS для стилізації елементів з фокусом можна використовувати псевдоклас :focus.

Атрибут required підходить для будь-яких типів полів крім button, submit, image, range, color і hidden. У всіх цих типів є значення за замовчуванням, тому даний атрибут тут зайвий. Як і з іншими булевими операторами атрибутами, синтаксис простий: required або required=»required» на XHTML.

Додамо атрибут required в форму реєстрації. Зробимо обов’язковими поля ім’я, email, пароль і початкова дата оформлення підписки:

  • My name is:
  • My email address is:
  • My website is located at:
  • I would like my password to be:

    (at least 6 characters, no spaces)

  • On a scale of 1 to 10, my knowledge of HTML5 is:
  • Please start my subscription on:
  • I would like to receive copies of The Herald HTML5
  • Also sign me up for The Chronicle CSS3

Замітка: покращуємо доступність

Для поліпшення доступності можна додати WAI-ARIA атрибут aria-required=»true». Велика частина браузерів і скрін рідерів вже мають вбудовану підтримку атрибута required, так що скоро WAI-ARIA атрибут стане не потрібен. Короткий вступ в WAI-ARIA дивіться у Додатку Ст.

На рисунках 4.1, 4.2 та 4.3 показано поведінку атрибута required при спробі відправити форму.

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

Малюнок 1 повідомлення про перевірку обов’язкового поля в Firefox

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

Малюнок 2 повідомлення в Opera

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

Малюнок 3 Google Chrome

Стилізація обов’язкових полів форми

Обов’язкові поля форми можна стилізувати через псевдоклас required, необов’язкові поля через псевдоклас optional (або з допомогою негативного псевдокласу :not(:required)). Також можна стилізувати валідні і невалідні поля з допомогою :valid і :invalid. Ці псевдокласи і трохи CSS магії підкажуть зрячим користувачам, які поля обов’язкові, а також повідомлять про успішне введення даних:

input {
background-position: 0% 50%;
background-repeat: no-repeat;
padding-left: 15px;
}
input:required {
background-image: url(‘../images/required.png’);
}
input:focus:invalid {
background-image: url(‘../images/invalid.png’);
}
input:focus:valid {
background-image: url(‘../images/valid.png’);
}

Ми додамо фонове зображення (зірочку) до обов’язкових полів форми. Використовувати згенерований контент на полях input не вийде, він замінюється на порожні елементи. Тому ми додамо фонове зображення. Також додамо різні фонові зображення для валідних і валідних полів. Зміни будуть видні тільки при отриманні елементом фокуса, щоб не захаращувати форму.

Попередження: Firefox застосовує стилі до невалидным елементів

Зверніть увагу, що Firefox застосовує свої стилі до невалидным елементів (червона тінь). Подивитися приклад можна на малюнку 1 вище. Можливо, ви захочете позбутися від нативної тіні за допомогою CSS:

:invalid { box-shadow: none; }

Порада: таргетовані стилі для старих браузерів

Старі браузери типу IE8 і IE9 не підтримують псевдоклас :required, але можна використовувати таргетовані стилі з допомогою селектора з атрибутом:

input:required,
input[required] {
background-image: url(‘../images/required.png’);
}

Цей атрибут можна використовувати як хук для валідації форм в браузерах без підтримки HTML5 валідації форм. JS код може перевіряти инпуты без значень на наявність атрибута required і не відправляти форму, якщо такий знайдено.

Атрибут placeholder

Атрибут placeholder дозволяє відображати невелику підказку (якщо така є) усередині поля форми, яка буде говорити користувачеві, який тип даних приймається даним полем. Текст плейсхолдера пропадає, коли поле отримує фокус, і користувач ввів хоча б один символ. Підказка з’являється знову, коли значення стає null. Розробники вже багато років користувалися схожим функціоналом на JS. Додавалося тимчасове значення, яке по фокусу очищалося. Зараз же HTML5 атрибут placeholder дозволяє зробити це нативно без підключення JS. Текст залишається видимим до тих пір, поки не буде введено значення.

У формі реєстрації на сайті The HTML5 Herald ми додамо атрибут placeholder до поля URL і стартової дати підписки:

  • My website is located at:
  • Please start my subscription on:
  • В IE підтримка атрибуту placeholder з’явилася тільки з версії 10. Текст підказки зникає, як тільки користувач ввів дані. Тому не варто покладатися тільки на такий спосіб інформування користувачів. Якщо текст не поміщається в поле, опишіть вимоги в атрибуті title даного поля, лейблі або поруч з полем. Багато радять додавати «наприклад, в підказку, щоб дати зрозуміти, що це плейсхолдер, а не заповнені дані.

    Всі браузери з Safari 4, Chrome 10, Opera 11.1, Firefox 4, Android 2.3 і Internet Explorer 10 підтримують атрибут placeholder, хоча початкова імплементація placeholder видаляла текст при отриманні фокусу, а не при введенні тексту.

    Підтримка полифилов на JS

    Як і все інше в цій главі, атрибут placeholder не буде зайвою навіть в старих браузерах без підтримки.

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

    Що потрібно зробити: спершу з допомогою JS визначте браузери без підтримки. Потім за допомогою функції створіть помилковий плейсхолдер. Функція повинна визначити, в яких полях є атрибут placeholder, після чого тимчасово взяти з них контент і вставити його в якості значення атрибута value.

    Далі необхідно налаштувати два обробника подій: перший для очищення значення поля по фокусу, другий для заміни значення placeholder події blur, якщо значення поля залишилося порожнім. Якщо хочете скористатися цим трюком, перевірте, щоб значення атрибута placeholder не співпало з тим, що може вбити користувач. Можете використовувати приставку «наприклад», щоб дати зрозуміти, що плейсхолдер це просто приклад, а не правильне значення. Не забудьте очистити помилковий плейсхолдер при відправці форми. Або ви отримаєте багато “(XXX) XXX-XXXX підписок!

    Розглянемо приклад коду на PHP, який з допомогою техніки прогресивного поліпшення працює з елементами форми, у яких є атрибут placeholder.

    Полифил плейсхолдера:

    // перевірка на підтримку
    if(!Modernizr.input.placeholder) {
    // get all the form controls with the placeholder attribute
    var fcToCheck = document.querySelectorAll(«*[placeholder]»),
    frmsToCheck = document.querySelectorAll(‘form’),
    i, count;
    // проганяємо в циклі елементи форми з атрибутом placeholder,
    // копіюємо значення плейсхолдера в value, очищаємо по фокусу і
    // скидаємо значення події blur, якщо залишити поле порожнім
    for(var i = 0, count = fcToCheck.length; i < count; i++) {
    if(fcToCheck.value == «») {
    fcToCheck.value = fcToCheck.getAttribute(«placeholder»);
    fcToCheck.classList.add(‘placeholder’);
    fcToCheck.addEventListener. (‘focus’, function() {
    if (this.value==this.getAttribute(«placeholder»)) {
    this.value = «;
    this.classList.remove(‘placeholder’);
    }
    });
    fcToCheck.addEventListener. (‘blur’, function() {
    if (this.value == «) {
    this.value = this.getAttribute(«placeholder»);
    this.classList.add(‘placeholder’);
    }
    });
    }
    }
    for(i = 0, count = frmsToCheck.length; i < count; i++) {
    frmsToCheck.addEventListener. (‘submit’, function(e) {
    var i, count, plcHld;
    // спершу робимо все перевірки з обов’язковим
    // елемента і валідації форми.
    // видаляємо плейсхолдер тільки перед відправкою форми
    plcHld = this.querySelectorAll(‘[placeholder]’);
    for(i = 0, count = plcHld.length; i < count; i++){
    //якщо плейсхолдер все ще дорівнює value
    if(plcHld.value == plcHld.getAttribute(‘placeholder’)){
    // не відправляємо, якщо є required
    if(plcHld.hasAttribute(‘required’)) {
    // створюємо повідомлення з помилкою
    plcHld.classList.add(‘error’);
    e.preventDefault();
    } else {
    // якщо немає required, очищаємо value перед відправкою.
    plcHld.value = «;
    }
    } else {
    // видаляємо застаріле повідомлення про помилку
    plcHld.classList.remove(‘error’);
    }
    }
    });
    }

    Перше, на що слід звернути увагу в цьому скрипті – це те, що для визначення підтримки атрибуту placeholder ми використовуємо JS бібліотеку Modernizr. В Додатку А Modernizr описано більш докладно. Зараз же достатньо знати, що ця бібліотека дає нам цілий набір властивостей з true та false для певних HTML5 і CSS3 нововведень. Властивість, яку ми будемо використовувати, говорить саме за себе. Modernizr.input.placeholder буде true, якщо браузер підтримує placeholder, і false, якщо немає.

    Якщо ми визначили, що placeholder підтримується, необхідно взяти всі елементи на сторінці з атрибутом placeholder. Далі у всіх полів перевіряється значення на порожнечу, після чого значення замінюється на значення атрибута placeholder. В процесі всього цього елементу додається клас placeholder, через який можна освітлити колір шрифту через CSS або зробити його навпаки більше схожим на рідній. Коли користувач фокусується на поле з помилковим плейсхолдером, скрипт очищає значення і видаляє клас. Коли користувач зміщує фокус, скрипт перевіряє поле на значення. Якщо воно порожнє, текст плейсхолдера і клас повертаються.

    Перед відправкою форми необхідно перевірити всі поля форми на збіг значення з атрибутом placeholder. Також можна було б перевірити, чи залишився клас placeholder на обов’язкових полях при відправці форми. Якщо в формі потрібно щось виправити, ми формуємо повідомлення про помилку і забороняємо відправку. Якщо форма валидна, очищаємо значення плейсхолдеров. Очищаємо тільки плейсхолдеры обов’язкових полів.

    Перед додаванням кнопки скидання форми подумайте, а чи захочуть ваші користувачі стерти всі дані. Якщо відповідь так, і ви додасте кнопку скидання, врахуйте, що після натискання на reset помилкові плейсхолдеры зникнуть, а клас placeholder залишиться, так як він використовується в полифиле.

    Це хороший приклад HTML5 полифила: за допомогою JS ми додаємо підтримку тільки ті браузери, у яких її немає. І робимо це ми з допомогою HTML5 елементів і атрибутів, які вже є в розмітці, не вдаючись до додаткових класів і жорстким значень в PHP коді.

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