Formularze w HTML

1. Wprowadzenie do formularzy

Formularze w HTML to ważne narzędzie do interakcji użytkowników ze stronami internetowymi. Pozwalają zbierać informacje od użytkowników, czy to tekst, wybór z listy, pliki czy inne dane, które następnie można wysłać na serwer do przetworzenia. W HTML formularze tworzy się za pomocą wielu elementów, z których każdy przeznaczony jest do określonego rodzaju wprowadzanych danych. Głównym elementem formularzy jest <form>, który zawiera inne elementy, takie jak <input>, <textarea>, <button>, <select> i inne.

Główne elementy formularzy

Elementy formularzy pozwalają tworzyć pola wprowadzania, przyciski, listy rozwijane i inne elementy interfejsu, za pomocą których użytkownik może wprowadzać dane. Główne tagi używane w formularzach:

• <form> — główny kontener dla wszystkich elementów formularza. Określa, gdzie i jak dane są wysyłane.
• <input> — uniwersalny element do tworzenia pól wprowadzania różnych typów (tekst, hasło, radio button, checkbox itd.).
• <label> — element powiązany z polem wprowadzania, pozwala określić jego przeznaczenie.
• <textarea> — pole do wprowadzania wieloliniowego tekstu.
• <button> — przycisk do wysyłania formularza lub wykonywania innych działań.
• <select> i <option> — lista rozwijana, z której użytkownik może wybrać jedną lub więcej opcji.

Przykład prostego formularza

      
    <form action="/submit" method="post">
      <label for="name">Imię:</label>
      <input type="text" id="name" name="name">
      
      <label for="email">Adres email:</label>
      <input type="email" id="email" name="email">
      
      <button type="submit">Wyślij</button>
    </form>
    

          
<form action="/submit" method="post">
  <label for="name">Imię:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Adres email:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Wyślij</button>
</form>

• action w <form> określa URL, na który wysyłane są dane z formularza.
• method wskazuje metodę wysyłki danych: post lub get.

HTML <input>

Tag <input> — jeden z najbardziej uniwersalnych elementów formularza w HTML. Obsługuje różne typy wprowadzania danych, każdy odpowiedni dla określonego rodzaju informacji.

Składnia tagu <input>:

<input type="typ" name="nazwa_pola" id="identyfikator" value="wartość">

<input type="typ" name="nazwa_pola" id="identyfikator" value="wartość">

Atrybuty używane w <input>:

• type — typ pola (np. tekst, hasło, email itd.).
• name — nazwa pola, dzięki której serwer identyfikuje dane.
• id — unikalny identyfikator, używany do powiązania z <label>.
• value — wartość domyślna wyświetlana w polu (np. tekst początkowy).

Główne typy <input>

• Pole tekstowe type="text" — do wprowadzania niewielkiej ilości tekstu, np. imienia lub nazwiska.
  HTML

        
          <label for="username">Nazwa użytkownika:</label>
          <input type="text" id="username" name="username">
        
      

  HTML

        
          <label for="username">Nazwa użytkownika:</label>
          <input type="text" id="username" name="username">
        
      
• Hasło type="password" — do wprowadzania hasła. Wprowadzone znaki są wyświetlane jako kropki lub gwiazdki.
  HTML

        
          <label for="password">Hasło:</label>
  <input type="password" id="password" name="password">
        
      

  HTML

        
          <label for="password">Hasło:</label>
  <input type="password" id="password" name="password">
        
      
• Email type="email" — do wprowadzania adresu email. Pole sprawdza poprawność formatu wprowadzanych danych.
  HTML

        
          <label for="email">Adres email:</label>
  <input type="email" id="email" name="email">
        
      

  HTML

        
          <label for="email">Adres email:</label>
  <input type="email" id="email" name="email">
        
      
...