Home / Cupons / Publicacoes

Formulários em HTML

Formulários são #elementos essenciais em páginas da web, permitindo aos usuários enviar informações e interagir com o site. Neste tutorial, vamos explorar os principais tipos de campos para #formularios em #HTML e fornecer exemplos práticos de uso. Abordaremos o input type="text", select, input type="number", input type="file", e input type="color". Normalmente utilizado em tags #form. Podem receber #atributos como class, id, name, data-atributes entre outros.

 

 

O campo input type="text" é usado para receber entrada de texto do usuário. É ideal para nomes, endereços, mensagens e outros dados alfanuméricos.

<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" placeholder="Digite seu nome">

O elemento select cria uma lista suspensa onde os usuários podem selecionar uma opção entre várias. É útil para campos de seleção única.

<label for="pais">País:</label>
<select id="pais" name="pais">
  <option value="brasil">Brasil</option>
  <option value="eua">Estados Unidos</option>
  <option value="japao">Japão</option>
</select>

O campo input type="number" permite que os usuários insiram um valor numérico. Ele oferece controles adicionais, como botões de aumento e diminuição.

<label for="idade">Idade:</label>
<input type="number" id="idade" name="idade" min="18" max="99">

O campo input type="file" permite que os usuários escolham um arquivo para ser enviado para o servidor.

<label for="arquivo">Selecione um arquivo:</label>
<input type="file" id="arquivo" name="arquivo">

O campo input type="color" permite que os usuários escolham uma cor através de uma paleta de cores.

<label for="cor">Cor preferida:</label>
<input type="color" id="cor" name="cor">

Barra de Intervalo (input type="range"): A barra de intervalo permite que os usuários selecionem um valor em um intervalo específico. Exemplo de uso:

<input type="range" name="idade" min="0" max="100">

Campo de Senha (input type="password"): O campo de senha é usado para coletar senhas e ocultar os caracteres digitados. Exemplo de uso:

<input type="password" name="senha" required>

Neste pequeno artigo vimos como podemos capturar informações de campos de entrada de dados para trabalharmos com eles para outros fins.