Criando formulários HTML

Bem-vindo à próxima lição! Nesta lição, você aprenderá a criar formulários usando HTML. Os formulários são essenciais para coletar dados de entrada do usuário, que você poderá processar posteriormente com PHP. Vamos começar!

O que são formulários HTML?

Os formulários HTML são usados para coletar dados de entrada do usuário. Eles permitem que os usuários preencham campos, façam seleções e enviem dados a um servidor para processamento.

Exemplo: Um formulário de login no qual os usuários inserem seu nome de usuário e senha.

Ponto principal: Os formulários funcionam como uma ponte entre o usuário e seus scripts PHP.

Criando um formulário simples

Veja como criar um formulário HTML básico:

Explicação:

• action: Especifica o arquivo PHP que processará os dados do formulário.
• method: Especifica como enviar os dados (GET ou POST).
• required: Garante que o campo seja preenchido antes do envio.

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

Elementos de formulário

Os formulários podem incluir vários tipos de entrada para coletar diferentes tipos de dados:

• text: Para entrada de texto em uma única linha.
• email: Para endereços de e-mail.
• password: Para entrada de senha.
• checkbox: Para seleções de múltiplas opções.
• radio: Para seleções de uma única opção.
• submit: Para enviar o formulário.

Exemplo:

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

Usando botões de opção

Os botões de opção permitem que os usuários selecionem uma opção de um grupo. Exemplo:

Dica: Use o mesmo atributo name para todos os botões de opção de um grupo.

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

Usando caixas de seleção

As caixas de seleção permitem que os usuários selecionem várias opções. Exemplo:

Dica: Use uma sintaxe de matriz (hobbies[]) para coletar vários valores.

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

Menus suspensos de seleção

Os menus suspensos permitem que os usuários escolham uma opção de uma lista. Exemplo:

Dica: Use selected para definir uma opção padrão.

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

Acessibilidade dos formulários

Garanta que seus formulários sejam acessíveis a todos os usuários:

• Use elementos label vinculados às entradas com atributos for.
• Agrupe entradas relacionadas usando fieldset e legend.
• Teste os formulários quanto à usabilidade em dispositivos móveis.

Dica: Formulários acessíveis melhoram a experiência do usuário para todos!

Muito bem!

Parabéns! Você aprendeu a criar formulários HTML com vários tipos de entrada, incluindo campos de texto, botões de opção, caixas de seleção e menus suspensos. Os formulários são a base da entrada de dados do usuário no desenvolvimento web. Na próxima lição, aprenderemos a processar dados de formulários usando PHP. Continue programando!