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"> definiuje密码字段：

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"> definiuje提交表单数据至表单处理器的按钮。

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

W atrybucie action formy 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 submit, przycisk ten będzie miał 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 JEDNO z ograniczonej liczby opcji:

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 z ograniczonej liczby opcji.

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"> definiujeprzycisk。

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ścia HTML5

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

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

Komentarz:Typ wejścia, który nie jest obsługiwany przez stare przeglądarki internetowe, jest traktowany jako typ wejścia text.

Typ wejścia: number

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

Możesz ograniczyć liczby.

Zależnie 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一些常用的输入限制（其中一些是 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 wymagane (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"> Używane dla pól wejściowych, które powinny zawierać datę.

W zależności od obsługi przeglądarki, kalendarz będzie pojawiał 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 kolorów będzie pojawiał 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, kalendarz będzie pojawiał 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, kalendarz będzie pojawiał 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 będzie pojawiał 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, kalendarz będzie pojawiał 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, kalendarz będzie pojawiał się w polu wprowadzania.

Przykład

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

Spróbuj sam

Typ wejścia: email

<input type="email"> Pole wejściowe do zawierania adresu e-mail.

W zależności od wsparcia przeglądarki, adres e-mail może być automatycznie weryfikowany przy wysyłaniu.

Niektóre smartfony rozpoznają typ email i dodają ".com" do klawiatury, aby dopasować dane wejściowe e-mail.

Przykład

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

Spróbuj sam

Typ wejścia: 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 wejścia: tel

<input type="tel"> Pole wejściowe 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 wejścia: url

<input type="url"> Pole wejściowe do zawierania adresu URL.

W zależności od wsparcia przeglądarki, pole URL może być automatycznie weryfikowane przy wysyłaniu.

Niektóre smartfony rozpoznają typ URL i dodają ".com" do klawiatury, aby dopasować dane wejściowe URL.

Przykład

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

Spróbuj sam