Таблиця 2. Атрибути тега
Атрибут
Значення / опис
disabled
Якщо атрибут присутній, то група пов'язаних елементів форми, що знаходяться всередині контейнера , відключені для заповнення та редагування. Використовується для обмеження доступу до деяких полів форми, що містять раніше введені дані. Атрибут використовується без вказівки значення. .
form
name
Визначає ім'я , яке буде використовуватися для посилання на елементи JavaScript, або для посилання на дані форми після заповнення та відправки форми. Є аналогом атрибуту id.
3. Створення полів форми
Елемент створює більшість полів форми. Атрибути елемента відрізняються в залежності від типу поля, для якого використовується цей елемент.
За допомогою стилів css можна змінити розмір шрифту, тип шрифту, колір та інші властивості тексту, а також додати межі, колір фону та фонове зображення. Ширина поля задається властивістю width.
Таблиця 3. Атрибути тега
Атрибут
Значення / опис
accept
Визначає тип файлу, дозволеного для надсилання на сервер. Вказується тільки для . Можливі значення: file_extension - дозволяє завантаження файлів із зазначеним розширенням, наприклад, accept=".gif", accept=".pdf", accept=".doc" audio/* - дозволяє завантаження аудіофайлів video/* - дозволяє завантаження відеофайлів image/* — дозволяє завантажувати зображення media_type — вказує на медіа-тип файлів, що завантажуються.
alt
Визначає альтернативний текст для зображень, вказується тільки для .
autocomplete
Відповідає за запам'ятовування введених у текстове поле значень та автопідстановку їх при наступному введенні: on — означає, що поле не захищене, і його значення можна зберігати та витягувати, off - відключає автозаповнення для полів форм.
autofocus
Дозволяє зробити так, щоб у завантажуваній формі те чи інше поле введення вже мало фокус (було обрано), будучи готовим до введення значення.
checked
Атрибут перевіряє, чи встановлено прапорець за промовчанням під час завантаження сторінки для полів типу type="checkbox" та type="radio" .
disabled
form
Значення атрибута має дорівнювати атрибуту id елемента
formaction
Задає url файлу, який оброблятиме введені в поля дані при відправленні форми. Задається лише для полів типу type="submit" та type="image" . Атрибут перевизначає значення атрибуту action самої форми.
formenctype
Визначає, як будуть кодуватись дані полів форми при відправці на сервер. Перевизначає значення атрибуту enctype форми. Задається лише для полів типу type="submit" та type="image" . Варіанти: application/-x-www-form-urlencoded — значення за промовчанням. Усі символи кодуються перед відправкою (пробіли замінюються на символ + , спеціальні символи перетворюються на значення ASCII HEX) multipart/form-data – символи не кодуються text/plain — пробіли замінюються символом + , а спеціальні символи не кодуються.
formmethod
Атрибут визначає метод, який браузер буде використовувати для надсилання даних форми на сервер. Задається лише для полів типу type="submit" та type="image" . Перевизначає значення атрибуту методу форми. Варіанти: get — значення за промовчанням. Дані з форми (пара ім'я/значення) додаються до URL-адреси і відправляються на сервер: URL?ім'я=значення&ім'я=значення post - дані форми надсилаються у вигляді http-запиту.
formnovalidate
Визначає, що дані полів форми не повинні перевірятися під час відправлення форми. Перевизначає значення атрибута неправильної форми. Можна використовувати без визначення атрибута.
formtarget
Визначає, де виводити відповідь, отриману після надсилання форми. Задається лише для полів типу type="submit" та type="image" . Перевизначає значення атрибута target форми. _parent – завантажує відповідь у батьківський кадр _top – завантажує відповідь на весь екран framename – завантажує відповідь у кадр із зазначеним ім'ям.
height
Значення атрибута містить кількість пікселів без одиниці вимірювання. Встановлює висоту поля форми типу type="image" , наприклад, . Рекомендується одночасно встановлювати як висоту, і ширину поля.
list
Є посиланням на елемент , містить його id .Дозволяє надати користувачеві кілька варіантів на вибір, коли він починає вводити значення у відповідному полі.
max
Дозволяє обмежити допустиме введення числових даних максимальним значенням, атрибут може містити ціле або дробове число. Рекомендується використовувати цей атрибут разом із атрибутом min . Працює з наступними типами полів: number, range, date, datetime, datetime-local, month, time і week.
maxlength
Атрибут визначає максимальну кількість символів, що вводяться в поле. Значення за промовчанням 524288 символів.
min
Дозволяє обмежити допустиме введення числових даних мінімальним значенням.
multiple
Дозволяє користувачеві ввести кілька значень атрибутів, розділяючи їх комою. Використовується для файлів та адрес електронної пошти. Вказується без значення атрибуту.
name
Визначає ім'я, яке використовуватиметься для доступу до елемента
pattern
Дозволяє визначати за допомогою регулярного вираження синтаксис даних, введення яких має бути дозволено у певному полі. Наприклад, pattern="(3)-(3)" - квадратні дужки встановлюють діапазон допустимих символів, в даному випадку - будь-які малі літери, число у фігурних дужках вказує, що потрібні три малі літери, після яких слід тире, далі - три цифри у діапазоні від 0 до 9.
placeholder
Містить текст, який відображається в полі введення до заповнення (найчастіше це підказка).
readonly
Не дозволяє користувачеві змінювати значення елементів форми, виділення та копіювання тексту при цьому доступне. Вказується без значення атрибуту.
required
Виводить повідомлення про те, що це поле є обов'язковим для заповнення. Якщо користувач спробує надіслати форму, не ввівши в це поле необхідне значення, на екрані з'явиться попереджувальне повідомлення. Вказується без значення атрибуту.
size
Визначає видиму ширину поля символів. Значення за замовчуванням - 20. Працює з наступними типами полів: text, search, tel, url, email та password.
src
Задає url зображення, що використовується як кнопка відправки даних форми. Вказується лише для поля .
step
Використовується для елементів, що передбачають введення числових значень, вказує величину збільшення або зменшення значень у процесі регулювання діапазону (крок).
type
button – створює кнопку.
checkbox — перетворює поле введення на прапорець, який можна встановити або очистити, наприклад, Я маю автомобіль
color — генерує палітри кольорів у браузерах, що підтримують, даючи користувачам можливість вибирати значення кольорів у шістнадцятковому форматі.
date – дозволяє вводити дату у форматі дд.мм.гггг. День народження:
datetime-local — дозволяє вводити дату та час, розділені великою англійською літерою Т за шаблоном дд.мм.гггг чч:мм. День народження - день і час:
email - браузери, що підтримують даний атрибут, будуть очікувати, що користувач введе дані, які відповідають синтаксису адрес електронної пошти. E-mail:
file — Ви можете завантажувати файли з комп'ютера користувача. Виберіть файл:
hidden - приховує елемент керування, який не відображається браузером і не дає користувачеві змінювати значення за промовчанням.
image — створення кнопки, дозволяючи замість тексту на кнопці вставити зображення.
month — дозволяє користувачеві вводити рік та номер місяця за шаблоном рргг-мм.
number - призначене для введення цілих значень. Його атрибути min, max і step задають верхню, нижню межі і крок між значеннями відповідно. Ці атрибути передбачаються у всіх елементів, які мають чисельні показники. Їхні значення за замовчуванням залежать від типу елемента. Вкажіть кількість (від 1 до 5):
password - створює текстові поля у формі, при цьому символи, що вводяться користувачем, замінюються на зірочки, маркери, або інші, встановлені браузером значки. Введіть пароль:
radio - створює перемикач - елемент керування у вигляді невеликого кружка, який можна увімкнути або вимкнути. Вегетаріанець:
range – дозволить створити такий елемент інтерфейсу, як повзунок, min/max – дозволять встановити діапазон вибору
reset — Створення кнопки, яка очищає поля форми від введених користувачем даних.
search — означає поле пошуку, за замовчуванням поле введення має прямокутну форму. Пошук:
submit - Створює стандартну кнопку, що активізується клацанням миші. Кнопка збирає інформацію з форми та надсилає її для обробки.
text — створює текстові поля у формі, виводячи однорядкове текстове поле для введення тексту.
time – дозволяє вводити час у 24-годинному форматі за шаблоном чч:мм. У підтримуючих браузерах воно відображається як елемент керування у вигляді числового поля введення зі значенням, що змінюється за допомогою миші, і допускає введення лише значень часу. Вкажіть час:
url — поле призначене для вказівки URL-адрес. Головна сторінка:
week - відповідний інструмент-покажчик дозволяє користувачеві вибрати один тиждень на рік, після чого забезпечить введення даних у форматі нн-гггг. Залежно від року кількість тижнів може бути 52 чи 53. Вкажіть тиждень:
value
Визначає текст, який відображається на кнопці, у полі або пов'язаний текст. Не вказується для полів типу file.
width
Значення атрибуту містить кількість пікселів. Дозволяє задати ширину полів форми.
4. Текстові поля введення
Елемент використовується замість елемента коли потрібно створити великі текстові поля. Текст, що відображається як вихідне значення, міститься всередині тега. Розміри поля встановлюються за допомогою атрибутів cols – розміри горизонталі, rows – розміри по вертикалі. Висоту поля можна задати властивістю height. Усі розміри вважаються з розміру одного символу моноширинного шрифту.
5. Список, що розкривається
Списки дають можливість розташувати велику кількість пунктів компактно. Списоки, що розкриваються, створюються за допомогою елемента ... . Вони дозволяють вибрати одне або кілька значень із запропонованої множини. За замовчуванням у полі списку відображається перший елемент.
Для додавання до списку пунктів використовуються елементи ... , які розташовуються всередині .
Для систематизації списків застосовується елемент ... , що створює заголовки у списках.
Для списків можна змінити розмір шрифту, тип шрифту, колір та інші властивості тексту, а також додати межі, колір фону та фонове зображення.
Таблиця 5. Атрибути тега
Атрибут
Значення / опис
autofocus
Встановлює автоматичний фокус на елементі під час завантаження сторінки.
disabled
Відключає список, що розкривається.
form
Визначає форму, якою належить цей перелік. Як значення атрибута вказується ідентифікатор форми.
multiple
Дає можливість вибору одного або декількох пунктів, для цього при виборі потрібно натиснути та утримувати клавішу Ctrl .
name
Визначає ім'я для списку. Значення атрибута містить назву, яка відображатиме тематику списку.
required
Виводить повідомлення про те, що користувач повинен вибрати значення зі списку, що розкривається, перед відправкою форми.
size
Визначає кількість видимих на екрані елементів списку. Якщо кількість елементів списку перевищує встановлену кількість, з'являється смуга прокручування. Значення атрибута визначається цілим позитивним числом.
6. Написи до полів форми
Написи до елементів форми створюються за допомогою елемента ... . Існує два способи угруповання напису та поля. Якщо поле знаходиться всередині елемента , атрибут for вказувати не потрібно.
Коли ви востаннє літали літаком?
Кішка
7. Кнопки
Елемент ... створює клікабельні кнопки. На відміну від кнопок, створених ( , , , ), всередину елемента можна розмістити вміст — текст або зображення.
Для коректного відображення елемента різними браузерами потрібно вказувати атрибут type , наприклад, .
Кнопки дозволяють користувачам передавати дані у форму, очищати вміст форми або робити будь-які інші дії. Можна створювати межі, змінювати фон та вирівнювати текст на кнопці.
Таблиця 9. Атрибути тега
Атрибут
Значення / опис
autofocus
Встановлює фокус на кнопці під час завантаження сторінки.
disabled
Вимикає кнопку, роблячи її неклікабельною.
form
Вказує на одну або кілька форм, яким належить ця кнопка. Значення атрибута – ідентифікатор відповідної форми.
formaction
Значення атрибута містить URL-адресу обробника даних форми, що відправляються при натисканні на кнопку. Тільки кнопки типу type="submit" . Перевизначає значення атрибута action, вказаного для елемента .
formenctype
Задає тип кодування даних форми перед відправкою на сервер, натиснувши на кнопки типу type="submit" . Перевизначає значення атрибуту enctype, вказаного для елемента . Можливі значення: application/x-www-form-urlencoded — значення за промовчанням. Усі символи перед надсиланням будуть закодовані. multipart/form-data – символи не кодуються. Використовується у випадку, коли файли завантажуються за допомогою форми. text/plain — символи не кодуються, а пробіли замінюються символом + .
formmethod
Атрибут визначає метод, який браузер буде використовувати для надсилання форми. Перевизначає значення атрибута method, вказаного для елемента . Вказується лише кнопки типу type="submit" . Можливі значення: get - дані з форми (пара ім'я/значення) додаються в URL-адресу і відправляються на сервер. Цей спосіб має обмеження за розміром даних, що відправляються, і не підходить для відправлення паролів і конфіденційної інформації. post - дані форми додаються у вигляді http-запиту. Метод є більш надійним та безпечним, ніж get і не має обмежень за розміром.
formnovalidate
Атрибут задає, що ці форми не повинні перевірятися під час відправлення. Вказується лише кнопки типу type="submit" .
formtarget
Атрибут визначає, у якому вікні виводити результат після відправки форми. Вказується лише кнопки типу type="submit" . Перевизначає значення атрибута target, вказаного для елемента . _blank - завантажує відповідь у нове вікно/вкладку _self — завантажує відповідь у те саме вікно (за замовчуванням) _parent — завантажує відповідь у батьківський кадр _top - завантажує відповідь на весь екран framename — завантажує відповідь у кадр із зазначеним ім'ям.
name
Вказує ім'я кнопки, атрибут — текст. Використовується для посилання на дані форми, після того, як форма була відправлена, або для посилання на цю кнопку (кнопки) JavaScript.
type
Визначає тип кнопки. Можливі значення: button - клікабельна кнопка reset - кнопка скидання, повертає початкове значення submit — кнопка для надсилання даних форми.
value
Задає значення за замовчуванням, яке надсилається при натисканні на кнопку.
8. Прапорці та перемикачі у формах
Прапорці у формах задаються за допомогою конструкції , а перемикач - за допомогою .
Прапорців, на відміну від перемикачів, в одній формі може бути кілька. Якщо для прапорців вказано атрибут checked , то при завантаженні станиці на відповідних полях форми вже будуть встановлені прапорці.
Елемент застосовується при реалізації вибору за допомогою перемикачів та прапорців. Можна вибрати потрібний пункт, просто натиснувши кнопкою миші на тексті, пов'язаному з ним. Для цього потрібно помістити всередину елемента .
Застосування цього скрипту дозволить аналізувати заповнення обов'язкових полів форми. На відміну від багатьох інших аналізаторів форм, у цьому варіанті перевірка виконується на стороні клієнта, а не на серверній частині. І лише у разі заповнення корисних полів, введена інформація передається на сервер. Якщо потрібні поля не заповнені, видається повідомлення з перерахуванням незаповнених полів і форма не передається на сервер.
Цей скрипт я використав при створенні сайту www.prtut.ru.
Демонстрація скрипту
У прикладі всі поля є обов'язковими для заповнення.
Опис
Для завдання обов'язкових полів у формі використовується довільний аттрибут required, який прописується лише для полів, які потребують обов'язкового введення. Наприклад:
Функція checkRequired() перевіряє кожен елемент у формі наявність атрибута required . Якщо атрибут виявлено, то перевіряється чи було зроблено введення.
JavaScript function isEmpty(str) ( // Перевірка на порожній рядок. for (var intLoop = 0; intLoop Так як перевірка виконується на стороні клієнта, і скрипт працює безпосередньо в браузері користувача, Google Chrome, Mozilla Firefox, Opera і Яндекс.Браузер попередження виглядають по-різному.
ПОЛОЖЕННЯ
Про проведення відкритих командно-особистих змагань
По пауерліфтингу та жиму лежачи без екіпірування,
Г. Подольська та Московської області
1. Цілі і завдання
· Змагання проводяться з метою популяризації пауерліфтингу в м. Подільську та Московській області
· Виховання фізично розвиненого підростаючого покоління та пропаганди здорового способу життя
· Залучення молоді до систематичних занять фізичної культури та спортом
· Створення мотивації у підлітків та молоді до заняття фізичною культурою
· Підвищення спортивної майстерності атлетів м. Подільська та Московської області
· Виявлення найсильніших атлетів м. Подільська та Московської області
· Формування команди для виступу на відкритих командних змаганнях м.Подільська з пауерліфтингу
2. Дата та місце проведення
Змагання проводяться 16 листопада 2013 року у Палаці культури 1 травня: Московська обл., м. Климівськ, Заводська вулиця, 3 . Про початок змагань та зважування буде повідомлено додатково (електронною поштою або СМС).
3. Організація та керівництво
Загальна організація змагань здійснюється МУ Центр цивільного та патріотичного виховання молоді «Факел» та тренажерною залою «Good Lift», за участю Подільського відділення ВООВ «Бойове братство» та Благодійного фонду «Здорова нація».
Безпосереднє керівництво здійснюється тренером з атлетичної гімнастики МУ "Смолоскип" Поповим С.А., директором тренажерного залу "Good Lift" Яковлєвим П.С. та представником благодійного фонду "здорова нація" Работкіним І.Ф.
4. Учасники змагань
До участі у змаганнях запрошуються зацікавлені організації та установи, а також окремі спортсмени, які досягли 16 років, які подали іменні заявки для участі у змаганнях.
Організатори залишають за собою право, пізніше оголосити нормативи допуску до змагань, з обов'язковим повідомленням спортсменів (електронною поштою або СМС).
Організатори залишають за собою право, при перевищенні кількості заявок, не пізніше 9 листопада 2013 року оголосити нормативи допуску до змагань, з обов'язковим повідомленням спортсменів шляхом розміщення інформації у відкритих джерелах, а також розсилок смс- та e-mail – повідомлень.
5. Порядок проведення змагань та умови подання заявок
Заявки для участі у змаганнях подавати до 9 листопада 2013 року на електронну адресу: [email protected] або за допомогою SMS повідомлення на номер +79099250337 (вартість SMS дорівнює вартості SMS повідомлення Вашого оператора зв'язку).
Увага! Правильне оформлення заявки дивитись у додатку 1.
6. Порядок визначення переможців
Увага! Суддівство змагань провадиться за правилами IPF (див. додаток 2)
Змагання проводяться у відкритій віковій категорії (Open).
в особистій першості :
Жінки змагаються в абсолютній ваговій категорії, переможці (що посіли 1-2-3- місця) визначаються за формулою Вілкса (Wilks).
Переможці у чоловіків визначаються в категоріях до 75кг, до 90кг, до 110кг та понад 110 за найкращим результатом. Переможці у абсолютному першості (спортсмени, що посіли 1-2-3 місця) у триборстві та жимі лежачи визначаються за формулою Вілкса (Wilks).
У командній першості в залік йдуть 4 найкращі результати чоловіків-членів команди та 1 жіночий результат
Нарахування балів відбувається за такою схемою:
1 місце – 6 очок
2 місце – 4 очки
3 місце – 3 очки
4 місце – 2 очки
5 місце – 1 очко
Переможцем у командній першості визнається команда, яка набрала максимальну кількість балів серед усіх команд.
7. Нагородження переможців
Нагородження переможців та призерів в особистій та командній першості, які посіли 1-3 місця в номінаціях, проводиться пам'ятними грамотами та медалями.
8. Фінансування
Витрати, пов'язані з організацією, проведенням та нагородженням переможців несуть організатори змагань, зацікавлені організації та спонсори. Витрати, пов'язані з проїздом та харчуванням учасників несуть командируючі організації. Стартовий внесок не стягується.
Додаток 1
Зразок заявки (що надсилається електронною поштою або СМС повідомленням):
1. номінація: наприклад, жим лежачи чи триборство.
2. назва команди або відзначити особисте *
3. П.І.Б.
4. Рік народження *–
6. розряд *–
7. найкращий результат * (за останні 6 місяців) -
8. вік * -
9. тренер -
10. контактний телефон (бажано стільниковий) * -
Поля позначені зірочкою є обов'язковими для заповнення.
Увага! Усі учасники в день змагань, при собі, обов'язково повинні мати візи завірені лікарем та паспорт або посвідчення особи (права, військовий квиток). Без цих документів спортсмени не допускатимуться до змагань.
Додаток 2
Правила проведення змагань:
Виступ на змаганнях відбувається без застосування екіпіровки (жимові майки, комбінезони, колінні бинти для пауерліфтингу). Можна використовувати: кистьові бинти, пояси (максимальна ширина пояса – 10 см). За потреби можна використовувати непідтримуючий бинт (на одну ногу чи руку). Непідтримуючі бинти – звичайні медичні бинти. Бінт треба перед використанням пред'явити судді. Виконання вправ проводяться за правилами IPF
Присідання (Правила та порядок виконання).
Після зняття штанги (помічники можуть надати допомогу), атлет займає вихідне положення.
Після прийняття вихідного становища атлетом, суддя дає команду – ПРИСІСТЬ.
Атлет присідає так, щоб верхня частина поверхні ніг у кульшових суглобів була нижчою, ніж верхівка колін. Дозволена лише одна спроба зробити рух вниз.
Атлет повинен самостійно повернутись у вертикальне положення з повністю випрямленими в колінах ногами. Подвійне вставання («підстрибування», заборонено).
Щойно атлет, що займає нерухоме становище, суддя дає команду повернути штангу на стійки – СТІЙКИ.
- Забороняється - Помилка у дотриманні сигналів старшого судді на початку чи завершення вправи. Подвійне вставання (підстрибування) з нижнього положення присіду або будь-який рух під час вставання. Помилка в згинанні ніг в колінах і опусканні тулуба до такого положення, коли верхня частина поверхні ніг у кульшових суглобів знаходиться нижче, ніж верхівка колін.
Жим, лежачи на лаві (Правила та порядок виконання)
Атлет повинен лежати на спині, головою, плечима і цілими сідницями стикаючись з поверхнею лави. Підошва та каблуки його взуття повинні стикатися з поверхнею помосту або блоків (наскільки дозволяє форма взуття).
Пальці рук повинні охоплювати гриф, що лежить на стійках, при цьому великі пальці рук розташовуються у замку навколо грифа. Це положення має зберігатися під час
виконання вправи. Використання зворотного хвату заборонено.
Для забезпечення твердої опори ніг атлет може використовувати рівні плити або блоки не вище 30 см від поверхні помосту.
Відстань між руками на грифі, яка вимірюється між вказівними пальцями, не повинна перевищувати 81 см (обидва вказівні пальці повинні бути всередині позначок 81 см).
Після зняття штанги зі стійок за допомогою або без допомоги асистентів атлет повинен чекати на сигнал старшого судді з повністю випрямленими («включеними») в ліктях руками.
Сигнал до початку жиму має бути дано відразу ж, як тільки атлет прийме нерухоме
положення та штанга перебуватиме у правильній позиції. Сигналом для початку вправи є команда – СТАРТ.
Після отримання сигналу атлет повинен опустити штангу на груди і витримати її в нерухомому положенні на грудях (як правило, основа грудини), після чого суддя дає команду - ТИСНУТИ. Потім атлет повинен вичавити штангу на прямі руки. Після фіксації штанги у цьому положенні суддя дає команду – СТІЙКИ.
- Забороняється – Будь-яка помилка у дотриманні команд судді. Будь-яка зміна вихідного положення при виконанні вправи (будь-який підйом (відрив) голови, плечей, сідниць від лави або руху ніг на помості або блоках, або рух рук по грифу). Будь-який рух штанги вниз під час виконання жиму. Відсутність вичавлювання штанги на повністю випрямлені руки під час завершення вправи.
6. Тяга (правила та порядок виконання)
Атлет повинен розташовуватись обличчям до передньої частини помосту. Штанга, яка розташована горизонтально попереду ніг атлета, утримується довільним хватом двома руками і піднімається до того моменту, поки атлет не встане вертикально.
Після завершення підйому штанги в тязі ноги в колінах повинні бути повністю випрямлені, плечі відведені назад.
Суддя дає команду – ВНЗ.
Будь-яке піднесення штанги або будь-яка навмисна спроба підняти її вважаються підходом. Після початку підйому не дозволяються жодні рухи штанги вниз доти, доки атлет не досягне вертикального положення з повністю випрямленими колінами. Якщо штанга осідає при відведенні плечей назад, це не є причиною того, щоб не зараховувати підняту вагу.
- Забороняється - Будь-який рух вниз, до досягнення фінального становища. Підтримка штанги стегнами під час підйому вгору. Кроки назад чи вперед. Опускання штанги до команди. Випускання штанги з рук під час виконання команди вниз.
Практично всі сучасні і нові сайти мають форми, які перевіряться на заповнення без перезавантаження сторінки. Так звані - обов'язкові поля форми. Але які способи створення таких форм у своїй використовуються?
Донедавна найпопулярнішим способом було використання Javascript. Дуже зручною бібліотекою є jquery validation. Цей спосіб є сучасним, але для його інтеграції у форму на сайті потрібні деякі навички роботи та час.
З появою html 5 та його повсюдною інтеграцією на сучасні сайти можна відмовитися від використання Javascript. При цьому для того щоб зробити поле у формі обов'язковим для заповнення потрібно тільки додати атрибут потрібний.
З атрибутом required браузер перед відправкою форми перевірить, чи заповнене конкретне поле чи ні. Якщо ні, то користувачеві буде вказано обов'язкове заповнення поля або навіть всіх полів форми.
А для створення таких полів потрібно не більше хвилини.
Отже, припустимо, є невелика форма:
Реєстрація Ім'я
Пароль
Підлога Вказати Чоловічий Жіночий
Ось так вона виглядає у браузері:
Тепер робимо деякі поля у формі обов'язковими для заповнення:
Реєстрація Ім'я required>
Пароль required>
Підлога required> Вказати Чоловічий Жіночий
От і все. Ми зробили всі поля обов'язковими для заповнення менше ніж за 1 хвилину. Якщо не заповнювати обов'язкові поля, ми побачимо такі повідомлення:
І, важливе. Ця перевірка працює у всіх сучасних браузерах і лише для специфікації html 5. Для непосвячених - на початку html коду потрібно вставити тег.
У світі розробки програмних продуктів існує чимало міфів і помилок. Щоб рухатися вперед, а не тупцювати на місці, їх необхідно зруйнувати. Сьогодні про одну з найзапекліших помилок, яка до того ж досить шкідлива – називається «Міф про обов'язкове поле».
Йтиметься про практично будь-які системи, які використовують для введення інформації форми. Обов'язкове поле - поле форми, без заповнення якого система не прийме у вас інформацію. Серед переважної більшості розробників ПЗ існує думка, що обов'язковими полями мають бути:
Усі необхідні з погляду предмета поля (наприклад, ПІБ та дата народження людини, якщо йдеться про паспортний стіл);
Усі необхідні для функціонування системи поля (ті, без яких не працюватимуть алгоритми - наприклад, дата, з якої починається надання послуг, щоб робити за ними нарахування);
Важливі поля – такі, які не потрібно, але бажано заповнити (наприклад, обґрунтування внесеної зміни) - з тією мотивацією, що нехай краще користувач попітніє, коли не потрібно, ніж забуде ввести значення, коли буде потрібно.
Як бачите, тут цілий комплекс міфів, розвіювати які потрібно скрупульозно та планомірно. Тому почнемо з двох інших помилок. Традиційно програмісти вважають, що роблять ласку всьому світу, створюючи для них такий чудовий продукт, як «підставте будь-яку назву продукту». Їхня програма - це чи не платонівський ейдос, чиста абстракція, математична формула, яка обчислюється, природно, суворо на наборі параметрів зі своєї галузі визначення. З цього погляду обов'язкові поля - та прикра дрібниця, яку доводиться вставляти, щоб навчити дурних і неотесаних користувачів, як правильно вводити інформацію до системи, з якою вони отримали честь працювати. Вважається також, що некоректні (неповні) дані настільки страшні, що навіть зберігати в базі даних вже некоректно. Ну і ліньки, зрозуміло - з точки зору розробника легше перевірити коректність даних на етапі введення і послати користувача перевіряти ще раз свої дані, ніж писати обробку помилок там, де в системі ці дані будуть реально використовуватися.
Що це має сказати сучасна наука проектування взаємодії з користувачем? По-перше, стало ясно (не знаю, кому і коли, але досить давно точно, див. і ), що все-таки програми розробляються для користувачів. У цьому сенсі програміст вже не диктує умови, а скромно створює суто утилітарний продукт, інструмент, яким користуватимуться люди для вирішення своїх завдань та досягнення своїх цілей. Як праска - якщо тобі потрібно щось погладити, ти її вмикаєш. Якщо він замість того, щоб гладити, модально пропонуватиме скачати оновлення з інтернету, зрозуміло, куди така праска полетить. Алан Купер рекомендує представляти користувачів вашого продукту як дуже розумних, але дуже зайнятих людей. Вони, мовляв, не тупі і зрозуміють, як ваш продукт користуватися, головне, ви тільки не вставайте у них на шляху.
Я взагалі вважаю, що кожному програмісту (дизайнеру, менеджеру, аналітику) слід зробити медитацію, згадану Сергієм Бодровим-мол.:
Ти стаєш на розі жвавої вулиці і уявляєш, що тебе тут немає. Точніше, тебе немає взагалі. Пішоходи йдуть, сигналять машини, відчиняються двері магазинів, змінюються пасажири на зупинці. Тобто, в принципі, світ продовжує жити і без тебе. Розуміти це боляче. Але важливо... Я, звичайно, зовсім не хочу сказати, що програміст – професія непотрібна, я сам програміст і зовсім так не вважаю. Просто це невдячна професія. Ніхто не прийде та не похвалить за добре реалізований алгоритм. Якщо програма хороша, вона користуватиметься без додаткових питань. Так і повинно бути просто, щоб бути програмістом, треба до цього звикнути. А ці ось люди, які йдуть вулицею та змінюються на зупинці – це ваші користувачі. Вони використовують речі так, як вони їм потрібні. В тому числі і ваш продукт. Без вас. Вони нічого про вас не знають, не хочуть знати і ніколи не дізнаються. Сергію Віталійовичу, коли він у полярній тундрі намагається вбити в систему зняті з лічильника показання, зовсім не цікаво, чому система говорить йому, що спочатку потрібно вказати якийсь там тип тарифікації, навіть якщо в момент проектування вам здавалося, що без типу тарифікації аж ніяк не обійтися. А щодо прикладу про праску, що скачує оновлення, то вона взята зовсім не з пальця - зверніть увагу, як поводиться при включенні браузер Файєрфокс. Тут взагалі буде щось про обов'язкові поля, спитає хабраюзер? Саме зараз почнеться.
Штука в тому, що наш реальний світ - це не математична модель, параметри якої відомі в будь-який момент часу. Для реального життя характерна скоріше нестача інформації, ніж її наявність. У людини, що заповнює форму, необхідних даних може не бути - і не бути їх може у всіх доступних для огляду межах досяжності, тобто не бути ваще. Цю проблему не можна вирішити, просто зробивши поле обов'язковим - значення повітря не візьметься. Вводячи на формах обов'язкові поля для цілісності і повноті даних, ми насправді заважаємо користуватися системою . Зіткнувшись з такою ситуацією, користувач або не стане заповнювати форму (і не зможе працювати з системою зовсім), або заповнить дані, що відсутні, рибою - вигаданими або безглуздими даними. І це свідчить не про те, що користувач поганий чи погано намагався, а лише про те, що розроблена система недостатньо гнучка для використання в умовах реального світу. Те, що сталося у другому випадку (введення риби) – це взагалі обман. Розробник системи може скільки завгодно вдавати, що все гаразд, але насправді в цьому обмані винен саме він. Причому незрозуміло, хто і що взагалі виграв – користувач мав головний біль, а в систему потрапили некоректні дані. Так потрапили так, що виявити, відфільтрувати або підчистити їх автоматично вже неможливо – на відміну від випадку, якби користувач просто вказав, що інформація відсутня.
Що ж робити? Робити потрібно добрі програми. А саме, так, таки не ставити цілісність схеми БД в основу, а ставити туди цілі та завдання користувачів. Іншими словами, приймати у користувача неповні, а в деяких випадках і некоректні дані, звісно, з можливістю виправити їх у майбутньому. Всупереч помилці (так, ще одному) це можливо, це не так складно і це навіть працює. Крім цього, потрібно ще якимось чином допомагати, підказувати користувачеві, де яких даних і для чого йому не вистачає. Щоб він бачив та контролював ситуацію.
Скільки обов'язкових полів має бути на формі? В ідеалі, нуль. Чи завжди таке можливе? Для мене одним із прикладів вищого пілотажу є операція створення папки у Віндоус. Здавалося б, менше одного поля тут не зробиш, проте ні, вони примудрилися реалізувати створення так, що система не питає нічого - навіть незважаючи на те, що технічні обмеження не дозволяють системі створити папку без імені. Це ідеал, якого потрібно прагнути.
Звичайно, система повинна бути мінімально розумною, запитуючи у користувача тільки те, що має відношення до завдань користувача, а не до потреб самої системи. Система як інструмент, пам'ятаєте? Саме про приклад з Файєрфоксом - Google Хром, наприклад, вирішив проблему Файєрфокса, оновлюючись тихенько в той момент, коли користувач його перезавантажує. Користувачеві про це знати зовсім не потрібно – він і не знає. Гідний приклад для наслідування. Я, зізнатися, навіть спершу не зрозумів, чогось він мене жодного разу не питав, коли йому оновлюватись?
Ще був міф про важливі поля (це ті, які необов'язкові, але бажані до заповнення). Тут все ще простіше – примусово змусити заповнити поле не можна. Отже, хоч позначай поле як обов'язкове, хоч не помічай - все одно напишуть рибу, нісенітницю, відписку, якщо не захочуть заповнювати. Інтерфейсного вирішення цієї проблеми немає. Важливість полів слід доносити до працівників на місцях. А розробнику помітити поле як необов'язкове. І дозволити редагувати.
Література:
Алан Купер про інтерфейс. Основи проектування взаємодії. Символ-Плюс, 2009
Джеф Раскін. Інтерфейс: нові напрями у проектуванні комп'ютерних систем. Символ-Плюс, 2005
UPD: У коментарях trijin та zhindetz зрозуміліше сформулювали основну мораль топіка: мова про систему чернеток, про зняття вимоги ввести всі дані відразу і несуперечливо. Тобто так, робити необов'язковими навіть ті поля, без яких система не працюватиме. Звичайно, вона й не працюватиме, але хай хоча б дані збереже.
UPD #2: Уточню ще одну річ, яку я сам не розумів ясно, коли писав топік. Я не обговорюю тут питань доречності тих чи інших полів на формі (це важлива, проте трохи інша тема, ніж та, яку мені хочеться донести). Я скоріше пропоную переосмислити саму концепцію введення інформації за допомогою форм, той традиційний підхід, коли потрібно заповнити всю форму відразу і коректно. Натомість я пропоную проміжний стан (неповний, некоректний, суперечливий) теж дозволяти зберігати в БД, явно позначаючи такий стан як неповний/некоректний/суперечливий . Таким чином, усі ситуації «я зараз знаю не всі, але завтра, можливо, дізнаюся», які традиційно вирішуються записуванням на папірець, можна обробляти за допомогою інформаційної системи. Звичайно, такі дані не потрібно пускати в бізнес-процес через їхню некоректність - тут все залишається як раніше. Вони просто полежать в БД до кращих часів - не знадобляться, та й бог з ними.