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".
