Флажерите са неизбежен елемент в уеб формулярите, особено когато става въпрос за предоставяне на потребителска възможност за избор, като например приемане на Общите условия или абониране за бюлетин. В това ръководство осветлявам основните аспекти на флажерите, обяснявам техния начин на функциониране и ти давам стъпкови инструкции как да използваш флажери в твоите формуляри.
Флажерите не позволяват само прости избори Да/Не, но могат да бъдат използвани смислено в комбинация с други контроли върху формуляра. Това ръководство ще ти предостави необходимите познания, за да имплементираш и използваш правилно флажерите.
Най-важните изводи
- Флажерите са идеални инструменти за двоични решения във формуляри.
- Ако флажер не е активиран, няма да бъде предаден.
- Стойността по подразбиране на неотметнат флажер се смята за празна.
- Можеш да имаш флажери активирани по подразбиране, като използваш атрибута 'checked'.
- Разбирането на начина на функциониране на флажерите е от съществено значение за правилната обработка на данните във формуляра.
Стъпково ръководство
Стъпка 1: Създаване на флажерите
Започни със създаването на флажерите си в HTML. За това ще ти трябва атрибутът type="checkbox" и име за всяка флажер, за да идентифицираш стойността й при изпращането на формуляра.
В този пример създаваме два флажера: един за съгласие с Общите условия и един за получаване на бюлетина. Двете флажера се идентифицират с имената "accept TNCs" и "receive Newsletter".
Стъпка 2: Настройване на формуляра
Настрой формуляра си с метод GET или POST. В този пример използваме метода GET, така че изборът се вижда в URL параметъра.
Ето един прост пример за формуляр с флажери. Внимавай флажерите да са включени в <form>-таг, за да бъдат данните обработени правилно.
Стъпка 3: Проверка на предадените данни
Изпрати формуляра, без да активираш флажер. Ще забележиш, че нищо не се появява в URL адреса.
Специфичността на флажерите е, че ако не са отметнати, те не предават стойност. Това означава, че не се появяват в URL параметрите, което оставя съответните записи празни при метода GET.
Стъпка 4: Добавяне на стойности на флажерите
Активирай първия флажер и изпрати формуляра отново. Само активираните флажери ще се покажат в предадените данни.
Само флажерът, който е бил избран, ще бъде предаден. В този случай ще видиш специфичното име и стойността на активирания флажер в данните на формуляра.
Стъпка 5: Дефиниране на стойност по подразбиране
За да зададеш флажер като активиран по подразбиране, добави атрибута checked към съответния флажер.
Когато използваш атрибута checked, флажерът ще бъде активиран веднага след зареждане на страницата. Това е полезно, когато искаш определени опции да бъдат избрани по подразбиране.
Стъпка 6: Обработване на потребителски входове
Когато потребителят изпрати формулярните данни, провери стойностите на флажерите. Очаквай само имената на отметнатите кутии в предадените данни.
Важно е да се увериш, че твоят бекенд (например сървър като Node.js с Express) може да реагира правилно на празни или несъществуващи стойности.
Резюме
В това ръководство научихте основите за отметките в уеб формуляри. Сега знаете как да създавате отметки, разбирате как работят и как да се гарантира, че данните се предават правилно. Отметките представляват лесен начин за събиране на предпочитания на потребителите и трябва да бъдат взети предвид във всеки уеб формуляр.
Често задавани въпроси
Каква е разликата между отметките (Checkboxen) и радио бутоните (Radio-Buttons)?Отметките позволяват няколко избори, докато радио бутоните позволяват само един избор от много.
Защо не се изобразява отметка в URL параметрите, когато не е отбелязана?Непотвърдената отметка няма стойност и затова не се изпраща с предадените формулярни данни.
Как мога да задам отметка по подразбиране като "избрана"?Добавете атрибута checked към отметката ви в HTML документа.
Мога ли да активирам няколко отметки едновременно?Да, потребителите могат да избират няколко отметки едновременно в един формуляр.
