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: 24473 24473 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:
« 123 4 56789101112 »
comenteaza printeaza


Utilizarea de liste in formulare
Daca nu doresti includerea unei liste in form.markup o poti substitui cu un alt element de incadrare (wrapper element); ai nevoie de un chenar suplimentar in jurul fiecarei perechi de  elemente/etichete pentru a formata formularele cum doresti.

Doua alte lucruri pe care trebuie sa le observi in HTML: - fiecare formular de introducere date are o clasa care este o replica a atributului de sau, de exemplu class=”text” type=”text”. Daca ai nevoie sa formatezi un element de formular, aceasta este o metoda facila de a-l accesa, avand in vedere ca Internet Explorer 6 nu suporta selectoarele de atribute CSS. - butonul de validare al formularului este continut in propriul fieldset cu class=”submit”. Adesea vei avea actiuni multiple la sfarsitul unui formular, precum “submit” si “cancel”. In astfel de cazuri este util sa poti grupa aceste actiuni cu  fieldset. Daca ai aplicat formatari unor elemente fieldset normale cel mai adesea vei vrea sa ai o formatare diferita pentru fieldset-ul care incadreaza aceste actiuni, deci este necesara o clasa pentru a distinge actiunile fieldset. Fileldset-ul si ce se implementeaza in el au acelasi nume de clasa pentru ca termenul “submit” are sens pentru ambii. Sunt usor de distins in CSS precedand selectorul de clasa cu un element selector asa cum vei vedea mai jos.

Aplicarea unei formatari generale
Exista o serie de formatari pe care le vom aplica pe formulare, indiferent de ce layout alegem. Aceste formatari se invart in jurul includerii de spatiu alb pentru a ajuta la separarea elementelor formularului si elementelor fieldset:

fieldset { 
margin: 1.5em 0 0 0; 
padding: 0; 
} 
legend { 
margin-left: 1em; 
color: #000000; 
font-weight: bold; 
} 
fieldset ol { 
padding: 1em 1em 0 1em; 
list-style: none; 
} 
fieldset li { 
padding-bottom: 1em; 
} 
fieldset.submit { 
border-style: none; 
}

Marginea (margin) din fieldset ajuta la separarea fiecarui grup fieldset. Toate spatiile (padding) interne sunt scoase din fieldset acum pentru ca mai tarziu vor crea probleme. Din moment ce padding nu e inclus in width, el poate imparti dimensiunile formularului daca ai width 100% si un pic de padding.

Pentru a ajuta sa definesti o ierarhie vizuala care arata clar fiecare eticheta (label) dinauntrul fieldset grupat sub  legend,  le vei da elementelor legend caracteristica bold. (font weight: bold). Trebuie sa inlocuim si spatierea care a fost scoasa de la padding de pe fieldset, deci scriem la legend  o margine in stanga de 1 em (margin-left: 1 em).

Pentru a opri numerotarea automata care ar aparea pentru lista ordonata, setam list-style pe none pe ol si deci scoatem orice formatare de numerotare sau marcare care exista in mod normal intr-o astfel de lista. Apoi, pentru a recrea spatierea interna pe care am indepartat-o din fieldset ii dam listei ordonate paddind. Nu se pune padding in partea de jos a listei pentru ca de asta se va ocupa elementul padding al ultimului element al listei.

Pentru ca butonul submit sa nu para a face parte dintr-o grupare trebuie sa luam muchiile fieldse-tului care il inconjoara. Acest lucru se realizeaza folosind fieldset.selector si setand border-style pe none.

Dupa ce ai aplicat toate aceste marcari (markup) si ai adaugat si un layout general pentru pagina vei obtine un rezultat ca in imaginea de mai jos. (un formular care incepe sa ia forma dar are inca un aspect nefinisat)

Folosirea etichetelor text  pozitionate sus
Pozitionarea etichetelor desupra elementelor de formular reprezinta cel mai usor tip de layout care se poate obtine. Elementul  label trebuie sa acopere intreaga latimea a elementului parinte.

Pentru ca elementele/etichetele formularului sunt in interiorul unor elemente de lista ordonata (care sunt elemeste bloc), fiecare pereche se va regasi pe o noua linie, ca in figura de mai jos.

Pentru a face asta trebuie sa punem elementele si etichetele formularului pe linii diferite, transformand elementele label in elemente bloc, astfel incat sa ocupe intreaga linie:

label { 
display: block; 
}

Crearea formularelor in CSS - img9

Pagina:
« 123 4 56789101112 »
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
4690
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4610
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4510
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4425
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4305
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Lightroom AJAX HTML XML Javascript JSON PSD RoR Outlook PHP Fotografie Photoshop SEO XHTML CSS Word Excel Fireworks Powerpoint Gimp Dreamweaver StyleSheet Vista Flash Action Script Swift 3D SWF MySQL Bridge Sony Vegas Verilog Python Illustrator Java COREL DRAW Ruby on Rails
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