Formularze

Rozdział 9

Do tej pory udało się nam stworzyć kilka elementów strony internetowej. Nie wspomnieliśmy jednak nic o formularzach, w których użytkownik mógłby wpisać dane. Formularze w internecie używane są w wielu miejscach - wyszukiwarka, Facebook, czy Gmail - wszędzie mamy do czynienia z miejscami, gdzie możemy coś wpisać i wysłać dalej. Spróbujmy stworzyć prosty formularz do komentowania naszego artykułu.

Niech wygląda on następująco:

Spróbujmy zaznaczyć teraz poszczególne elementy, z których składa się formularz. Użyjemy tego samego koloru zaznaczenia dla tych, które pełnią podobną funkcję:

Jak widać, na niebiesko zaznaczyliśmy opisy poszczególnych pól formularza. Na zielono elementy, gdzie można wpisać tekst w jednej linijce, na brązowo pole do wpisywanie dłuższego tekstu, a kolorem różowym zaznaczyliśmy przycisk do wysyłania formularza.

Pytanie teraz, jakie tagi wybrać dla każdej z tych grup. Dla oznaczeń będzie to <label>. Dla krótkich pól – <input type="text">, do dłuższych wypowiedzi będzie <textarea>. Przyciski dodawania zrobimy natomiast z <input type="submit">. Są to najpopularniejsze elementy HTML, jakich używa się do tworzenia formularzy na stronach internetowych.

Zaczynamy standardowo od pustego szablonu strony HTML, który będziemy stopniowo uzupełniać.

<!DOCTYPE html>
<html lang="pl">
  <head>
      <meta charset="utf-8">
      <title>Formularz</title>
      <link rel="stylesheet" href="main.css">
  </head>
  <body>
  </body>
</html>

Jako że mamy do czynienia z formularzem, musimy zastosować odpowiedni tag, który "powie" przeglądarce, hej, od tej pory zaczyna się formularz (podobnie jak to było dla artykułu z tagiem <article>). W HTML jest na szczęście <form>!

<!DOCTYPE html>
<html lang="pl">
  <head>
      <meta charset="utf-8">
      <title>Formularz</title>
      <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <form>
    </form>
  </body>
</html>

Następnie czas na wstawienie pierwszego pola formularza wraz z opisem "Twój nick". Od tej pory będę umieszczał wycinki z kodu zaczynając od <form>, ponieważ reszta jest Ci dobrze znana.

<form>
  <label for="nickname">Twój nick:</label>
  <input type="text" id="nickname" name="nickname">
</form>

Wstawiliśmy dwa elementy. <label> dla opisu oraz <input> dla pola do wpisywania tekstu. <input> ma trzy atrybuty – type o wartości text, name o wartości nickname i id również o wartości nickname. Pierwszy, type, oznacza, że jest to krótkie pole tekstowe. Za każdym razem, gdy będziesz potrzebował takiego pola:

użyjesz w kodzie <input type="text">. Wiedz też, że takie pole może zostać specjalnie ostylowane w CSS, a więc możemy na przykład zmienić mu ramkę, szerokość czy odstępy pomiędzy wpisanym tekstem a obramowaniem:

Oprócz atrybutu type, użyłem również atrybutu name. Otóż służy on do nazwania każdego z pól. Jest to przydatne kiedy wysyłamy taki formularz do serwera – wtedy łatwo zidentyfikować z jakiego pola pochodzi dana treść. Zauważ korelację pomiędzy wartością identyfikatora id a wartością atrybutu for w <label>:

<label for="nickname">Twój nick:</label>
<input type="text" id="nickname" name="nickname">

W atrybucie for należy podać id pola, jakie opisuje element <label>. Dzięki temu klikając na opis w <label>, dane pole automatycznie uaktywni się i będziemy mogli w nim coś wpisać.

Pora na kolejny element formularza – e-mail.

<form>
  <label for="nickname">Twój nick:</label>
  <input type="text" id="nickname" name="nickname">
  <label for="user-email">Twój e-mail:</label>
  <input type="email" id="user-email" name="user-email">
</form>

Jedyna różnica w porównaniu z poprzednim polem leży w atrybucie type. Tym razem jego wartością jest email, co jest całkiem logiczne, ponieważ mamy do czynienia z miejscem na wpisanie swojego adresu e-mail. Co ciekawe, stosując taką wartość, wiele urządzeń mobilnych dostosowuje wygląd klawiatury, by jak najwygodniej wpisywało się adres. Przy okazji wszystko, co wpiszemy w to pole, a co nie będzie spełniało założeń poprawnego adresu e-mail (np. brak znaku @) zostanie sprawdzone, a przeglądarka wyświetli stosowny komunikat i nie pozwoli wysłać takiego formularza w świat.

Kolejne pole, jakie musimy dodać, to miejsce na wpisanie treści komentarza. Do dłuższych tekstów jest w HTML tag <textarea>:

<form>
  <label for="nickname">Twój nick:</label>
  <input type="text" id="nickname" name="nickname">
  <label for="user-email">Twój e-mail:</label>
  <input type="email" id="user-email" name="user-email">
  <label for="content">Treść:</label>
  <textarea rows="10" cols="50" id="content"  name="content" ></textarea>
</form>

Zauważ, że pojawiły się tutaj dwa nowe atrybuty - rows i cols. rows oznacza liczbę linijek tekstu, jakie można wpisać do <textarea>, a które będą widoczne od razu, bez przesuwania (tzw. "skrolowania") paska bocznego. W cols podajemy maksymalną liczbę znaków na jedną linijkę. Spróbuj zmienić te własności, by zobaczyć, jak zwiększa się lub zmniejsza to pole.

Ostatnia rzecz, jaką musimy dodać to przycisk do wysyłania formularza.

<form>
  <label for="nickname">Twój nick:</label>
  <input type="text" id="nickname" name="nickname">
  <label for="user-email">Twój e-mail:</label>
  <input type="email" id="user-email" name="user-email">
  <label for="content">Treść:</label>
  <textarea rows="10" cols="50" id="content" name="content" ></textarea>
  <input type="submit" value="dodaj">
</form>

W tym celu stosuje się element <input> z atrybutem type równym submit. Z kolei to, co wpiszesz do atrybutu "value" wyświetli się jako tekst na przycisku.

Kod naszej strony z formularzem wygląda teraz tak:

<!DOCTYPE html>
<html lang="pl">
  <head>
      <meta charset="utf-8">
      <title>Formularz</title>
      <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <form>
      <label for="nickname">Twój nick:</label>
      <input type="text" id="nickname"  name="nickname">
      <label for="user-email">Twój e-mail:</label>
      <input type="email" id="user-email"  name="user-email">
      <label for="content">Treść:</label>
      <textarea rows="10" cols="50" id="content" name="content" ></textarea>
      <input type="submit" value="dodaj">
    </form>
  </body>
</html>

Z kolei przeglądarka wyświetla ją następująco:

Nie jest to wymarzona sytuacja. W następnym rozdziale dowiemy się, jak to naprawić.