22 Tipos de Input HTML Que Todo Desenvolvedor Deve Conhecer

Praticamente todos os sites e aplicativos que desenvolvemos usam algum tipo de input HTML em algum lugar, mas você conhece todos eles? Então, confira neste artigo 22 tipos de input HTML que você pode usar nos seus projetos.

O que é a Tag <input> e Como Usar?

O elemento HTML <input> é usado para criar controles interativos para formulários baseados na web para receber dados do usuário. A semântica de um <input> varia consideravelmente dependendo do valor de seu atributo type.

O elemento <input> não necessita da tag de fechamento, como acontece com outros elementos HTML. Entretanto, ele contém o atributo type, que se não for especificado, será considerado como text pelo navegador. É por meio desse atributo que fazemos a diferenciação sobre qual o tipo de informação a pessoa usuária fornecerá para a aplicação.

Leia também: Tags HTML: Conheça as Principais e Mais Usadas

Tipos de Input HTML Mais Comuns

Os tipos de inpt HTML mais comuns que usamos são:

hidden- uma entrada de formulário que está oculta, geralmente para armazenar valores que o usuário não precisa ver.

<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>

text- define um campo de entrada de texto de linha única.

<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>

password- Define um campo de senha através de um asterisco.

<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>

submit- define um botão para enviar dados do formulário.

<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>

button- Define um botão.

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

radio- são conjuntos de botões que permite que o usuário selecione APENAS UMA das opções exibidas.

<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>

checkbox- caixas de seleção permitem que um usuário selecione ZERO ou MAIS opções.

<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>

search- é usado para campos de pesquisa.

<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

reset- define um botão de redefinição que redefinirá todos os valores do formulário para seus valores padrão.

<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>

Tipos de Input HTML Com Validção

 Podemos dizer que a validação de um formulário web é um “ procedimento técnico onde é verificado se os dados inseridos pelo usuário são precisos ”.

Por exemplo, se você estiver preenchendo um formulário que exige um endereço de e-mail válido que está formatado incorretamente, um formulário adequado não enviará o formulário e fornecerá uma mensagem de erro quando você inserir um e-mail que não esteja no formato correto. Mas quando você coloca seu endereço de e-mail no formato correto, ele funciona e a mensagem de erro desaparece.

tel- é usado para inserir um número de telefone.

<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>

url- valida que a entrada é uma URL.

<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>

email- valida que a entrada é um email.

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

number- define um campo de entrada numérico .

Você também pode definir restrições sobre quais números são aceitos.

O exemplo a seguir exibe um campo de entrada numérica, onde você pode inserir um valor de 1 a 5:

<form>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

range- define um controle para inserir um número cujo valor exato não é importante (como um controle deslizante). O intervalo padrão é de 0 a 100. No entanto, você pode definir restrições sobre quais números são aceitos com os atributos min, maxe :step

<form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>

Tipos de Input HTML de Data

Esses input são bastante úteis, embora limitados à implementação da interface do usuário do navegador.

date- qualquer entrada de data.

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

month- permite selecionar um único mês.

<form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>

week- permite que o usuário selecione uma semana e ano.

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>

time- permite selecionar um horário específico.

<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>

datetime-local- permite selecionar a combinação de data/hora.

<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Outros Tipos de Input HTML

Além de tudo isso, também temos os seguintes tipos input HML adicionais:

file- Define um botão para carregar um arquivo para o servidor.

<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

image- o mais estranho de todos, para botões gráficos de envio.

O caminho para a imagem é especificado no atributo src.

<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

color- é usado para campos de entrada que devem conter uma cor.

<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

Conclusão

Pronto, terminamos nossa lista de todos os tipos de input HTML. Espero que você tenha aprendido algo novo. Mas lembre-se, como todos os outros recursos do HTML, o suporte acaba sendo limitado para alguns browsers. Por isso devemos ter cuidado ao usar esses input.

Se você quiser saber mais sobre desenvolvimento web, clique no link para conhcer o treinemento fullStack JavaScript, mais de 10.000 alunos estão aprendendo programação com este treinamento.

Um forte abraço e até o próximo post!

Links de referência: Weschool, javascript.plainenglish.io