O elemento <form> do HTML é um bloco fundamental para a criação de formulários interativos em uma página web. Ele serve como um contêiner para todos os elementos do formulário. Vamos explorar um exemplo de um formulário básico:

Nota

Todos os exemplos incluem o atributo onsubmit="return false" para evitar o comportamento padrão de envio do formulário. Dessa forma, o foco permanece na compreensão da criação de formulários e de seus atributos.

Explicação dos atributos do form:

• name fornece um identificador distinto para o formulário em uma página web. Tanto o servidor quanto o cliente utilizam esse identificador para processar os dados do formulário. O nome do formulário pode incluir números, sublinhados, traços e caracteres do alfabeto inglês, mas não deve conter espaços;
• autocomplete determina se os navegadores podem preencher automaticamente os campos do formulário. Pode ser definido como "on" ou "off" e aplicado a elementos individuais do formulário;
• novalidate especifica que os navegadores não devem realizar a validação dos campos do formulário. Isso pode ser útil quando a validação será feita manualmente utilizando JavaScript;
• method especifica o método HTTP utilizado para enviar os dados do formulário ao servidor. Os dois métodos mais comuns são GET e POST. Este tema será abordado em detalhes no curso de JavaScript.

Visão geral dos elementos filhos dentro de um formulário

Dentro do elemento form, encontram-se diversos elementos filhos essenciais para a funcionalidade do formulário. O elemento input permite que os usuários insiram diferentes tipos de dados, como texto, números e datas. Neste exemplo, o type="email" é utilizado para o campo de e-mail e o type="password" para o campo de senha. O elemento label organiza e estrutura o formulário, fornecendo texto descritivo para os campos de entrada e ajudando os usuários a compreenderem suas finalidades. O elemento button com type="submit" é utilizado para enviar os dados do formulário ao servidor quando clicado. Por padrão, ao enviar o formulário, a página é recarregada, mas esse comportamento pode ser personalizado utilizando JavaScript.