Ustvarite sloge za elemente potrditvenega polja. CSS

Obrazci - eden najpomembnejših delov vsake lokacije. Uporablja se za ustvarjanje oblik registracije, povratnih informacij. Na takih straneh, kot so mail.ru, "Vkontakte" in drugi, si lahko ogledate polja za registracijo, v katerih morate vnesti ne samo uporabniško ime in geslo, ampak tudi osebne podatke. Lahko so spol, starost, osebne preference in poglede itd. Pri izbiri nadstropja so podane dve možnosti: moški in ženski. Predstavljeni so kot polja za izbor. Ta polja so ustvarjena s potrditvenim poljem oznake HTML. Polja v HTML-ju se ne ujemajo vedno z zasnovo spletne strani, zato jih je treba spremeniti. V tem članku vam bomo govorili o tem, kako v CSS narediti potrditveno polje za stilizacijo.

Kaj je potrditveno polje?

To je vrednost atributa vhodne oznake, ki je v obliki oznake. Najpogosteje se uporablja za označevanje osebnih podatkov uporabnika, kot so osebne nastavitve. Razlika od radia je v tem, da omogoča izbiro več polj hkrati.

Ustvarite potrditveno polje. HTML

Za postavitev potrditvenih polj na spletnem mestu je potrebno ustvariti obrazec. To se izvede z uporabo seznanjene oznake obrazca. Vsebuje 2 atributa - dejanje in metodo. Prva kaže na vodnika obrazcev, drugi na metodo indeksiranja in na obdelavo dobljenih vrednosti.


Torej smo ustvarili obrazec, zdaj pa je potrebno postaviti potrditvena polja sama. To naredite tako, da uporabite eno samo oznako vhoda. To je univerzalna oznaka, ki se uporablja za ustvarjanje vseh polj obrazca. Potrebujemo le potrditvena polja. Za njihovo izdelavo podajte atribut tipaza vhodno oznako s potrditvenim poljem za vrednost. Imamo prazna potrditvena polja, moramo dodati zapis. Lahko jih vnesete po vhodni oznaki. Če želite, da potrditveno polje deluje pravilno, podajte vrednost in ime atributa. Ime - zahtevano za vodnika, mu podajte vrednost, ki je enaka imenu polja. Vrednost je neobvezen atribut, vendar je bolje uporabiti za udobje. Obstaja še en atribut - označen. Za izbiro zagonskega polja ni uporabljenih nobenih vrednosti. To pomeni, da če določite potrditveno polje za ta atribut, bo privzeto izbran. Tukaj je primer ustvarjanja potrditvenih polj:

Izdelava potrditvenega polja. CSS

Standardna potrditvena polja morda niso primerna za vašo zasnovo. Zdaj bomo govorili o tem, kako ustvariti oblikovanje za potrditveno polje v CSS. Z uporabo standardnih in preprostih metod se poleg lokacije in pozicioniranja ničesar ne da spremeniti. Če želite spremeniti mesto potrditvenega polja v CSS-ju, uporabite lastnost oznake. S svojo pomočjo bomo potrditvena polja postavili v središče spletne strani, na kratki razdalji drug od drugega. Preden začnemo spreminjati lastnosti potrditvenega polja v dokumentu CSS, moramo popraviti našo HTML kodo. Dodajte razrede, identifikatorje in oznake oznak. Vse to je potrebno za oblikovanje. Ustvarite 3 oznake oznake za 3 vhodne oznake. Vsaka oznaka mora biti pred vnosnim poljem. To je seznanjena oznaka, ki je obvezna za atribut. To oznako morate povezati s poljem obrazca. Ustvarjamo 3 identifikatorje za naša polja: check1 check2 check3. V atributu for podate isto vrednost. Zdaj so vezani na potrditvena polja. Naprej za vsak vnosdoločimo eno preverjanje razreda. To bo služil kot kazalec za delo na checkout checkout v CSS. Sedaj dodajte svojo kodo CSS, tako da izgleda tako:
Tukaj je nekaj stilov, ki ne pripadajo samim okencem, vendar je to potrebno za celotno postavitev strani.
Če ste vse naredili prav, bo vaš obrazec s potrditvenimi polji normalno videti.

Sorodne publikacije