Формуляри - една от най-важните части на всеки сайт. Използва се за създаване на форми на регистрация, обратна връзка. На такива сайтове като mail.ru, "Vkontakte" и други можете да видите полетата за регистрация, в които трябва да въведете не само потребителското име и паролата, но и личната информация. То може да бъде пол, възраст, лични предпочитания и мнения и т.н. При избора на етаж са дадени две възможности: мъжки и женски. Те са представени като полета за избор. Тези полета се създават с помощта на квадратчето за етикет HTML. Полетата в HTML не винаги съвпадат с дизайна на сайта, така че те трябва да бъдат променени. В тази статия ще ви говорим за това как да направите стилизиране в CSS.
Какво е квадратче?
Това е стойността на атрибута входен маркер, съдържащ се в формата на етикет. Най-често се използва за указване на личната информация на потребителя, като лични предпочитания. Неговата разлика от радиото е, че позволява да се изберат едновременно няколко полета.
Създайте квадратче за отметка. HTML
За да поставите отметки в даден сайт, е необходимо да създадете формуляр. Това се прави с помощта на таг за сдвоени форми. Той съдържа 2 атрибута - действие и метод. Първият сочи към манипулатора на формуляри, а вторият - към метода на индексиране и към обработката на получените стойности.
Така че, ние създадохме формата, сега е необходимо да поставите отметките сами. За да направите това, използвайте единичен етикет за въвеждане. Това е универсален маркер, който се използва за създаване на всички полета на формуляри. Необходими са само квадратчета за отметка. За да ги създадете, укажете атрибута на типаза входния маркер с отметката за стойността. Имаме празни квадратчета, трябва да добавим нотация. Можете да ги въведете след маркера за въвеждане. За да маркирате квадратчето правилно, посочете стойността и името на атрибута. Име - необходимо за ръководителя, дайте му стойност, равна на името на полето. Стойността е незадължителен атрибут, но е по-добре да го използвате за удобство. Има и друг атрибут - проверен. Той няма никакви стойности, използвани за избор на полето за зареждане. Това означава, че ако зададете квадратче за отметка за този атрибут, тогава той ще бъде избран по подразбиране. Ето пример за създаване на квадратчета за отметка:
Поставяне на отметка в квадратчето. CSS
Стандартните квадратчета може да не са подходящи за вашия дизайн. Сега ще говорим за това как да създадем дизайн за квадратчето в CSS. С използването на стандартни и прости методи, освен местоположението и позиционирането, нищо не може да се промени. За да промените местоположението на квадратчето за отметка в CSS, използвайте свойството марж. С негова помощ ще поставим отметките си в центъра на уеб страницата, на кратко разстояние един от друг. Преди да започнем да променяме свойствата на квадратчето в CSS документа, трябва да коригираме HTML кода. Добавете класове, идентификатори и етикети на етикети. Всичко това е необходимо за стайлинг. Създайте 3 тагове за 3 маркера за въвеждане. Всеки етикет трябва да е пред полето за въвеждане. Това е сдвоен маркер, който има задължителен за атрибут. Необходимо е да свържете този маркер към полето за формуляр. Създаваме 3 идентификатора за нашите полета: check1 check2 check3. Посочвате същата стойност в атрибута за. Сега те са обвързани с отметки. Следва за всеки входпосочваме един клас - проверка. Той ще служи като указател за работа с чекбокса в CSS. Сега добавете своя CSS код, така че да изглежда така:
Ето някои стилове, които не принадлежат на самите квадратчета, но това е необходимо за цялостното оформление на страницата.
Ако сте направили всичко както трябва, сега формата ви с отметки ще има нормален вид.
