Despre formulare

Despre formulare

Azi am început să tai un layout ce avea o parte dintr-un formular un pic… diferit de cum ar fi normal. Și anume un alt buton de upload. Și m-am gândit eu puțin și am ajuns la concluzia că elementele ce intră într-un tag form sunt cel mai greu de customizat:

  1. <legend> se comportă diferit pe firefox comparativ cu IE sau Opera, neputând fi poziționat în niciun fel – padding/margin. Singura soluție ar fi poziționare relativă a fieldset-ului și poziționare absolută a tag-ului legend. Sau folosirea unui titlu în locul lui <legend> (<h4> sau <h5>)
  2. <input type=”checkbox” /> și <input type=”radio” /> nu poți sa le convingi prea ușor de un anume background/culoare. Cred că ține și de setările sistemului de operare :)
  3. <input type=”text” /> și <textarea> au un „mic” bug în IE: dacă are o imagine ca background iar textul depășește lătimea definită, background-ul pleacă la pădure. Fix? Pentru IE6 se definește bg ca fixed. Pentru IE7 nu am găsit altă soluție decât să pun input-ul sau textarea într-un alt element (span/div) și schimb background la acest element.
  4. <select> & <option> padding-ul se aplică după ureche, în funcție de browser. În plus, în IE6 este un bug criminal: niciun element nu poate apărea deasupra unui <select>. Soluția? Dacă folosești jQuery, găsești o mulțime.
  5. Am lăsat cireașa de pe tort (bomboana de pe colivă?!) la urmă: <input type=”file” />. Un simplu style=”border:1px solid #000″ îi strică rău de tot aspectul. Soluții sunt multiple:
  • nu te legi sub nicio formă de file și te mulțumești doar cu lățime;
  • folosești o șmecherie făcută în flash (ai nevoie și de cunoștințe server side);
  • folosești o șmecherie făcută în javascript. Sau un plugin pentru jQuery (download AICI deoarece nu prea merge site-ul).

Pentru primele patru probleme există o rezolvare foarte simplă all in one. Este o versiune recentă ce rezolvă o parte din problemele inițiale (select-ul nu funcționa decât dacă se făcea click pe săgeată, nu se putea folosi tastatura).

Enjoy!

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter
windows apple dropbox facebook twitter