Formulários e entrada de dados

Introdução aos Formulários em HTML

Os formulários são uma parte essencial de muitos sites, permitindo que os usuários interajam e enviem informações. Em HTML, os formulários são criados usando a tag <form>. Dentro desta tag, você pode incluir vários elementos de entrada, como campos de texto, botões de rádio, caixas de seleção, entre outros, para capturar diferentes tipos de dados do usuário.

Estrutura Básica de um Formulário

Um formulário HTML começa com a tag <form> e geralmente inclui atributos como action e method. O atributo action define para onde os dados do formulário devem ser enviados, enquanto o method especifica o método HTTP a ser usado (geralmente GET ou POST).

<form action="/submit" method="post">
  <!-- Elementos de entrada aqui -->
</form>

Elementos de Entrada Comuns

Os elementos de entrada são os componentes principais de um formulário. Aqui estão alguns dos mais comuns:

Campo de Texto

Usado para capturar texto de uma única linha. Criado com a tag <input> com o atributo type="text".

<input type="text" name="username" placeholder="Digite seu nome">

Área de Texto

Para entradas de texto de várias linhas, usamos a tag <textarea>.

<textarea name="message" rows="5" cols="30"></textarea>

Botões de Rádio

Permitem que o usuário selecione apenas uma opção de um conjunto. Todos os botões de rádio em um grupo devem ter o mesmo nome.

<input type="radio" name="gender" value="male"> Masculino
<input type="radio" name="gender" value="female"> Feminino

Caixas de Seleção

Permitem que o usuário selecione uma ou mais opções.

<input type="checkbox" name="subscribe" value="newsletter"> Assinar Newsletter

Menus de Seleção

Oferecem uma lista suspensa de opções. Criados com a tag <select> e várias tags <option> dentro.

<select name="country">
  <option value="br">Brasil</option>
  <option value="us">Estados Unidos</option>
</select>

Validação de Formulário

A validação de formulários é crucial para garantir que os dados enviados sejam corretos e completos. HTML5 introduziu novos atributos para facilitar a validação:

• required: Torna um campo obrigatório.
• minlength e maxlength: Definem o número mínimo e máximo de caracteres para um campo de texto.
• pattern: Usa expressões regulares para validar a entrada.

<input type="text" name="username" required minlength="5" pattern="[A-Za-z]+">

Envio de Formulário

O envio de um formulário geralmente é feito através de um botão de envio, criado com a tag <input> ou <button> com o atributo type="submit".

<button type="submit">Enviar</button>

Estilizando Formulários com CSS

CSS pode ser usado para melhorar a aparência dos formulários. Você pode estilizar elementos individuais ou aplicar estilos globais para todo o formulário.

form {
  max-width: 500px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
}
input[type="text"], textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

Interatividade com JavaScript

JavaScript pode ser usado para adicionar interatividade e validação dinâmica aos formulários. Por exemplo, você pode verificar se todos os campos obrigatórios estão preenchidos antes de permitir o envio do formulário.

document.querySelector('form').addEventListener('submit', function(event) {
  if (!this.checkValidity()) {
    event.preventDefault();
    alert('Por favor, preencha todos os campos obrigatórios.');
  }
});

Práticas Recomendadas

• Use rótulos (<label>) para todos os elementos de entrada para melhorar a acessibilidade.
• Certifique-se de que os formulários sejam responsivos e funcionem bem em dispositivos móveis.
• Teste a validação tanto no lado do cliente quanto no servidor para garantir a segurança dos dados.