Introdução

Se você já navegou por sites e precisou preencher seu nome, e-mail, ou selecionar uma data em um calendário, parabéns! Você já usou inputs de formulário no HTML. Esses elementos são essenciais para coletar informações dos visitantes e são a base para interações entre usuários e sites. Neste post, vamos explorar os diferentes tipos de inputs que você pode usar, como e para que servem. E o melhor: você não precisa se preocupar com o destino desses dados. Hoje, vamos apenas entender como tudo isso funciona!

Criando um HTML Básico

Antes de começarmos, é importante que você tenha um arquivo HTML básico configurado. Se você ainda não sabe como fazer isso, recomendo dar uma olhada no nosso post sobre Como criar um arquivo HTML básico. Agora, mãos à obra!

HTML Inicial

<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Vivendo de Programação - Meu primeiro contato com formulários</title>
	</head>
	<body>
		<!-- Colocaremos os campos do formulário (inputs) aqui -->
	</body>
</html>

O Que é um Formulário?

Um formulário é uma das ferramentas mais importantes em uma página web. Ele permite que os usuários insiram informações que podem ser enviadas e processadas. Imagine que você está se inscrevendo em um evento ou fazendo login em uma conta—tudo isso é feito através de formulários!

Estrutura Básica do Formulário

Vamos criar uma estrutura básica de formulário:

<form>
   <!-- Aqui dentro vamos adicionar nossos inputs -->
</form>

Importante: Neste post, não faremos o envio dos dados para lugar nenhum. Estamos apenas configurando um formulário para entender como funcionam os diferentes tipos de inputs.

Explorando os Diferentes Tipos de Inputs

Agora que temos nossa estrutura básica de formulário, vamos explorar alguns dos inputs mais comuns.

 

Recomento que cole os códigos dentro da tag body do arquivo criado para os testes para ver na tela como eles funcionam, quais tipos de caracteres você pode digitar e como é a interação com os diferentes tipos.

Sempre que colar o conteúdo, salve o arquivo e atualize a página no navegador.

Adicione um exemplo abaixo do outro. Separe-os com a tag  hr.

<!-- código exemplo -->
<hr>
<!-- outro código de exemplo -->

Assim ficará uma linha dividindo cada exemplo, para que posteriormente você utilize como consulta.

1. Texto (<input type="text">)

O campo de texto é o tipo mais comum de input. Ele permite que os usuários digitem texto livre, como nomes e endereços.

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

2. Número (<input type="number">)

Este input permite que os usuários insiram apenas números.

<form>
   <label for="idade">Idade:</label>
   <input type="number" id="idade" name="idade">
</form>

3. Data (<input type="date">)

Perfeito para selecionar datas através de um calendário.

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

4. Senha (<input type="password">)

Use este input para senhas, onde os caracteres digitados são escondidos.

<form>
   <label for="senha">Senha:</label>
   <input type="password" id="senha" name="senha">
</form>

Futuramente ensinaremos a fazer aquele botão que você pressiona para exibir temporáriamente a senha.

5. Seleção (<select>)

Este é um menu suspenso que permite ao usuário escolher uma opção de uma lista.

<form>
   <label for="cor">Escolha uma cor:</label>
   <select id="cor" name="cor">
       <option value="vermelho">Vermelho</option>
       <option value="azul">Azul</option>
       <option value="verde">Verde</option>
   </select>
</form>

6. Radio Button (<input type="radio">)

Use este input quando quiser que o usuário selecione apenas uma opção entre várias.

<form>
   <p>Escolha seu gênero:</p>
   <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>
</form>

7. Checkbox (<input type="checkbox">)

Os checkboxes permitem que o usuário selecione uma ou mais opções.

<form>
   <p>Escolha suas frutas favoritas:</p>
   <input type="checkbox" id="maçã" name="fruta" value="maçã">
   <label for="maçã">Maçã</label><br>
   <input type="checkbox" id="banana" name="fruta" value="banana">
   <label for="banana">Banana</label>
</form>

8. Botões: Reset e Submit

O botão Reset limpa todos os campos do formulário, enquanto o botão Submit é usado para enviar os dados. Como não estamos enviando dados neste tutorial, vamos apenas observar seus comportamentos:

<form>
	<label for="nome">Nome:</label>
	<input type="text" id="nome" name="nome">
	<input type="reset" value="Limpar">
	<input type="submit" value="Enviar">
</form>

Escreva algo no input e em seguida clique em Reset. Observe que o campo será limpo. Isso ocorre para todos os campos disponíveis dentro do formulário.

Ao pressionar o botão “Enviar”, observe que a URL mudou, esse é o evento padrão do formulário, como não temos nada especificado para onde esse formulário deve ir, ele mantem na própria página.

Não se preocupe, nas próximas aulas abordaremos mais o uso de formulários.

9. Botão (<button>).

Temos outra opção de botão disponível no HTML 5.

<button id='botao' class='btn' onclick="alert('Você pressionou o botão!')">Texto do botão</button>

Esse botão, diferente do input tipo submit, não faz envio do formulário. Ele é muito utilizado para interações via Javascript.

Clique no botão para ver a diferença de funcionamento.

Atributos Essenciais

Os inputs têm alguns atributos importantes que você verá em quase todos os tipos:

  • type: Define o tipo de input.
  • name: Atribui um nome ao campo, essencial para identificar os dados durante o envio do formulário
    class: Permite aplicar estilos CSS.
  • id: Um identificador único para o campo, usado para associá-lo a um <label> ou para manipulação via JavaScript.

Bordas nos Inputs

Como mencionamos anteriormente, você pode estilizar os inputs, incluindo adicionar bordas. Se quiser aprender mais sobre bordas e como aplicá-las, confira nosso post Tudo sobre bordas no CSS.

Adicione o código abaixo dentro da tag head abaixo do title no html.

<style>
	input{
		border: 3px solid blue
		border-radius:10px;
	}
</style>

Sei que esse não é o melhor exemplo de todos rs, mas já permite observar a aplicação de formatos em um formulário.

Guia de Boas Práticas na Criação de Formulários

Aqui vão algumas dicas para criar formulários eficientes e fáceis de usar:

  • Mantenha a Simplicidade: Evite adicionar campos desnecessários.
  • Use Labels Claras: Assegure-se de que o usuário saiba o que cada campo exige.
  • Validação de Dados: Sempre valide os dados no lado do cliente e do servidor (mesmo que não cubramos isso aqui).
  • Estilize com Consistência: Utilize classes e ids para garantir que o formulário tenha uma aparência uniforme.

Conclusão

Os inputs de formulário são a espinha dorsal de qualquer interação em uma página web. Hoje vimos alguns dos tipos mais comuns e como usá-los em um formulário básico. Entendemos a importância de cada tipo e como podemos usá-los para capturar diferentes tipos de dados. No futuro, exploraremos outros tipos de inputs e funcionalidades mais avançadas. Por enquanto, pratique o que aprendeu e experimente criar seus próprios formulários!