Exemplo
Um elemento, tantos tipos diferentes.
Sintaxe
1 |
type="text" placeholder="First name" />
|
2 |
type="password" placeholder="Password" />
|
3 |
type="submit" value="Login" />
|
Resultado
Suporte do navegador
O tag é suportada em todos os navegadores modernos. Leia mais em caniuse.com.
Atributos
O tag suporta Atributos Globais em HTML. Os Atributos Globais são comuns a todos os elementos HTML e podem ser usados em todos eles (embora possam não ter muito efeito em alguns deles).
um genérico O elemento também suporta os seguintes atributos:
-
type
: Tipo de controle de formulário. -
value
: Valor do controle de formulário.
Muitos atributos adicionais são suportados com base no type
de entrada sendo criado.
Tipos de entrada
Os elementos de entrada vêm em vários tipos diferentes para suportar diferentes tipos de dados que podem ser inseridos. Abaixo está uma lista dos tipos suportados:
-
type=button
: Simplesmente um botão sem tipo de dados -
type=checkbox
: Um conjunto de zero ou mais valores de uma lista predefinida que é apresentada como uma caixa de seleção. -
type=color
: uma cor sRGB com componentes de vermelho, verde e azul de 8 bits apresentados como um seletor de cores. -
type=date
: Um dado (ano, mês, dia) sem fuso horário apresentado como um controle de data. -
type=datetime-local
: Uma data e hora (ano, mês, dia, hora, minuto, segundo e fração de segundo) sem fuso horário apresentado como um controle de data e hora. -
type=email
: um endereço de e-mail ou uma lista de endereços de e-mail apresentados como um controle de texto. -
type=file
: Zero ou mais arquivos, cada um com um tipo MIME e, opcionalmente, um nome de arquivo -
type=hidden
: Uma string arbitrária escondida da aparência. -
type=image
: uma coordenada relativa ao tamanho de uma imagem específica, com a semântica extra de que deve ser o último valor selecionado e inicia o envio do formulário apresentado como uma imagem ou botão clicável. -
type=month
: Uma data que consiste em um ano e um mês sem fuso horário apresentada como um controle de mês. -
type=number
: um valor numérico apresentado como um controle de texto com um controle giratório. -
type=password
: texto sem quebras de linha que não exibirá informações confidenciais conforme o usuário digita. -
type=radio
: Um valor enumerado apresentado como um botão de opção. -
type=range
: um valor numérico, com a semântica extra de que o valor exato não é importante, apresentado como um controle deslizante ou similar. -
type=reset
: Usado para redefinir um elemento de formulário e apresentado como um botão. -
type=search
: Texto sem quebras de linha apresentado como um controle de pesquisa. -
type=submit
: Um valor enumerado, com a semântica extra de que deve ser o último valor selecionado e inicia o envio do formulário apresentado como um botão. -
type=tel
: Texto sem quebras de linha apresentado como um controle de texto. -
type=text
: Texto sem quebras de linha apresentado como um controle de texto. -
type=time
: Uma hora (hora, minuto, segundos, segundos fracionários) sem fuso horário apresentado como controle de tempo. -
type=url
: uma URL absoluta apresentada como um controle de texto. -
type=week
: Uma data que consiste em um número de semana e ano e um número de semana sem fuso horário apresentado como um controle de semana.
Contente
As entradas não suportam conteúdo e são consideradas um elemento nulo.
Considerações sobre dispositivos móveis
-
Rotulagem de controle: para melhor usabilidade e acessibilidade, rotule todos os controles de entrada adequadamente.
-
Acessibilidade: Minimize a digitação do usuário especificando os tipos de entrada corretamente. Em dispositivos móveis, diferentes configurações de teclado são exibidas dependendo do tipo de entrada atualmente em foco: