HTML - Formulários

Elementos de Formulário

<form action="/submit-form" method="POST">
  <!-- Controles do formulário vão aqui -->
</form>

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

  <label for="message">Mensagem:</label>
  <textarea id="message" name="message"></textarea><br>

  <label for="country">País:</label>
  <select id="country" name="country">
    <option value="usa">EUA</option>
    <option value="canada">Canadá</option>
    <option value="uk">Reino Unido</option>
  </select><br>

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

Tipos de Entrada de Formulário

O HTML oferece vários tipos de entrada que determinam o comportamento e a aparência dos controles de formulário. Cada tipo de entrada serve a um propósito específico e fornece uma interface de usuário diferente. Aqui estão alguns tipos de entrada de formulário comumente usados:

1. Entrada de Texto (type="text"): A entrada de texto é o controle de formulário mais básico. Ela permite que os usuários insiram uma única linha de texto. É criada usando o elemento <input> com o atributo type definido como "text".

2. Entrada de Senha (type="password"): A entrada de senha é semelhante à entrada de texto, mas ela oculta os caracteres inseridos pelo usuário, substituindo-os por pontos ou asteriscos. Isso é útil para informações sensíveis como senhas. É criada usando o elemento <input> com o atributo type definido como "password".

3. Botões de Opção (type="radio"): Os botões de opção permitem que os usuários selecionem uma única opção de um grupo de opções mutuamente exclusivas. São criados usando o elemento <input> com o atributo type definido como "radio". Vários botões de opção com o mesmo atributo name formam um grupo de opções.

4. Caixas de Seleção (type="checkbox"): As caixas de seleção permitem que os usuários selecionem várias opções de um grupo de opções. São criadas usando o elemento <input> com o atributo type definido como "checkbox". Cada caixa de seleção opera independentemente das outras.

5. Upload de Arquivo (type="file"): A entrada de upload de arquivo permite que os usuários selecionem e enviem arquivos de sua máquina local. É criada usando o elemento <input> com o atributo type definido como "file".

6. Campos Ocultos (type="hidden"): Os campos ocultos não são visíveis para os usuários, mas armazenam dados que precisam ser enviados com o formulário. São criados usando o elemento <input> com o atributo type definido como "hidden". Campos ocultos são frequentemente usados para passar informações adicionais ou metadados para o servidor.

7. Botões de Envio e Redefinição (type="submit" e type="reset"): Os botões de envio e redefinição são usados para controlar o envio do formulário. O botão de envio envia os dados do formulário para o servidor para processamento, enquanto o botão de redefinição limpa todos os campos do formulário e os redefine para seus valores padrão. São criados usando o elemento <input> com o atributo type definido como "submit" ou "reset", respectivamente.

Estes são apenas alguns exemplos dos tipos de entrada disponíveis em formulários HTML. Cada tipo de entrada fornece uma maneira específica para os usuários interagirem com o formulário e inserirem dados.

Atributos de Formulário

Os elementos de formulário HTML têm atributos que permitem controlar seu comportamento e fornecer funcionalidades. Esses atributos ajudam a identificar campos de formulário, definir valores padrão, fornecer dicas aos usuários e impor validação. Vamos ver alguns atributos de formulário comumente usados:

1. O atributo name:

   O atributo name dá um identificador único a um controle de formulário. É importante para o processamento dos dados do formulário no lado do servidor. Quando um formulário é enviado, os dados são enviados como pares de chave-valor, onde o atributo name serve como chave. Também é usado para referenciar controles de formulário usando JavaScript.

2. O atributo value:

   O atributo value especifica o valor inicial ou padrão de um controle de formulário. Para entradas de texto e áreas de texto, define o texto padrão que aparece no campo. Para botões de rádio e caixas de seleção, define o valor enviado ao servidor quando o controle é selecionado. Para botões de envio, define o texto que aparece no botão.

3. O atributo placeholder:

   O atributo placeholder fornece um texto de dica ou exemplo exibido dentro de um controle de formulário quando está vazio. Ajuda os usuários a entender que tipo de entrada é esperada no campo. O texto do placeholder desaparece quando o usuário começa a digitar ou o campo recebe foco.

4. O atributo required:

   O atributo required é um atributo booleano que especifica se um controle de formulário deve ser preenchido antes que o formulário possa ser enviado. Se um campo obrigatório for deixado vazio, o formulário não será enviado e o usuário será solicitado a preencher as informações ausentes. Esse atributo ajuda na validação do formulário no lado do cliente.

5. Os atributos disabled e readonly:

   O atributo disabled é usado para desativar um controle de formulário, tornando-o não editável e não clicável. Controles de formulário desativados não são enviados com os dados do formulário. O atributo readonly, por outro lado, torna um controle de formulário somente leitura, impedindo que os usuários modifiquem seu valor, mas ainda permitindo que seja enviado com o formulário.

Esses atributos fornecem controle e funcionalidade adicionais aos elementos de formulário HTML, permitindo criar formulários mais interativos e amigáveis. Ao usar esses atributos, você pode orientar os usuários, definir valores padrão, realizar validação básica de formulário e controlar o comportamento dos controles de formulário.

Validação de Formulário

A validação de formulário ajuda na integridade dos dados e na experiência do usuário. O HTML oferece atributos e mecanismos para validação de formulário no lado do cliente antes de enviar o formulário ao servidor.

A validação de formulário no lado do cliente usa atributos HTML e JavaScript. Isso permite feedback imediato ao usuário sobre sua entrada e ajuda a evitar que dados inválidos sejam enviados ao servidor.

O atributo pattern é comumente usado para validação de formulário. Ele permite especificar um padrão de expressão regular que o valor de entrada deve corresponder. Se o valor de entrada não corresponder ao padrão, o formulário não será enviado.

<input type="email" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" required>

O atributo pattern no exemplo valida um campo de entrada de e-mail. O padrão de expressão regular especifica que a entrada deve conter caracteres, dígitos e símbolos específicos, seguidos por um símbolo "@", nome de domínio e um domínio de nível superior.

Para validar campos de entrada numérica, o HTML fornece os atributos min, max e step. Os atributos min e max definem os valores mínimo e máximo permitidos para a entrada, enquanto o atributo step especifica os intervalos numéricos permitidos.

<input type="number" name="quantity" min="1" max="10" step="1" required>

O atributo min define o valor mínimo permitido como 1, o atributo max define o valor máximo permitido como 10, e o atributo step especifica que o valor deve aumentar em 1.

Para campos de entrada de texto, o atributo maxlength limita o número máximo de caracteres que podem ser inseridos. Isso restringe a entrada a um comprimento específico.

<input type="text" name="username" maxlength="20" required>

O atributo maxlength limita a entrada a um máximo de 20 caracteres.

Em alguns casos, você pode querer desativar a validação de formulário. O atributo novalidate pode ser adicionado à tag <form> para indicar que o formulário não deve ser validado no envio.

<form action="/submit" method="post" novalidate>
  <!-- Controles do formulário -->
</form>

O atributo novalidate enviará o formulário sem validação no lado do cliente, e qualquer validação precisará ser feita no lado do servidor.

Embora a validação no lado do cliente melhore a experiência do usuário e reduza requisições desnecessárias ao servidor, não se deve confiar apenas nela. A validação no lado do servidor deve sempre ser implementada para garantir a integridade e segurança dos dados, já que a validação no lado do cliente pode ser contornada pelos usuários.

Estilização de Formulários

Você pode estilizar formulários HTML usando CSS para melhorar sua aparência e torná-los mais fáceis de usar. O CSS possui seletores e propriedades que permitem direcionar e estilizar elementos de formulário. Aqui estão algumas maneiras de estilizar formulários.

input[type="text"] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 5px #4CAF50;
}

input:valid {
  border-color: #4CAF50;
}

input:invalid {
  border-color: #ff0000;
}

input[type="text"],
textarea {
  background-color: #f1f1f1;
  border: none;
  border-radius: 4px;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

select {
  appearance: none;
  background-color: #f1f1f1;
  border: none;
  border-radius: 4px;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  background-image: url("arrow-down.png");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.error-message {
  color: #ff0000;
  font-size: 12px;
  margin-top: 5px;
}

Envio de Formulário

O envio de formulário é o processo de enviar dados do formulário do lado do cliente (navegador web) para o lado do servidor para processamento. Quando você preenche um formulário e clica no botão de enviar, os dados do formulário são coletados e enviados ao servidor usando um método e tipo de codificação específicos.

Quando um formulário é enviado, o navegador envia uma requisição HTTP ao servidor com os dados do formulário incluídos no corpo da requisição ou nos parâmetros da URL, com base no atributo method do formulário. O servidor recebe a requisição, processa os dados do formulário e geralmente responde com uma nova página ou envia dados de volta ao cliente.

Existem dois métodos comuns para enviar dados de formulário:

Quando os dados do formulário são enviados ao servidor, eles são codificados usando um formato específico. Os dois tipos de codificação comuns são:

1. application/x-www-form-urlencoded:

   • Este é o tipo de codificação padrão para envio de formulário.
   • Os dados do formulário são codificados como pares de chave-valor separados por "e" comercial (&).
   • Caracteres especiais são codificados em URL, substituindo-os por seu código ASCII precedido por um sinal de porcentagem (%).
   • Exemplo: nome=João&idade=25

2. multipart/form-data:

   • Este tipo de codificação é usado quando o formulário inclui uploads de arquivos.
   • Os dados do formulário são divididos em várias partes, cada uma representando um campo do formulário ou arquivo.
   • Cada parte tem seu próprio conjunto de cabeçalhos e limites para separá-la de outras partes.
   • Esta codificação permite a transmissão eficiente de dados binários, como arquivos, junto com outros campos do formulário.

No lado do servidor, os dados do formulário são recebidos e processados com base na tecnologia e framework do lado do servidor sendo utilizados. Linguagens e frameworks comuns do lado do servidor, como PHP, Node.js (Express.js), Ruby on Rails e Python (Django), fornecem maneiras de lidar e acessar dados de formulários enviados através dos métodos GET e POST.

<form action="/enviar" method="post" enctype="multipart/form-data">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required>

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

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

Lidar com o envio de formulários de forma segura é importante para prevenir ataques como cross-site scripting (XSS) e cross-site request forgery (CSRF). Validação do lado do servidor, sanitização de dados e o uso de tokens CSRF são práticas recomendadas para proteger contra essas vulnerabilidades.