Artykuł
10/12/2011

Samouczek: Pola w formularzu HTML - Kurs HTML i CSS

Autor: Jakub Mytko

Opublikowano: 2011-10-11

Typowym zadaniem, podczas projektowania formularzy HTML, jest grupowanie pól ze względu na charakter pobieranych danych. Zadanie to wykonuje się w celu zapewnienia większej intuicyjności obsługi formularza przez użytkownika i ułatwienia mu wypełniania pól. Dodatkowo, aby formularz był bardziej czytelny, grupom tym nadaje się tytuły, natomiast, aby zapewnić sprawne wypełnienie formularza, dla niektórych pól stosuje się etykiety.

W naszym przykładzie dokonamy grupowania pól, tytułów grup, etykiet, a także grupowania opcji w listach rozwijalnych.

Przed wykonaniem zadań powinieneś wiedzieć:

Jak dodać pola w formularzu.

Po wykonaniu zadań nauczysz się:

grupować pola ze względu na charakter pobieranych danych,
nadawać grupom tytuły,
grupować opcje w listach rozwijalnych według kategorii,
stosować etykiety.

Implementacja

Zaprojektujemy prosty formularz kontaktowy do umieszczenia na stronie. Dodamy do niego takie pola jak imię, nazwisko, płeć, pole tekstowe do zadania, pytania i listę rozwijalną w celu wyboru adresata pytania. Podzielimy je na grupy, które odpowiednio nazwiemy.

Efekt końcowy został przedstawiony na Rys. 1.

Rys. 1. Efekt końcowy zadania.

Przygotowanie strony

Przygotujemy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszą część samouczka Pierwsza strona internetowa.

Otwórz edytor HTML i utwórz szkielet strony wraz z ramami formularza.

<html>
    <head>
        <title>Pola w formularzu HTML</title>
    </head>
    <body>
        <form action="mailto:twoj_adres_email" method="post"></form>
    </body>
</html>

W znaczniku action, w miejsce twój_adres_email, wpisz swój własny adres e-mail.
Zapisz plik pod nazwą index.html i otwórz w przeglądarce internetowej. Sprawdź, czy tytuł strony jest taki, jaki chcieliśmy. Jeżeli tak – możemy przejść do kolejnego kroku.

Pola formularza

Dodaj pola formularza, którym w kolejnych krokach nadasz etykiety i podzielisz na grupy.

Dodaj pola input typu text dla imienia oraz nazwiska.

Wewnątrz ram formularza wpisz:

<input type="text" name="imie" /><br />
<input type="text" name="nazwisko" /><br />

Dodaj pola input typu radio dla wyboru płci.

Poniżej dotychczas dodanych pól wpisz:

<input type="radio" value="kobieta" name="plec" /><br />
<input type="radio" value="mężczyzna" name="plec" /><br />

Dodaj pole tekstowe, umożliwiające zadanie pytania.

Poniżej pól inputtypu radio wpisz:

<textarea name="opinia" cols="40" rows="5"></textarea><br />

Zapisz plik index.html i sprawdź, czy wygląda tak, jak na Rys. 2.

Rys. 2. Plik index.html po określeniu ram i atrybutów formularza.

Lista rozwijalna z kategoriami

Dotychczas poznaliśmy sposób tworzenia listy rozwijalnej z tradycyjną listą opcji. Co jednak zrobimy, gdy będziemy chcieli podzielić opcje według pewnych kategorii? W tym celu należy utworzyć listę normalnie, natomiast poszczególne opcje wpisać pomiędzy znaczniki <optgroup label="nazwa_grupy"> i </optgroup>, gdzie nazwa_grupy to nazwa grupy opcji – kategoria.

Dodaj listę rozwijalną z kategoriami w celu umożliwienia użytkownikowi wyboru adresata pytania.

Przed polem tekstowym wpisz:

<select>
    <optgroup label="Dział sprzedaży">
        <option>Jan Kowalski</option>
    </optgroup>
    <optgroup label="Serwis">
        <option>Michał Nowak</option>
    </optgroup>
</select><br />

Etykiety

Dodane przez nas pola nie mają jeszcze opisów. Można je wpisać tradycyjnie, tak, jak to robiliśmy w samouczku Formularz HTML, jednak najodpowiedniejsze są do tego etykiety. Dzięki ich zastosowaniu, aby uaktywnić dane pole, użytkownik nie musi w nie bezpośrednio kliknąć , lecz może również kliknąć w etykietę. Etykiety łączy się z polami za pomocą atrybutu id.

Dodaj etykiety do pól, w których można wpisać imię i nazwisko.

Do znacznika input z name="imie" dodaj atrybut:

id="imie"

Bezpośrednio przed polem dla imienia wpisz:

<label for="imie">Imię:</label>

Do znacznika input z name="nazwisko" dodaj atrybut:

id="nazwisko"

Bezpośrednio przed polem dla nazwiska wpisz:

<label for="nazwisko">Nazwisko:</label>

Dodaj etykiety do pól, w których można wybrać płeć.

Do znacznika input z value="kobieta" dodaj atrybut:

id="kobieta"

Bezpośrednio po tym polu, a przed znacznikiem <br />, wpisz:

<label for="kobieta">Kobieta</label>

Do znacznika input z value="mężczyzna" dodaj atrybut:

id="mezczyzna"

Bezpośrednio po tym polu, a przed znacznikiem <br /> wpisz:

<label for="mezczyzna">Mężczyzna</label>

Dodaj etykietę do listy rozwijalnej, która pozwala wybrać adresata.

Do znacznika select dodaj atrybut:

id="adresat"

Bezpośrednio przed tym polem wpisz:

<label for="adresat">Adresat:</label>

Zapisz zmiany w pliku index.html i sprawdź, czy wygląda tak, jak na Rys. 3.

Rys. 3. Plik index.html po dodaniu etykiet.

Odśwież plik index.html w przeglądarce. Sprawdź, czy utworzone pola mają etykiety oraz czy kursor znajdzie się w polu po kliknięciu etykiety.

Grupowanie pól

Pola formularza można grupować. Znacznik fieldset powoduje, że pola, należące do jednej grupy, są obramowane. W naszym przykładzie podzielimy pola na dwie grupy – pierwsza będzie dotyczyć danych osobowych, druga – pytania.

grupuj pola dotyczące danych osobowych.

Przed etykietą Imię: dodaj znacznik otwierający:

<fieldset>

Po etykiecie pola wyboru płci Mężczyzna dodaj znacznik zamykający:

</fieldset>

Zgrupuj pola dotyczące pytania (adresat i pole tekstowe).

Po znaczniku, zamykającym utworzoną powyżej grupę, dodaj:

<fieldset>

Po polu tekstowym dodaj znacznik zamykający:

</fieldset>

Tytuły grup

Każdej grupie można nadać tytuł, który zostanie umieszczony ponad polami z danej grupy.

Nadaj tytuł Dane osobowe pierwszej grupie.

Po znaczniku <fieldset>, otwierającym pierwszą grupę, wpisz:

<legend>Dane osobowe</legend>

Nadaj tytuł Twoje pytanie drugiej grupie.

Po znaczniku <fieldset>, otwierającym drugą grupę, wpisz:

<legend>Twoje pytanie</legend>

Zapisz zmiany w pliku index.html, odśwież go w przeglądarce i porównaj efekt z Rys. 1.

Strona końcowa

Poniżej możesz zobaczyć końcowy kod strony HTML:

<html>
<head>
    <title>Pola w formularzu HTML</title>
</head>
<body>
    <form action="mailto:twoj_adres_email" method="post">
    <fieldset>
        <legend>Dane osobowe</legend>
        <label for="imie">Imię:</label>
        <input type="text" name="imie" id="imie" /><br />
        <label for="nazwisko">Nazwisko:</label>
        <input type="text" name="nazwisko" id="nazwisko" /><br />
        <label for="kobieta">Kobieta</label>
        <input type="radio" value="kobieta" name="plec" id="kobieta" /><br />
        <label for="mezczyzna">Mężczyzna</label>
        <input type="radio" value="mężczyzna" name="plec" id="mezczyzna" /><br />
    </fieldset>
    <fieldset>
        <legend>Twoje pytanie</legend>
        <label for="adresat">Adresat:</label>
        <select id="adresat">
            <optgroup label="Dział sprzedaży">
                <option>Jan Kowalski</option>
            </optgroup>
            <optgroup label="Serwis">
                <option>Michał Nowak</option>
            </optgroup>
        </select><br />
        <textarea name="opinia" cols="40" rows="5"></textarea><br />
    </fieldset>
    </form>
</body>
</html>

Podsumowanie

W tym artykule nauczyliśmy się stosować grupowanie pól w formularzu HTML oraz nadawać grupom tytuły. Poznaliśmy również zastosowanie etykiet oraz dowiedzieliśmy się, w jaki sposób można nadać kategorie grupom opcji w liście rozwijalnej.

W kolejnym artykule nauczymy się, na czym polega Walidacja WWW.

Dodatkowo zobacz: