Dark Wood

Formularele de contact au devenit o prezenta constanta in cadrul paginilor web, ele facilitand comunicarea intre dintre user si administratorul site-ului. Daca despre trimiterea de date ,cu ajutorul unui formular, am mai scris, despre customizarea grafica a acestora voi pomeni in articolul de fata. Mai exact, va voi prezenta o metoda simpla de a personaliza campurile de tip text, acestea fiind si cele mai des intalnite.

Customizarea se poate face prin doua abordari: direct pe input, sau aplicand CSS pe input si pe div-ul care contine campul respectiv. In randurile de mai jos voi descrie a doua abordare, ea putand fi usor adaptata la alte situatii.

Codul html ar trebui sa arate in felul urmator:

<div class=”searchForm”>

<input type=”text” name=”input”  />

</div>

Daca lasam “nestilizat” acest cod, input-ul se va afisa diferit in browsere – inaltimi diferite, border diferit, etc. (cu cele mai mari probleme in IE, bineinteles). Ca sa obtinem un rezultat asemanator in toate browserele, si pentru a realiza un formular cu design frumos, vom apela la putin CSS:

Mai intai vom formata div-ul container, adaugand-ui background-ul custom:

.searchForm{background: url(../images/input.jpg) no-repeat center;  float: left; width:340px; height: 24px; }

Apoi vom reseta campul de input text, anuland-ui border-ul si background-ul pe care le lua default:

.searchForm input{border:0 none; border-collapse:collapse; background: none;}

Putem adauga padding, font-size si line-height pentru un rezultat mai bun. Asemanator se pot personaliza si field-urile de tip textarea sau butoanele de send si reset. Mai greu de customizat sunt drop-down-urile si campurile de tip browse file, dar nimic nu este imposibil, cu putin CSS si JavaScript.

Spor la treaba si la web design!