E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale CSS

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  CSS  /  Diverse (5)

Crearea formularelor in CSS

19.04.2008
Crearea formularelor in CSS

Formularele sunt derivate din widgets (native operating system widgets) ceea ce le face mai greu de formatat.

Total vizualizari: 23961 23961 afisari   |   Comentarii  0   |   Rating   |   (11 voturi)   |   Timp necesar: 1h 30 min 1h 30 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  Sitepoint.com  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 123456789 10 1112 »
comenteaza printeaza



Gruparea butoanelor radio si a checkbox-urilor
Modalitatea in care aceste elemente sunt asezate in pagina este putin diferita fata de campurile text, casutele select sa zonele de text (textarea). Pentru ca fac parte din propriul subgrup, ar trebui inclus intr-un fieldset imbricat in fieldset-ul principal. Folosind formularul cu imagine de fundal ca punct de plecare, putem adauga cateva elemente grupate in interiorul fieldsetului.

element-subgroups.html
<fieldset> 
<legend>Contact Details</legend> 
<ol> 
<li> 
<fieldset> 
<legend>Occupation:</legend> 
<ol> 
<li> 
<input id="occupation1" name="occupation1" 
class="checkbox" type="checkbox" value="1" /> 
<label for="occupation1">Doctor</label> 
</li> 
<li> 
<input id="occupation2" name="occupation2" 
class="checkbox" type="checkbox" value="1" /> 
<label for="occupation2">Lawyer</label> 
</li> 
<li> 
<input id="occupation3" name="occupation3"element 
class="checkbox" type="checkbox" value="1" /> 
<label for="occupation3">Teacher</label> 
</li> 
<li> 
<input id="occupation4" name="occupation4" 
class="checkbox" type="checkbox" value="1" /> 
<label for="occupation4">Web designer</label> 
</li> 
</ol> 
</fieldset> 
</li> 
</ol> 
</fieldset

Eticheta (label) subgrupului de vine legenda (legend) pentru fieldsetul imbricat, apoi fiecare checkbox si buton radio din interiorul fieldsetului primeste propria eticheta. Structura listei ordonate care a fost asezata la nivelul de sus este replicata si pusa si pe acest subnivel deasemenea, mai mult pentru constanta decat pentru necesitate desi poate fi foarte utila daca vrei sa formatezi unele din sub-elemente.

Elementele imbricate vor mosteni/prelua formatarile stabilite pentru elementele din nivelul de sus, deci va trebui sa stabilim niste reguli de formatare pentru elementele imbricate pentru a fi afisate corect:

element-subgroups.css  
fieldset fieldset { 
margin-bottom: -2.5em; 
border-style: none; 
background-color: transparent; 
background-image: none; 
} 
fieldset fieldset legend { 
margin-left: 0; 
font-weight: normal; 
} 
fieldset fieldset ol { 
position: relative; 
top: -1.5em; 
margin: 0 0 0 11em; 
padding: 0; 
} 
fieldset fieldset label { 
float: none; 
width: auto; 
margin-right: auto; 
}

In prima instanta toate formatarile de pe fieldsetul imbricat sunt indepartate:

background-color, background-image, si proprietatile marginilor (border).

Se va stabili o margine inferioara negativa. Vrem sa facem legenda sa arate exact ca o eticheta normala, deci scoatem marginea din stanga si fontul bolduit. Trebuie o atentie sporita la lungimea textului din legenda, pentru ca majoritatea browserelor nu comprima textul din cadrul unei legende.

Ca rezultat, orice latime (width)  setata mai inainte pentru textul legendei va fi ignorata, textul continuind pe linie, fiind posibil sa treaca peste restul formularului. Aceasta limitare poate fi depasita punand o latime maxima a caracterelor la textul legendei si dimensionand coloanele formularului in unitati em , astfel incat odata cu redimensionarea textului, layoutul sa se modifice corespunzator.

Limitarile legendei
Paralel cu incapacitatea elementelor legend de a comprima textul, apar si probleme la setarea latimii si alinierii textului. Folosirea elementelor legend pentru grupare in cadrul fieldsetului este posibila numai pentru etichete aliniate la stanga, nu si pentru cele aliniate la dreapta.

Folosim lista ordonata pentru a pozitiona elementele de formular imbricate si etichetele. Marginea ei din stanga departeaza chenarul de marginea din stanga, cu o cantitate echivalenta cu cea setata pentru elementele din nivelul de sus. Apoi, pentru a alinia partea de sus a elementelor de formular cu legenda lor, trebuie sa pozitionam lista ordonata relativ si sa o mutam in sus cu -1,5 em. Astfel lasam un spatiu mare in partea de jos a listei ( acolo unde lista ar fi fost daca nu era mutata relativ).  Marginea negativa trage in sus continutul dupa fieldset cu aceeasi valoare cu care am mutat lista ordonata, facand sa para ca nu exista nici un spatiu gol. Spatierea (padding) care este aplicata listei ordonate in nivelul de sus nu este necesara aici, deci setam proprietatea la 0.

Ultimul lucru care trebuie facut este sa aducem etichetele la starea initiala. Asta inseamna ca trebuie sa le oprim din a le muta si sa le setam latimea pe auto. Pentru ca sunt elemente inline ele vor sta langa elementele de formular propriu zise (butoane radio si checkboxuri).
Exista o modificare aditionala care trebuie facuta style sheet-ului de Internet Explorer: trebuie dezactivata pozitia negativa relativa pentru legendele imbricate. Nu avem de a face cu culori de fundal la elementele fieldset imbricate, deci nu avem nevoie de pozitia negativa relativa aici:

fieldset fieldset legend { 
top: 0; 
}

Odata ce noile formatari au fost create obtinem formularu de mai jos - un fieldset imbricat care se alinieaza perfect cu toate celelalte elemente de formular.

Crearea formularelor in CSS - img23

Pagina:
« 123456789 10 1112 »
comenteaza printeaza
Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(11 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4320
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4180
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4170
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4000
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Powerpoint Action Script Ruby on Rails RoR Illustrator XHTML Javascript Verilog AJAX SEO PHP HTML Fireworks Swift 3D Java SWF Photoshop Fotografie Dreamweaver Excel JSON Python Lightroom Word Vista MySQL Sony Vegas XML PSD COREL DRAW Bridge Gimp Flash StyleSheet Outlook CSS
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software