Formularze to dość problematyczna sfera. Gdy zaczynałem interesować się pisaniem kodu, zawsze traktowałem „formy” jak przykrą konieczność. Ale kiedy coraz częściej, w zleceniach zaczęła pojawiać się konieczność użycia takowych, poszperałem po sieci, i znalazłem meritum.

  1. <form id="addComments" name="addComments" action="" method="post">
  2. <fieldset>
  3. <legend>Formularz dodawania komentarzy</legend>
  4. <p><label for="name">Nick</label><input type="text" id="name" name="name" maxlength="50" /></p>
  5. <p><label for="mail">Adres e-mail</label><input type="text" id="mail" name="mail" maxlength="75" /></p>
  6. ...
  7. <p><button type="submit" id="add" name="add">Wyślij komentarz</button></p>
  8. </fieldset>
  9. </form>

I to tyle, jeżeli chodzi o część html. Druga połowa, czyli css, wydaje się dużo bardziej ciekawa, a to za sprawą przykrego faktu, że różne przeglądarki (i nie tylko IE6) różnie interpretują wartości dla pól input. Przykładowy kod, ustalę sztywną wysokość pól, font, obramowanie i tło.

  1. form#addComments p input {
  2. font: 11px "Tahoma", Arial, sans-serif;
  3. color: #333;
  4. background: #f0f0f0;
  5. border: 1px solid #eee;
  6. height: 30px;
  7. }

Po zapisaniu widać, że tekst jest w lewym-górnym narożniku. Chcemy, by był na środku. W każdym innym przypadku właściwość line-height ustawiona na wysokość równą kontenerowi załatwiłaby sprawę. Ale tutaj właśnie wychodzi wspomniany problem z przeglądarkami. Te oparte o silnik Gecko (czyli głównie Firefox), ignorują tutaj deklarację. Więc jak to rozwiązać? Ja stosuję padding, to znaczy:

  1. padding: 5px 10px

I – 5px w górę i dół, i po 10px po bokach. Warto tu pamiętać, by jednocześnie dopasować wysokość pola (odpowiednio mniejsza wartość). Trzeba też pamiętać o rozmiarze fonta.

Wkrótce opiszę prosty sposób na zastosowanie walidacji pól.