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.htmle 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.
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>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".
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.
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.
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 />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.
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.
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>.
