XHTML (3) - Formularze

Formularze

Formularze służą do pobierania danych od użytkowników odwiedzających naszą stronę internetową i są podstawową metodą pozwalającą na pewną interakcję między stroną (lub aplikacją) internetową a użytkownikiem.

Struktura ogólna

Formularze składają się z pól różnego typu opisanych etykietami i przycisków akcji.

Przykładowy prosty formularz do komentarzy:

<form action='#' method='get'>
<fieldset>
<ul>
   <li>
      <label for="name">Twoje imię:</label>
      <input type="text" id="name" name="name" />
   </li>
   <li>
      <label for="email">Twój e-mail:</label>
      <input type="text" id="email" name="email" />
   </li>
   <li>
      <label for="comment">Twój komentarz:</label>
      <textarea id="comment" name="comment" rows="10" cols="40" ></textarea>
   </li>
   <li>
      <input type="submit" value="Wyślij" />
   </li>
</ul>
</fieldset>
</form>

Formularz zawierający różne pola tworzy się za pomocą znacznika <form> z atrybutami:

  • action - akcja, która ma być wykonana przy wysłaniu formularza (adres strony, skrypt, itp)
  • method - metoda wysłania formularza, dozwolone wartości to post i get

Ponieważ w ramach tych ćwiczeń tworzymy statyczną stronę bez żadnych skryptów po stronie serwera i użytkownika musimy nieco uprościć działanie formularzy. Dlatego musimy wprowadzić kilka założeń:

  • Jedyną akcję, jaką możemy wykonać na statycznej stronie jest wysłanie wiadomości e-mail przez użytkownika, dlatego atrybut action przyjmie formę analogiczną do odnośników wysyłających e-mail: mailto:mail@example.com?subject=Temat+emaila
  • Metodą wysłania formularza będzie zawsze post
  • Aby treść e-maila miała format tekstowy musimy do znacznika form dodać atrybut enctype="text/plain"

Treść e-maila będzie miała format:
nazwa_pola = wartość_pola

Przykładowy formularz na potrzeby zajęć:

<form action="mailto:mail@example.com?subject=Formularz+kontaktowy" method="post" enctype="text/plain">
<!-- pola formularza -->
</form>

Grupy pól

Każde pole formularza musi znajdować się wewnątrz znacznika fieldset, który definiuje pewną grupę powiązanych ze sobą pól. W prostych formularzach wszystkie pola mogą znajdować się w jednym elemencie fieldset.

<form action="mailto:mail@example.com?subject=Formularz+kontaktowy" method="post" enctype="text/plain">
<fieldset>
   <!-- pola formularza -->
</fieldset>
</form>

Etykiety pól

Każde pole formularza powinno mieć przypisaną etykietę, która opisuje dane, jakie należy w to pole wpisać:

<label for="name">Jak masz na imię?</label>
<input type="text" id="name" name="imie" />

Atrybut for opisuje identyfikator id pola, do którego ma być przypięta dana etykieta.

Proste pola formularza

Podstawowe pola formularza definiuje się za pomocą znacznika input z atrybutami:

  • type - definiuje typ pola:
    • type="text" - proste jednolinijkowe pole tekstowe
    • type="password" - pole do wpisania hasła (wpisywane znaki nie są pokazywane)
    • type="checkbox" - pole wielokrotnego wyboru
    • type="radio" - pole opcji (tzw. przycisk 'radiowy') - wybór jeden z wielu
    • type="submit" - przycisk wysłania formularza
  • name - nazwa pola (nazwa 'zmiennej', której wartość to pole wyznacza)
  • value - wartość pola (wartość 'zmiennej')
  • id - identyfikator - pozwala przypiąć etykietę do pola

Pole tekstowe

<input type="text" id="name" name="name" value="Domyślna wartość" maxlength="30" />

Atrybut maxlength pozwala zdefiniować maksymalną liczbę znaków, jaką pozwalamy wpisać w dane pole.

Pole (wielokrotnego) wyboru

Pojedyncze pole wyboru pozwala na udzielenie odpowiedzi tak - nie na proste pytanie:

<input type="checkbox" id="accept" name="accept" value="accepted" />
<label for="accept">Tak, chcę otrzymywać powiadomienia o nowych wiadomościach</label>

Można oczywiście tworzyć pola wielokrotnego wyboru wyboru z wieloma wartościami:

<h3>Wybierz interesujące Cię zagadnienia z poniższej listy:</h3>
<ul>
   <li>
      <input type="checkbox" id="info_sport"   name="info" value="sport" /><label for="info_sport">Sport</label>
   </li>
   <li>
      <input type="checkbox" id="info_fashion" name="info" value="fashion" /><label for="info_sport">Moda</label>
   </li>
   <li>
      <input type="checkbox" id="info_funny"   name="info" value="funny" /><label for="info_sport">Rozrywka</label>
   </li>
   <li>
      <input type="checkbox" id="info_news"    name="info" value="news" /><label for="info_sport">Wiadomości</label>
   </li>
</ul>

Atrybut checked="checked" pozwala na domyślne zaznaczenie danego pola.

Pole opcji (wybór jeden z wielu)

<h3>Płeć:</h3>
<ul>
   <li>
      <input type="radio" id="gender_female" name="gender" value="female" /><label for="gender_female">Kobieta</label>
   </li>
   <li>
      <input type="radio" id="gender_male"   name="gender" value="male" /><label for="gender_male">Mężczyzna</label>
   </li>
   <li>
      <input type="radio" id="gender_none"   name="gender" value="none" checked="checked"/><label for="gender_none">Nie powiem</label>
   </li>
</ul>

Jeśli korzystamy z pola opcji, powinniśmy zdefiniować co najmniej dwie opcje do wyboru.

Atrybut checked="checked" podobnie jak przy polu wyboru pozwala na domyślne zaznaczenie pola, jednak tylko jedna z opcji powinna być domyślnie zaznaczona. Można oczywiście nie zaznaczać domyślnie żadnej z nich.

Przycisk wysłania formularza

<input type="submit" value="Wyślij" />

Atrybut value definuje napis, jaki pojawi się na przycisku.
Kliknięcie tego przycisku powoduje wykonanie akcji opisanej w atrybucie action formularza, w którym się przycisk znajduje, czyli wysłanie wszystkich wpisanych w formularz danych.

Obszar tekstowy

Aby umożliwić wpisanie dłużysz (wielolinijkowych) tekstów używamy elementu textarea:

<label for="comment">Komentarz:</label>
<textarea id="comment" name="comment" rows="5" cols="30">
Opcjonalna domyślna zawartość komentarza...
</textarea>

Atrybuty name i id mają tą samą funkcję jak w przypadku elementów input

Obowiązkowe atrybuty rows i cols opisują wielkość pola (ilość rzędów i kolumn znaków).

Rozwijane listy wyboru

Jeśli jakiś element formularza wymaga stworzenia długiej listy wyboru opcji jeden z wielu (np. wybór kraju świata) warto stosować element rozwijanej listy select niż długą listę przycisków 'radiowych':

<label for="color">Ulubiony kolor:</label>
<select id="color" name="color">
  <option value="black" selected="selected">czarny</option>
  <option value="red">czerwony</option>
  <option value="green">zielony</option>
  <option value="blue">niebieski</option>
  <option value="violet">fioletowy</option>
</select>

Listę opcji do wyboru tworzy się za pomocą znacznika select, atrybuty name i id analogicznie do innych elementów formularza.

Każdą z opcji do wyboru definiujemy elementem option z atrybutem value oznaczającym wartość, jaką wybór danej opcji nada opisywanemu polu. Jeśli nie użyjemy atrybutu value standardowo wartość ta będzie pozycją opcji na liście.
Atrybut selected="selected" pozwala wybrać domyślnie zaznaczoną opcję.


Firebug

Firebug jest dodatkiem do przeglądarki Firefox znacznie uprzyjemniającym i ułatwiającym pracę przy tworzeniu stron internetowych.
html1.gif

Aby zainstalować Firebug z menu Firefoxa wybieramy Narzędzia / Dodatki, w pole wyszukiwania wpisujemy 'firebug', wybieramy Firebug z listy znalezionych dodatków i klikamy Dodaj.
Po instalacji należy zrestartować przeglądarkę.

Jeśli w pasku stanu u dołu przeglądarki po prawej stronie widzisz robaczka, to znaczy, że Firebug jest już zainstalowany :)

Więcej informacji i przykłady użycia na stronie http://getfirebug.com


CSS - wprowadzenie do stylów - atrybut style

Każdy z elementów dokumentu XHTML może mieć dodany atrybut style w którym opisany jest wygląd danego elementu w formacie atrybut: wartość; inny-atrybut: wartość innego atrybutu;.

Przykładowo:

<p style="font-size: 1.2em">Cała treść tego paragrafu będzie napisana nieco większą czcionką.
 A tutaj to <strong style="color: red">słowo</strong> będzie miało kolor czerwony.</p>

Uwaga!

Atrybutu style używamy tylko chwilowo, żeby pobawić się stylami elementów. Od następnych style opisywać będziemy w osobnych dokumentach (arkuszach stylów) i wszystkie atrybuty style z dokumentu XHTML będziemy usuwali.

Przykładowe własności CSS będą opisywane na tej stronie.


Pomoce naukowe


Zadanie 3

  1. Dodać podstronę z formularzem kontaktowym. Formularz powinien zawierać kilka pól tekstowych (na imię, e-mail, treść wiadomości) i co najmniej jedno pole innego typu. Akcja formularza powinna pozwolić wysłać dane na e-mail właściciela strony.
  2. Nadać elementom strony style przy pomocy atrybutu style - zmienić właściwości tekstu i czcionki, kolory - niech to jednak będą style sensowne i spójne :)

Każda z podstron musi oczywiście być poprawnym ("walidującym się") i semantycznie poprawnym XHTML-em.

A także:

  • Przemyśleć docelowy wygląd swojej strony. Szukać inspiracji, rysować, projektować itp :)
  • Używać Firebuga - podglądać inne strony, zmieniać ich wygląd.

termin: środa 12.11 godzina 0:00 (północ z wtorku na środę)
punkty: 3

  • 1 punkt za dodanie działającego formularza
  • 1 punkt za semantycznie poprawny formularz (poprawne wykorzystanie etykiet, nadanie struktury elementom formularza)
  • 1 punkt za dodanie stylów

Za każdy dzień spóźnienia odejmowany jest 1 punkt.

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy