Tipi di input HTML5

HTML5 Nuovi tipi di input

HTML5 ha diversi nuovi tipi di input modulo. Queste nuove funzionalità forniscono un migliore controllo di input e di convalida.

Questo capitolo descrive questi nuovi tipi di input complete:

• colore
• data
• datetime
• datetime-locali
• e-mail
• mese
• numero
• gamma
• ricerca
• tel
• tempo
• URL
• settimana

Nota: Non tutti i principali browser supportano i nuovi tipi di input, ma si può già utilizzarli in tutti i principali browser.Se non è supportata, può ancora apparire come campi di testo regolari.

Tipo di ingresso: colore

colore utilizzato nel tipo di campo ingresso viene principalmente usato per selezionare il colore, come segue:

Esempi

Scegliere un colore dal selettore colore:

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

Prova »

Tipo di ingresso: Data

tipo di data consente di selezionare una data da una selezione data.

Esempi

Definire un regolatore di tempo:

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

Prova »

Tipo di ingresso: datetime

tipo datetime consente di selezionare una data (ora UTC).

Esempi

Definire una data e il regolatore di tempo (ora locale):

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

Prova »

Tipo di ingresso: datetime-locale

tipo datetime locale consente di selezionare una data e l'ora (senza fuso orario).

Esempi

Definire una data e l'ora (senza fuso orario):

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

Prova »

Tipo di ingresso: e-mail

Tipo di e-mail viene utilizzato per i campi di input dovrebbe contenere indirizzi e-mail.

Esempi

Quando il modulo viene inviato, si verificherà automaticamente se il valore di dominio e-mail valido:

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

Prova »

Suggerimento: iPhone in browser Safari supporta tipo di ingresso e-mail, e modificando la tastiera touch screen per abbinarlo (aggiungere @ e .com opzioni).

Tipo di ingresso: mese

Tipo mese permette di selezionare un mese.

Esempi

mese e anno Definito (senza fuso orario):

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

Prova »

Tipo di ingresso: numero

tipo di numero è usato per i campi di input dovrebbe contenere un valore.

È inoltre possibile impostare per accettare un numero limitato:

Esempi

Definire un campo di immissione numerica (limitata):

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

Prova »

Utilizzare la seguente proprietà per specificare il tipo di Digital Limited:

• Il massimo consentito dalla normativa Max-
• min - al minimo consentito dalle normative
• passo - specifica gli intervalli di numero legale per (se passo = "3", i numeri di legge potrebbe essere -3,0,3,6, ecc)
• value - il valore predefinito specificato

Prova un esempio con tutti gli attributi definiti provano

Tipo di ingresso: gamma

Tipo di gamma viene utilizzato per i campi di input dovrebbe contenere una serie di valori numerici.

Tipo di gamma viene visualizzato come un cursore.

Esempi

Non è necessario definire un valore molto preciso (come un cursore di controllo):

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

Prova »

Si prega di utilizzare i seguenti attributi per specificare il tipo di Digital Limited:

• max - il massimo consentito dalla normativa
• min - al minimo consentito dalle normative
• passo - specifica gli intervalli di numero legale per
• value - il valore predefinito specificato

Tipo di ingresso: ricerca

Tipo di ricerca del campo di ricerca, come la ricerca del sito o di ricerca di Google.

Esempi

Definire un campo di ricerca (simile alla ricerca di sito o di ricerca di Google):

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

Prova »

Tipo di ingresso: tel

Esempi

Inserire il campo numero di telefono viene definito:

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

Prova »

Tipo di ingresso: il tempo

Tipo di tempo consente di selezionare un tempo.

Esempi

Definisce il regolatore di tempo di ingresso (senza fuso orario):

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

Prova »

Tipo di ingresso: URL

digitare l'URL viene utilizzato per i campi di input dovrebbe contenere un indirizzo URL.

Quando il modulo viene inviato, si verificherà automaticamente il valore del campo URL.

Esempi

Definire l'URL campo di input:

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

Prova »

Suggerimento: iPhone in browser Safari supporta tipo di ingresso URL, e modificando la tastiera touch screen di abbinarlo (aggiungere l'opzione .com).

Tipo di ingresso: settimana

settimana consente di selezionare il tipo di settimana e dell'anno.

Esempi

Definizioni settimana e l'anno (senza fuso orario):

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

Prova »

HTML5 tag <input>