Base de Criação de Formulários

O elemento HTML <form> é um componente fundamental para criar 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 possuem o seguinte atributo onsubmit="return false". Este atributo nos exemplos impede que o formulário envie uma solicitação por padrão. Ele é utilizado aqui para fins demonstrativos, para concentrar na criação de formulários e atributos, porém este curso possui outros focos.

Explicação dos atributos do formulário:

• name fornece um identificador único para o formulário em uma página web. Tanto o servidor quanto o cliente usam 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 configurado 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 você deseja lidar com a validação manualmente usando JavaScript;
• method especifica o método HTTP usado para enviar os dados do formulário para o servidor. Os dois métodos mais comuns são GET e POST. Este tópico será coberto em profundidade no curso de JavaScript.

O formulário inclui os seguintes elementos:

• O elemento <input> permite que os usuários insiram diferentes tipos de dados, como texto, números, datas, etc. Neste exemplo, usamos o type="email" para o campo email e type="password" para o campo password;
• O elemento <label> ajuda a organizar e estruturar o formulário. Ele também fornece um rótulo para cada campo de entrada, indicando para que o campo é responsável;
• O elemento <button> com type="submit" é usado para enviar os dados do formulário para o servidor quando clicado. Por padrão, quando o botão de envio é pressionado, os dados dos campos de entrada são enviados para o servidor e a página web recarrega. No entanto, esse comportamento pode ser substituído usando JavaScript.

Nota

Quando um usuário pressiona <button type="submit">, todos os dados nos campos de entrada são enviados para o servidor e a página web é recarregada. Esse é o comportamento padrão.