Como vai criar um formulário HTML?

Para criar um formulário HTML, utilizarei o elemento <form>. Dentro dele, estarão elementos de controlo, como campos de texto (<input type="text">), campos de password (<input type="password">), caixas de seleção (<input type="checkbox">), botões de rádio (<input type="radio">), listas suspensas (<select> e <option>), áreas de texto (<textarea>) e botões de envio (<button type="submit"> ou <input type="submit">).

Cada elemento do formulário terá um atributo name para o identificar no lado do servidor e, geralmente, um atributo id para o associar a uma etiqueta (<label>).

Atributos de <form>:

• action: URL para onde os dados do formulário serão enviados ao submetê-lo.
• method: Método HTTP para enviar os dados (GET ou POST).
• enctype: Tipo de codificação dos dados ao enviar (por exemplo, multipart/form-data para upload de ficheiros).

Exemplo de um formulário simples:

<form action="/submit-form" method="post">
  <label for="username">Nome de utilizador:</label><br>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">Palavra-passe:</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Lembrar-me</label><br><br>

  <label for="country">País:</label><br>
  <select id="country" name="country">
    <option value="ru">Rússia</option>
    <option value="us">EUA</option>
  </select><br><br>

  <label for="message">Mensagem:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

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

A validação do formulário pode ser implementada tanto no lado do cliente (usando atributos de validação HTML5, JavaScript) como no lado do servidor.

Atributos de validação HTML5:

• required: Campo obrigatório.
• minlength, maxlength: Comprimento mínimo e máximo do campo de texto.
• min, max: Valor mínimo e máximo para campos numéricos.
• type com diferentes valores (email, url, number, date, etc.) para validação automática pelo navegador.
• pattern: Expressão regular para validar a entrada.

Exemplo usando validação HTML5:

<form action="/submit-form" method="post">
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">Idade (de 18 a 99):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Código postal (5 dígitos):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

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

Para estilizar o formulário, será usado CSS. Para lógica mais avançada ou envio assíncrono de dados, será utilizado JavaScript. Para melhorar a acessibilidade do formulário, atributos ARIA apropriados e uma estrutura HTML correta serão utilizados.