Wprowadzenie do Form HTML: struktura, typy danych wejściowych i przykłady

HTML form to kluczowa część tworzenia stron internetowych, która umożliwia użytkownikom interakcję ze stroną internetową i przesyłanie danych na serwer. Form są wykorzystywane do szerokiego zakresu celów, takich jak zbieranie form informacji od użytkowników, przetwarzanie danych wprowadzanych przez użytkowników oraz umożliwianie użytkownikom działań na stronie internetowej. W tym artykule przyjrzymy się atrybutom i różnym typom pól wejściowych, wybranym elementom, obszarom tekstowym i przyciskom powszechnie używanym w HTML form.

Pola wejściowe

• <input type="text">: Tworzy pole wprowadzania tekstu, w którym użytkownicy mogą wprowadzać znaki alfanumeryczne.
• <input type="password">: Wyświetla pole wprowadzania hasła, które maskuje wprowadzane znaki.
• <input type="email">: Zapewnia weryfikację adresu e-mail dla pól wejściowych, które wymagają prawidłowego adresu e-mail.
• <input type="number">: Ogranicza wprowadzanie tylko do wartości liczbowych.
• <input type="checkbox">: reprezentuje pole wyboru, które użytkownicy mogą zaznaczyć lub usunąć zaznaczenie.
• <input type="radio">: Reprezentuje przycisk opcji, który umożliwia użytkownikom wybranie jednej opcji z grupy opcji.
• <input type="file">: umożliwia użytkownikom wybieranie i przesyłanie plików.
• <input type="submit">: Wyświetla przycisk, który przesyła form po kliknięciu.
• <input type="reset">: Wyświetla przycisk, który resetuje urządzenie form do stanu początkowego.
• <input type="date">: Udostępnia selektor dat do wybierania dat.
• <input type="time">: Umożliwia użytkownikom wprowadzanie wartości czasu.

Wybierz Elementy

• <select>: Tworzy menu rozwijane z opcjami do wyboru.
• <option>: Definiuje opcję w menu rozwijanym, umieszczonym wewnątrz <select> tagu.
• <optgroup>: Grupuje powiązane opcje w rozwijanym menu.
• <select multiple>: umożliwia użytkownikom jednoczesne wybieranie wielu opcji przez przytrzymanie klawisza Ctrl(lub klawisza Command na komputerze Mac) podczas klikania.

Obszary tekstowe

<textarea>: Tworzy wielowierszowe pole wprowadzania tekstu, w którym użytkownicy mogą wprowadzać i edytować dłuższe bloki tekstu. Można go zmieniać i konfigurować za pomocą atrybutów, takich jak rows i, cols aby zdefiniować jego wymiary.

guziki

<button>: Reprezentuje przycisk, który może wyzwalać różne akcje w pliku form. Można go użyć do przesłania form, za pomocą form funkcji JavaScript lub przejścia do innej strony.

Przykładowe użycie:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

Ten przykład pokazuje użycie różnych form elementów, w tym input pól, textarea, i przycisku. Możesz dostosować elementy i atrybuty w oparciu o swoje specyficzne wymagania. checkbox select dropdown submit form