Wprowadzenie do tagu <input>

Tag <input> w HTML jest jednym z kluczowych elementów używanych do tworzenia formularzy. Dzięki niemu możemy zbierać dane od użytkowników w różnorodnych formatach. W tym artykule przyjrzymy się różnym typom inputów, ich atrybutom oraz praktycznym zastosowaniom.

Typy inputów

Tag <input> obsługuje wiele typów, które pozwalają na różnorodne interakcje z użytkownikami. Oto niektóre z nich:

  • text - pole tekstowe, w którym użytkownik może wprowadzać dowolny tekst.
  • password - pole, które maskuje wprowadzane znaki, idealne do haseł.
  • email - pole przeznaczone do wprowadzania adresów e-mail, z walidacją formatu.
  • number - pole, które akceptuje tylko liczby, z opcjami do ustawienia minimalnych i maksymalnych wartości.
  • checkbox - pole wyboru, które pozwala na zaznaczenie lub odznaczenie opcji.
  • radio - zestaw opcji, z których użytkownik może wybrać tylko jedną.
  • file - umożliwia użytkownikowi przesyłanie plików.
  • date - pozwala na wybór daty z kalendarza.

Atrybuty tagu <input>

Każdy tag <input> może mieć różne atrybuty, które zmieniają jego działanie. Oto niektóre z najważniejszych:

  • name - identyfikator, który pozwala na przesyłanie wartości formularza na serwer.
  • value - domyślna wartość, która będzie wyświetlana w polu.
  • placeholder - tekst, który pojawia się w polu, gdy jest puste, sugerując użytkownikowi, co powinien wpisać.
  • required - oznaczenie, które wskazuje, że pole jest obowiązkowe do wypełnienia.
  • disabled - uniemożliwia interakcję z polem.
  • readonly - pole jest tylko do odczytu, użytkownik nie może wprowadzać zmian.

Przykład użycia

Poniżej znajduje się prosty przykład formularza z różnymi typami inputów:

<form action="submit.php" method="post">
<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" name="username" required>

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

<input type="submit" value="Zatwierdź">
</form>

Podsumowanie

Tag <input> w HTML jest niezwykle wszechstronnym narzędziem, które pozwala na zbieranie danych od użytkowników. Dzięki różnorodnym typom i atrybutom, możemy dostosować formularze do naszych potrzeb oraz zapewnić lepsze doświadczenie dla użytkowników. Używając inputów, pamiętajmy o ich odpowiedniej walidacji i estetyce, co przyczyni się do lepszej użyteczności stron internetowych.