Deblogger

Inputs em HTML

Primeiramente é interessante entender o que são os inputs para o HTML. De acordo com o Mozilla:

O elemento <input> em HTML é usado para criar controles interativos para formulários baseados na Web, a fim de aceitar dados do usuário; uma grande variedade de tipos de dados de entrada e widgets de controle estão disponíveis, dependendo do dispositivo e do agente do usuário. O elemento <input> é um dos mais poderosos e complexos em todo o HTML, devido ao grande número de combinações de tipos e atributos de entrada.

Sendo assim, não tente memorizar tudo o que estiver nesse artigo. Programação é aprendida na prática, por isso, tenha uma documentação para consultar no momento de desenvolvimento. Portanto, vamos aos tipos de inputs em HTML:


Campo de texto

Muitos inputs em HTML possuem a aparência desse campo, entretanto, eles terão finalidades diferentes, e tipos diferente de dados serão tratados por eles. Em síntese: o <input> do tipo text define um campo de texto de linha única.

<form>
    <label for="nome">Nome:</label><br>
    <input type="text" id="nome" name="nome"><br>
    <label for="sobrenome">Sobrenome:</label><br>
    <input type="text" id="sobrenome" name="sobrenome">
</form>

Dessa forma, temos o seguinte resultado visual:





Campo de senha

<input> do tipo password é usado para os campos campos que devem corresponder a uma senha, por exemplo:

<form>
    <label for="nome-usuario">Nome de Usuário:</label><br>
    <input type="text" id="nome-usuario" name="nome-usuario"><br>
    <label for="senha">Senha:</label><br>
    <input type="password" id="senha" name="senha">
</form>

Dessa forma, temos o seguinte resultado visual:




Observe que os caracteres no campo de senha são mascarados, ou seja, são mostrados asteriscos ou círculos preenchidos ao invés do texto


Botões

Existem diversos tipos de inputs em HTML que possuem a aparência de um botão. Entretanto, cada tipo possui um uso diferente: você não deve utilizar um mesmo tipo para todas ocasiões.

O <input> do tipo button é usado para criar um botão, normalmente para realizar alguma ação dentro da sua página. Por isso, no exemplo abaixo usamos um pouco de JavaScript dentro da propriedade onclick (não se preocupe em saber sobre isso agora, primeiro foque no HTML).

<input type="button" onclick="alert('Olá mundo!')" value="Clique aqui">

Dessa forma, temos o seguinte resultado visual:

Já o<input> do tipo submit define um botão para submeter o envio de um formulário (<form>) para um manipulador (form-handler). O manipulador de formulários geralmente é uma página de servidor com um script para processar dados de entrada. Coloquei a propriedade onsubmit com um pouco de JavaScript no <form> para bloquear a atualização da página. Por isso, nada acontecerá se você clicar no botão. Se você testar o envio do <form> sem essa propriedade, provavelmente o seu navegador será recarregado.

<form onsubmit="return false">
    <label for="nome">Nome:</label><br>
    <input type="text" id="nome" name="nome"><br>
    <label for="sobrenome">Sobrenome:</label><br>
    <input type="text" id="sobrenome" name="sobrenome"><br>
    <input type="submit" value="Enviar">
</form>

Dessa forma, temos o seguinte resultado visual:





Por último, tempos o <input> do tipo reset, que define um botão usado para reiniciar os campos de um formulário para os valores padrão, por exemplo:

<form>
    <label for="nome">Nome:</label><br>
    <input type="text" id="nome" name="nome" value="Mauro"><br>
    <label for="sobrenome">Sobrenome:</label><br>
    <input type="text" id="sobrenome" name="sobrenome" value="Oliveira"><br><br>
    <input type="reset">
</form>

Dessa forma, temos o seguinte resultado visual:






Aqui não colocamos nenhum código além do HTML. Mude os valores dos inputs e depois clique no botão “Resetar”: o formulário será reiniciado com os valores padrão. Teste a execução desse trecho em um arquivo e veja que apenas HTML é necessário para redefinir o formulário! Note também que os valores padrão dos campos ficam dentro do atributo value de cada <input>. Dessa forma, ao clicar no botão, são esses valores que serão usados para preencher o formulário novamente.


Botões de opção

O <input> do tipo radio define um botão de opção (do inglês radio button). Os botões de opção com o mesmo id permitem que o usuário selecione apenas uma dentre as opções disponíveis, por exemplo:

<form>
    <input type="radio" id="masculino" name="genero" value="masculino">
    <label for="masculino">Masculino</label><br>
    <input type="radio" id="feminino" name="genero" value="feminino">
    <label for="feminino">Feminino</label><br>
    <input type="radio" id="outro" name="genero" value="outro">
    <label for="outro">Outro</label>
</form>

Dessa forma, temos o seguinte resultado visual:




Caixa de seleção

O <input> do tipo checkbox define uma caixa de seleção. As caixas de seleção permitem que o usuário selecione uma ou mais opções dentre as disponíveis, por exemplo:

<form>
    <p>Qual linguagem web você quer aprender?</p>
    <input type="checkbox" id="linguagem1" name="linguagem1" value="HTML">
    <label for="linguagem1">HTML</label><br>
    <input type="checkbox" id="linguagem2" name="linguagem2" value="CSS">
    <label for="linguagem2">CSS</label><br>
    <input type="checkbox" id="linguagem3" name="linguagem3" value="JavaScript">
    <label for="linguagem3">JavaScript</label>
</form>

Dessa forma, temos o seguinte resultado visual:

Qual linguagem web você quer aprender?




Campo de seleção de cor

O <input> do tipo color é usado para campos que devem corresponder a uma cor. Por isso, dependendo do suporte do seu navegador, um color picker pode ser mostrado.

<form>
    <label for="cor-favorita">Selecione sua cor favorita:</label><br>
    <input type="color" id="cor-favorita" name="cor-favorita">
</form>

Dessa forma, temos o seguinte resultado visual:



Campos de data e hora

O <input> do tipo date é usado para campos que devem corresponder a uma data. Por isso, dependendo do suporte do seu navegador, um date picker pode ser mostrado.

<form>
    <label for="data-nascimento">Data de Nascimento:</label><br>
    <input type="date" id="data-nascimento" name="data-nascimento">
</form>

Dessa forma, temos o seguinte resultado visual:


Você também pode adicionar os atributos min e max para restringir as datas, por exemplo:

<form>
    <label for="data-2020">Insira uma data do ano de 2020:</label><br>
    <input type="date" id="data-2020" name="data-2020" min="2020-01-01" max="2020-12-31">
</form>

Dessa forma, temos o seguinte resultado visual:


O <input> do tipo time permite que o usuário selecione um horário (sem um fuso horário específico). Por isso, dependendo do suporte do seu navegador um time picker pode ser mostrado.

<form>
    <label for="horario-alarme">Selecione o horário para o alarme:</label><br>
    <input type="time" id="horario-alarme" name="horario-alarme">
</form>

Dessa forma, temos o seguinte resultado visual:


O <input> do tipo datetime-local define um campo de seleção data e hora, sem um fuso de horário. Por isso, dependendo do suporte do seu navegador, um date-time picker pode ser mostrado.

<form>
    <label for="horario-consulta">Selecione o horário da sua consulta (data e hora):</label><br>
    <input type="datetime-local" id="horario-consulta" name="horario-consulta">
</form>

Dessa forma, temos o seguinte resultado visual:


O <input> do tipo month permite ao usuário selecionar um mês e um ano, apenas. Por isso, dependendo do suporte do seu navegador, um date picker pode ser mostrado.

<form>
    <label for="validade-cartao">Data de validade do cartão (mês e ano):</label><br>
    <input type="month" id="validade-cartao" name="validade-cartao">
</form>

Dessa forma, temos o seguinte resultado visual:


O <input> do tipo week permite que o usuário selecione uma semana e o ano. Por isso, dependendo do suporte do seu navegador um date picker pode ser mostrado.

<form>
    <label for="semana">Selecione uma semana:</label><br>
    <input type="week" id="semana" name="semana">
</form>

Dessa forma, temos o seguinte resultado visual:



Campo de e-mail

O <input> tipo email é usado para campos que devem corresponder a um endereço de e-mail. Por isso, dependendo do suporte do seu navegador, o endereço de e-mail pode ser validado automaticamente quando você submeter o formulário. Nesse sentido, alguns smartphones reconhecem este tipo de <input> e adicionam o “.com” ao teclado para facilitar a escrita do usuário.

<form>
    <label for="email">Digite o seu email:</label><br>
    <input type="email" id="email" name="email">
</form>

Dessa forma, temos o seguinte resultado visual:



Campo de upload de arquivo

O <input> do tipo file é usado para campos que devem submeter arquivos. Sendo assim, ele habilita um botão de “Escolher arquivo” (ou “Browse”, se o seu navegador estiver em inglês) para você selecionar um arquivo que está no seu computador, e fazer o upload.

<form>
    <label for="arquivo">Escolha um arquivo do seu computador:</label><br>
    <input type="file" id="arquivo" name="arquivo">
</form>

Dessa forma, temos o seguinte resultado visual:



Campo de número

Assim como nos campos de botão, existem algumas variedades de inputs em HTML que podem ser usadas para o usuário selecionar um número em um formulário.

O <input> tipo number é usado para campos que devem corresponder a um número. Assim como nos campos de data que vimos acima, você pode definir atributos para limitar as escolhas mínima e máxima dos usuários:

<form>
    <label for="quantidade">Escolha um número de 1 a 10:</label><br>
    <input type="number" id="quantidade" name="quantidade" min="1" max="10">
</form>

Dessa forma, temos o seguinte resultado visual:


Nesse sentido, outra opção para seleção de número é o <input> do tipo range, que define um controle para escolher um número onde o valor exato não é importante, ou só é possível a seleção de um intervalo muito específico de números (slider control). O intervalo padrão é de 0 a 100, entretanto, você pode mudar quais números são aceitos usando os atributos min, max e step.

Os atributos min e max são de fácil entendimento (eles definem o valor mínimo e o valor máximo do campo), mas para que serve o atributo step? Esse atributo define um intervalo do slider (por exemplo, entre o número mínimo e máximo, você terá apenas opções múltiplas de 10). Veja o exemplo:

<form>
    <label for="volume">Volume (entre 0 e 50 você terá 6 opções):</label><br>
    <input type="range" id="volume" name="volume" min="0" max="50" step="10">
</form>

Dessa forma, temos o seguinte resultado visual:


Observe que o valor mínimo definido é 0 e o valor máximo é 50. Sendo assim, o valor deste campo só pode ser: 0, 10, 20, 30, 40 ou 50. Isso porque eu defini o intervalo com o valor 10. Se eu definir o intervalo com o valor 25, por exemplo, eu terei apenas 3 opções: 0, 25 e 50.


Campo de busca

O <input> do tipo search é usado para campos de busca (um campo de busca se comporta da mesma forma que um campo de texto, embora seja usado em ocasiões diferentes). Esse campo é comumente utilizado quando você irá usar o valor do campo para fazer uma busca em uma tabela ou em alguma página, por exemplo:

<form>
    <label for="procurar-no-site">Procurar no site:</label><br>
    <input type="search" id="procurar-no-site" name="procurar-no-site">
</form>

Dessa forma, temos o seguinte resultado visual:



Campo de telefone

<input> tipo tel é usado para campos que devem corresponder a um número de telefone, por exemplo:

<form onsubmit="return false">
    <label for="celular">Digite seu número de celular:</label><br>
    <input type="tel" id="celular" name="celular" pattern="[0-9]{2} [0-9]{5}-[0-9]{4}"><br>
    <small>Formato: 11 99999-9999</small><br>
    <input type="submit" value="Enviar">
</form>

Dessa forma, temos o seguinte resultado visual:



Formato: 11 99999-9999

Antes que me perguntem, coloquei dentro do atributo pattern uma expressão regular (ou RegExp). Futuramente vou escrever um artigo aqui no blog de como usar RegExp, mas você pode achar diversos artigos pela internet que já explicam a utilização deste padrão.

Seja como for, observe que se você clicar em enviar e o que você digitou no <input> não corresponder ao padrão especificado, aparecerá uma mensagem de que o campo não está como exigido.


Campo de link (URL)

O <input> do tipo url é usado para campos que devem corresponder a uma URL. Por isso, dependendo do suporte do seu navegador, o endereço da URL pode ser validade automaticamente quando você submeter o formulário. Assim como nos campos de e-mail, alguns smartphones reconhecem este tipo de campo e adicionam o “.com” ao teclado para facilitar a escrita do usuário.

<form>
    <label for="site-pessoal">Adicione o seu site:</label><br>
    <input type="url" id="site-pessoal" name="site-pessoal">
</form>

Dessa forma, temos o seguinte resultado visual:



Conclusão

Por fim, agora que você teve uma visão geral dos tipos de inputs disponíveis no HTML, tente criar um formulário simples, sem processamento nenhum dos dados. Nesse sentido, foque na utilização de cada um dos inputs nos seus tipos de campos correspondentes, e como eu disse no início do artigo: não tente memorizar todos os tipos de uma vez. Afinal de contas você é humano, não um banco de dados.

Sendo assim, você pode salvar esse artigo, ou copiar para um arquivo no seu computador, para usa-lo na hora de desenvolver. Dessa forma, você vai conseguir consultar o que usar em cada ocasião.



Avalie:
5 (1)

Publicado por Mauro Oliveira

Desenvolvedor apaixonado por JavaScript, especialista em VueJS. Atualmente focado em padrões de projeto e código, estudando sobre testes unitários, Clean Code e segurança em aplicações Web, Mobile e Desktop.

Participe da discussão

1 comentário

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *