Elementy formularzy różnych typów

7.1 Pole tekstowe

HTML dostarcza wiele rodzajów danych wejściowych dla elementów formularzy, które umożliwiają użytkownikom wprowadzanie danych w różnych formatach, takich jak tekst, email, daty i wiele innych. Przyjrzyjmy się dokładniej różnym typom danych wejściowych i ich zastosowaniu.

Element <input type="text"> służy do wprowadzania jednowierszowego tekstu. Jest to najbardziej podstawowy i często używany typ wejścia.

Przykład użycia:

    
      <label for="name">Imię:</label>
      <input type="text" id="name" name="name">
    
  

Atrybuty

• maxlength: ogranicza maksymalną liczbę znaków
• placeholder: tekst zastępczy, który jest wyświetlany wewnątrz pola wejściowego, dopóki użytkownik nie zacznie wprowadzać danych
• required: wskazuje, że pole jest obowiązkowe do wypełnienia

Przykład z atrybutami:

    
      <label for="username">Nazwa użytkownika:</label>
      <input type="text" id="username" name="username" maxlength="20" placeholder="Wprowadź nazwę użytkownika" required>
    
  

7.2 Pola dla liczb

Element <input type="number"> służy do wprowadzania wartości liczbowych. Pozwala ograniczyć wprowadzanie tylko do liczb i może zawierać strzałki do zwiększania lub zmniejszania wartości.

Przykład użycia:

    
      <label for="quantity">Ilość:</label>
      <input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
    
  

Atrybuty

• min: ustawia minimalną dopuszczalną wartość
• max: ustawia maksymalną dopuszczalną wartość
• step: określa krok zmiany wartości
• value: ustawia wartość początkową

7.3 Pola dla e-maili

Element <input type="email"> przeznaczony jest do wprowadzania adresów email. Sprawdza, czy wpisany tekst odpowiada formatowi adresu email.

Przykład użycia:

    
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="example@example.com">
    
  

Atrybuty

• multiple: pozwala na wprowadzanie kilku adresów email, oddzielonych przecinkami
• pattern: ustawia wyrażenie regularne do dodatkowej weryfikacji wprowadzonych danych

Przykład z atrybutami:

    
      <label for="emails">Adresy email (oddzielone przecinkami):</label>
      <input type="email" id="emails" name="emails" multiple placeholder="example1@example.com, example2@example.com">
    
  

7.4 Pola dla numeru telefonu

Element <input type="tel"> używany jest do wprowadzania numerów telefonicznych. Nie sprawdza formatu numeru, ale pozwala ustawić maskę wprowadzania poprzez atrybut pattern.

Przykład użycia:

    
      <label for="phone">Telefon:</label>
      <input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
    
  

Atrybuty

pattern: ustawia wyrażenie regularne do weryfikacji formatu wprowadzonego numeru.

Przykład z atrybutami:

    
      <label for="phone">Telefon:</label>
      <input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
    
  

7.5 Pola dla dat

Element <input type="date"> używany jest do wprowadzania daty. W wspierających przeglądarkach pojawia się widget kalendarza do wygodnego wyboru daty.

Przykład użycia:

    
      <label for="birthday">Data urodzenia:</label>
      <input type="date" id="birthday" name="birthday">
    
  

Atrybuty

• min: ustawia minimalną dopuszczalną datę
• max: ustawia maksymalną dopuszczalną datę

Przykład z atrybutami:

    
      <label for="appointment">Data spotkania:</label>
      <input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
    
  

7.6 Pola do wprowadzania czasu

Element <input type="time"> używany jest do wprowadzania czasu. W wspierających przeglądarkach pojawia się widget wyboru czasu.

Przykład użycia:

    
      <label for="meeting_time">Czas spotkania:</label>
      <input type="time" id="meeting_time" name="meeting_time">
    
  

Atrybuty

• min: ustawia minimalny dopuszczalny czas
• max: ustawia maksymalny dopuszczalny czas
• step: określa krok zmiany czasu

Przykład z atrybutami:

    
      <label for="alarm">Alarm:</label>
      <input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
    
  

7.7 Pola do wprowadzania URL

Element <input type="url"> używany jest do wprowadzania adresów webowych (URL). Sprawdza, czy wpisany tekst odpowiada formatowi URL.

Przykład użycia:

    
      <label for="website">Strona internetowa:</label>
      <input type="url" id="website" name="website" placeholder="https://example.com">
    
  

Atrybuty

pattern: ustawia wyrażenie regularne do dodatkowej weryfikacji wprowadzonych danych.

Przykład z atrybutami:

    
      <label for="personal_website">Strona osobista:</label>
      <input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://example.com">
    
  

7.8 Pola do wprowadzania haseł

Element <input type="password"> używany jest do wprowadzania haseł. Wprowadzone dane są ukrywane, zastępowane symbolami (np. gwiazdkami lub kropkami).

Przykład użycia:

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

Atrybuty

• maxlength: ogranicza maksymalną liczbę znaków
• placeholder: tekst zastępczy
• required: wskazuje, że pole jest obowiązkowe do wypełnienia

Przykład z atrybutami:

    
      <label for="new-password">Nowe hasło:</label>
      <input type="password" id="new_password" name="new_password" maxlength="20" placeholder="Wprowadź hasło" required>
    
  

7.9 Pola do wprowadzania zakresu wartości

Element <input type="range"> używany jest do wprowadzania wartości w określonym zakresie. Jest wyświetlany jako suwak.

Przykład użycia:

    
      <label for="volume">Głośność:</label>
      <input type="range" id="volume" name="volume">
    
  

Atrybuty

• min: ustawia minimalną dopuszczalną wartość
• max: ustawia maksymalną dopuszczalną wartość
• step: określa krok zmiany wartości
• value: ustawia wartość początkową

Przykład z atrybutami:

    
      <label for="brightness">Jasność:</label>
      <input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
    
  

7.10 Pola do wyboru koloru

Element <input type="color"> używany jest do wyboru koloru. W wspierających przeglądarkach pojawia się widget wyboru koloru.

Przykład użycia:

    
      <label for="favcolor">Wybierz swój ulubiony kolor:</label>
      <input type="color" id="favcolor" name="favcolor" value="#ff0000">
    
  

Atrybuty

• value: ustawia kolor początkowy.

7.11 Pola do wyszukiwania

Element <input type="search"> służy do wprowadzania zapytań wyszukiwania. W większości przeglądarek ma wbudowane style i funkcjonalność do czyszczenia wprowadzonego tekstu.

Przykład użycia:

    
      <label for="search">Szukaj:</label>
      <input type="search" id="search" name="search" placeholder="Wprowadź zapytanie wyszukiwania">