Formularze

Każdy formularz rozpoczyna się od znacznika <form>, kończy zaś znacznikiem zamykającym </form>. Pomiędzy tymi znacznikami znajdują się pola formularza: tekstowe, wyboru, listy, przyciski, itp.
Najważniejszym jest przycisk powodujący wysłanie danych.

<form action="mailto:informatyka@tkk.edu.pl" method="POST">
	<!-- pola formularza -->
</form>

<form action="mailto:informatyka@tkk.edu.pl?subject=temat" method="POST">
	<!-- pola formularza -->
</form>

<form action="http://localhost/skrypty/skrypt_form.php" method="POST">
	<!-- pola formularza -->
</form>

Znacznik <form> powinien posiadać następujące atrybuty:

• action="adres" - najważniejszy atrybut, ponieważ ustala adres, na który zostanie wysłany formularz.
  Może to być adres e-mail albo adres skryptu PHP lub CGI, który zostanie wywołany po zatwierdzeniu wysłania formularza.
• method="metoda przesyłania danych" - może przyjąć jedną z dwóch wartości: GET lub POST. Wartością domyślną jest GET.
  Zaleca się stosowanie metody POST, która przesyła dane w postaci tablicy serwera.
  Metoda GET przesyła dane w tzw. querystringu, który jest widoczny w pasku adresu przeglądarki.
• enctype="kodowanie danych" - wybierany jest przy przesyłaniu danych metodą POST.
  Przy przesyłaniu na serwer plików atrybut ten powinien mieć ustawioną wartość: multipart/form-data.

• pola INPUT

  Znacznik <INPUT> powinien posiadać następujące atrybuty:

  • name - określa nazwę danego pola oraz nazwę zmiennej, do której zostaje podstawiona wprowadzona wartość.
    Każde pole powinno posiadać ten atrybut i musi on być unikalny w skali dokumentu.
  • id - identyfikator pola.
  • value - określa domyślną wartość pola.
  • size - określa liczbę znaków pola.
  • maxlength - maksymalna ilość znaków pola.
  • type - typ pola.
  wyróżniamy następujące typy pól:
  • <input type="text">

    tworzy wejściowe pole tekstowe

    przykład:

    <form>
  Imię:<br>
  <input type="text" name="imie"><br>
  Nazwisko:<br>
  <input type="text" name="nazwisko">
</form>

    efekt:

    Imię:
    
    Nazwisko:
    
    
  • <input type="password">

    tworzy pole hasła - wprowadzane znaki zastępowane są gwiazdkami

    przykład:

    <form>
  Użytkownik:<br>
  <input type="text" name="uzytkownik"><br>
  Hasło:<br>
  <input type="text" name="haslo">
</form>

    efekt:

    Użytkownik:
    
    Hasło:
    
    
  • <input type="button">

    Tworzy przycisk domyślnie nie wywołuje żadnej akcji - musi być odpowiednio zaprogramowany.

    przykład:

    <input type="button" value="przycisk">

    efekt:

  • <input type="submit">

    Tworzy przycisk wysyłający dane z pól formularza.

    Dane przesyłane są do skryptu określonego w atrybucie formularza action.

    przykład:

    <form method="POST">
    	Imię: 
    	<input type="text" name="imie" value="Bazyli">
    	Nazwisko:
    	<input type="text" name="nazwisko" value="Frotaś">
    	<input type="submit" value="wyślij">
    </form>

    efekt:

    Imię:
    
    Nazwisko:
    
    
    

    Przy pominięciu atrybutu value zostanie wyświetlony na przycisku napis domyślny.

  • <input type="reset">

    kasuje zawartość pól formularza

    przykład:

    <form action="/action_page.php">
  Imię:<br>
  <input type="text" name="firstname" value="Frotaś"><br>
  Nazwisko:<br>
  <input type="text" name="lastname" value="Bazyli"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

    efekt:

    Imię:
    
    Nazwisko:
    
    
    

    Po naciśnięciu przycisku Reset wartości zostaną przywrócone do domyślnych.

  • <input type="checkbox">

    tworzy pola wyboru wielokrotnego

    przykład:

    <form>
  <input type="checkbox" name="vehicle[]" value="Bike"> mam rower<br>
  <input type="checkbox" name="vehicle[]" value="Car"> mam samochód
</form>

    efekt:

    mam rower
    mam samochód
  • <input type="radio">

    tworzy pola jednokrotnego wyboru

    przykład:

    <form>
  <input type="radio" name="kolor" value="czerwony" checked> czerwony<br>
  <input type="radio" name="kolor" value="zielony"> zielony<br>
  <input type="radio" name="kolor" value="niebieski"> niebieski
</form>

    efekt:

    czerwony
    zielony
    niebieski
  • <input type="file">

    Umożliwia wysyłanie plików na serwer.
    Atrybut formularza enctype musi mieć mieć ustawioną wartość: multipart/form-data enctype="multipart/form-data" oraz method="POST"

    przykład:

    <input type="file">

    efekt:

  • <input type="hidden">

    Tworzy pole ukryte, umożliwiające przesyłanie danych niewidocznych dla użytkownika.

    przykład:

    <input type="hidden" name="data" value="2019-10-15">

    efekt:

  W HTML5 występują specjalistyczne pola, są to:
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="range">
  • <input type="search">
  • <input type="tel">
  • <input type="time">
  • <input type="url">
  • <input type="week">
  Opis pól dostępny jest pod adresem: https://www.w3schools.com/html/html_form_input_types.asp
  • pole BUTTON

    Tworzy przycisk formularza. Ma podobne znaczenie jak znacznik <input>, które dla atrybuty type przyjmują wartości: button, submit lub reset

    przykład:

    <button type="submit" name="przycisk1">wyślij</button>
<button type="reset" name="przycisk2">usuń</button>
<button type="button" name="przycisk3">anuluj</button>

    efekt:

    wyślij usuń anuluj
  • pole SELECT

    Tworzy listę rozwijalną i zachęca do wybrania jednej lub kilku z nich.

    przykład:

    <select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

    efekt:

    Volvo Saab Fiat Audi
    Dla znacznika <select> można używać atrybutów:

    • size="n" - określa liczbę pozycji widocznych w polu select
    • multiple - można wybrać więcej niż jedną pozycję

    przykład 1:

    <select name="cars" size="4">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

    efekt:

    Volvo Saab Fiat Audi

    przykład 2:

    <select name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

    efekt:

    Volvo Saab Fiat Audi Zaznaczając przytrzymaj klawisz Ctrl

    Dla znacznika <option> można używać atrybutów:

    • selected - zaznaczenie dla wybranej pozycji
    • value="wartość" - określa wartość danej pozycji przekazywaną przez wysyłany formularz

    przykład 3:

    <select name="cars[]" size="4" multiple>
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>

    efekt:

    Volvo Saab Fiat Audi

    listy zagnieżdżone

    Zdefiniowanej liście można nadać strukturę wielopoziomową.
    Służy do tego znacznik: <optgroup> z atrybutem: label="tytuł grupy"

    przykład 4:

    <h4>formularz wyboru języka:</h4>
<select name="jezyki" size="10" multiple>
<optgroup label="języki słowiańskie">
<option value="polski" selected>polski</option>
<option value="rosyjski">rosyjski</option>
<option value="czeski">czeski</option>
</optgroup>
<optgroup label="języki germańskie">
<option value="angielski" selected>angielski</option>
<option value="niemiecki">niemiecki</option>
</optgroup>
<optgroup label="języki romańskie">
<option value="francuski">francuski</option>
<option value="wloski" selected>włoski</option>
<option value="hiszpanski" selected>hiszpański</option>
</optgroup>
</select>

    efekt:

    formularz wyboru języka:

    polski rosyjski czeski angielski niemiecki francuski włoski hiszpański
  • pole TEXTAREA

    Tworzy pole tekstowe, w który można wprowadzić wiele linii tekstu.

    przykład:

    <textarea name="opis" rows="10" cols="30">
  Tu może być
  wiele
  linii
  tekstu.
</textarea>

    efekt:

    Tu może być wiele linii tekstu.
  • pole DATALIST

    Służy jako element autouzupełniania wartości wprowadzonych w znaczniku <input>.
    Znacznik <datalist> musi być poprzedzony znacznikiem <input>.

    przykład:

    wpisz język: <input list="jezyki">
<datalist id="jezyki">
  <option value="francuski"></option>
  <option value="fiński"></option>
  <option value="włoski"></option>
  <option value="węgierski"></option>
  <option value="hiszpański"></option>
</datalist>

    efekt:

    wpisz język:
  • Atrybuty pól
    • autofocus
      Automatycznie ustawia kursor w wybranym polu

      przykład:

      <input type="text" name="adres" autofocus>
    • autocomplete
      Służy do wyłączenia autouzupełniania.

      Przyjmuje wartości on lub off. Przeglądarki często uzupełniaja dane w polu.
      Może to być niewskazane na stanowiskach ogólnodostępnych.

      Aby zapobiec takiej sytuacji wyłaczamy autouzupełnienie.

      przykład:

      <input type="text" name="adres" autocomplete="off">
    • required
      Atrybut ten służy do walidacji formularzy.
      Jeżeli formularz nie ma wypełnionego pola - nie zostanie wysłany.

      przykład:

      <input type="text" name="adres" required>
    • pattern
      Kolejny atrybut wykorzystywany przy walidacji formularzy.
      Pozwala zdefiniować wyrażenie regularne i sprzwdza, czy wartość pola jest zgodna z zadeklarowanym wzorcem.

      przykład:

      <input type="text" name="kod" pattern="[0-9]{2}-[0-9]{3}">

      W podanym przykładzie należy pisać dwie cyfry "[0-9]{2}", następnie myślnik "-" oraz trzy cyfry "[0-9]{3}"
    • placeholder
      Atrybut ten wyświetla w polu oczekiwany do wprowadzenia tekst.
      

      przykład:

      <input type="text" name="nazwa" placeholder="nazwa użytkownika">

      efekt:

    Wykaz wszystkich atrybutów dostępny jest pod adresem:
    https://www.w3schools.com/html/html_form_attributes.asp

    Podsumowanie

    Przy budowaniu formularzy konieczna jest znajomość omówionych powyżej elementów.
    Należy jednak pamiętać, że pełny wykorzystanie formularza wymaga znajomości języków programowania po stronie serwera takich jak np.: PHP, Perl. Obsługę zdarzeń po stronie klienta tworzymy w języku JavaScript.