Formularze HTML · Technik informatyk egzamin zawodowy

Programowanie / HTML

Formularze HTML

Formularze HTML są kluczowym elementem każdej witryny, służącym do zbierania danych od użytkowników i przekazywania ich na serwer. Dzięki formularzom możliwe jest realizowanie takich funkcji jak rejestracja użytkowników, wysyłanie wiadomości czy składanie zamówień.

 

Podstawowa struktura formularza HTML

Każdy formularz tworzony jest przy użyciu znacznika <form>, który obejmuje wszystkie jego elementy:

<form action="/adres-serwera" method="post">
    <!-- Elementy formularza -->
</form>

  • action – adres URL, na który zostaną przesłane dane formularza.

  • method – metoda przesyłania danych (GET lub POST).

 

Elementy formularzy HTML

Każdy element formularza posiada unikalny atrybut name, umożliwiający identyfikację danych na serwerze.

Podstawowe pola formularzy (<input>)

HTML5 oferuje wiele typów pól, najczęściej używane to:

  • text – pole tekstowe

  • password – pole do wpisywania hasła (treść ukryta)

  • email – walidowane pole adresu email

  • number – pole numeryczne

  • tel – numer telefonu

  • url – adres URL

  • search – wyszukiwarka

  • date, month, week, time – dane dotyczące daty i czasu

  • checkbox – pole zaznaczenia (tak/nie)

  • radio – wybór jednokrotny spośród kilku opcji

  • range – zakres numeryczny

  • color – wybór koloru

  • file – przesyłanie plików

  • password – pole hasła

 

Przykłady użycia elementów formularza

Pole tekstowe:

<input type="text" name="imie" placeholder="Twoje imię">

Pole wyboru:

<input type="checkbox" name="zgoda"> Akceptuję regulamin

Pole wyboru (select):

<select name="miasto">
  <option value="warszawa">Warszawa</option>
  <option value="krakow">Kraków</option>
  <option value="poznan">Poznań</option>
</select>

Pole tekstowe wielowierszowe (textarea):

<textarea name="wiadomosc" rows="4" cols="50">Twoja wiadomość tutaj...</textarea>

 

Element <datalist>

Umożliwia sugerowanie użytkownikowi opcji podczas wpisywania tekstu.

<input list="kolory" name="ulubiony_kolor">
<datalist id="kolory">
  <option value="Czerwony">
  <option value="Zielony">
  <option value="Niebieski">
</datalist>

 

Metody przesyłania danych (method)

  • GET – dane są przesyłane jawnie, widoczne w adresie URL.

  • POST – dane przesyłane są w sposób bezpieczniejszy, niewidoczny bezpośrednio w adresie URL.

Przykład:

<form action="/wyslij.php" method="post">
  <input type="text" name="uzytkownik">
  <input type="submit" value="Wyślij">
</form>

 

Podobne wpisy