HTML & CSS dla początkujących (cz. 46): Formularz kontaktowy (1)

Zakładam tutaj, że stworzycie dodatkowy plik HTML. Ja osobiście zapisuję go jako kontakt.html. Kontakt.html znajduje się na tym samym poziomie co index.html, z którym już się zapewne dobrze zapoznaliście.

W tej pierwszej części będą wprowadzone podstawowe ustawienia formularza. Kwestie takie jak zaokrąglone narożniki, gradienty kolorów itp. zostaną omówione w następnym poradniku.

Wewnątrz pliku kontakt.html tworzony jest formularz. Formularz jest definiowany w obszarze div o klasie content. Następnie zastanówcie się, jakie pola chcecie utworzyć. Ja postanowiłem zgromadzić następujące informacje:

• Nazwa
• Adres e-mail
• Komentarz

Oczywiście musicie sami zdecydować, jakie informacje chcecie pozyskać. Zasadniczo jednak zalecam pozyskiwanie tylko faktycznie potrzebnych danych. Większość odwiedzających strony internetowe unika bowiem obszernych formularzy. Dlatego zachowajcie to w skrócie.

Podstawowa struktura mojego formularza wygląda następująco:

<div class="content">
   <form class="form" action="#" method="post">
   <fieldset>
   <legend>Kontakt z nami</legend>
   <ol>
      <li>
      <label for="name">Nazwa:</label>
      <input type="text" name="name" id="name" value="" />
      </li>
      <li>
      <label for="email">Adres e-mail:</label>
      <input type="text" name="email" id="email" value="" />
      </li>
      <li>
      <label for="comment">Komentarz:</label>
      <textarea cols="32" rows="7" name="content" id="content"></textarea>
      </li>
      <li class="button">
      <input type="submit" name="submit" id="submit" value="Wyślij" />
      </li>
   </ol>
   </fieldset>
   </form>
</div>

Formularz początkowo nie zawiera żadnych specyfikacji. Wokół pól formularza zostało zastosowane określenie fieldset. Jak tworzyć pola formularza i co oznaczają elementy label, zostało już szczegółowo opisane. W tym miejscu skupiamy się zatem na projektowaniu formularza.

Podgląd wyniku w przeglądarce ujawnia na razie dość mało atrakcyjny formularz.





Oczywiście trzeba to jeszcze poprawić.

Najpierw wprowadzane są podstawowe informacje dotyczące formularza.

form {
   padding: 3px 0 0;
   margin: 10px auto;
   width: 550px;
 }

Tutaj definiowane są marginesy zewnętrzne i wewnętrzne. Dodatkowo, dla formularza ustawiana jest szerokość 550 pikseli.

Kolejny krok dotyczy projektowania fieldset.

fieldset {
   padding: 10px 20px 25px;
 }

Tutaj również ustawiane są marginesy.

Samo pola formularza zostały utworzone w uporządkowanej liście ol.

ol {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }

Aby lista ta nie wyglądała już jak lista, używane jest list-style-type: none;. Dodatkowo, marginesy i wewnętrzne odstępy są ustawione na 0.

W następnym kroku definiowane są pozycje podlisty. Elementy te są ustawione z wybiciem w lewo i mają wewnętrzny margines 10 pikseli.

li {
   float: left;
   padding: 10px;
 }

Jest jeszcze szczególna cecha dotycząca przycisku znajdującego się pod formularzem. Powinien być on wyrównany do prawej.

li.button {
   float: none;
   clear: both;
    text-align: right;
 }

Tytuł formularza

Przejdźmy teraz do elementu legend. Za jego pomocą definiowany jest tytuł formularza.





Definicja dla tytułu wygląda następująco:

fieldset legend {
   font-weight: bold;
   font-size: 22px;
   margin: 20px 0 0 10px;
 }

Etykiety

Element label był już przedmiotem omawianych w tej serii. Poprzez to label można ustawić logiczny związek między opisem pola a właściwym polem formularza. W odniesieniu do definicji CSS, istnieje tu pewna cecha szczególna.

label {
   display: block;
   cursor: pointer;
   font-weight: bold;
   line-height: 24px;
 }

Wyposażam element label m.in. w zdefiniowany cursor. Dzięki temu odwiedzającym sygnalizuje się, że etykiety pól są klikalne. Po kliknięciu na opis pola, kursor automatycznie jest ustawiany w odpowiednie pole.

Stylizacja pól formularza

W kolejnym kroku zostaną dostosowane właściwe pola formularza. Najpierw podstawowe informacje dotyczące elementów input i textarea.

input, textarea {
   color: #3399FF
   border: 1px solid #3399FF;
   font: 13px Helvetica, Arial, sans-serif;
   padding: 8px 10px;
   width: 190px;
 }

To wyłącznie kwestie dotyczące projektowania. Szczególną uwagę należy zwrócić na ramki. Gdy kursor jest umieszczony w polu, zmienia się kolor obramowania. Jest to nie tylko aspekt estetyczny. Faktycznie pomaga on odwiedzającym w wypełnianiu formularza. Dzięki temu zawsze widzą, w którym polu znajduje się kursor.

Teraz podane są pewne informacje odnośnie pola tekstowego wielolinijkowego.

textarea {
   width: 430px;
   overflow: auto;
 }

Szerokość tego pola jest ustawiona na 430 pikseli. Trochę dziwnie może wyglądać na pierwszy rzut oka instrukcja overflow: auto w kontekście pól tekstowych wielolinijkowych. Ta linia jest spowodowana starszymi wersjami Internet Explorera. Faktycznie ten przeglądarka pokazywał paski przewijania nawet w polach tekstowych wielolinijkowych, gdy nie było to konieczne. Dzięki overflow: auto można ominąć ten problem estetyczny.

Zaprojektować przycisk Wyślij

Obecnie przycisk Wyślij prezentuje się dosyć skromnie. To się teraz zmieni. Wynik będzie wyglądać następująco:





Przyciskowi zostaną przypisane różne cechy.

• Kolor tła

• Wygląd tekstu

• Ramka

• Odstępy

Odpowiednia składnia CSS prezentuje się następująco:

input[type="submit"] {
   background-color: #3399FF;
   color: #fff;
   cursor: pointer;
   font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
   border: 1px solid #000;
   padding: 5px 10px;
   width: auto;
 }

Warto tutaj wspomnieć o zastosowaniu input[type="submit"]. Poprzez ten selektor uzyskuje się dostęp do elementów input, które posiadają kombinację atrybutu-wartości type="submit".