Latest web development tutorials

Tipos de entrada HTML5

HTML5 novos tipos de entrada

HTML5 tem vários tipos de entrada de formulário novos. Esses novos recursos fornecem melhor controle de entrada e validação.

Este capítulo descreve esses novos tipos de entrada abrangentes:

  • cor
  • data
  • datetime
  • datetime-local
  • e-mail
  • mês
  • número
  • alcance
  • pesquisa
  • tel
  • tempo
  • url
  • semana

Nota: Nem todos os principais navegadores suportam os novos tipos de entrada, mas você já pode usá-los em todos os principais navegadores.Se não houver suporte, ele ainda pode aparecer como campos de texto regulares.


Tipo de entrada: Cor

cor utilizada no tipo de campo de entrada é usado principalmente para seleccionar a cor, como se segue:

OperaSafariChromeFirefoxInternet Explorer

Exemplos

Escolha uma cor no seletor de cores:

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

tente »


Tipo de entrada: Data

tipo de data permite que você selecione uma data de um selecionador de data.

OperaSafariChromeFirefoxInternet Explorer

Exemplos

Definir um controlador de tempo:

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

tente »


Tipo de entrada: datetime

Tipo de data e hora permite selecionar uma data (hora UTC).

OperaSafariChromeFirefoxInternet Explorer

Exemplos

Definir uma data e controlador de tempo (hora local):

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

tente »


Tipo de entrada: datetime-local

tipo datetime-local permite selecionar uma data e hora (sem fuso horário).

OperaSafariChromeFirefoxInternet Explorer

Exemplos

Definir uma data e hora (sem fuso horário):

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

tente »


Tipo de entrada: e-mail

Tipo de e-mail é usado para campos de entrada deve conter endereços de e-mail.

OperaSafariChromeFirefoxInternet Explorer

Exemplos

Quando o formulário é enviado, ele irá verificar automaticamente se o domínio email válido valor:

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

tente »

Dica: iPhone no navegador Safari suporta e-mail tipo de entrada, e alterando o teclado da tela sensível ao toque para combiná-lo (adicionar @ .com e opções).


Tipo de entrada: mês

Tipo mês permite que você selecione um mês.

OperaSafariChromeFirefoxInternet Explorer

Exemplos

mês e ano definido (sem fuso horário):

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

tente »


Tipo de entrada: número

tipo de número é usado para campos de entrada deve conter um valor.

Você também pode definir a aceitar números limitados:

OperaSafariChromeFirefoxInternet Explorer

Exemplos

Defina um campo de entrada numérica (limitado):

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

tente »

Utilize a seguinte propriedade para especificar o tipo de Digital Limited:

  • O máximo permitido pelos regulamentos max
  • min - o mínimo permitido pelos regulamentos
  • etapa - especifica os intervalos de números legais para (se o passo = "3", os números legais poderia ser -3,0,3,6, etc)
  • value - o valor padrão especificado

Experimente um exemplo com todos os atributos definidos tentar


Tipo de entrada: Intervalo

tipo gama é utilizada para campos de entrada devem conter uma gama de valores numéricos.

tipo de intervalo é exibido como um controle deslizante.

OperaSafariChromeFirefoxInternet Explorer

Exemplos

Você não precisa definir um valor muito precisa (como um controle deslizante):

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

tente »

Por favor, use os seguintes atributos para especificar o tipo de Digital Limited:

  • max - o máximo permitido pelos regulamentos
  • min - o mínimo permitido pelos regulamentos
  • etapa - especifica os intervalos de números legais para
  • value - o valor padrão especificado

Tipo de entrada: procure

Tipo de pesquisa para o campo de pesquisa, como a busca do site ou pesquisa do Google.

OperaSafariChromeFirefoxInternet Explorer

Exemplos

Defina um campo de pesquisa (semelhante à pesquisa do site ou pesquisa do Google):

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

tente »


Tipo de entrada: tel

OperaSafariChromeFirefoxInternet Explorer

Exemplos

Digite o telefone campo de número está definida:

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

tente »


Tipo de entrada: tempo

Tipo de tempo permite que você selecione um tempo.

OperaSafariChromeFirefoxInternet Explorer

Exemplos

Define controlador de tempo de entrada (sem fuso horário):

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

tente »


Tipo de entrada: url

digite a URL é usado para campos de entrada deve conter um endereço URL.

Quando o formulário é enviado, ele irá verificar automaticamente o valor do campo URL.

OperaSafariChromeFirefoxInternet Explorer

Exemplos

Definir o URL campo de entrada:

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

tente »

Dica: iPhone no navegador Safari suporta tipo de entrada url, e alterando o teclado da tela sensível ao toque para combiná-lo (opção .com adicionar).


Tipo de entrada: semana

semana permite que você selecione o tipo de semana e ano.

OperaSafariChromeFirefoxInternet Explorer

Exemplos

Definições semana e ano (sem fuso horário):

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

tente »


tag HTML5 <input>

标签 描述
<input> 描述input输入器