Crie Formulários HTML Básicos

Introdução

Neste laboratório, aprenderemos como criar um formulário HTML básico usando a tag <form> e diferentes elementos de formulário.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Configurando o Documento HTML

Começaremos criando um documento HTML básico com a estrutura básica:

<!doctype html>
<html>
  <head>
    <title>Exemplo de Formulário HTML</title>
  </head>
  <body></body>
</html>

Criando um Formulário Básico

Agora criaremos um formulário HTML básico com um campo de entrada e um botão de envio. Adicione o seguinte código dentro da tag body:

<h1>Exemplo de Formulário HTML</h1>
<form>
  <label for="name">Nome:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <input type="submit" value="Enviar" />
</form>

No código acima, temos uma tag <h1> que serve como título para o nosso formulário. Em seguida, temos uma tag <form> e, dentro dela, temos uma tag <label> e uma tag <input>. O valor do atributo for da tag <label> deve corresponder ao atributo id na tag <input>. Também temos uma tag <br> para adicionar uma quebra de linha. Finalmente, temos uma tag <input> com um atributo type como "submit".

Adicionando Elementos de Formulário

Podemos adicionar vários elementos de formulário usando diferentes tipos de campos de entrada no formulário. Vamos adicionar um menu suspenso e caixas de seleção ao nosso formulário. Substitua o código da tag <form> pelo seguinte código:

<form>
  <label for="name">Nome:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <label for="gender">Gênero:</label>
  <select name="gender" id="gender">
    <option value="male">Masculino</option>
    <option value="female">Feminino</option>
    <option value="other">Outro</option>
  </select>
  <br /><br />
  <label for="hobby">Hobbies:</label>
  <br />
  <input type="checkbox" id="coding" name="hobby" value="coding" />
  <label for="coding">Codificação</label>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Leitura</label>
  <input type="checkbox" id="drawing" name="hobby" value="drawing" />
  <label for="drawing">Desenho</label>
  <br /><br />
  <input type="submit" value="Enviar" />
</form>

No código acima, adicionamos uma tag <select> para o campo de gênero com três opções usando a tag <option>. Também adicionamos três caixas de seleção com rótulos diferentes para hobbies.

Atributos do Formulário

Podemos adicionar atributos à tag <form> para personalizar o comportamento do formulário. Vamos adicionar os atributos action e method ao nosso formulário. Substitua o código da tag <form> pelo seguinte código:

<form action="submit-form.php" method="post"></form>

No código acima, adicionamos o atributo action com o valor "submit-form.php" e o atributo method com o valor "post". Isso informa ao navegador para enviar os dados do formulário para o arquivo "submit-form.php" usando o método HTTP POST.

Validação de Formulário

Podemos usar o atributo required para tornar certos campos obrigatórios. Adicione o atributo required ao campo de nome na tag <input>.

<input type="text" name="name" id="name" required />

Acessibilidade do Formulário

Podemos também adicionar recursos de acessibilidade ao nosso formulário usando as tags <fieldset> e <legend>. Envolva o campo de gênero com o seguinte código:

<fieldset>
  <legend>Gender:</legend>
  ...
</fieldset>

Isso agrupa o campo de gênero e adiciona uma legenda para o grupo.

Adicionando Labels

Finalmente, também podemos adicionar rótulos (labels) às nossas caixas de seleção usando a tag <label>. Envolva a caixa de seleção e o rótulo para cada hobby com o seguinte código:

<label for="coding">Coding</label>
<input type="checkbox" id="coding" name="hobby" value="coding" />

Isso associa cada rótulo com a respectiva caixa de seleção.

Resumo

Neste laboratório, aprendemos como criar um formulário HTML básico usando a tag <form> e diferentes elementos de formulário, como campos de entrada (input fields), menus suspensos (dropdown menus) e caixas de seleção (checkboxes). Também aprendemos como adicionar atributos de formulário como method, action e required, e como adicionar recursos de acessibilidade usando as tags <fieldset> e <legend>.

Formulário de Entrada HTML