Форми: докладне керівництво

16

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

Але в багатьох випадках, в дизайні форми показано статично або мають окремі макети. Часто вирішальним у розробці форми стає те, як з нею можна взаємодіяти. Коли користувач клікає по кнопці-перемикачу, з’являються додаткові поля вводу. Як це відбувається? Більше того, чи розуміє користувач, що зараз сталося?

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

Це керівництво не прагне до того, щоб пояснити, що повинно бути в вашій формі, як поля повинні бути згруповані і розташовані, де розташувати першо — та другорядні кнопки, і так далі. Вже є безліч чудових ресурсів, які розкривають ці теми. (Таких як книги Люка Вроблевски, Кароліни Джаретт і Джеррі Гафні. Або стаття Джастіна Мисфуда).

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

В першому пості цього керівництва я показав, як розташувати елементи форми і вирівняти мітки так, як ви хочете, використовуючи HTML і фреймворк Foundation.

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

Типи полів вводу

У формах використовуються кілька різних HTML-елементів. У кнопок є власний елемент (button), випадаючі списки – (select та option), а багаторядкові текстові поля – (textarea).

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

Якщо ви прямуєте раді і дійсно набираєте приклади, то вам потрібно створити новий проект Foundation, відкрити файл index.html і видалити вміст зразка (подивіться цей пост по роботі з Foundation). Потім додайте порожній елемент form необхідні елементи розмітки Foundation.

Input types

Коли ви додасте всі необхідні елементи і класи, ви просто можете додавати кожен приклад всередині тегів fieldset, після елемента legend.

Замітка: у прикладах коду нижче, ви помітите, що всі елементи input мають атрибути name і id. Чому? Тому що вам потрібен id для ідентифікації окремих елементів HTML (щоб застосувати стилі CSS, і т. д.) Але для цієї форми необхідно наявність name, щоб дані відправлені на сервер мали відповідні мітки. Це не справжні форми, це всього лише прототипи. Але, це хороша практика – робити правильно з самого початку. Золоте правило: для елементів input, використовуйте id, name, і задавайте їм однакове значення. (Виняток становлять перемикачі – я поясню, чим вони відрізняються нижче).

Текст і його варіанти

Текст

Type some text

Форми: докладне керівництво

Елемент input типу text – це просте текстове поле вводу. Немає ніяких обмежень щодо того, що користувач може надрукувати (хоча є атрибути, які дозволяють вам вводити обмеження, наприклад, обмежити довжину вмісту поля – дивіться нижче).

Пароль

Password

Форми: докладне керівництво

Елемент input типу password веде себе точно також як текстове поле введення, за винятком того, що все надруковане буде ховатися.

Email

Email address

Форми: докладне керівництво

Елемент input типу email не відрізняється від текстового, за винятком того, що на телефонах і планшетах на клавіатурі з’являються кнопки @ точки і відразу після того, як курсор поставлений у це поле, і вам не доведеться шукати ці символи:

Форми: докладне керівництво

Клавіатура показана у відповідності з атрибутом

Він також надає безкоштовну валідацію, якщо ви введете щось інше, а не дійсний email-адресу і відправите форму, браузер покаже щось подібне до цього:

Форми: докладне керівництво

(У будь-якому випадку, це відноситься тільки до настільним браузерам. Мобільні браузери поки такого не роблять.)

Посилання

URL

Форми: докладне керівництво

Поле введення типу url відрізняється від email набором клавіатури, тут присутні клавіші / і точки (і, можливо, інші зразок .com).

Форми: докладне керівництво

Знову настільні браузери автоматично валидируют:

Форми: докладне керівництво

Номер телефону

Phone number

Форми: докладне керівництво

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

Форми: докладне керівництво

Клавіатура показана у відповідності з атрибутом

Номер

A number

Форми: докладне керівництво

Тип поля введення number не вводить обмежень на вміст, але на смартфонах (принаймні на iPhone), у вас з’явиться звичайна клавіатура, переведена в режим введення цифр і символів:

Форми: докладне керівництво

Клавіатура показана у відповідності з атрибутом

Різні настільні браузери показують це поле вводу по-різному. В IE і Firefox, воно виглядає так само як і текстові, але в Chrome і Safari, з’являються кнопки збільшення та зменшення значення:

Форми: докладне керівництво

Ви можете задати мінімальні і максимальні значення, а також розмір кроку, що вплине на поведінку кнопок.

Автозаповнення

Input + datalist
Afghanistan
Akrotiri
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antarctica
Antigua and Barbuda
Argentina
Armenia
Aruba
Ashmore and Cartier Islands
Australia
Austria
Azerbaijan

Пусте:

Форми: докладне керівництво

В процесі набору:

Форми: докладне керівництво

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

Інші типи

В HTML5 було введено безліч типів елементів input, але більшість з них не підтримуються широко. Вони включають тип color і інші типи полів вводу пов’язаних з датою і часом, таких як date, time, datetime, datetime-local, week, month.

Зараз краще використовувати плагін jQuery Datepicker.

Інші

Прапорці

Input type of checkbox
Yes please!
This too!

Форми: докладне керівництво

Якщо ви задасте елемента input тип checkbox, то ви отримаєте прапорець. Зазвичай їх мітки розташовані праворуч. Для прапорців атрибут for особливо важливий – він робить позначку клікабельний – натискання на мітку аналогічно натисненню на сам прапорець. Додавання атрибут checked (який не приймає аргументів) робить прапорець активним при завантаженні сторінки. Для прототипу це не має значення, але в цій формі у прапорця повинен бути атрибут value.

Перемикачі

Input type of radio
One
Two

Форми: докладне керівництво

Як і з прапорцями, за елементом перемикачем слід label мітка. Атрибути for і checked тут працюють аналогічним чином. Тут, не забувайте задати всім перемикачів в групі одне і те ж значення атрибута name – це повідомить браузеру, що вони разом і тільки один з них може бути обраний одночасно. Знову, так само як і з прапорцями, кожен перемикач повинен мати атрибут value.

Слайдери

Input type of range (0-100)

Форми: докладне керівництво

Тип range, заданий елемента input показує слайдер. Також як і з числовим полем, ви можете задати значення мінімуму, максимуму та розмір кроку. Але і ці обмеження не мають особливого значення самі по собі – якщо точність не важлива, можливо, вам буде досить додати текст перед і після елемента input, щоб показати мінімальне і максимальне значення. Але в більшості випадків, ви швидше за все захочете надати користувачеві певний відгук, щоб користувач знав, яке значення він вибрав.

Це не складно і вимагає зовсім небагато JavaScript коду, ви побачите його через хвилину, нічого серйозного. Нам потрібно взяти вже існуючий код HTML і додати елемент output, щоб показати значення. І ми додаємо атрибут oninput до поля input, щоб повідомити йому, що робити при зміні значень.

У цій версії елементи input і output розташовані в окремих колонках, і я поставив полю input ширину 100%, так що воно розтягнеться, щоб заповнити свою колонку:

Input type of range (0-100)
50

Форми: докладне керівництво

Маленький шматочок JavaScript коду, поміщений в значення атрибута oninput, встановлює значення поля output (range_value.value) значення поля input (range_input.value).(range_value це ідентифікатор поля output і range_input це ідентифікатор поля вводу. Додавання точки і value означає «значення атрибута value елемент з ідентифікатором».)

Випадаючі списки

Drop-down list
Select…
Option 1
Option 2
Option 3

Закритий:

Форми: докладне керівництво

Відкритий:

Форми: докладне керівництво

Випадаючі списки не є елементами input — вони створюються з елемента select, що містить деяку кількість елементів option.

Це досить просто. Те, що я додав тут – це перший елемент option — він підказує користувачеві, що робити, але не є варіантом, який можна вибрати. (Атрибут selected означає, що елемент буде показаний при закритому списку до того, як користувач почне взаємодія.)

Без цієї опції, «Option 1» буде вибрано за промовчанням. Зазвичай ми не хочемо, щоб щось було вибрано за промовчанням.

Текстова область

Textarea

Форми: докладне керівництво

Поле textarea схоже на текстове поле введення, тільки воно дозволяє вводити кілька рядків тексту. Також як і всі інші поле введення, схожі на текстове, його ширина займає 100% колонки, в яку воно поміщено.

Що стосується висоти, є 2 способи задати її. Перший спосіб – за допомогою CSS (або прямо до елементу додати атрибут style). Другий – використовувати атрибут rows, так як я це роблю тут. Це робить textarea достатньо широкою, щоб вмістити 6 рядків тексту.

(Атрибут style=»height: auto;» потрібен для того, щоб обійти баг фреймворку Foundation. Якщо ви задасте певну висоту замість використання рядків, то вам не знадобиться.)

Кнопки

Форми: докладне керівництво

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

Кнопки у формах – це тег input типу submit або button. (submit – це спеціальний вид кнопки для відправки форми. Правильне місце для їх розташування – після закриваючого тега fieldset.

Для того, щоб застосувати симпатичні стилі Foundation для кнопок, призначаємо кнопку «Відправити» клас .button, в той час як кнопка «Скасувати» має клас .secondary, щоб вона менше виділялася візуально.

Foundation також дозволяє вам використовувати елемент a для створення кнопок – просто поставте йому клас .button. Він також дозволяє вам робити кнопки менше, скругляющі куточки, і так далі за допомогою додавання класів.

Інші корисні можливості Foundation

Foundation дозволяє вам робити різні цікаві речі, які не підтримуються стандартними елементами HTML. Наприклад, ви можете поєднати поле вводу з міткою, щоб отримати щось подібне:

Форми: докладне керівництво

Ви можете побачити код тут. Ви також можете поєднати поле вводу з кнопкою, щоб отримати ось це:

Форми: докладне керівництво

Код для прикладу вище тут.

Важливі атрибути

Я згадував кілька атрибутів вище, таких як id, name, checked для прапорців і перемикачів, min, max і step для числових і діапазонних полів, і так далі. Але є кілька інших, про які вам необхідно знати.

autocomplete

Браузери намагаються по можливості допомагати нам, автоматично заповнюючи поля форм. Але це не завжди доречно, наприклад, для конфіденційної інформації, такої як банківський рахунок або номер кредитної картки (і навіть іноді паролі, хоча будьте готові викликати роздратування з цим). Задаючи значення off атрибуту autocomplete, поле введення каже браузеру не заповнювати його автоматично.

autofocus

На кожній сторінці, ви можете задати одній (і тільки одному) елементу форми атрибут autofocus. Це поле буде у фокусі коли сторінка завантажиться, так що користувач відразу зможе взаємодіяти з ним, без необхідності клікати по ньому, або переходити на вкладку.

disabled

Форми: докладне керівництво

Поле введення, якому заданий атрибут disabled затінюється сірим, і ви не можете з ним взаємодіяти. Так може відбуватися тому, що воно нерелевантно, якщо інший елемент не має певного значення. (Наприклад, якщо у вашій формі є секція «Як ви дізналися про нас» з перемикачами, останнім може бути «Інший варіант» з текстовим полем, таким чином, користувач може надрукувати щось чого немає в списку. Має сенс зробити це поле недоступним до тих пір, поки «Інший варіант» не вибраний. Я розкрию цю тему повніше в наступному пості.)

maxlength

Текстові поля введення (text, e-mail, url, tel тощо) можуть мати атрибут maxlength. Це дозволить вам задати максимальну довжину в символах. Більшість браузерів не дозволять вам більше зазначеного ліміту. Це зручно для таких речей як номер телефону, які не можуть бути довшими, ніж певну кількість символів.

multiple

Елемент select і input типу email (типу file, для завантаження файлів, про які я не розповідав в цьому пості) можуть мати атрибут multiple. Він дозволяє вибирати кілька елементів з випадаючого списку або вводити кілька email-адрес відповідно.

Форми: докладне керівництво

Зверніть увагу на те, як по-іншому відображається елемент select, коли дозволений вибір кількох елементів.

pattern

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

placeholder

Форми: докладне керівництво

Атрибут placeholder розташовує текст підказки всередину тега input (або textarea), щоб дати користувачеві уявлення про те, що йому потрібно надрукувати. Він зникає коли ви клікаєте по елементу input. Деякі сайти використовують його, щоб позначати які поля є обов’язковими для заповнення.

ВАЖЛИВО: Не використовуйте цей атрибут замість елемента label. Це дуже погано з точки зору юзабіліті і доступності.

required

Атрибут required означає, що це поле обов’язкове. Воно не змінює свій зовнішній вигляд (зірочка не з’являється магічним чином біля мітки), але якщо ви відправите форму, не заповнюючи це поле, ви отримаєте корисне повідомлення:

Форми: докладне керівництво

tabindex

Атрибут tabindex (який має числове значення) визначає порядок, згідно з яким елементу потрапляють у фокус, коли користувач натискає клавішу Tab.

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

Інформація до роздумів

Ми стикаємося з додатковими випробуваннями на планшетах і смартфонах. Як часто вам доводилося логінитися або реєструватися на сайті з телефону і бачити щось подібне?

Форми: докладне керівництво

На m.hpdirect.com поки я вводжу ID користувача в форму логіна, мій телефон автоматично робить першу букву заголовної і хоче виправити те, що я друкую відповідно до свого словника. Тому мені потрібно натиснути на маленький хрестик, щоб відмовитися від авто виправлення, і повернутися назад, щоб змінити головну M на малу.

Для полів як це, є два атрибути, які ми можемо додати, щоб відключити це антисоціальна поведінка: autocorrect і autocapitalize.

Вони обидва приймають значення: on або off. За замовчуванням вони мають значення on.

Висновок

Сподіваюся, тепер у вас є гарне уявлення про цеглинках, які ви можете використовувати для побудови прототипів форм. В наступному пості я покажу як групувати поля вводу в логічні (і менш перевантажені) групи і як допомагати користувачам при заповненні форми.