Przykład
Formularz HTML z dwóch różnych typów danych wejściowych; tekst i złożyć:
<form action="demo_form.asp">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
Spróbuj sam " Więcej "Try it yourself" przykłady poniżej.
Definicja i Wykorzystanie
type atrybut określa typ <input> elementów do wyświetlenia.
Domyślnym typem jest: text .
Wskazówka: To nie jest wymaganym atrybutem, ale uważamy, że należy zawsze uwzględnić go.
Pomoc Browser
| Atrybut | |||||
|---|---|---|---|---|---|
| type | tak | tak | tak | tak | tak |
Uwaga: type atrybutu działa we wszystkich najpopularniejszych przeglądarkach. Jednak nie wszystkie rodzaje wejść działa we wszystkich najpopularniejszych przeglądarkach.
Spójrz poniżej, aby zobaczyć wsparcie przeglądarki dla każdego typu wejścia.
Różnice między HTML 4.01 i HTML5
HTML5 ma następujące nowe typy wejściowe: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel i url .
Składnia
<input type="value">
wartości atrybutów
| Wartość | Opis |
|---|---|
| button | Definiuje kliknąć przycisk (głównie z JavaScript aktywować skrypt) |
| checkbox | Definiuje wyboru |
| color | Definiuje próbnik kolorów |
| date | Definiuje kontrolę datę (rok, miesiąc i dzień (brak czasu)) |
| datetime | Typ wejścia datetime został usunięty ze standardem HTML. Użyj datetime-local zamiast. |
| datetime-local | Określa datę i czas kontroli (rok, miesiąc, dzień, godzina, minuta, sekunda, a ułamek sekundy (bez strefy czasowej) |
| Określa pole adresu e-mail | |
| file | Określa pole pliku-select i przycisk "Przeglądaj ..." (dla wysyłania plików) |
| hidden | Określa pole wprowadzania ukryty |
| image | Określa obraz jako przycisk przesyłania |
| month | Definiuje miesiąc i rok kontrolę (bez strefy czasowej) |
| number | Określa pole do wprowadzania numeru |
| password | Określa pole hasła (znaki są maskowane) |
| radio | Definiuje opcję |
| range | Definiuje sterowania do wprowadzania numeru, którego dokładna wartość nie jest ważne (jak suwaka) |
| reset | Definiuje przycisk reset (resetuje wszystkie wartości formularza do wartości domyślnych) |
| search | Określa pole tekstowe do wprowadzania ciąg wyszukiwania |
| submit | Definiuje przycisk Prześlij |
| tel | Określa pole do wpisywania numeru telefonu |
| text | Zaniedbanie. Określa pole tekstowe pojedynczej linii (domyślnie szerokość wynosi 20 znaków) |
| time | Definiuje kontrolę wprowadzania czasu (brak strefy czasowej) |
| url | Określa pole wprowadzania adresu URL |
| week | Definiuje tydzień i rok kontrolę (bez strefy czasowej) |
Przykłady
Rodzaj wejścia: button
Przykład
Klikalny przycisk, który uruchamia JavaScript, gdy zostanie kliknięty:
<input type="button" value="Click me" onclick="msg()">
Spróbuj sam " Rodzaj wejścia: checkbox
Przykład
Pola wyboru pozwalają użytkownikowi wybrać jedną lub więcej opcji z ograniczoną liczbą opcji:
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
Spróbuj sam " Rodzaj wejścia: color
Przykład
Wybierz kolor z próbnika kolorów:
Select your favorite color: <input type="color" name="favcolor"> Spróbuj sam " Rodzaj wejścia: date
Rodzaj wejścia: datetime
Przykład
Określ datę i czas kontroli (ze strefy czasowej):
Birthday (date and time): <input type="datetime" name="bdaytime"> Spróbuj sam " Typ wejścia datetime został usunięty ze standardem HTML. Użyj datetime-local zamiast.
Rodzaj wejścia: datetime-local
Przykład
Określ datę i czas (brak kontroli strefy czasowej):
Birthday (date and time): <input type="datetime-local" name="bdaytime"> Spróbuj sam " Rodzaj wejścia: email
Przykład
Zdefiniować pole adresu e-mail (będzie automatycznie sprawdzane przy poddaniu):
E-mail: <input type="email" name="usremail"> Spróbuj sam " Wskazówka: Safari na iPhone rozpoznaje rodzaj e-mail, a zmienia klawiaturę na ekranie, aby go dopasować (dodaje @ i .com opcje).
Rodzaj wejścia: file
Przykład
Zdefiniuj pole pliku-select i "Browse ..." (do przesyłania plików):
Select a file: <input type="file" name="img">
Spróbuj sam " Rodzaj wejścia: hidden
Przykład
Zdefiniuj pole ukryte (niewidoczne dla użytkownika).
Ukrytym polem często przechowuje wartość domyślną, lub może być jej wartość zmieniona przez JavaScript:
<input type="hidden" name="country" value="Norway">
Spróbuj sam " Rodzaj wejścia: image
Przykład
Definiowanie obrazu jako przycisk złożyć:
<input type="image" src="img_submit.gif" alt="Submit">
Spróbuj sam " Rodzaj wejścia: month
Przykład
Zdefiniuj miesiąc i rok sterujące (strefa czasowa):
Birthday (month and year): <input type="month" name="bdaymonth"> Spróbuj sam " Rodzaj wejścia: number
Przykład
Zdefiniuj pole do wpisywania numeru (Można również ustawić ograniczenia na jakie numery są akceptowane):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5"> Spróbuj sam " Użyj following atrybuty, aby określić ograniczenia:
- max - określa maksymalną dozwoloną wartość
- min - określa wartość minimalną dozwoloną
- step - określa prawne interwałów numerycznych
- value - Określa wartość domyślną
Rodzaj wejścia: password
Rodzaj wejścia: radio
Przykład
Przyciski radiowe pozwalają użytkownikowi wybrać tylko jedną z ograniczoną liczbą opcji:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other">
Other
Spróbuj sam " Rodzaj wejścia: range
Przykład
Zdefiniuj kontrolę wprowadzania numeru, którego wartość dokładna nie jest ważne (jak suwaka). Można również ustawić ograniczenia na jakie numery są akceptowane:
<input type="range" name="points" min="0" max="10"> Spróbuj sam " Użyj following atrybuty, aby określić ograniczenia:
- max - określa maksymalną dozwoloną wartość
- min - określa wartość minimalną dozwoloną
- step - określa prawne interwałów numerycznych
- value - Określa wartość domyślną
Rodzaj wejścia: reset
Przykład
Definiowanie przycisku reset (resetuje wszystkie wartości formularza do wartości domyślnych):
<input type="reset"> Spróbuj sam " Wskazówka: starannie Użyj przycisku reset!To może być irytujące dla użytkowników, którzy przypadkowo aktywować przycisk reset.
Rodzaj wejścia: search
Przykład
Zdefiniować pole wyszukiwarki (jak poszukiwania lokacji lub wyszukiwarki Google):
Search Google: <input type="search" name="googlesearch"> Spróbuj sam " Rodzaj wejścia: submit
Rodzaj wejścia: tel
Przykład
Zdefiniuj pole do wpisywania numeru telefonu:
Telephone: <input type="tel" name="usrtel"> Spróbuj sam " Input type: text
Przykład
Określ dwa pola tekstowe pojedynczej linii, które użytkownik może wprowadzić tekst do:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Spróbuj sam " Rodzaj wejścia: time
Przykład
Zdefiniuj sterowanie wpisanie czasu (nie ma strefy czasowej):
Select a time: <input type="time" name="usr_time"> Spróbuj sam " Rodzaj wejścia: url
Przykład
Zdefiniować pole wprowadzania adresu URL:
Add your homepage: <input type="url" name="homepage"> Spróbuj sam " Wskazówka: Safari na iPhone rozpoznaje typ wprowadzania adresu, i zmienia klawiaturę na ekranie, aby go (dodaje opcję .com) pasują do siebie.
Rodzaj wejścia: week
Przykład
Zdefiniuj tydzień i rok sterujące (strefa czasowa):
Select a week: <input type="week" name="week_year"> Spróbuj sam "