Rodzaje wejściowe
W tym rozdziale opisano typy wejść na <input> elementu.
Input type: text
<input type="text"> określa pole wejściowe jeden liniowy tekstu:
Przykład
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form> Spróbuj sam " W ten sposób kod HTML powyżej zostanie wyświetlona w przeglądarce:
Pierwsze imię:
Nazwisko:
Typ wejścia: hasło
<input type="password"> definiuje pole hasła:
Przykład
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form> Spróbuj sam " W ten sposób kod HTML powyżej zostanie wyświetlona w przeglądarce:
Nazwa Użytkownika:
Hasło użytkownika:
Znaki w polu hasła są maskowane (shown as asterisks or circles) .
Typ wejścia: submit
<input type="submit"> definiuje przycisk składania wejście postaci do postaci-przewodnika.
Forma-handler jest zazwyczaj strona serwera ze skryptem do przetwarzania danych wejściowych.
Forma-handler jest określona w atrybucie działania danego formularza:
Przykład
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form> Spróbuj sam " W ten sposób kod HTML powyżej zostanie wyświetlona w przeglądarce:
Pierwsze imię:
Nazwisko:
Jeśli pominąć atrybut wartość przycisk Wyślij, w przycisk dostanie domyślny tekst:
Przykład
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form> Spróbuj sam " Typ wejścia: radio
<input type="radio"> definiuje radio przycisk.
Radio przycisków pozwolić użytkownikowi wybrać tylko jeden z ograniczoną liczbą wyborów:
Przykład
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form> Spróbuj sam " W ten sposób kod HTML powyżej zostanie wyświetlona w przeglądarce:
Męski
Płeć żeńska
Inny
Typ wejścia: checkbox
<input type="checkbox"> określa checkbox .
Checkboxes pozwalają użytkownikowi wybrać zero lub więcej opcji ograniczonej liczby wyborów.
Przykład
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form> Spróbuj sam " W ten sposób kod HTML powyżej zostanie wyświetlona w przeglądarce:
mam rower
mam samochód
Typ wejścia: button
<input type="button"> definiuje button :
W ten sposób kod HTML powyżej zostanie wyświetlona w przeglądarce:
HTML5 Input Rodzaje
HTML5 dodaje kilka nowych input typów:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input typy, które nie są obsługiwane przez starych przeglądarek internetowych, będzie zachowywać się jak input typu tekstu.
Input Typ: number
<input type="number"> służy do pól wejściowych, które powinny zawierać wartość liczbową.
Można ustawić ograniczenia dotyczące liczby.
W zależności od wsparcia przeglądarki, ograniczenia mogą mieć zastosowanie do pola wejściowego.
Przykład
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form> Spróbuj sam " Input Ograniczenia
Oto lista niektórych wspólny input ograniczeń (some are new in HTML5) :
| Atrybut | Opis |
|---|---|
| disabled | Określa, że pole wejściowe powinny być wyłączone |
| max | Określa maksymalną wartość dla pola wejściowego |
| >maxlength | Określa maksymalną liczbę znaków dla pola wejściowego |
| min | Określa minimalną wartość dla pola wejściowego |
| pattern | Określa wyrażenie regularne, aby sprawdzić, czy wartość mieści się |
| readonly | Określa, że pole wejściowe jest tylko do odczytu (cannot be changed) |
| required | Określa, że pole wejściowe jest wymagane (must be filled out) |
| size | Określa szerokość (in characters) w polu wprowadzania |
| step | Określa prawne interwałów numerycznych dla pola wejściowego |
| value | Określa wartość domyślną dla pola wejściowego |
Dowiesz się więcej na temat input ograniczeń w następnym rozdziale.
Przykład
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form> Spróbuj sam " Input Typ: date
<input type="date"> służy do pól wejściowych, które powinny zawierać datę.
W zależności od wsparcia przeglądarki, data zbieracz może pokazać się w polu wejściowym.
Można dodać ograniczenia na input :
Przykład
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form> Spróbuj sam " Input Typ: kolor
<input type="color"> służy do pól wejściowych, które powinny zawierać kolor.
W zależności od wsparcia przeglądarki, próbnik kolorów mogą pojawić się w polu wejściowym.
Przykład
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form> Spróbuj sam " Input Typ: zasięg
<input type="range"> służy do pól wejściowych, które powinny zawierać wartość w przedziale.
W zależności od wsparcia przeglądarki, pole wejściowe mogą być wyświetlane w postaci suwaka.
Można użyć following atrybutów do określenia ograniczeń: min, max, step, wartość.
Input Typ: month
<input type="month"> pozwala użytkownikowi wybrać miesiąc i rok.
W zależności od wsparcia przeglądarki, data zbieracz może pokazać się w polu wejściowym.
Przykład
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form> Spróbuj sam " Input Typ: week
<input type="week"> pozwala użytkownikowi wybrać tydzień i rok.
W zależności od wsparcia przeglądarki, data zbieracz może pokazać się w polu wejściowym.
Input Typ: time
<input type="time"> pozwala użytkownikowi wybrać czas (no time zone) .
W zależności od wsparcia przeglądarki, zbieraczem czas może pokazać się w polu wejściowym.
Input Typ: datetime
<input type="datetime"> pozwala użytkownikowi wybrać datę i godzinę (with time zone) .
Przykład
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form> Spróbuj sam "  | Typ wejścia datetime jest usuwany ze standardu HTML. Użyj datetime-local zamiast. |
|---|
Typ wejścia: datetime-miejscowy
<input type="datetime-local"> pozwala użytkownikowi wybrać datę i godzinę (no time zone) .
W zależności od wsparcia przeglądarki, data zbieracz może pokazać się w polu wejściowym.
Przykład
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form> Spróbuj sam " Typ wejścia: email
<input type="email"> służy do pól wejściowych, które powinny zawierać adres e-mail.
W zależności od wsparcia przeglądarki, adres e-mail mogą być automatycznie sprawdzane gdy złożone.
Niektóre smartfony rozpoznać rodzaj e-mail, i dodaje ".com" na klawiaturze, aby dopasować wejście email.
Typ wejścia: szukaj
<input type="search"> służy do pól wyszukiwania (a search field behaves like a regular text field) .
Typ wejścia: tel
<input type="tel"> służy do pól wejściowych, które powinny zawierać numer telefonu.
Rodzaj tel jest obecnie obsługiwana tylko w Safari 8.
Typ wejścia: url
<input type="url"> służy do pól wejściowych, które powinny zawierać adres URL.
W zależności od wsparcia przeglądarki, w polu URL mogą być automatycznie sprawdzane gdy złożone.
Niektóre smartfony rozpoznać typ zawartości, i dodaje ".com" na klawiaturze, aby dopasować wejście URL.
Sprawdź się z ćwiczeniami!
Ćwiczenie 1 » ćwiczenie 2» ćwiczenie 3 » ćwiczenie 4» ćwiczenie 5 »