HTML5 Форми: розмітка

20

Від автора: Це перша частина серії з трьох частин веб-формах на HTML5. Ми розкриємо основи розмітки у цій статті, перш ніж перейти до стилізації і JavaScript API валідації на клієнті. Я рекомендую прочитати цю статтю навіть якщо ви вже знайомі з формами – там багато атрибутів і прийомів.

HTML5 Форми: розмітка

Переклад виконала: Валерія Заруцька

Мене звуть Валерія, я живу в Києві. Перекладач в минулому, зараз я фронт-енд розробник. Непогано володію HTML5 і CSS3, Twitter bootstrap, адаптивної версткою, працюю з jQuery, активно вивчаю чистий JavaScript, маю уявлення про MVC фреймворках, зокрема Ruby on Rails.

HTML-форми можуть бути поширені, але вони є невід’ємною частиною більшості сайтів і додатків. У четвертій версії HTML поля вводу були обмежені списком нижче:

input type=»text»

input type=»checkbox»

input type=»radio»

input type=»password»

input type=»hidden» — для даних, які користувач не може бачити

input type=»file» — для завантажень

textarea — для тексту більшого розміру

select — для випадаючих списків

button — в основному використовується для відправки форми, хоча input type=»submit» і input type=»image» також можуть використовуватися.

Також:

можливості стилів CSS були обмежені,

настроювані елементи управління і колірні селектори, повинні були здаватися в коді, та

валідація на стороні клієнта вимагала JavaScript.

Додаткові типи полів введення в HTML5

Було представлено безліч нових типів input. Вони надають нативну допомогу при введенні і валідацію без використання коду на JavaScript:

email: введення email-адреси

tel: введення номера телефону – строгих обмежень по синтаксису немає, але розриви рядків будуть видалені

url: введення посилання

search: поле пошуку з видаленням розривів рядків

number: число знаків після коми

range: елемент керування для введення приблизної величини, зазвичай виглядає як слайдер

date: введення числа, місяця та року

datetime: введення числа, місяця, року, години, хвилини, секунди і мікросекунди в залежності від виставленого часового поясу

datetime-local: введення дати та часу без часового поясу

month: введення місяця і року без часового поясу

week: введення номера тижня без часового поясу

time: введення часу без часового поясу

color дозволяє вибрати колір

Атрибути полів вводу

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

Хоча ви можете додавати їх, якщо ви віддаєте перевагу більш строгий синтаксис, схожий на XHTML

name: поле введення імені

value: початкове значення

checked: ставить прапорець або включає перемикач

maxlength: максимальна довжина введеного рядка. Також може застосовуватися до елементів textarea в HTML5

minlength: мінімальна довжина введеного рядка. Це задокументовано, але на момент написання, підтримка браузерів погана і цей атрибут викликає помилку валідаторів. Альтернативне рішення – це pattern=».{3,}», що змусить поле вводу мати хоча б три символи

placeholder: текст підказки, що відображається в полі вводу

autofocus: фокус буде на цьому (неспрятанном) поле при завантаженні сторінки

required: означає, що має бути введено

pattern: засвідчує, що введене значення відповідає зразку

min: мінімальне допустиме значення (числа і дата)

max: максимальне допустиме значення (числа і дата)

step: крок значення. Наприклад, input type=»number» min=»10″ max=»19″ step=»2″ дозволить тільки значення 0, 12, 14, 16 або 18.

autocomplete: надає браузеру підказку для автозаповнення, наприклад, «розрахунковий імейл» чи може бути включено і вимкнено

inputmode: визначає механізм введення. Самі корисні налаштування:

verbatim — дослівний enter, такий як імена користувачів, latin — латинське написання, таке як поля введення, latin-name — імена, що починаються з, latin-prose — рядкове вміст, такий як повідомлення, твіти, і т. д., numeric — числове значення, де не підходять значення number або range, наприклад, номер кредитної карти

size: розмір в символах для полів вводу тексту або password або в пискелях для полів вводу типів email, tel, url або

search. Можливо краще всього уникати цього атрибута, т. к. стилі для полів вводу слід застосовувати з допомогою CSS.

rows: кількість текстових рядків (тільки для textarea)

cols: кількість тексту в колонках (тільки для textarea)

list: вказує на набір варіантів з datalist

spellcheck: приймає значення true та false для включення/вимикання перевірки правопису

form: ID форми, якій належить це поле вводу. В цілому, поля введення, повинні бути вкладені у форму, але цей атрибут дозволяє полів вводу перебувати в будь-якому місці сторінки

formaction: вказує посилання для перевизначення дії форми при відправленні (тільки для кнопок відправлення/зображень)

formmethod: вказує GET або POST для перевизначення методу форми (тільки для кнопок відправлення/зображень)

formenctype: визначає тип вмісту при відправленні (text/plain, multipart/form-data илиapplication/x-www-form-urlencoded тільки для кнопок відправлення/зображень)

formtarget: визначає цільове вікно/фрейм для перевизначення атрибуту форми target при відправленні (тільки для кнопок відправлення/зображень)

readonly: значення поля введення не може бути змінено, хоча воно буде валидировано і відправлено

disabled: відключає полі вводу – не буде ні валідації ні відправлення

Зверніть увагу, поля date завжди повинні використовувати формат YYYY-MM-DD (рік-місяць-день) для атрибутів value, min і max. Наступний приклад робить обов’язковим введення імейла, який закінчується на @mysite.com і має фокус при завантаженні сторінки:

Списки даних

Список даних містить набір відповідних значень для будь-якого поля введення, наприклад:

Коли атрибут datalist підтримується, браузер надає варіанти автозаповнення, коли ви починаєте друкувати. Повний список зазвичай показується при подвійному кліку на елементі керування або при кліці на стрілку вниз (якщо вона показується). На відміну від стандартного випадаючого елемента select, у користувача є можливість перевизначити надані значення і записати своє власне.

Є можливість задати значення і текст в якості стандартних варіантів для елемента select, наприклад:

Internet Explorer

Але майте на увазі, що реалізація відрізняється. Наприклад, Firefox автоматично заповнює сам текст (Internet Explorer) в той час як Хром воліє значення (IE) і показує текст сірим:

HTML5 Форми: розмітка

Списки даних можуть викликатися за допомогою JavaScript якщо ви хочете підставляти дані АЈАХом.

Відключення валідації

Валідація всієї форми може бути відключена за допомогою атрибута novalidate для елемента form. Або ж, ви можете додати атрибут formnovalidate до кнопки відправки/зображенню. Пам’ятайте, що атрибут disabled відключає валідацію для поля вводу.

Поля виводу

Хоча ми обговорюємо в першу чергу поля введення, HTML5 також надає поля виводу тільки для читання:

output — результат обчислення або дії користувача

progress — полоза завантаження (атрибути значення і max визначають статус)

meter — шкала, яка може змінюватися від червоного, жовтого до в залежності від значення, заданого атрибутів value, min, max, low, high і optimum

Поділ і маркування полів вводу

Специфікація форм whatwg.org затверджує:

Кожна ділянка форми вважається параграфом, і зазвичай відокремлюється від інших елементів з допомогою елементів p

Цікаво, я зазвичай використовую div, хоча і сумніваюся, що це має велике значення з точки зору семантики. Хоча тег p коротше, хоча можливо вам знадобиться клас для зміни зовнішніх відступів. Що більш важливо, вам слід використовувати елементи label або навколо або за самим полем введення, застосовуючи атрибут for з ідентифікатором поля введення, наприклад:

First name

Last name

Email address

Sign up for our newsletter

Відсутність стандартів для елементів управління

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

Підтримка браузерами

Не кожен тип поля введення або атрибут підтримується браузерами. В цілому, більшість сучасних браузерів, починаючи з IE10, підтримують такі типи, як email та number. Однак, поля введення, що працюють з датою, на момент написання підтримуються тільки браузерами на основі движків Blink і Webkit. Браузери відобразять їх як звичайні текстові поля і проігнорують атрибути, якщо їх значення не підтримуються.

Завжди використовуйте правильний тип!

Важливо використовувати правильний тип даних використовується для даних, які ви запитуєте. Це може здаватися очевидним, але ви опинитеся в ситуаціях, коли вам захочеться використовувати стандартне текстове поле. Зверніть увагу на дати. Підтримка має заплаточный характер і веде до проблем у реалізації:

Стандартний тип поля вводу date завжди повертає значення в форматі YYYY-MM-DD (рік-місяць-день), незалежно від того, як поле вибору дати виглядає у вашій місцевості.

IE і Firefox будуть відображати стандартне поле вводу text, але ваші користувачі повинні будуть вводити дані у форматі MM-DD-YYYY для США і DD-MM-YYYY для Європи.

Поле вибору дати на JavaScript, таке як надане jQuery UI дозволяє задавати власний формат або навіть YYYY-MM-DD для послідовності – але ви не можете бути впевнені в тому, що включений JavaScript.

Просте рішення – це відмовитися від використання поля введення date і повернутися до типу text і реалізувати свій власний вибір дати. Не робіть цього. Ви ніколи не створите своє власне поле вводу даних, яка буде працювати на всіх пристроях і для будь-яких дозволів екрану, підтримує клавіатуру, мишу і сенсорну панель і продовжує працювати з відключеним JavaScript. Зокрема, мобільні браузери часто знаходяться попереду своїх настільних побратимів і реалізують хороші сенсорні елементи керування.

Майбутнє за типами полів вводу HTML5. Використовуйте їх і, якщо необхідно, додайте полизаполнение в JavaScript у тих випадках, коли необхідна крос-браузерность. Але пам’ятайте про…

Валідація на стороні сервера

Валідація браузерами не гарантована. Якщо навіть ви змусите всіх використовувати останню версію Chrome, ви ніколи не зможете запобігти нижченаведене:

баги браузера або помилки JavaScript, пропускають невалідні дані

користувач може змінити ваш HTML-код і скрипти, використовуючи інструменти браузера

відправлення з систем за межами вашого контролю,

або підміну даних між браузером і вашим сервером (однозначно через HTTP).

Валідація на клієнті ніколи не була і не буде заміною для серверної валідації. Валідації даних на стороні сервера необхідна. На клієнті її непогано мати.

Нарешті, пам’ятайте, що дату можна отримувати у форматі YYYY-MM-DD або будь-якому іншому, який ви задасте MM-DD-YYYY, DD-MM-YYYY, тощо). Перевіряйте чотири перші символу або використовуйте рідні методи парсинга у мові/фреймворку при необхідності.

Ми розглянули багато в цій статті, у наступному – ми звернемося до властивостей CSS, що належать до форм.