Tipos de entrada HTML
Este capítulo descreve os diferentes tipos para o <input>elemento HTML.
Tipos de entrada HTML
Aqui estão os diferentes tipos de entrada que você pode usar em HTML:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Dica: O valor padrão do typeatributo é "texto".
Texto do tipo de entrada
<input type="text">define um
campo de entrada de texto de linha única :
Exemplo
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
É assim que o código HTML acima será exibido em um navegador:
Primeiro nome:Último nome:
Digite a senha
<input type="password">define um campo de senha :
Exemplo
<form>
<label for="username">Username:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
É assim que o código HTML acima será exibido em um navegador:
Nome do usuário:Senha:
Os caracteres em um campo de senha são mascarados (mostrados como asteriscos ou círculos).
Tipo de entrada Enviar
<input type="submit">define um botão para
enviar dados de formulário para um manipulador de formulário .
O manipulador de formulário geralmente é uma página do servidor com um script para processar dados de entrada.
O manipulador de formulário é especificado no action
atributo do formulário:
Exemplo
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
É assim que o código HTML acima será exibido em um navegador:
Se você omitir o atributo value do botão de envio, o botão receberá um texto padrão:
Exemplo
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
Redefinição do tipo de entrada
<input type="reset">define um botão de redefinição
que redefinirá todos os valores do formulário para seus valores padrão:
Exemplo
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
É assim que o código HTML acima será exibido em um navegador:
Se você alterar os valores de entrada e clicar no botão "Redefinir", os dados do formulário serão redefinidos para os valores padrão.
Tipo de entrada Rádio
<input type="radio">define um botão de rádio .
Os botões de opção permitem que um usuário selecione APENAS UMA de um número limitado de opções:
Exemplo
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
É assim que o código HTML acima será exibido em um navegador:
Caixa de seleção do tipo de entrada
<input type="checkbox">define uma caixa de seleção .
As caixas de seleção permitem que o usuário selecione ZERO ou MAIS opções de um número limitado de opções.
Exemplo
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
É assim que o código HTML acima será exibido em um navegador:
Botão de tipo de entrada
<input type="button">define um botão :
Exemplo
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
É assim que o código HTML acima será exibido em um navegador:
Cor do Tipo de Entrada
O <input type="color">é usado para campos de entrada que devem conter uma cor.
Dependendo do suporte do navegador, um seletor de cores pode aparecer no campo de entrada.
Exemplo
<form>
<label for="favcolor">Select your favorite
color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Tipo de entrada Data
O <input type="date">é usado para campos de entrada que devem conter uma data.
Dependendo do suporte do navegador, um seletor de data pode aparecer no campo de entrada.
Exemplo
<form>
<label for="birthday">Birthday:</label>
<input
type="date" id="birthday" name="birthday">
</form>
Você também pode usar os atributos mine para adicionar restrições a datas:max
Exemplo
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date after
2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02">
</form>
Tipo de entrada Datetime-local
O <input type="datetime-local">especifica um campo de entrada de data e hora, sem fuso horário.
Dependendo do suporte do navegador, um seletor de data pode aparecer no campo de entrada.
Exemplo
<form>
<label for="birthdaytime">Birthday (date and
time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Tipo de entrada E-mail
O <input type="email">é usado para campos de entrada que devem conter um endereço de e-mail.
Dependendo do suporte do navegador, o endereço de e-mail pode ser validado automaticamente quando enviado.
Alguns smartphones reconhecem o tipo de e-mail e adicionam ".com" ao teclado para corresponder à entrada de e-mail.
Exemplo
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Arquivo de tipo de entrada
O <input type="file">
define um campo de seleção de arquivo e um botão "Procurar" para uploads de arquivos.
Exemplo
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Tipo de entrada oculto
O <input type="hidden">
define um campo de entrada oculto (não visível para um usuário).
Um campo oculto permite que os desenvolvedores da Web incluam dados que não podem ser vistos ou modificados pelos usuários quando um formulário é enviado.
Um campo oculto geralmente armazena o registro do banco de dados que precisa ser atualizado quando o formulário é enviado.
Observação: embora o valor não seja exibido para o usuário no conteúdo da página, ele fica visível (e pode ser editado) usando as ferramentas de desenvolvedor de qualquer navegador ou a funcionalidade "Exibir código-fonte". Não use entradas ocultas como forma de segurança!
Exemplo
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input
type="hidden" id="custId" name="custId" value="3487">
<input
type="submit" value="Submit">
</form>
Tipo de entrada Mês
O <input type="month">permite que o usuário selecione um mês e ano.
Dependendo do suporte do navegador, um seletor de data pode aparecer no campo de entrada.
Exemplo
<form>
<label for="bdaymonth">Birthday (month and
year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Número do tipo de entrada
O <input type="number">define um campo de entrada
numérico .
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions:
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Example
<form>
<label for="quantity">Quantity:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default
range is 0 to 100. However, you can set restrictions on what
numbers are accepted with the min, max, and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular text field).
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
HTML Exercises
HTML Input Type Attribute
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |