Stvorite stilove za stavke potvrdnog okvira. CSS

Obrasci - jedan od najvažnijih dijelova bilo kojeg mjesta. Koristi se za stvaranje oblika registracije, povratnih informacija. Na takvim stranicama kao što su mail.ru, "Vkontakte" i drugi mogli ste vidjeti polja za registraciju u kojima morate unijeti ne samo podatke za prijavu i lozinku, nego i osobne podatke. To mogu biti spol, dob, osobne preferencije i stavovi i tako dalje. Prilikom odabira katu daju se dvije mogućnosti: muška i ženska. Prikazani su kao polja za odabir. Ta su polja stvorena pomoću potvrdnog okvira HTML oznake. Polja u HTML-u ne odgovaraju uvijek dizajnu web-lokacije pa ih je potrebno izmijeniti. U ovom ćemo članku razgovarati s vama o tome kako napraviti CSS stilizacijski okvir.

Što je potvrdni okvir?

Ovo je vrijednost atributa ulazne oznake koji se nalazi u obliku oznake. Najčešće se koristi za označavanje osobnih podataka korisnika, kao što su osobne postavke. Njegova razlika od radija je u tome što omogućuje odabir više polja u isto vrijeme.

Stvorite potvrdni okvir. HTML

Da biste postavili potvrdne okvire na web-lokaciju, potrebno je izraditi obrazac. To se radi pomoću oznake uparenog oblika. Sadrži 2 atributa - radnju i metodu. Prva ukazuje na rukovatelja obrasca, a drugi na metodu indeksiranja i na obradu dobivenih vrijednosti.


Dakle, stvorili smo obrazac, sada je potrebno sami postaviti okvire za izbor. Da biste to učinili, upotrijebite jednu ulaznu oznaku. To je univerzalna oznaka koja se koristi za stvaranje svih polja obrasca. Trebamo samo potvrdne okvire. Da biste ih stvorili, navedite atribut tipaza oznaku ulaza, s potvrdnim okvirom vrijednosti. Imamo prazne potvrdne okvire, moramo dodati zapis. Možete ih unijeti nakon oznake unosa. Da bi potvrdni okvir ispravno funkcionirao, navedite vrijednost i ime atributa. Ime - potrebno za rukovatelja, dati mu vrijednost jednaku nazivu polja. Vrijednost je izborni atribut, ali je bolje koristiti ga za praktičnost. Postoji još jedan atribut - označen. Nema vrijednosti korištene za odabir polja za pokretanje. To jest, ako navedete potvrdni okvir za taj atribut, on će biti odabran prema zadanim postavkama. Ovdje je primjer stvaranja potvrdnih okvira:

Izrada potvrdnog okvira. CSS

Standardni potvrdni okviri možda nisu prikladni za vaš dizajn. Sada ćemo govoriti o tome kako stvoriti dizajn za potvrdni okvir u CSS-u. Korištenjem standardnih i jednostavnih metoda, osim lokacije i pozicioniranja, ništa se ne može promijeniti. Da biste promijenili mjesto potvrdnog okvira u CSS-u, koristite svojstvo margin. Uz njegovu pomoć, postavit ćemo naše potvrdne okvire u središte web stranice, na maloj udaljenosti jedni od drugih. Prije nego što počnemo mijenjati svojstva potvrdnog okvira u CSS dokumentu, moramo ispraviti HTML kôd. Dodajte klase, identifikatore i oznake oznaka. Sve je to potrebno za oblikovanje. Napravite 3 oznake oznaka za 3 ulazne oznake. Svaka oznaka mora biti ispred polja za unos. Ovo je uparena oznaka koja ima obvezni atribut. Potrebno je vezati ovu oznaku u polje obrasca. Izrađujemo 3 identifikatora za naša polja: check1 check2 check3. Navedite istu vrijednost u atributu for. Sada su vezani za potvrdne okvire. Sljedeći za svaki ulazodređujemo jednu klasu - provjeru. To će poslužiti kao pokazivač za rad na checkout checkoutu u CSS-u. Sada dodajte svoj CSS kôd tako da izgleda ovako:
Ovdje su neki stilovi koji sami ne pripadaju kućicama za potvrdu, ali to je potrebno za cjelokupni izgled stranice.
Ako ste sve učinili ispravno, sada će vaš obrazac s kvadratićima imati normalan izgled.

Povezane publikacije