Tipos de entrada
Este capítulo descreve os tipos de entrada do <input> elemento.
Tipo de entrada de texto
<input type="text"> define um campo de entrada de uma linha para a entrada de texto:
Exemplo
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form> Tente você mesmo " Isto é como o código HTML acima será exibido em um navegador:
Primeiro nome:
Último nome:
Tipo de entrada: password
<input type="password"> define um campo de senha:
Exemplo
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form> Tente você mesmo " Isto é como o código HTML acima será exibido em um navegador:
Nome de usuário:
Senha do usuário:
Os caracteres de uma palavra-passe campo são mascarados (shown as asterisks or circles) .
Tipo de entrada: submit
<input type="submit"> define um botão para a apresentação de entrada de formulário para um formulário-manipulador.
A forma de manipulador é tipicamente uma página do servidor com um script para processar dados de entrada.
A forma de manipulador é especificado no atributo action do formulário:
Exemplo
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form> Tente você mesmo " Isto é como o código HTML acima será exibido em um navegador:
Primeiro nome:
Último nome:
Se você omitir atributo de valor do botão enviar, o botão vai ter um texto padrão:
Exemplo
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form> Tente você mesmo " Tipo de entrada: radio
<input type="radio"> define um radio botão.
Radio botões permitem que um usuário selecionar apenas um de um número limitado de opções:
Exemplo
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form> Tente você mesmo " Isto é como o código HTML acima será exibido em um navegador:
Masculino
Fêmea
De outros
Tipo de entrada: checkbox
<input type="checkbox"> define uma checkbox .
Checkboxes permitir que um usuário selecionar zero ou mais opções de um número limitado de opções.
Exemplo
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form> Tente você mesmo " Isto é como o código HTML acima será exibido em um navegador:
eu tenho uma bicicleta
Eu tenho um carro
Tipo de entrada: button
<input type="button"> define um button :
Isto é como o código HTML acima será exibido em um navegador:
HTML5 Input Tipos
HTML5 adicionou diversos novos input tipos:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input tipos, não suportados por navegadores antigos, se comportará como input tipo de texto.
Input Tipo: number
O <input type="number"> é usado para campos de entrada que devem conter um valor numérico.
Você pode definir restrições sobre os números.
Dependendo suporte ao navegador, as restrições podem aplicar-se ao campo de entrada.
Exemplo
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form> Tente você mesmo " Input Restrições
Aqui está uma lista de alguns comum input restrições (some are new in HTML5) :
| Atributo | Descrição |
|---|---|
| disabled | Especifica que um campo de entrada deve ser desativado |
| max | Especifica o valor máximo para um campo de entrada |
| >maxlength | Especifica o número máximo de caracteres para um campo de entrada |
| min | Especifica o valor mínimo para um campo de entrada |
| pattern | Especifica uma expressão regular para verificar o valor de entrada contra |
| readonly | Especifica que um campo de entrada é somente leitura (cannot be changed) |
| required | Especifica que um campo de entrada é necessária (must be filled out) |
| size | Especifica a largura (in characters) de um campo de entrada |
| step | Especifica os intervalos de número legal para um campo de entrada |
| value | Especifica o valor padrão para um campo de entrada |
Você vai aprender mais sobre input restrições no próximo capítulo.
Exemplo
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form> Tente você mesmo " Input Tipo: date
O <input type="date"> é usado para campos de entrada que devem conter uma data.
Dependendo suporte ao navegador, um selecionador de data pode aparecer no campo de entrada.
Você pode adicionar restrições à input :
Exemplo
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form> Tente você mesmo " Input Tipo: cor
O <input type="color"> é usado para campos de entrada que devem conter uma cor.
Dependendo suporte ao navegador, um seletor de cores pode aparecer no campo de entrada.
Exemplo
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form> Tente você mesmo " Input Tipo: gama
O <input type="range"> é usado para campos de entrada que devem conter um valor dentro de uma faixa.
Dependendo suporte ao navegador, o campo de entrada pode ser exibido como um controle deslizante.
Você pode usar os following atributos para especificar restrições: min, max, passo, valor.
Input Tipo: month
O <input type="month"> permite que o usuário selecione um mês e ano.
Dependendo suporte ao navegador, um selecionador de data pode aparecer no campo de entrada.
Exemplo
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form> Tente você mesmo " Input Tipo: week
O <input type="week"> permite que o usuário selecione uma semana e ano.
Dependendo suporte ao navegador, um selecionador de data pode aparecer no campo de entrada.
Input Tipo: time
O <input type="time"> permite ao usuário selecionar um tempo (no time zone) .
Dependendo suporte ao navegador, um seletor de tempo pode aparecer no campo de entrada.
Input Tipo: datetime
O <input type="datetime"> permite que o usuário selecione uma data e hora (with time zone) .
Exemplo
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form> Tente você mesmo "  | O tipo de entrada de data e hora é removida do padrão HTML. Use datetime-local em vez. |
|---|
Tipo de entrada: datetime-local
O <input type="datetime-local"> permite que o usuário selecione uma data e hora (no time zone) .
Dependendo suporte ao navegador, um selecionador de data pode aparecer no campo de entrada.
Exemplo
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form> Tente você mesmo " Tipo de entrada de e-mail
O <input type="email"> é usado para campos de entrada que devem conter um endereço de e-mail.
Dependendo suporte ao navegador, o endereço de e-mail podem ser validados automaticamente quando submetido.
Alguns smartphones reconhecer o tipo de e-mail, e acrescenta ".com" para o teclado para corresponder à entrada de e-mail.
Tipo de entrada: procure
O <input type="search"> é usado para campos de pesquisa (a search field behaves like a regular text field) .
Tipo de entrada: tel
O <input type="tel"> é usado para campos de entrada que devem conter um número de telefone.
O tipo tel é atualmente suportada apenas no Safari 8.
Tipo de entrada: url
O <input type="url"> é usado para campos de entrada que devem conter um endereço URL.
Dependendo suporte ao navegador, o campo url pode ser validado automaticamente quando submetido.
Alguns smartphones reconhecer o tipo de url, e acrescenta ".com" para o teclado para corresponder à entrada url.
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »