Маркиране на HTML5 формуляри
Превод: Валерия Заруцкая
HTML формулярите може да са често срещани, но те са неразделна част от повечето сайтове и приложения. В четвъртата версия на HTML полетата за въвеждане бяха ограничени до списъка по-долу:
Практически курс за оформление на адаптивен уебсайт от нулата!
Вземете курса и научете как да създавате модерни уебсайтове в HTML5 и CSS3
input type="hidden" - за данни, които потребителят не може да види
input type="file" - за изтегляне
textarea - за по-голям текст
изберете - за падащи списъци
бутон – Използва се предимно за изпращане на формуляр, въпреки че могат да се използват и input type="submit" и input type="image".
Опциите за стилизиране на CSS бяха ограничени,
персонализираните контроли и селектори на цветове трябва да са дефинирани в кода и
Допълнителни типове въвеждане в HTML5
url : въведете връзка
търсене : поле за търсене с премахнати нови редове
число : число с десетични знаци
диапазон : контрола за въвеждане на приблизителна стойност, обикновено изглежда като плъзгач
дата : въведете ден, месец и година
datetime : въведете ден, месец, година, час, минута, секунда и микросекунда в зависимост от зададената часова зона
datetime-local : въвеждане на дата и час без часова зона
месец : въведете месец и година без часова зона
седмица : въведете номера на седмицата без часовата зона
време : въведете час без часова зона
цвят : позволява ви да изберете цвят
Атрибути на полето за въвеждане
Освен ако не е указано друго, полетата за въвеждане могат да бъдат едно от следните, специфични за формуляриатрибути. Някои от тях са булеви атрибути, което означава, че не изискват стойности, например
Въпреки че можете да ги добавите, ако предпочитате по-строг синтаксис, подобен на XHTML
име : поле за въвеждане на име
стойност : първоначална стойност
отметнато : Поставя отметка в квадратче или включва радио бутон
maxlength : Максималната дължина на въведения низ. Може да се приложи и към елементи на текстово поле в HTML5
minlength : Минималната дължина на въведения низ. Това е документирано, но към момента на писане поддръжката на браузъра е лоша и този атрибут причинява неуспех на валидаторите. Алтернативно решение е pattern=".", което ще принуди полето за въвеждане да има поне три знака
placeholder : текст на подсказка, показан в полето за въвеждане
автофокус : фокусът ще бъде върху това (нескрито) поле при зареждане на страницата
задължително : показва, че трябва да се въведе стойност
шаблон : проверява дали въведената стойност съответства на шаблона
min : минимална позволена стойност (числа и дата)
max : максимално допустима стойност (числа и дата)
стъпка : стъпка на стойността. Например, input type="number" min="10" max="19" step="2" ще позволи само стойностите 0, 12, 14, 16 или 18.
автоматично довършване : Предоставя на браузъра подсказка за автоматично довършване, като например „имейл на акаунта“ или може да се включва и изключва
inputmode : Указва режима на въвеждане. Най-полезни настройки:
verbatim - дословно въвеждане, като потребителски имена,latin - правопис на латиница, като полета за въвеждане,latin-name - имена, които започват с,latin-prose - низово съдържание, като съобщения, туитове и др.,numeric - числова стойност, където стойността на число или диапазон е неподходяща, като например номер на кредитна карта
размер : размер в знаци за полета за въвеждане на текст или парола или в пиксели за имейл, телефон, url или типове въвеждане
търсене. Вероятно е най-добре да избягвате този атрибут, т.к полетата за въвеждане трябва да бъдат стилизирани с помощта на CSS.
Практически курс за оформление на адаптивен уебсайт от нулата!
Вземете курса и научете как да създавате модерни уебсайтове в HTML5 и CSS3
редове : брой текстови редове (само текстово поле)
cols : количество текст в колони (само текстово поле)
списък : сочи към набор от избори от списъка с данни
проверка на правописа : приема true и false за активиране/деактивиране на проверката на правописа
form : ID на формуляра, към който принадлежи това поле за въвеждане. По принцип полетата за въвеждане трябва да бъдат вложени във формуляр, но този атрибут позволява полетата за въвеждане да бъдат навсякъде на страницата.
formaction : Указва връзка за отмяна на действието на формуляра при изпращане (само бутони за изпращане/изображение)
formmethod : указва GET или POST за замяна на метода на формуляра (само бутони за изпращане/изображение)
formenctype : дефинира типа съдържание при изпращане (текст/обикновен, multipart/form-data или application/x-www-form-urlencoded само за бутони за изпращане/изображения)
formtarget : Указва целевия прозорец/рамка, за да замени целевия атрибут на формуляра при изпращане (само бутони за изпращане/изображение)
само за четене : стойността на полето за въвеждане не може да бъде променена, въпреки че ще бъде валидирана и изпратена
disabled : деактивира полето за въвеждане - няма да има валидиране или изпращане
ПлащанеОбърнете внимание, че полетата за дата винаги трябва да използват формат ГГГГ-ММ-ДД (година-месец-ден) за атрибутите стойност, мин. и макс. Следният пример прави задължително въвеждането на имейл, който завършва на @mysite.com и има фокус върху зареждането на страницата:
Списъци с данни
Списъкът с данни съдържа набор от подходящи стойности за всяко поле за въвеждане, например:
Но имайте предвид, че изпълнението е различно. Например Firefox автоматично запълва самия текст (Internet Explorer), докато Chrome предпочита стойността (IE) и показва текста в сиво:
Деактивиране на валидирането
Валидирането на целия формуляр може да бъде деактивирано чрез използване на атрибута novalidate на елемента на формуляра. Като алтернатива можете да добавите атрибута formnovalidate към бутона за изпращане/изображение. Не забравяйте, че атрибутът disabled деактивира проверката за полето за въвеждане.
Изходни полета
Въпреки че основно обсъждаме полета за въвеждане, HTML5 предоставя и изходни полета само за четене:
изход - резултат от изчисление или действие на потребителя
напредък - изпълнение на зареждане (атрибутите стойност и макс определят състоянието)
метър - скала, която може да се променя от червено, жълто до в зависимост от стойността, дадена на стойността, мин., макс., ниска, висока и оптимални атрибути
Разделяне и етикетиране на полета за въвеждане
Спецификацията на формулярите whatwg.org гласи:
Всеки раздел на формуляра се счита за абзац и обикновено се отделя от другите елементи с p елементи.
Интересното е, че обикновено използвам divs, въпреки че се съмнявам, че има голяма разлика по отношение на семантиката. Въпреки че тагът p е по-къс, може да се нуждаете от клас, за да промените полетата. По-важното е, че трябва да използвате етикетни елементи около или зад самото поле за въвеждане, като използвате атрибута for withидентификатор на полето за въвеждане, например:
Липса на стандарти за контрол
Няма специфични за интерфейса указания, които разработчиците на браузъри да следват. И това не е случайно: типичен инструмент за избор на дата, управляван от мишката на настолно устройство, може да е твърде малък за мобилно, така че разработчиците могат да внедрят алтернатива, управлявана от докосване.
Поддръжка на браузър
Не всеки тип поле за въвеждане или атрибут се поддържа от браузърите. Като цяло повечето модерни браузъри след IE10 поддържат типове като имейл и номер. Полетата за въвеждане на дата обаче се поддържат само от браузъри, базирани на двигателите Blink и Webkit към момента на писане. Браузърите ще ги представят като обикновени текстови полета и ще игнорират атрибутите, ако техните стойности не се поддържат.
Винаги използвайте правилния тип!
Важно е да използвате правилния тип данни за данните, които изисквате. Това може да изглежда очевидно, но ще се окажете в ситуации, в които искате да използвате стандартно текстово поле. Обърнете внимание на датите. Поддръжката е неравномерна по природа и води до проблеми с внедряването:
Стандартният тип въвеждане на дата винаги връща стойност във формат ГГГГ-ММ-ДД (година-месец-ден), независимо как изглежда инструментът за избор на дата във вашето местоположение.
IE и Firefox ще показват стандартното поле за въвеждане на текст, но вашите потребители ще трябва да въведат данни във формат MM-DD-YYYY за САЩ и DD-MM-YYYY за Европа.
Валидиране от страна на сървъра
Проверката на браузъра не е гарантирана. Дори ако принудите всички да използват най-новата версия на Chrome, никога няма да можете да предотвратите следното:
потребителят може да промени вашия html код искриптове с помощта на инструменти на браузъра
изпращане от системи извън вашия контрол,
или подправяне на данни между браузъра и вашия сървър (определено чрез HTTP).
Валидирането от страна на клиента никога не е било и никога няма да бъде заместител на валидирането от страна на сървъра. Необходима е валидация на данните от страната на сървъра. Хубаво е да го има на клиента.
И накрая, не забравяйте, че датата може да бъде получена във формат ГГГГ-ММ-ДД или във формат, който посочите (ММ-ДД-ГГГГ, ДД-ММ-ГГГГ и т.н.). Проверете първите четири знака или използвайте естествени методи за анализ на езика/рамката, ако е необходимо.
Разгледахме много в тази статия, а в следващата ще разгледаме свойствата на CSS, свързани с формуляри.
Автор: Крейг Бъклър
Издание: Командата webformyself.
Практически курс за оформление на адаптивен уебсайт от нулата!
Вземете курса и научете как да създавате модерни уебсайтове в HTML5 и CSS3