• Artykuł

          

Samouczek: Formularz HTML - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Jakub Mytko

Opublikowano: 2011-10-07

Typowym zadaniem, podczas tworzenia interaktywnej strony internetowej, jest umożliwienie użytkownikowi kontaktu z jej właścicielem. W tym celu wykorzystuje się formularze – zbiór pól, umożliwiających wpisanie danych, dokonanie wyboru i przesłanie tych informacji w miejsce wskazane w definicji formularza.

W naszym przykładzie zajmiemy się znacznikami, umożliwiającymi dodanie formularza oraz kontrolek. Zwrócimy uwagę na to, w jaki sposób przekazać dane w postaci wiadomości przesłanej na adres e-mail. Jeśli chciałbyś przesłać dane na serwer i tam je przetworzyć, potrzebujesz do tego kodu, który będzie działał po stronie serwera. Jedną z takich technologii jest ASP.NET.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • umieszczać formularz na stronie WWW.

Implementacja

Zaprojektujemy prosty formularz do umieszczenia na stronie WWW, wykorzystujący podstawowe pola. Uzyskane dane zostaną przesłane na adres e-mail.

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ęść kursu Pierwsza strona internetowa.

  1. Otwórz edytor HTML i utwórz szkielet strony.
<html>
    <head>
        <title>Formularz HTML</title>
    </head>
    <body>
    </body>
</html>
  1. 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.

Ramy formularza

Znacznikami, umożliwiającymi wstawienie formularza na stronę WWW, są znaczniki form. Znacznik otwierający <form> oraz zamykający </form> tworzą jego ramy. Pola, które mają być widoczne na stronie dodaje się wewnątrz tych ram.

Dodaj ramy formularza.

  • W znaczniku body wpisz:
<form></form>

Atrybut action

Wymagany atrybut action znacznika form umożliwia określenie adresu URL, do którego dane pobrane przez formularz mają być przesłane. Możliwe jest ich przesłanie na adres e-mail lub do aplikacji, działającej po stronie serwera. W tym przypadku potrzebne jest rozwiązanie serwerowe, jakim jest np. ASP.NET.

Dodaj wysyłanie danych na adres e-mail.

  • Wewnątrz znacznika form wpisz poniższy kod, w którym twoj_adres_email zastąpi swoim własnym adresem e-mail:
action="mailto:twoj_adres_email"

Atrybut method

Atrybut method określa metodę przekazania danych z formularza w określone miejsce. Możliwe są dwie wartości: GET oraz POST.

Informacja
Istnieją dwie metody przesyłania danych z formularza. Metoda GET umożliwia przesłanie danych w postaci zmiennych, widocznych w adresie URL. Przy metodzie POST dane są przesyłane w nagłówku wiadomości i nie są widoczne na ekranie, dlatego ta metoda jest bezpieczniejsza. Metoda POST, w przeciwieństwie do GET, nie posiada limitów wielkości przesyłanych danych. Więcej o metodach GET i POST sprawdź w Samouczku ASP.NET.

Dodaj metodę POST przesyłania danych.

  • Wewnątrz znacznika form wpisz:
method="post"
  • Sprawdź, czy plik index.html wygląda tak, jak na Rys. 2.

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

Pola input

Podstawowym znacznikiem, stosowanym przy budowie formularzy jest input, za pomocą którego dodaje się pola, umożliwiające użytkownikowi wpisanie tekstu, dokonanie wyboru i wysłanie formularza. Więcej o polu input przeczytasz w kolejnym samouczku Znacznik input w HTML.

  1. Dodaj pole typu tekstowego, umożliwiające wpisanie imienia i nazwiska oraz adresu e-mail.
  • Wewnątrz ram formularza wpisz:
Imię: <input type="text" name="imie" /> 
Nazwisko: <input type="text" name="nazwisko" /><br />
E-mail: <input type="text" name="e-mail" /><br />
Informacja
W celu sformatowania wyglądu formularza, aby był przejrzysty dla użytkownika, najczęściej po każdym z pól wstawiane są znaki końca linii. Do ułożenia elementów formularza stosuje się niekiedy również tabele.
  1. Dodaj pole typu radio, umożliwiające podanie płci w następnej linii.
  • Poniżej pól tekstowych dodaj nowy wiersz i wpisz:
Płeć: 
        Mężczyzna <input type="radio" name="plec" value="Mężczyzna" /> 
        Kobieta <input type="radio" name="plec" value="Kobieta" /><br />
Informacja
Wartość atrybutu name stanowi indywidualną nazwę dla informacji przekazanej w danym polu. W polach typu radio, w obrębie jednego wyboru, wartość atrybutu name musi być taka sama.
  1. Zapisz zmiany w pliku index.html i sprawdź, czy wygląda tak, jak na Rys. 3.

Rys. 3. Plik index.html po dodaniu podstawowych pól.

  1. Odśwież plik index.html w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 4.

Rys. 4. Widok formularza z podstawowymi polami w przeglądarce.

Pole tekstowe

Pole tekstowe różni się od pola input typu tekstowego tym, że umożliwia wpisanie wielu linijek tekstu. Wyświetlana wielkość pola jest określona przez atrybuty cols (liczba znaków w linii) i rows (liczba wierszy). Okno pola tekstowego automatycznie można przewijać, gdy wpisana wiadomość jest dłuższa niż jego wielkość.

Dodaj pole tekstowe, umożliwiające wpisanie treści wiadomości.

  • Pod polami typu radio dodaj nowy wiersz i wpisz:
<textarea name="pytanie" cols="40" rows="5">Treść wiadomości</textarea>

Lista rozwijalna

Lista rozwijalna umożliwia dokonanie wyboru jednej z wielu opcji przez użytkownika. Jest często używana w celu zaoszczędzenia miejsca na stronie, w szczególności, gdy lista opcji jest długa.

Dodaj możliwość wyboru przedziału wiekowego użytkownika.

  • Pod polem tekstowym dodaj nowy wiersz i wpisz:
Wiek:
<select name="wiek">
    <option>mniej niż 18</option>
    <option>18-25</option>
    <option>26-35</option>
    <option>36-45</option>
    <option>46-56</option>
    <option>więcej niż 56</option>
</select>

Wyczyszczenie formularza

Istnieje możliwość wyczyszczenia wypełnionych pól formularza. W celu umożliwienia zresetowania formularza przez użytkownika, stosuje się pole input typu reset. Więcej o polu input typu reset przeczytasz w części encyklopedii Jak umieścić przyciski w formularzu.

Dodaj możliwość wyczyszczenia formularza.

  • Wpisz poniżej dotychczas dodanych pól:
<input type="reset" value="Wyczyść formularz" />

Wysłanie formularza

Wysłanie formularza umożliwia pole input typu submit. Po naciśnięciu przycisku przez użytkownika, dane zostaną przesłane pod adres podany jako wartość atrybutu action w definicji formularza.

  1. Dodaj przycisk, umożliwiający wysłanie formularza.
  • Poniżej poprzedniego wpisu dodaj nowy wiersz i wpisz:
<input type="submit" value="Wyślij" />
  1. Zapisz zmiany w pliku index.html i odśwież go w przeglądarce. Sprawdź, czy formularz wygląda  tak, jak na Rys. 1.

Strona końcowa

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

<html>
<head>
    <title>Formularz HTML</title>
</head>
<body>
    <form action="mailto:twoj_adres_email" method="post">
        Imię: <input type="text" name="imie" /> 
        Nazwisko: <input type="text" name="nazwisko" /><br />
        E-mail: <input type="text" name="e-mail" /><br />
        Płeć: 
        Mężczyzna <input type="radio" name="plec" value="Mężczyzna" /> 
        Kobieta <input type="radio" name="plec" value="Kobieta" /><br />
        <textarea name="pytanie" cols="40" rows="5">Treść wiadomości</textarea><br />
        Wiek:
        <select name="wiek">
            <option>mniej niż 18</option>
            <option>18-25</option>
            <option>26-35</option>
            <option>36-45</option>
            <option>46-56</option>
            <option>więcej niż 56</option>
        </select><br />
        <input type="reset" value="Wyczyść formularz" />
        <input type="submit" value="Wyślij" />
    </form>
</body>
</html>

Podsumowanie

W tym artykule nauczyliśmy się umieszczać formularz na stronie WWW oraz poznaliśmy podstawowe atrybuty, od których zależy jego działanie. Dowiedzieliśmy się, w jaki sposób wysłać dane pobrane z formularza na adres e-mail, dzięki czemu użytkownik może porozumieć się z właścicielem strony. Poznaliśmy także podstawowe elementy, umożliwiające pobranie tekstu oraz dokonanie wyboru.

W kolejnym artykule nauczymy się, jakie znaczenie ma Znacznik input w HTML.

Dodatkowo zobacz: