Tipos de entrada HTML
- Página Anterior Elementos de Formulário HTML
- Próxima Página Atributos de Entrada HTML
Este capítulo descreve os tipos de entrada do elemento <input>.
Tipo de entrada: texto
<input type="text"> Define paraEntrada de textoCampo de entrada de linha única do:
Exemplo
<form> Nome:<br> <input type="text" name="firstname"> <br> Sobrenome:<br> <input type="text" name="lastname"> </form>
O código HTML acima parece assim no navegador:
Tipo de entrada: senha
<input type="password"> definiçãoCampo de senha:
Exemplo
<form> Nome do usuário:<br> <input type="text" name="username"> <br> Senha do usuário:<br> <input type="password" name="psw"> </form>
O código HTML acima parece assim no navegador:
Notas:Os caracteres do campo de senha 'password' serão tratados como máscara (exibidos como estrelas ou círculos preenchidos).
Tipo de entrada: submit
<input type="submit"> definiçãoenviarOs dados do formulário paraPrograma de manipulação de formuláriosdo botão.
O programa de manipulação de formulários (form-handler) é geralmente uma página de servidor que contém scripts para manipular dados de entrada.
Especifique o processador (form-handler) no atributo action do formulário.
Exemplo
<form action="action_page.php"> Nome:<br> <input type="text" name="firstname" value="Mickey"> <br> Sobrenome:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Enviar"> </form>
O código HTML acima parece assim no navegador:
Se você omitir o atributo value do botão de envio, o botão obterá o texto padrão:
Exemplo
<form action="action_page.php"> Nome:<br> <input type="text" name="firstname" value="Mickey"> <br> Sobrenome:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit"> </form>
Tipo de Entrada: rádio
<input type="radio"> Define o botão de rádio.
Os botões de rádio permitem que o usuário selecione APENAS UMA das opções limitadas:
Exemplo
<form> <input type="radio" name="sex" value="male" checked>Masculino <br> <input type="radio" name="sex" value="female">Feminino </form>
O código HTML acima parece assim no navegador:
Tipo de Entrada: caixa de seleção
<input type="checkbox"> Define a caixa de seleção.
As caixas de seleção permitem que o usuário selecione zero ou mais opções em um número limitado de opções.
Exemplo
<form> <input type="checkbox" name="vehicle" value="Bike">Eu tenho uma bicicleta <br> <input type="checkbox" name="vehicle" value="Car">Eu tenho um carro </form>
O código HTML acima parece assim no navegador:
Tipo de Entrada: botão
<input type="button"> definiçãobotão。
Exemplo
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
O código HTML acima parece assim no navegador:
Tipos de entrada do HTML5
O HTML5 adicionou vários novos tipos de entrada:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Notas:Tipos de entrada antigos de web browsers não suportados serão considerados como tipo de entrada text.
Tipo de entrada: number
<input type="number"> Usado para campos de entrada que devem conter valores numéricos.
Você pode fazer restrições aos números.
De acordo com o suporte do navegador, as restrições podem ser aplicadas ao campo de entrada.
Exemplo
<form> Quantidade (entre 1 e 5): <input type="number" name="quantity" min="1" max="5"> </form>
Restrições de entrada
Aqui estão algumas restrições de entrada comuns (algumas são novas no HTML5):
| Atributo | Descrição |
|---|---|
| disabled | Define se o campo de entrada deve ser desativado. |
| max | Define o valor máximo do campo de entrada. |
| maxlength | Define o número máximo de caracteres do campo de entrada. |
| min | Define o valor mínimo do campo de entrada. |
| pattern | Define a expressão regular para verificar o valor de entrada. |
| readonly | Define o campo de entrada como de leitura only (não pode ser modificado). |
| required | Define se o campo de entrada é obrigatório (deve ser preenchido). |
| size | Define a largura do campo de entrada (em caracteres). |
| step | Define o intervalo de números legais do campo de entrada. |
| value | Define o valor padrão do campo de entrada. |
Você aprenderá mais sobre restrições de entrada no próximo capítulo.
Exemplo
<form> Quantidade: <input type="number" name="points" min="0" max="100" step="10" value="30"> </form>
Tipo de entrada: date
<input type="date"> Usado para campos de entrada que devem conter uma data.
De acordo com o suporte do navegador, o seletor de data aparecerá no campo de entrada.
Exemplo
<form> Aniversário: <input type="date" name="bday"> </form>
Você pode adicionar restrições ao campo de entrada:
Exemplo
<form> Insira uma data antes de 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Insira uma data após 2000-01-01: Insira uma data após 2000-01-01:<br> </form>
Tipo de entrada: color
<input type="color"> Usado para campos de entrada que devem conter cores.
De acordo com o suporte do navegador, o seletor de cor aparecerá no campo de entrada.
Exemplo
<form> Selecione sua cor favorita: <input type="color" name="favcolor"> </form>
Tipo de entrada: range
<input type="range"> Usado para campos de entrada que devem conter valores dentro de um determinado intervalo.
De acordo com o suporte do navegador, o campo de entrada pode ser exibido como controle deslizante.
Exemplo
<form> <input type="range" name="points" min="0" max="10"> </form>
Você pode usar as seguintes propriedades para especificar limites: min, max, step, value.
Tipo de entrada: month
<input type="month"> Permite que o usuário selecione o mês e o ano.
De acordo com o suporte do navegador, o seletor de data aparecerá no campo de entrada.
Exemplo
<form> Data de Aniversário (mês e ano): <input type="month" name="bdaymonth"> </form>
Tipo de entrada: week
<input type="week"> Permite que o usuário selecione a semana e o ano.
De acordo com o suporte do navegador, o seletor de data aparecerá no campo de entrada.
Exemplo
<form> Selecione uma semana: <input type="week" name="week_year"> </form>
Tipo de entrada: time
<input type="time"> Permite que o usuário selecione o tempo (sem fuso horário).
De acordo com o suporte do navegador, o seletor de tempo aparecerá no campo de entrada.
Exemplo
<form> Selecione um horário: <input type="time" name="usr_time"> </form>
Tipo de entrada: datetime
<input type="datetime"> Permite que o usuário selecione a data e a hora (com fuso horário).
De acordo com o suporte do navegador, o seletor de data aparecerá no campo de entrada.
Exemplo
<form> Data de Aniversário (data e hora): <input type="datetime" name="bdaytime"> </form>
Tipo de entrada: datetime-local
<input type="datetime-local"> Permite que o usuário selecione a data e a hora (sem fuso horário).
De acordo com o suporte do navegador, o seletor de data aparecerá no campo de entrada.
Exemplo
<form> Data de Aniversário (data e hora): <input type="datetime-local" name="bdaytime"> </form>
Tipo de Entrada: email
<input type="email"> Usado para campos de entrada que devem conter endereços de e-mail.
De acordo com o suporte do navegador, o endereço de e-mail pode ser verificado automaticamente ao ser enviado.
Alguns smartphones reconhecem o tipo email e adicionam ".com" ao teclado para coincidir com a entrada de e-mail.
Exemplo
<form> E-mail: <input type="email" name="email"> </form>
Tipo de Entrada: search
<input type="search"> Usado para campos de pesquisa (os campos de pesquisa se parecem com campos de texto normais).
Exemplo
<form> Procurar no Google: <input type="search" name="googlesearch"> </form>
Tipo de Entrada: tel
<input type="tel"> Usado para campos de entrada que devem conter números de telefone.
Atualmente, apenas o Safari 8 suporta o tipo tel.
Exemplo
<form> Telefone: <input type="tel" name="usrtel"> </form>
Tipo de Entrada: url
<input type="url"> Usado para campos de entrada que devem conter endereços da URL.
De acordo com o suporte do navegador, o campo URL pode ser verificado automaticamente ao enviar.
Alguns smartphones reconhecem o tipo URL e adicionam ".com" ao teclado para coincidir com a entrada de URL.
Exemplo
<form> Adicione sua página inicial: <input type="url" name="homepage"> </form>
- Página Anterior Elementos de Formulário HTML
- Próxima Página Atributos de Entrada HTML
