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

HTML форми можуть здаватися простими, але вони необхідні більшість веб-сайтів і додатків. У HTML4 типи полів введення були обмежені таким списком:

  • 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"

Додаткові типи полів

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

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

звичайно, можна і додати такі, якщо вам подобається синтаксис у стилі XHTML, наприклад

вказує спосіб введення. Найбільш корисні можливості:

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

Зауважте, що поля date повинні використовувати формат YYYY-MM-DD для атрибутів value, min та max.

Наступний приклад показує поле, що вимагає обов'язкового введення електронної пошти, що закінчується на @mysite.com, на яке зміщується фокус при завантаженні сторінки.

Списки даних

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

Однак варто пам'ятати, що реалізація відрізняється в різних браузерах. Наприклад, Firefox робить автодоповнення за текстом (Internet Explorer), тоді як Chrome - за значеннями (IE), а текст вказує зменшеним сірим шрифтом:

input

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

Відключити валідацію всієї форми можна виставивши атрибут novalidate елементу form. На додаток, можна виставити атрибут formnovalidate кнопки/зображення відправки форми.

Запам'ятайте, що виставлення поля атрибута disabled відключить валідацію цього поля.

Поля виведення

Раніше ми обговорювали поля введення, але HTML5 також надає поля для виведення інформації

  • output - результат обчислення дій користувача
  • progress - смуга прогресу (атрибути value та max задають стан)
  • meter - шкала, яка може змінювати свій колір між зеленим, жовтим та червоним залежно від встановлених значень атрибутів value, min, max, low, high та optimum

Поділ та підпис полів

Відповідно до специфікації, кожен елемент форми вважається параграфом, і відокремлюється від інших частин елементом

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

Що важливіше - мітки потрібно використовувати, або оточуючи елемент форми, або розміщуючи їх поряд, і пов'язуючи їх атрибутом for з відповідними полями, наприклад:

Елементи керування не стандартизовані

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

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

Не всі типи полів та атрибути підтримуються у всіх браузерах. Говорячи загалом, всі сучасні браузери, починаючи з IE10+, включають підтримку основних типів полів, на кшталт email або числових полів. Але на момент написання статті поля типу дата/час підтримуються лише у браузерах на движках Webkit та Blink.

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

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

Важливо використовувати правильний тип поля для очікуваного типу даних, що вводяться. Можливо, це й очевидно, але будуть ситуації, коли вам потрібно буде скористатися простим текстовим полем.

Розглянемо дати. Підтримка в браузерах неоднорідна і це призводить до проблем при впровадженні.

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

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

Валідація на стороні клієнта ніколи не була і не буде заміною валідації на сервері. Валідація даних користувача на стороні сервера має велике значення. Валідація на стороні клієнта – додаткова корисна можливість.

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

Уцій статті я розповів про багато аспектів розмітки HTML5 форм. У наступній статті ми розглянемо CSS-властивості, які стосуються форм.

Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: http://www.sitepoint.com/html5-forms-markup/ Переклав: Станіслав Протасевич Урок створений: 31 Травня 2014 Переглядів: 36722 Правила передруку

5 останніх уроків рубрики "HTML5"

Розширюємо можливості HTML за рахунок створення власних тегів

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

HTML5: API роботи з вібрацією

HTML5 - ковток свіжого повітря в сучасному Інтернеті. Вона вплинула не тільки на класичний веб, яким ми знаємо його зараз. HTML5 надає розробникам ряд API для створення та покращення сайтів з орієнтацією на мобільні пристрої. У цій статті ми розглянемо API для роботи з вібрацією.

Створення форм за допомогою Webix Framework - 4 практичні приклади

Інтернет дизайнери часто стикаються з необхідністю створення форм. Це завдання не просте, і може викликати головний біль (особливо якщо ви робите щось не стандартне, наприклад, багатосторінкову форму). Для спрощення життя можна скористатися фреймворком. У цій статті я покажу вам кілька практичних прийомів для створення форм за допомогою фреймворку Webix.

Знайомство з фреймворком Webix

У цій статті ми хотіли б познайомити вас з фреймворком Webix. Для демонстрації можливостей даного інструменту ми створимо інтерфейс аудіо плеєра. Не зваблюйтеся - це лише модель інтерфейсу. Вихідний код доступний у демо та на сторінці GitHub.