05 - HTML - formularze

Formularze (HTML)

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.

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

Przykładowy prosty formularz:

<form action="formularz.php" method="post">
      <p><label for="imie">Twoje imię:</label> <!-- for ma mieć taką samą wartość, jak id w elemencie, do którego się odnosi -->
      <input type="text" id="imie" name="imie" /></p>
 
      <p><label for="email">Twój e-mail:</label>
      <input type="text" id="email" name="email" /></p>
 
      <p><label for="comment">Twój komentarz:</label><br/>
      <textarea id="comment" name="komentarz" rows="10" cols="40" ></textarea></p>
 
      <fieldset>
         <legend>Tu sprawdzana jest płeć</legend>
 
         <p><label for="mezczyzna">Mężczyzna</label>
         <input type="radio" name="sex" id="mezczyzna" value="facet"/>  </p>
 
         <p><label for="kobieta">Kobieta</label>
         <input type="radio" name="sex" id="kobieta" value="kobieta"/></p>
      </fieldset>
 
         <p><input type="submit" value="Wyślij" /></p>
</form>

Co widać od razu:
* cały formularz umieszczony jest w obrębie znacznika <form>
* elementy INPUT oznaczają miejsca do wprowadzania danych
* type to typ pola do wprowadzania danych (np. button/checkbox/radio/submit itd….)
* name to nazwa pola używana do identyfikacji danych przez skrypt (ha!), do którego będziemy te dane wysyłać.
* id to identyfikator pola, używany przez label do identyfikacji pola
* LABEL służy do opisu pola o danym identyfikatorze (a więc atrybut for znacznika label musi mieć taką samą wartość jak atrybut id pola, które ten label będzie opisywał).
* FIELDSET służy do zaznaczenia pewnej grupy pól, a LEGEND do opisu tej grupy.

czego nie widać:

  • atrybut action mówi, co zrobić z danymi wprowadzonymi do formularza, jeśli użytkownik wciśnie guzik SUBMIT (istnieje również guzik RESET, do czego służy - proszę poszukać na google ;)
  • atrybut method ustawmy sobie na POST
  • a co my robimy z tymi danymi - wysyłamy je do skryptu formularz.php (kod skryptu do skopiowania niżej) używając do tego metody komunikacji pomiędzy skryptami a skryptami lub skryptami a formularzami - metody POST (ta druga to GET).

A więc 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

Aby nie przepisywać tutaj internetu, omówienie typów pól przedstawione jest na stronie:
http://www.kurshtml.boo.pl/html/formularze.html
(może to wygląda na nieważny link, na który nie warto klikać, ale tam jest prawie wszystko, co jest potrzebne do wykonania zadania domowego ;p)

Co się dzieje z formularzem po wysłaniu

Ponieważ formularz wysyłamy do skryptu formularz.php umieszczonego w tym samym katalogu, co nasz formularz w HTMLu, dlatego należałoby stworzyć taki plik. Przykładowy skrypt dostępny jest na stronie:
http://www.kurshtml.boo.pl/html/wyslanie_formularza_bez_programu_pocztowego,formularze.html

Jak działają pliki PHP

Pliki PHP uruchamiane są na serwerze, w wyniku uruchamiania generują one kod HTML, który wysyłany jest do przeglądarki. Użytkownik "nie widzi" więc kodu PHP, który napiszemy (wkleimy ;) my. Podany skrypt możemy (musimy!) obudować naszym Szablonem Prostej Strony Internetowej tak, aby otrzymany w wyniku przetwarzania na serwerze dokument był poprawnym dokumentem HTML. Czyli plik formularz.php może wyglądać np. tak:

<!DOCTYPE html>
<html lang="pl">
   <head>
       <title>Zaproszenie na 7. Poznańskie Forum Kognitywistyczne</title>
       <meta charset="utf-8" />
   </head>
   <body>
<h1>Tu jest nagłówek poza skryptem</h1>
<p>Tu są treści poza skryptem</p>
 
<?php
echo "<p>A tu jest akapit wygenerowany przez skrypt</p>";
 
if (count($_POST))
{
    ////////// USTAWIENIA //////////
    $email = 'adres e-mail gdzie wysłać formularz';    // Adres e-mail adresata
    $subject = 'temat';    // Temat listu
    $message = 'Dziękujemy za wysłanie formularza';    // Komunikat
    $error = 'Wystąpił błąd podczas wysyłania formularza';    // Komunikat błędu
    $charset = 'utf-8';    // Strona kodowa
    //////////////////////////////
 
    $head =
        "MIME-Version: 1.0\r\n" .
        "Content-Type: text/plain; charset=$charset\r\n" .
        "Content-Transfer-Encoding: 8bit";
    $body = '';
    foreach ($_POST as $name => $value)
    {
        if (is_array($value))
        {
            for ($i = 0; $i < count($value); $i++)
            {
                $body .= "$name=" . (get_magic_quotes_gpc() ? stripslashes($value[$i]) : $value[$i]) . "\r\n";
            }
        }
        else $body .= "$name=" . (get_magic_quotes_gpc() ? stripslashes($value) : $value) . "\r\n";
    }
    echo mail($email, "=?$charset?B?" . base64_encode($subject) . "?=", $body, $head) ? $message : $error;
}
?>
 
</body>
</html>

Kopiujemy ten kod, wklejamy do pliku formularz.php (zmieniamy odpowiednie dane typu adres e-mai i temat wiadomościl!!!), przesyłamy na serwer razem z plikiem HTML zawierającym nasz formularz. (uwaga: pliki PHP działają tylko jeśli wyśle się je na serwer - co więcej - serwer musi obsługiwać język PHP). Należy również zwrócić uwagę na umieszczoną na podanej wcześniej stronie informację na temat pól z możliwością wyboru kilku opcji (bez umieszczenia nawiasów kwadratowych skrypt nie będzie działać).


Zadanie 5

  1. Dodać podstronę z formularzem. Formularz powinien zawierać kilka pól tekstowych i co najmniej trzy pola co najmniej 2 innych typów. Akcja formularza powinna pozwolić wysłać dane na e-mail właściciela strony.
  2. użyć styli CSS do formatowania wyglądu formularzy.

punkty: 4

  • 2 pkt. za poprawny formularz,
  • 2 pkt. za treść formularza — powinien układać się w całość dotyczącą jednego wybranego zagadnienia (np. związanego z tematyką strony lub zainteresowaniami naukowymi autora)

termin: niedziela 16.11, godzina 23:59
Za każdy dzień spóźnienia odejmowany jest 1 punkt, za każdy błąd - 0,5 pkt.

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