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: 24446 24446 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:
« 1234 5 6789101112 »
comenteaza printeaza


Alinierea etichetelor text la stanga
Pentru a pozitiona etichetele langa elementele formularului mutam (float) elementele label la stanga si le dam o latime (width) explicita:

left-aligned-labels.css (excerpt) 
fieldset { 
float: left; 
clear: left; 
width: 100%; 
margin: 0 0 1.5em 0; 
padding: 0; 
}

Setam si o margine in dreapta (margin-right) la fiecare eticheta (label) astfel incat textul etichetei sa nu fie impins in marginea elementului de formular. Trebuie sa definim o latime (width) pentru elementul mutat astfel incat toate elementele formularului sa se alinieze intr-o coloana verticala. Latimea exacta pe care o aplicam depinde de lungimea textului etichetelor. Daca este posibil, cea mai lunga eticheta ar trebui lasata fara wrapping, dar nu ar trebui sa fie un spatiu prea mare astfel incat o alta eticheta mai mica sa para neconectata de elementul ei de formular. Intr-un scenariu viitor este bine sa ai o latime de eticheta mai mica decat cea mai lunga etiheta pentru ca textul se va strange singur oricum, dupa cum vezi in imaginea de mai jos:

Crearea formularelor in CSS - img10


Odata ce mutam eticheta ne vom lovi de o problema legata de elementul de lista pe care il contine - elementul de lista nu se va extinde pentru a se potrivi cu inaltimea elementului mutat.

Aceasta problema este foarte vizibila in figura de mai jos, unde s-a aplicat o culoare de fundal (background-color) elementului de lista:

Crearea formularelor in CSS - img11


Li care contine eticheta (label) mutata nu se extinde in asa fel incat sa se potriveasca cu inaltimea etichetei.

left-aligned-labels.css
  fieldset li {
  float: left; 
  clear: left;
  width: 100%; 
  padding-bottom: 1em;
  }

Elementul de lista este mutat, va contine toate elementele secundare, dar latimea (width) trebuie sa fie setata la 100% pentru ca elementele mutate tind sa ia cea mai mica latime posibila. Setand latimea elementului de lista la 100% inseamna ca se va comporta ca si cum ar fi un element bloc nemutat. Declaram si o proprietate clear:left pentru a ne asigura ca nu vom intalni elemente de lista in jurul elementelor de formular. Clear:left inseamna ca elementul de lista va aparea intotdeauna sub orice element mutat la stanga anterior in loc sa apara langa acel element.

Totusi, odata ce mutam un element de lista, vom intalni acelasi comportament nedorit in fieldset - nu se va extinde pentru a cuprinde si elementele mutate. Deci trebuie sa mutam (float) si fieldset. Acesta este motivul principal pentru care am scos padding din fieldset mai devreme - cand setam width la 100% orice padding ne va deranja dimensiunile.

left-aligned-labels.css
  fieldset { 
  float: left;
  clear: left; 
  width: 100%;
  margin: 0 0 1.5em 0;
  padding: 0; 
  }

Toata nebunia cu mutarea elementelor se opreste aici, odata cu fieldset-ul submit (de validare). Din moment ce este ultimul fieldset din formular si pentru ca nu are nevoie de prea multe formatari CSS spre deosebire de celelalte fieldset-uri, putem opri comportamentul de mutare (floating) de tot.

left-aligned-labels.css
  fieldset.submit { 
  float: none; 
  width: auto;
  border: 0 none #FFF; 
  padding-left: 12em; 
  }

Oprind “mutarea” sisetand widthinapoi pe auto, ultimul fieldset submit (de valitare) devine un element bloc normal care sterge restul mutarilor. Asta inseamna ca formularul va creste pentru a cuprinde toate elementele fieldset. Nici unul din elementele din fieldsetul submit nu sunt mutate, dar vrem ca butonul sa se alinieze cu resul elementelor formularului. Pentru a obtine acest rezultate aplicam padding fieldset-ului insusi si aceasta actiune va alinia butonul submit cu restul elementelor din formular.

Crearea formularelor in CSS - img12


Alinierea la dreapta a etichetelor text
Seteaza alinierea textului de pe etichete astfel incat sa ajungi la un rezultat ca in imaginea de mai jos.

right-aligned-labels.css 
  label {
  float: left;
  width: 10em;
  margin-right: 1em; 
  text-align: right; 
  }

Am terminat... Acum poti alege oricare forma de layout este mai potrivita pentru pagina ta.

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