HTML: події і форми елементів

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

Спектр і сенс подій

HTML-події - це добре систематизована концепція. Елементи сторінки можуть генерувати події. Розробник має механізм поширення подій за вкладеності елементів.


Основних подій не багато, але варіантів їх застосування і поєднання - безліч. Реальні завдання вимагають формування унікальних алгоритмів обробки подій. У цій таблиці відзначені найважливіші події. В конкретному додатку можуть бути актуальні зовсім інші, наприклад, від браузера: onafterprint, onbeforeonload, onmessage та ін. Для форми передбачені: oncontextmenu, onforminput і oninvalid. Подій багато, але для пожвавлення сайту цілком достатньо тих, що виділені в таблиці. Не всі події слід використовувати. Наприклад, можна витратити особистий час і самому переконатися, що досить HTML-події onclick: використовувати ondblclick не практично. Особливо дивно ondblclick виглядає на смартфонах і планшетах. Як завжди, простота - запорука успіху. У поданні інформації та обробки подій це правило має першорядне значення.

Логіка роботи сайту і його події

Головне для сайту - логіка роботи. Застосування будь-популярної системи управління сайтом (CMS) обмежує розробника, але прискорює процес розробки. Створити власний унікальний діалог з відвідувачем можна тільки на сайті «ручної роботи», тобто зроблене з «нуля», коли створюється власна концепція сайту, заснована на власних фундаментальних розробках, а не на сторонніх шаблони, шаблони, фреймворках та бібліотеках: завдання - завжди унікальна та реальна; дизайн та подання інформації - унікальний стиль; процес рішення (діалог) - динамічний «розумний» процес спілкування. Будь-яка, навіть сама краща CMS завжди нав'язує розробнику і власнику сайту свій стиль роботи. Мова йде не про адаптивне діалозі з конкретним відвідувачем (діалог сам підлаштовується під відвідувача), а про використання сайту так, як це прийнято у конкретній сфері завдань в «розумінні» конкретної CMS. Наприклад, сайти інтернет-магазинів - все на одне обличчя, коли вони зроблені на будь-який з популярних CMS, і жоден з них не може допомогти зробити обґрунтований вибір ні холодильника, ні пральної машини, а тим більше комп'ютера. Пошукові системи ніколи не дають «розумну» видачу. В обох випадках, щоб отримати бажане, відвідувач повинен думати сам і приймати рішення теж сам.

Проста форма: приклад обробки подій

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

Особливості елементів

Події можна призначати практично будь-якого елементу, а якщо немає такої можливості, то можна просто контролювати рух мишки по екрану. І відпрацьовувати потрібні події. Наприклад, на екрані - карта міста. Відвідувач перемішати покажчик, а в окремому віконці відразу з'являється інформація про те, яка вулиця, номер будинку, який об'єкт і їх характеристики. Слід відзначити, що деякі елементи краще не оснащувати обробниками подій. Зокрема, у наведеному прикладі вішати обробник на select - не правильно. Хоча, якщо це зроблено свідомо, то програміст повинен мати уявлення про те, що він робить. Аналогічно можна сказати про події кнопки HTML. Форма сама по собі викликає обробку події. Доповнювати цю стандартну обробку ще одним обробником - не перспективно. Вішати на обробку тег «a» також не надто цікаво. Посилання сама по собі формує перехід і викликає обробку події, додатковий обробник може створити невизначеність або непередбачувана поведінка.

Введення інформації

Найбільш затребуване застосування подій на елементах форм. Тег HTML input - події, дозволяють на льоту контролювати поведінку відвідувача. Кожне поле вводу даних може відстежити подія: «onblur» - втрата фокусу - і зробити крок з перерахунком даних по всій формі, надіслати інформацію на сервер або провести валідацію і повернути фокус «на місце» для коректного вводу. Отримання фокусу «onfocus» теж цікава подія: можна запропонувати відвідувачу значення за замовчуванням або розрахувати значення поля, отримав фокус, на основі вмісту інших полів.

Призначення обробників

jаvascript надає розробнику призначати обробники подій в динаміці. За загальним правилом, як показано в наведеному прикладі, в елементі HTML можна вказати обробник події - функцію на jаvascript. Через механізм AJAX можна перенаправити обробку події на сервер. Фактично розробник може контролювати поведінку відвідувача в процесі роботи останнього, подгружая потрібну інформацію по мірі необхідності. Переміщення мишки або події клавіатури можуть призводити до надсилання запитів на сервер і зміни елементів сторінки. Дерево елементів сторінки DOM - не догма і не конструкція, сформована при початковій завантаженні сторінки HTML. Будь обробник подій HTML тегів може викликати зміну самих цих тегів. Це абсолютно нормальна операція.

У цьому прикладі обробники призначаються в ході виконання якого-небудь скрипта, а коли у них пропадає потреба - видаляються. jаvascript дозволяє створювати не тільки обробники подій, але і елементи DOM. При цьому виникає тільки одна проблема: розробник повинен уявляти роботу сайту в динаміці. Це досить складно. В ідеалі, хороша HTML-сторінка - це один єдиний тег, наприклад, «Привіт», хоча на практиці цей привіт можна оснастити семантикою веб-ресурсу, предметної області або завдання.

Відвідувач прийшов - і сайт визначився з вмістом

Як тільки відвідувач прийшов на сайт, останній починає формуватися під нього. Це ідеальний варіант. Простий приклад: пошукова система. Якщо відвідувач вже був тут і його можна однозначно ідентифікувати, прекрасним рішенням буде моментально видати не стандартну сторінку сайту, а той її варіант, у якому цьому відвідувач завершив попередній сеанс. HTML події і можливість працювати з куками дають розробнику можливість пам'ятати відвідувача і завжди відповідати тому, що він може бажати зробити. Крім пам'яті, події дають можливість організувати «відкат»: скасування операцій - важливе доповнення до будь-якого ресурсу. Стандарт HTML «позбавлений» пам'яті, але її можна легко емулювати за допомогою подій і механізму AJAX.

Пріоритет логіки роботи

Зробити красивий і сучасний сайті - не проблема. При використанні популярних CMS - це взагалі справа 15-20 хвилин. Однак є різниця між сайтом, зробленому моментально, і веб-ресурсом, на який пішов місяць, три, а то і рік роботи. Замовник завжди бажає все і відразу, але все і відразу - це тільки інформація і дизайн. Цього мало для динамічного залучення уваги клієнтів замовника. Логіка роботи сайту - врахування інтересів відвідувача, HTML події орієнтовані не на обслуговування тегів сторінки, а на визначення інтересів та побажань клієнта. Знати клієнта в обличчя і вгадувати хід його думок - хороша стратегія для якісного веб-ресурсу.