Samouczek: Formularz HTML - Kurs HTML i CSS
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.
- Otwórz edytor HTML i utwórz szkielet strony.
<html>
<head>
<title>Formularz HTML</title>
</head>
<body>
</body>
</html>
- 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.
- 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. |
- 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. |
- 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.
- 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.
- Dodaj przycisk, umożliwiający wysłanie formularza.
- Poniżej poprzedniego wpisu dodaj nowy wiersz i wpisz:
<input type="submit" value="Wyślij" />
- 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:
- Jak zamienić input type=submit na obrazek
- Jak zmienić wygląd input type=text
- Jak umieścić przyciski w formularzu