Новости
- Вступ
- підтримка браузерів
- огляд нововведень
- Нові типи елементів введення
- Нові атрибути введення
- Перевірка на основі браузера
- Атрибут required
- Атрибут pattern
- API перевірки обмежень
Вступ
Інтерес до форм невеликий, проте в HTML5 реалізовані суттєві поліпшення як для розробників, що створюють їх, так і для користувачів, їх заповнюють. Нові елементи та атрибути форм, типи елементів введення, перевірка на основі браузера, методики створення стилів CSS3 і об'єкт FormData роблять створення форм простіше і приємніше.
There is even more up to date forms guidance on our new Web Fundamentals site.
підтримка браузерів
На момент написання цієї статті підтримка всіх нових форм, елементів введення, атрибутів і типів істотно залежить від конкретного браузера. Реалізація однієї і тієї ж функції в різних браузерах може істотно відрізнятися. При цьому ситуація з підтримкою форм HTML5 швидко змінюється і продовжує поліпшуватися. На момент написання статті найбільш актуальними є ці таблиці , В яких наведені докладні відомості про підтримку різними браузерами форм HTML5.
огляд нововведень
нові елементи
У мові HTML5 представлено п'ять нових елементів, пов'язаних з введенням даних і формами.
Елемент Призначення Примітки progress Являє хід виконання завдання. Елемент progress може представляти стан завантаження файлу. meter Являє значення за шкалою у відомому діапазоні. Елемент meter можна використовувати, наприклад, для вимірювання температури або ваги. datalist Представляє набір елементів option, які можуть використовуватися в поєднанні з новим атрибутом list для створення меню, що розкриваються. Коли користувач переходить до введення даних в області, пов'язаної зі списком даних, з'являється спливаюче меню зі значеннями з переліку datalist. keygen Елемент управління для створення пар ключів. При відправці форми в локальне сховище заноситься закритий ключ, а на сервер відправляється відкритий ключ. output Відображає результати розрахунку. Прикладом використання елемента output може служити висновок суми значень двох введених елементів.Нові типи елементів введення
У HTML5 представлено 13 нових елементів введення. У браузерах, які їх не підтримують, вони перетворюються в звичайні елементи для введення тексту.
Тип елемента вводу Призначення Примітки tel Як ввести свій номер телефону. Елемент tel не примушує до введення тексту в певному форматі: для цього можна використовувати елемент pattern або метод setCustomValidity (), який здійснює додаткову перевірку. search Пропонує користувачеві ввести текст, який необхідно знайти. Різниця між search і text полягає в основному в оформленні. Для типу search поле введення можна оформити відповідно до полями пошуку даної платформи. url Введення одного URL. Елемент url використовується для введення окремого абсолютного URL , Який представляє досить широкий діапазон значень. email Введення одного адреси електронної пошти або списку адрес. Якщо зазначений атрибут multiple, можна ввести декілька адрес електронної пошти через кому. datetime Введення дати і часу в часовому поясі UTC. date Введення дати без часового поясу. month Введення дати із зазначенням року і місяця, але без часового поясу. week Введення дати, що складається з номера тижня і року, але без часового поясу. Приклад цього формату - 2011-W05 для п'ятого тижня 2011 року. time Введення часу із зазначенням годин, хвилин, секунд і часток секунди, але без часового поясу. datetime-local Введення дати і часу без часового поясу. number Введення числових даних. Допустимі значення - числа з плаваючою комою . range Введення числових даних (на відміну від типу number саме число не грає ролі). Реалізація цього елемента управління діапазону в більшості підтримують його браузерів - повзунок. color Вибір кольору за допомогою колірного кола. Значення має бути дійсним простим кольором в нижньому регістрі , Наприклад #ffffff.Нові атрибути введення
У HTML5 також представлено кілька нових атрибутів для елементів введення і форми.
Атрибут Призначення Примітки autofocus Фокусування введення на елементі, коли сторінка завантажена. Атрибут autofocus може застосовуватися до елементів input, select, textarea і button. placeholder Підказка для користувача про тип даних, які необхідно ввести. Значення заповнювач відображається світлим текстом, поки елемент не буде виділено і користувач не введе дані. Цей атрибут можна вказувати в елементах input і textarea. form Вказівка однієї або декількох форм, яким належить елемент введення. За допомогою атрибута form елементи введення можна розміщувати в будь-якій частині сторінки, а не тільки в об'єкті форми. Крім того, окремий елемент можна пов'язати з кількома формами. required Логічний атрибут, який означає, що елемент обов'язковий. Атрибут required корисний при виконанні перевірки на основі браузера без використання спеціального коду JavaScript. autocomplete Дозволяє вказати, що в поле не повинно використовуватися автозаповнення і в нього не слід підставляти значення, раніше введені користувачем. Атрибут autocomplete корисний для таких полів, як номер кредитної картки або одноразовий пароль, які не слід заповнювати автоматично. За замовчуванням атрибут autocomplete має стан on ( "вкл."). Щоб відключити його, встановіть значення off ( "викл."). pattern Перевірка значення елемента на основі регулярного виразу. Якщо використовується атрибут pattern, слід також вказати значення title, що описує для користувача передбачуваний шаблон введення. dirname Призначений для відправки відомостей про направлення елемента управління разом з формою. Наприклад, якщо користувач ввів текст справа наліво, а елемент введення містить атрибут dirname, то разом з введеним значенням буде відправлений параметр напрямки. novalidate Якщо в елементі форми зазначений цей атрибут, перевірка її відправки відключається. formaction Перевизначення атрибута action в елементі форми. Цей атрибут підтримується в елементах input і button. formenctype Перевизначення атрибута enctype в елементі форми. Цей атрибут підтримується в елементах input і button. formmethod Перевизначення атрибута method в елементі форми. Цей атрибут підтримується в елементах input і button. formnovalidate Перевизначення атрибута novalidate в елементі форми. Цей атрибут підтримується в елементах input і button. formtarget Перевизначення атрибута target в елементі форми. Цей атрибут підтримується в елементах input і button.Одне з удосконалень технології XMLHttpRequest - поява об'єкта FormData . За допомогою FormData можна створювати і відправляти набори з пар "ключ / значення" і файли із застосуванням XMLHttpRequest. При використанні цього методу дані відправляються в тому ж форматі, що і за допомогою методу форми submit () з типом кодування multipart / form-data.
Об'єкт FormData дозволяє оперативно створювати форми HTML на мові JavaScript і відправляти їх за допомогою методу XMLHttpRequest.send (). Нижче наведено простий приклад.
var formData = new FormData (); formData.append ( "part_num", "123ABC"); formData.append ( "part_price", 7.95); formData.append ( "part_image", somefile) var xhr = new XMLHttpRequest (); xhr.open ( "POST", "http: //some.url/"); xhr.send (formData);За допомогою об'єкта FormData також можна вводити додаткові дані в існуючу форму перед їх відправкою.
var formElement = document.getElementById ( "someFormElement"); var formData = new FormData (formElement); formData.append ( "part_description", "The best part ever!"); var xhr = new XMLHttpRequest (); xhr.open ( "POST", "http: //some.url/"); xhr.send (formData);Перевірка на основі браузера
Слід визнати, що перевірка даних форми - досить нудне заняття, однак уникнути його не можна. Сьогодні для перевірки допустимості введених даних і їх наявності в обов'язкових полях форми перед її відправкою на стороні клієнта зазвичай використовується код JavaScript або спеціальна бібліотека.
Нові атрибути введення, такі як required і pattern, в поєднанні з селекторами псевдокласів CSS, полегшують написання перевірок і зворотний зв'язок з користувачами. Є й інші вдосконалені методи перевірки, які дозволяють за допомогою коду JavaScript задавати спеціальні правила і повідомлення, а також визначати неприпустимість елемента і її причини.
Атрибут required
Якщо зазначений атрибут required, при відправці форми поле повинно містити значення. Нижче наведено приклад поля введення обов'язкового адреси електронної пошти, в якому перевіряється, введено Чи має значення і є їм дійсну адресу електронної пошти, як описано тут .
Атрибут pattern
Атрибут pattern задає регулярний вираз, що використовується для перевірки поля введення. Цей приклад демонструє обов'язкове поле введення тексту для номера деталі. Передбачається, що такий номер складається з трьох букв верхнього регістру і чотирьох цифр. Використання атрибутів required і pattern дозволяє переконатися, що в поле введено значення, яке відповідає цьому формату. Якщо користувач наводить покажчик на поле, відображається повідомлення в атрибуті заголовка.
Трохи змінивши попередній приклад, можна виділити поле введення червоним кольором, якщо в нього введений неприпустимий номер деталі. Для цього досить додати стиль CSS, що поміщає поле введення в червону рамку, якщо значення недійсне.
Атрибут formnovalidate можна застосовувати до елементів input і button. Він включає перевірку відправки форми. Нижче наведено приклад, в якому для відправки форми за допомогою кнопки "Відправити" потрібно дійсне значення, однак для її відправки за допомогою кнопки "Зберегти" воно не потрібно.
API перевірки обмежень
В API перевірки обмежень реалізовані зручні інструменти для виконання особливих перевірок. Він дозволяє вирішувати такі завдання, як установка персоналізованої помилки, перевірка допустимості елемента і визначення причини його неприпустимість. Нижче наведено приклад, в якому видається персоналізоване повідомлення про помилку, якщо значення в двох полях не збігаються.
Нижче наведено приклад форми запиту на резервування, в якій використовуються різні типи елементів введення, перевірка форми, а також селектори і стилі CSS.
Код HTML і JavaScript для форми:
<Form oninput = "total.value = (nights.valueAsNumber * 99) + ((guests.valueAsNumber - 1) * 10)"> <label> Full name: </ label> <input type = "text" id = " full_name "name =" full_name "placeholder =" Jane Doe "required> <label> Email address: </ label> <input type =" email "id =" email_addr "name =" email_addr "required> <label> Repeat email address : </ label> <input type = "email" id = "email_addr_repeat" name = "email_addr_repeat" required oninput = "check (this)"> <label> Arrival date: </ label> <input type = "date" id = "arrival_dt" name = "arrival_dt" required> <label> Number of nights (rooms are $ 99.00 per night): </ label> <input type = "number" id = "nights" name = "nights" value = "1 "min =" 1 "max =" 30 "required> <label> Number of guests (each additional guest adds $ 10.00 per night): </ label> <input type =" number "id =" guests "name =" guests " value = "1" min = "1" max = "4" required> <label> Estimated total: </ label> $ <output id = "total" name = "total"> 99 </ output> .00 <br > <br> <label> Promo code: </ label> <input type = "text" id = "promo" name = "promo" patte rn = "[A-Za-z0-9] {6}" title = "Promo codes consist of 6 alphanumeric characters."> <input type = "submit" value = "Request Reservation" /> </ form> <script > function check (input) {if (input.value! = document.getElementById ( 'email_addr'). value) {input.setCustomValidity ( 'The two email addresses must match.'); } Else {// input is valid - reset the error message input.setCustomValidity ( ''); }} </ Script>CSS для коду форми:
: Invalid {border-color: # e88; -webkit-box-shadow: 0 0 5px rgba (255, 0, 0, .8); -moz-box-shadow: 0 0 5px rbba (255, 0, 0, .8); -o-box-shadow: 0 0 5px rbba (255, 0, 0, .8); -ms-box-shadow: 0 0 5px rbba (255, 0, 0, .8); box-shadow: 0 0 5px rgba (255, 0, 0, .8); }: Required {border-color: # 88a; -webkit-box-shadow: 0 0 5px rgba (0, 0, 255, .5); -moz-box-shadow: 0 0 5px rgba (0, 0, 255, .5); -o-box-shadow: 0 0 5px rgba (0, 0, 255, .5); -ms-box-shadow: 0 0 5px rgba (0, 0, 255, .5); box-shadow: 0 0 5px rgba (0, 0, 255, .5); } Form {width: 300px; margin: 20px auto; } Input {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; border: 1px solid #ccc; font-size: 20px; width: 300px; min-height: 30px; display: block; margin-bottom: 15px; margin-top: 5px; outline: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } Input [type = submit] {background: none; padding: 10px; }