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: 25579 25579 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:
« 12 3 456789101112 »
comenteaza printeaza


Folosirea CSS
Pentru a crea fiecare din aceste tipuri de layout-uri pentru formular vom folosi marcari identice (markup) dar cu reguli diferite de CSS:
In exemplul nostru HTML arata astfel:

<form action="example.php">
<fieldset>
<legend>Contact Details</legend>
<ol>
<li>
<label for="name">Name:</label>
<input id="name" name="name" class="text" type="text" />
</li>
<li>
<label for="email">Email address:</label>
<input id="email" name="email" class="text" type="text" />
</li>
<li>
<label for="phone">Telephone:</label>
<input id="phone" name="phone" class="text" type="text" />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Delivery Address</legend>
<ol>
<li>
<label for="address1">Address 1:</label>
<input id="address1" name="address1" class="text"
type="text" />
</li>
<li>
<label for="address2">Address 2:</label>
<input id="address2" name="address2" class="text"
type="text" />
</li>
<li>
<label for="suburb">Suburb/Town:</label>
<input id="suburb" name="suburb" class="text"
type="text" />
</li>
<li>
<label for="postcode">Postcode:</label>
<input id="postcode" name="postcode"
class="text textSmall" type="text" />
</li>
<li>
<label for="country">Country:</label>
<input id="country" name="country" class="text"
type="text" />
</li>
</ol>
</fieldset>
<fieldset class="submit">
<input class="submit" type="submit"
value="Begin download" />
</fieldset>
</form>

Acest HTML foloseste exact aceeasi structura fieldset-legend-label pe care am prezentat-o anterior. Observa ca aici inauntrul fieldset-ului elementele sunt intr-o lista ordonata ale carei elemente incadreaza fiecare element al formularului/perechi de etichete pe care le folosim.

Nu sunt suficiente hooks de formatare in structura standard fieldset-label pentru a permite margini robuste, culori de fundal si alinierea pe coloana.

Exista un numar de elemente inutile pe care le-am putea adauga formularului pentru a adauga mai multe hooks de formatare. Am putea muta elementele formularului in cadrul etichetei lor si sa incadram textul etichetei intr-un span sau sa incadram cu un div fiecare pereche de elemente/etichete. Totusi nici una din aceste variante nu va contribui cu nimic la markup inafara de prezenta sa.

Fara aplicarea CSS si fara liste ordonate, markup-ul ar arata ca in imaginea de mai jos.

Crearea formularelor in CSS - img6

Imaginea urmatoare arata cum arata un formular neformatat atunci cand includem o lista ordonata.

Crearea formularelor in CSS - img7

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