Typy wejść HTML5

HTML5 Nowe typy wejściowe

HTML5 ma kilka nowych typów pól formularza. Te nowe funkcje zapewniają lepszą kontrolę wejściową i walidacji.

Ten rozdział opisuje te kompleksowe nowe typy wejściowych:

• kolor
• data
• datetime
• datetime-local
• e-mail
• miesiąc
• liczba
• zakres
• poszukiwanie
• tel
• czas
• url
• tydzień

Uwaga: Nie wszystkie z głównych przeglądarek obsługuje nowe typy wejściowych, ale już można ich używać we wszystkich głównych przeglądarkach.Jeśli nie jest obsługiwany, to może jeszcze wyświetlane jako zwykłe pola tekstowe.

Typ wejścia: Kolor

kolor używany w typie pola wejściowego jest wykorzystywany głównie, aby wybrać kolor, co następuje:

Przykłady

Wybierz kolor z próbnika kolorów:

选择你喜欢的颜色: <input type="color" name="favcolor">

Spróbuj »

Typ wejścia: data

Data Rodzaj pozwala wybrać datę z wyboru daty.

Przykłady

Zdefiniuj regulator czasowy:

生日: <input type="date" name="bday">

Spróbuj »

Typ wejścia: datetime

typ datetime pozwala wybrać datę (czas UTC).

Przykłady

Określ datę i regulator czasu (czasu lokalnego):

生日 (日期和时间): <input type="datetime" name="bdaytime">

Spróbuj »

Typ wejścia: datetime-local

typ datetime lokalnego pozwala wybrać datę i godzinę (bez strefy czasowej).

Przykłady

Określ datę i godzinę (bez strefy czasowej):

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

Spróbuj »

Typ wejścia: email

Typ email jest wykorzystywany dla pól wejściowych powinna zawierać adresów e-mail.

Przykłady

Po wysłaniu formularza, zostanie ona automatycznie sprawdza, czy wartość ważnej dziedziny e-mail:

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

Spróbuj »

Wskazówka: iPhone w przeglądarce Safari obsługuje e-mail, typ wejścia, a przez zmianę klawiatury na ekranie dotykowym, aby ją dopasować (dodaj @ i .com opcje).

Typ wejścia: miesiąc

Typ miesięcy pozwala wybrać miesiąc.

Przykłady

Zdefiniowane miesiąc i rok (brak strefy czasowej):

生日 (月和年): <input type="month" name="bdaymonth">

Spróbuj »

Typ wejścia: Numer

Typ Numer służy do pól wejściowych powinna zawierać wartość.

Można również ustawić przyjąć ograniczoną liczbę:

Przykłady

Zdefiniuj pole wprowadzania numerycznego (ograniczona):

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

Spróbuj »

Użyj następującą właściwość, aby określić typ cyfrowego LIMITED:

• Maksymalna dopuszczalna przez przepisy MAX
• min - minimalna dopuszczalna przez przepisy
• krok - określa prawne interwałów numerycznych (jeśli krok = "3", numery prawne mogą być -3,0,3,6 itp)
• value - wartość domyślna określona

Spróbuj przykład we wszystkie zdefiniowane atrybuty spróbować

Typ wejścia: Zakres

Typ zakresu służy do pól wejściowych powinna zawierać zakres wartości liczbowych.

Typ zakresu jest wyświetlany w postaci suwaka.

Przykłady

Nie trzeba zdefiniować bardzo dokładnej wartości (jak suwaka):

<input type="range" name="points" min="1" max="10">

Spróbuj »

Proszę stosować następujące atrybuty, aby określić rodzaj cyfrowej LIMITED:

• max - maksymalna dopuszczalna przez przepisy
• min - minimalna dopuszczalna przez przepisy
• krok - określa numer dla przedziałów prawne
• value - wartość domyślna określona

Typ wejścia: szukaj

typ wyszukiwania w polu wyszukiwania, takich jak wyszukiwanie serwisu lub wyszukiwarki Google.

Przykłady

Zdefiniować pole wyszukiwania (podobną do przeszukiwania strony lub wyszukiwarki Google):

Search Google: <input type="search" name="googlesearch">

Spróbuj »

Typ wejścia: tel

Przykłady

Wprowadź numer telefonu pola jest zdefiniowana:

电话号码: <input type="tel" name="usrtel">

Spróbuj »

Typ wejścia: czas

Typ czasu pozwala wybrać czas.

Przykłady

Definiuje Kontroler czasu wejścia (brak strefy czasowej):

选择时间: <input type="time" name="usr_time">

Spróbuj »

Typ wejścia: url

url typu służy do pól wejściowych powinna zawierać adres URL.

Po wysłaniu formularza, zostanie ona automatycznie sprawdza wartość w polu URL.

Przykłady

Zdefiniuj pole wprowadzania adresu URL:

添加您的主页: <input type="url" name="homepage">

Spróbuj »

Wskazówka: iPhone w przeglądarce Safari obsługuje url typ wejścia, a przez zmianę klawiatury na ekranie dotykowym, aby ją dopasować (dodaj opcję .com).

Typ wejścia: tydzień

tydzień pozwala wybrać typ tygodnia i roku.

Przykłady

Definicje tydzień i rok (brak strefy czasowej):

选择周: <input type="week" name="week_year">

Spróbuj »

HTML5 <input> tag