Formuláře - jedna z nejdůležitějších částí každého místa. Používá se k vytváření forem registrace, zpětné vazby. Na takových stránkách, jako je mail.ru, "Vkontakte" a další, můžete vidět registrační pole, ve kterém je třeba zadat nejen přihlašovací jméno a heslo, ale také osobní údaje. Může to být pohlaví, věk, osobní preference a názory atd. Při výběru podlahy jsou uvedeny dvě možnosti: muž a žena. Zobrazují se jako pole pro výběr. Tato pole jsou vytvořena zaškrtávací políčko HTML tag. Pole v kódu HTML nemusí vždy odpovídat návrhu webu, takže je třeba je upravit. V tomto článku vám budeme mluvit o tom, jak vytvořit zaškrtávací políčko stylizace v CSS.
Co je zaškrtávací políčko?
Toto je hodnota atributu vstupní značky obsaženého ve formuláři značky. Nejčastěji se používá k označení osobních údajů uživatele, jako jsou osobní preference. Její rozdíl od rozhlasu spočívá v tom, že umožňuje volbu více polí současně.
Vytvořte zaškrtávací políčko. HTML
Umístěním zaškrtávacích políček na stránky je nutné vytvořit formulář. To se provádí pomocí párového formuláře. Obsahuje 2 atributy - akce a metodu. První odkazuje na obsluhu formuláře a druhý na metodu indexování a na zpracování výsledných hodnot.
Takže jsme vytvořili formulář, nyní je třeba umístit políčka sami. Chcete-li to provést, použijte jednu vstupní značku. Toto je univerzální značka, která se používá k vytvoření všech polí formuláře. Potřebujeme pouze zaškrtávací políčka. Chcete-li je vytvořit, zadejte atribut typepro vstupní značku, zaškrtávací políčko. Máme prázdné zaškrtávací políčka, musíme přidat notaci. Můžete je zadat po vstupní značce. Zaškrtávací políčko funguje správně, zadejte hodnotu atributu a název. Název - požadovaný pro psovoda, dát mu hodnotu rovnou jménu pole. Hodnota je volitelný atribut, ale je lepší jej použít pro pohodlí. Je zde ještě jeden atribut - zkontrolován. Pro výběr bootovacího pole nemá žádné hodnoty. To znamená, že pokud zaškrtnete zaškrtávací políčko pro tento atribut, bude ve výchozím nastavení vybrán. Zde je příklad vytváření zaškrtávacích políček:
Zaškrtávací políčko. CSS
Standardní zaškrtávací políčka nemusí být vhodné pro váš návrh. Nyní budeme hovořit o tom, jak vytvořit návrh pro zaškrtávací políčko v CSS. Použitím standardních a jednoduchých metod, kromě umístění a umístění, se nic nemění. Chcete-li změnit umístění zaškrtávacího políčka v CSS, použijte vlastnost okrajů. S jeho pomocí vytvoříme zaškrtávací políčka ve středu webové stránky v krátké vzdálenosti od sebe. Než začnete měnit vlastnosti zaškrtávacího políčka v dokumentu CSS, musíme opravit náš kód HTML. Přidat třídy, identifikátory a značky štítků. To vše je nezbytné pro styling. Vytvořte 3 značky tagů pro 3 vstupní značky. Každý štítek musí být před vstupním polem. Toto je párová značka, která má povinný atribut. Je nutné tuto značku svázat do pole formuláře. Pro naše pole vytvoříme 3 identifikátory: check1 check2 check3. Zadáte stejnou hodnotu v atributu for. Nyní jsou vázány na zaškrtávací políčka. Dále pro každý vstupspecifikujeme jednu třídu - kontrolu. Bude sloužit jako ukazatel, který bude pracovat na checkboxu v CSS. Nyní přidejte kód CSS tak, aby vypadal takto:
Zde jsou některé styly, které nepatří do samotných zaškrtávacích políček, ale to je nezbytné pro celkové rozložení stránky.
Pokud jste udělali všechno v pořádku, váš formulář se zaškrtávacími políčkami bude mít normální vzhled.
