Typ <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week">

<input type="typ">

Znany ze specyfikacji HTML 4.01 element INPUT, tworzy większość rodzajów kontrolek formularzy. O tym, jaki typ elementu zostanie wyświetlony na ekranie, decyduje wartość atrybutu type="...". W języku HTML5 wprowadzono wiele dodatkowych typów kontrolek dla znacznika INPUT. W przypadku kiedy przeglądarka nie będzie obsługiwać nowych typów kontrolek, na ekranie zostanie wyświetlone zwykłe pole tekstowe (<input type="text">). Co prawda wtedy efekt końcowy nie będzie zgody z oczekiwaniami, ale przynajmniej nie ma obawy, że użytkownik w ogóle nie będzie w stanie prawidłowo wypełnić takiego formularza. Zrobi to, wpisując odpowiednią wartość ręcznie.

Minimum, maksimum, krok <input "date, month, week, time, datetime-local, number, range" min max step>

<input type="typ" min="minimum" max="maksimum" step="krok">

Niektóre z nowych typów pól przyjmują wartości, które w jakiś sposób można przekształcić na liczbę. W takich przypadkach możliwe jest ograniczenie wprowadzanej wartości do podanego zakresu - zdefiniowanego poprzez minimum (min="...") lub/i maksimum (max="..."). Opcjonalnie możliwe jest również określenie oczekiwanego skoku wartości (step="...").

Wszystkie te atrybuty można stosować zarówno wspólnie do tego samego znacznika jak i osobno. Nie zawsze jednak te ograniczenia bezwzględnie zadziałają. Czasem mogą jedynie stanowić ułatwienie przy wprowadzaniu danych, ale użytkownik może być w stanie je ominąć.

Przykład <input "date, month, week, time, datetime-local, number, range" min max step>

Poniżej znajdziesz pola INPUT z ustawionymi przykładowymi wartościami minimalnymi/maksymalnymi oraz domyślną wartością kroku:

<input type="date" min="2024-08-21" step="1">
<input type="month" min="2024-08" step="1">
<input type="week" min="2024-W34" step="1">
<input type="time" min="08:00" step="60">
<input type="datetime-local" min="2024-08-21T08:00" step="60">
<input type="number" min="0" max="10" step="1" >
<input type="range" min="0" max="10" step="1">

Zwróć uwagę, że w przypadku type="time" i type="datetime-local" wartość kroku podajemy w sekundach.

Zobacz także interaktywny przykład: min="...", max="...", step="..."

Wiele wartości <input "email, file" multiple>

<input type="typ" multiple>

Programy pocztowe dają możliwość wysłania e-maila do wielu adresatów jednocześnie. Ponadto do tego samego listu możemy dodać kilka plików załączników. Taki same efekt możemy uzyskać przypisując do pola odpowiedniego typu atrybut logiczny (wstawiany bez wartości) multiple. Wtedy w jednym miejscu będziemy mogli podać listę wartości rozdzieloną przecinkami.