English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Manual Básico

HTML5 API

HTML5 Mídia

HTML5 Gráficos

HTML5 Tipos de entrada

No HTML5neste, vários novos tipos de entrada de formulário foram adicionados, permitindo assim um melhor controle e validação de entrada através desses novos elementos.

HTML5 Novo tipo de entrada

HTML5 Possui vários novos tipos de entrada de formulário. Essas novas características oferecem um melhor controle e validação de entrada.

Este capítulo apresenta todos esses novos tipos de entrada:

  • cor

  • data

  • datetime

  • datetime-local

  • e-mail

  • mês

  • número

  • espaço

  • pesquisa

  • tel

  • tempo

  • URL

  • semana

Atenção:Não todos os navegadores populares suportam os novos tipos de entrada, mas você já pode usá-los em todos os navegadores populares. Mesmo que não sejam suportados, ainda podem ser exibidos como campos de texto normais.

Tipo de entrada: cor

O tipo color é usado principalmente nos campos de entrada input para escolher cores, conforme mostrado a seguir:

Exemplo Online

Escolha uma cor do seletor de cor:

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Escolha a cor que você gosta: <input type="color" name="favcolor"><br>
　　<input type="submit">
</form>
</body>
</html>
Testar e Verificar ‹/›

Tipo de entrada: date

O tipo date permite que você escolha uma data a partir de um seletor de data.

Exemplo Online

Defina um controlador de tempo:

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Data de nascimento: <input type="date" name="bday">
　　<input type="submit">
</form>
</body>
</html>
Testar e Verificar ‹/›

Tipo de entrada: datetime

O tipo datetime permite que você escolha uma data (horário UTC).

Exemplo Online

Defina um controlador de data e hora (horário local):

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Data de nascimento (data e hora): <input type="datetime" name="bdaytime">
　　<input type="submit">
</form>
</body>
</html>
Testar e Verificar ‹/›

Tipo de entrada: datetime-local

datetime-O tipo local permite que você escolha uma data e hora (sem fuso horário).

Exemplo Online

Defina um campo de data e hora (sem fuso horário):

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Data de nascimento (data e hora): <input type="datetime-"local" name="bdaytime">
　　<input type="submit">
</form>
</body>
</html>
Testar e Verificar ‹/›

Tipo de entrada: email

O tipo email é usado para campos de entrada que devem conter e-Campo de entrada de endereço de email.

Exemplo Online

Ao submeter o formulário, o valor do campo email será automaticamente verificado se é válido e eficaz:

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　E-mail: <input type="email" name="usremail">
　　<input type="submit">
</form>
<p><b>Atenção:/b> Internet Explorer　9　　E versões mais antigas do IE não suportam type="email".</p>
</body>
</html>
Testar e Verificar ‹/›

Aviso: O navegador Safari no iPhone suporta o tipo de entrada email e se adapta a ele (adicionando opções @ e .com).

Tipo de entrada: month

O tipo month permite que você escolha um mês.

Exemplo Online

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

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Data de nascimento (mês e ano): <input type="month" name="bdaymonth">
　　<input type="submit">
</form>
</body>
</html>
Testar e Verificar ‹/›

Tipo de entrada: number

O tipo number é usado para campos de entrada que devem conter números.

Você também pode definir restrições para os números aceitos:

Exemplo Online

Defina um campo de entrada de número (restrito):

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Quantidade (　1　até　5　Entre): <input type="number" name="quantity" min="1" max="5">
　　<input type="submit">
</form>
<p><b>Atenção:/b>Internet Explorer　9　E versões mais antigas do IE não suportam type="number".</p>
</body>
</html>
Testar e Verificar ‹/›

Use as seguintes propriedades para definir restrições no tipo de número:

propriedadeDescrição
desativadoOs campos de entrada são desativados
maxDefina o valor máximo permitido
maxlengthDefina o comprimento máximo de caracteres do campo de entrada
minDefina o valor mínimo permitido
patternDefina o padrão usado para validar o campo de entrada
readonlyDefina se o valor do campo de entrada não pode ser modificado
requiredDefina se o valor do campo de entrada é obrigatório
sizeDefina o número de caracteres visíveis no campo de entrada
stepDefina o intervalo de números legais do campo de entrada
valueDefina o valor padrão do campo de entrada

Tipo de entrada: range

O tipo range é usado para campos de entrada que devem conter valores numéricos dentro de um intervalo.

O tipo range é exibido como uma barra de deslizamento.

Exemplo Online

Defina um valor numérico não muito preciso (semelhante ao controle deslizante):

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php" method="get">
Pontos: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>
<p><b>Atenção:/b> Internet Explorer　9　As versões mais antigas do IE não suportam type="range" <./p>
</body>
</html>
Testar e Verificar ‹/›

Use as seguintes propriedades para definir limitações para tipos numéricos:

  • max - Defina o valor máximo permitido

  • min - Defina o valor mínimo permitido

  • step - Defina o intervalo de números legais

  • value - Defina o valor padrão

Tipo de entrada: search

O tipo search é usado para campos de pesquisa, como pesquisa de site ou Google.

Exemplo Online

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

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Pesquisar Google: <input type="search" name="googlesearch"><br>
　　<input type="submit">
</form>
</body>
</html>
Testar e Verificar ‹/›

Tipo de entrada: tel

Exemplo Online

Defina o campo de entrada de número de telefone:

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Número de telefone: <input type="tel" name="usrtel"><br>
　　<input type="submit">
</form>
</body>
</html>
Testar e Verificar ‹/›

Tipo de entrada: time

O tipo time permite que você escolha uma hora.

Exemplo Online

Defina o controlador de tempo permitido (sem fuso horário):

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Escolha a hora: <input type="time" name="usr_time">
　　<input type="submit">
</form>
</body>
</html>
Testar e Verificar ‹/›

Tipo de entrada: url

O tipo url é usado para campos de entrada que devem conter endereços URL.

Ao submeter o formulário, o valor do domínio url será verificado automaticamente.

Exemplo Online

Defina o campo de entrada de URL:

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Adicione sua página inicial: <input type="url" name="homepage"><br>
　　<input type="submit">
</form>
<p><b>Atenção:/b> Internet Explorer　9As versões mais antigas do IE não suportam type="url" <./p>
</body>
</html>
Testar e Verificar ‹/›

Aviso: O navegador Safari no iPhone suporta o tipo de entrada url e se coordena com o teclado tátil ao modificá-lo (adicionando a opção .com).

Tipos de Entrada: week

O tipo week permite que você selecione Semana e Ano.

Exemplo Online

Definir Semana e Ano (sem fuso horário):

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Escolher Semana: <input type="week" name="year_week">
　　<input type="submit">
</form>
</body>
</html>
Testar e Verificar ‹/›

HTML5 Etiqueta <input>

EtiquetaDescrição
<input>Descrição do Input
HTML5 Elementos de FormulárioHTML5 Audio (áudio)