HTML 输入类型

本章描述 <input> 元素的输入类型。

输入类型：text

<input type="text"> 定义供文本输入的单行输入字段：

Przykład

<form>
 Imię:<br>
<input type="text" name="firstname">
<br>
 Nazwisko:<br>
<input type="text" name="lastname">
</form>

Spróbuj sam

Powyższy kod HTML wygląda tak w przeglądarce:

Imię:


Nazwisko:

输入类型：password

<input type="password"> Definicja密码字段：

Przykład

<form>
 用户名：<br>
<input type="text" name="username">
<br>
 用户密码：<br>
<input type="password" name="psw">
</form>

Spróbuj sam

Powyższy kod HTML wygląda tak w przeglądarce:

用户名：


用户密码：

Komentarz:password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

输入类型：submit

<input type="submit"> Definicja提交表单数据至表单处理器的按钮。

Form处理器（form-handler）通常是包含处理输入数据的脚本的服务器页面。

W atrybucie action formularza określa się program przetwarzający formularz (form-handler):

Przykład

<form action="action_page.php">
Imię:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nazwisko:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Spróbuj sam

Powyższy kod HTML wygląda tak w przeglądarce:

Imię:


Nazwisko:


Jeśli pominiesz atrybut value przycisku wysyłającego, przycisk ten uzyska domyślny tekst:

Przykład

<form action="action_page.php">
Imię:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nazwisko:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

Spróbuj sam

Typ wejścia: przycisk radiowy

<input type="radio"> Definiuje przycisk radiowy.

Przyciski radiowe pozwalają użytkownikowi wybrać Tylko JEDEN z ograniczonej liczby wyborów:

Przykład

<form>
<input type="radio" name="sex" value="male" checked>Mężczyzna
<br>
<input type="radio" name="sex" value="female">Kobieta
</form>

Spróbuj sam

Powyższy kod HTML wygląda tak w przeglądarce:

Mężczyzna

Kobieta

Typ wejścia: pole wyboru

<input type="checkbox"> Definiuje pole wyboru.

Pole wyboru pozwala użytkownikowi wybrać zero lub więcej opcji z ograniczonej liczby.

Przykład

<form>
<input type="checkbox" name="vehicle" value="Bike">Mam rower
<br>
<input type="checkbox" name="vehicle" value="Car">Mam samochód 
</form>

Spróbuj sam

Powyższy kod HTML wygląda tak w przeglądarce:

Mam rower

Mam samochód

Typ wejścia: przycisk

<input type="button"> DefinicjaPrzycisk。

Przykład

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Spróbuj sam

Powyższy kod HTML wygląda tak w przeglądarce:

Typy wejściowe HTML5

HTML5 dodał wiele nowych typów wejściowych:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Komentarz:Typ wejścia, który nie jest obsługiwanym przez starą przeglądarkę, jest traktowany jako typ wejścia text.

Typ wejścia: number

<input type="number"> Dla pól wejściowych, które powinny zawierać wartości liczbowe.

Możesz ograniczyć liczby.

W zależności od obsługi przeglądarki, ograniczenia mogą być zastosowane do pól wejściowych.

Przykład

<form>
  Ilość (od 1 do 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Spróbuj sam

Ograniczenia wejściowe

Oto lista niektórych常用的输入限制（które niektóre są nowe w HTML5）：

Atrybut Opis
disabled Określ, czy pole wejściowe powinno być wyłączone.
max Określ maksymalną wartość pola wejściowego.
maxlength Określ maksymalną liczbę znaków pola wejściowego.
min Określ minimalną wartość pola wejściowego.
pattern Określ regularne wyrażenie, które sprawdza wartość wejścia.
readonly Określ, czy pole wejściowe jest tylko do odczytu (nie można go zmienić).
required Określ, czy pole wejściowe jest obowiązkowe (musi być wypełnione).
size Określ szerokość pola wejściowego (w znakach).
step Określ legalne przedziały liczbowe pola wejściowego.
value Określ wartość domyślną pola wejściowego.

W następnym rozdziale dowiesz się więcej o ograniczeniach wejściowych.

Przykład

<form>
  Ilość:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Spróbuj sam

Typ wejścia: date

<input type="date"> Dla pól wejściowych, które powinny zawierać datę.

W zależności od obsługi przeglądarki, wybiorca daty pojawi się w polu wprowadzania.

Przykład

<form>
  Urodziny:
  <input type="date" name="bday">
</form>

Spróbuj sam

Możesz dodać ograniczenia do pola wejściowego:

Przykład

<form>
  Wprowadź datę przed 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Wprowadź datę po 2000-01-01:
  Wprowadź datę po 2000-01-01:<br>
</form>

Spróbuj sam

Typ wprowadzania: color

<input type="color"> Używane do pól wprowadzania, które powinny zawierać kolory.

W zależności od obsługi przeglądarki, wybiorca koloru pojawi się w polu wprowadzania.

Przykład

<form>
  Wybierz ulubiony kolor:
  <input type="color" name="favcolor">
</form>

Spróbuj sam

Typ wprowadzania: range

<input type="range"> Używane do pól wprowadzania, które powinny zawierać wartości z określonego zakresu.

W zależności od obsługi przeglądarki, pole wprowadzania może być wyświetlane jako kontrolka suwaka.

Przykład

<form>
  <input type="range" name="points" min="0" max="10">
</form>

Spróbuj sam

Możesz użyć następujących atrybutów, aby określić ograniczenia: min, max, step, value.

Typ wprowadzania: month

<input type="month"> Pozwala użytkownikowi wybrać miesiąc i rok.

W zależności od obsługi przeglądarki, wybiorca daty pojawi się w polu wprowadzania.

Przykład

<form>
  Data urodzenia (miesiąc i rok):
  <input type="month" name="bdaymonth">
</form>

Spróbuj sam

Typ wprowadzania: week

<input type="week"> Pozwala użytkownikowi wybrać tydzień i rok.

W zależności od obsługi przeglądarki, wybiorca daty pojawi się w polu wprowadzania.

Przykład

<form>
  Wybierz tydzień:
  <input type="week" name="week_year">
</form>

Spróbuj sam

Typ wprowadzania: time

<input type="time"> Pozwala użytkownikowi wybrać czas (bez strefy czasowej).

W zależności od obsługi przeglądarki, wybiorca czasu pojawi się w polu wprowadzania.

Przykład

<form>
  Wybierz czas:
  <input type="time" name="usr_time">
</form>

Spróbuj sam

Typ wprowadzania: datetime

<input type="datetime"> Pozwala użytkownikowi wybrać datę i czas (z strefą czasową).

W zależności od obsługi przeglądarki, wybiorca daty pojawi się w polu wprowadzania.

Przykład

<form>
  Data urodzenia (data i czas):
  <input type="datetime" name="bdaytime">
</form>

Spróbuj sam

Typ wprowadzania: datetime-local

<input type="datetime-local"> Pozwala użytkownikowi wybrać datę i czas (bez strefy czasowej).

W zależności od obsługi przeglądarki, wybiorca daty pojawi się w polu wprowadzania.

Przykład

<form>
  Data urodzenia (data i czas):
  <input type="datetime-local" name="bdaytime">
</form>

Spróbuj sam

Typ wprowadzania: email

<input type="email"> Pole wprowadzania do zawierania adresu e-mail.

Zgodnie z wsparciem przeglądarki, adres e-mail może być automatycznie walidowany przy wysyłaniu.

Niektóre smartfony rozpoznają typ email i dodają ".com" do klawiatury, aby dopasować wprowadzanie e-maila.

Przykład

<form>
  E-mail:
  <input type="email" name="email">
</form>

Spróbuj sam

Typ wprowadzania: search

<input type="search"> Pole wyszukiwania (wygląd pola wyszukiwania jest podobny do pola tekstowego).

Przykład

<form>
  Szukaj w Google:
  <input type="search" name="googlesearch">
</form>

Spróbuj sam

Typ wprowadzania: tel

<input type="tel"> Pole wprowadzania do zawierania numeru telefonu.

Obecnie tylko Safari 8 obsługuje typ tel.

Przykład

<form>
  Telefon:
  <input type="tel" name="usrtel">
</form>

Spróbuj sam

Typ wprowadzania: url

<input type="url"> Pole wprowadzania do zawierania adresu URL.

Zgodnie z wsparciem przeglądarki, pole URL może być automatycznie walidowane przy wysyłaniu.

Niektóre smartfony rozpoznają typ URL i dodają ".com" do klawiatury, aby dopasować wprowadzanie URL.

Przykład

<form>
  Dodaj swoją stronę główną:
  <input type="url" name="homepage">
</form>

Spróbuj sam