Tags HTML para Formulários e Dicas do VS Code.

Agora que você já viu [...]

as principais tags e;
tabelas em HTML;

[...] chegou a hora dos Formulários!

Vamos replicar o formulário abaixo?

No formulário, temos:

Duas entradas de texto ("Nome" e "Senha");
Uma seleção através de botões radiais ("Selecione a tarefa");
Uma seleção através de uma lista de dados ("Selecione o status da tarefa");

Vamos por partes, se não vamos complicar as coisas!

Usamos a tag <input> para o usuário digitar os dados;
Definimos qual é o tipo do dado usando o atributo type="";
Definimos um nome para esse campo usando o atributo name="";

Exemplo em que o usuário irá digitar a sua idade:



<input type="number" name="idade">

Há mais de 20 tipos de dados! É muito importante você colocar o tipo correto para que o navegador prepare a página para receber aquele tipo de dado específico.

Exemplos:

Se você colocar o type="password", o navegador irá entender que o dado é uma senha e ela não ficará visível durante a digitação.
Se você colocar o type=color, o navegador irá entender que o dado é uma cor e irá abrir uma seleção de paleta de cores.
Se você colocar o type=date, o navegador irá entender que o dado é uma data e irá formatar o campo para uma fácil digitação e ou seleção de data.

Você pode ver a lista completa de todos os tipos de inputs no link HTML Input Types - W3Schools!

No formulário inicial, para as duas entradas de texto ("Nome" e "Senha"):

Nome é type="text", então vamos começar nosso formulário adicionando o campo nome:



<input type="text" name="nome">

Senha é type="password", então vamos adicionar o campo senha após uma quebra de linha (tag <br>):



<input type="text" name="nome">
<br>
<input type="password" name="senha">

O resultado do html é:

Mas Douglas, cadê a legenda ("Nome:" e "Senha:") e a descrição do campo ("Insira seu nome" e "Insira sua senha")?

Para a legenda "Nome:", usamos a tag <label>, no seu atributo for="" colocamos o nome do campo usado na tag <input> e entre a abertura e fechamento das tags digitamos a legenda;
Para a descrição "Insira seu nome", usamos o atributo placeholder="" da tag <input>.

Colocando a legenda e descrição, temos:



<label for="nome">Nome:</label>
<input type="text" name="nome" placeholder="Insira seu nome">
<br>
<label for="senha">Senha:</label>
<input type="password" name="senha" placeholder=""Insira sua senha>

Olha o resultado!

Voltando ao formulário inicial, vamos continuar com a seleção através de botões radiais e seleção através de uma lista de dados:

Para a seleção através de botões radiais usamos <input type="radio">:



<label for="tarefa">Seleciona uma tarefa:</label>
<br>
<input name="tarefa" type="radio" value="varrer-a-casa"> Varrer a casa
<input name="tarefa" type="radio" value="lavar-a-louca"> Lavar a louça
<input name="tarefa" type="radio" value="arrumar-o-quarto"> Arrumar o quarto

Note que usamos o mesmo nome "tarefa" para todas as opções. Isso faz com que consigamos selecionar somente uma tarefa entre as três. Se os nomes fossem diferentes, seriamos capaz de selecionar mais de um item.

O resultado desse HTML é:

Para a seleção através uma lista de dados usamos a tag <input> e colocamos o nome da lista no atributo list="", não usamos o atributo type="" nesse caso;
A lista de dados vai entre as tags <datalist id="lista-status"></datalist>, onde id é o mesmo nome dado no atributo list="" da tag <input> e;
Cada dado da lista fica na tag <option value="">



<label for="status">Selecione o status da tarefa</label>
<input name="status" list="lista-status" placeholder="clique e selecione">
<datalist id="lista-status">
     <option value="Aguardando">
     <option value="Em Processo">
     <option value="Concluído">
</datalist>

O resultado é:

O botão "Enviar" é muito simples, é uma tag <input> do type="submit" e o texto do botão fica no atributo value="".



<input type="submit" value="Enviar">

O resultado é:

Juntando todos os HTML, temos:



    <form>
        <label for="nome">Nome:</label>
        <input type="text" placeholder="Insira seu nome" name="nome">
        <br>
        <label for="senha">Senha:</label>
        <input type="password" placeholder="Insira sua senha" name="senha">

        <label for="tarefa">Seleciona uma tarefa:</label>
        <br>
        <input name="tarefa" type="radio" value="varrer-a-casa"> Varrer a casa
        <input name="tarefa" type="radio" value="lavar-a-louca"> Lavar a louça
        <input name="tarefa" type="radio" value="arrumar-o-quarto"> Arrumar o quarto
        <br>

        <label for="status">Selecione o status da tarefa</label>
        <input name="status" list="lista-status" placeholder="clique e selecione">
        <datalist id="lista-status">
            <option value="Aguardando">
            <option value="Em Processo">
            <option value="Concluído">
        </datalist>         

        <input type="submit" value="Enviar">
    </form>

Como resultado:

Reparou que está faltando algo ainda?

Nos campos de seleção há uma divisória, agrupando todos esses campos do formulário (radio e datalist). Isso se chama fieldset!

Usamos a tag <fieldset> para agrupar e;
Podemos dar um nome para o agrupamento usando tag <legend>:



    <span class="nt">&lt;fieldset&gt;</span>
        <span class="nt">&lt;legend&gt;</span>Seleciona uma tarefa:<span class="nt">&lt;/legend&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"tarefa"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"varrer-a-casa"</span><span class="nt">&gt;</span> Varrer a casa
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"tarefa"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"lavar-a-louca"</span><span class="nt">&gt;</span> Lavar a louça
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"tarefa"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"arrumar-o-quarto"</span><span class="nt">&gt;</span> Arrumar o quarto

        <span class="nt">&lt;br&gt;</span>

        <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"status"</span><span class="nt">&gt;</span>Selecione o status da tarefa<span class="nt">&lt;/label&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"status"</span> <span class="na">list=</span><span class="s">"lista-status"</span> <span class="na">placeholder=</span><span class="s">"clique e selecione"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;datalist</span> <span class="na">id=</span><span class="s">"lista-status"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Aguardando"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Em Processo"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Concluído"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;/datalist&gt;</span>
    <span class="nt">&lt;/fieldset&gt;</span>

O resultado final do HTML completo é:

Parabéns!!!

Fico muito feliz que chegou até o final dessa publicação.
Espero que você tenha aprendido muito!

Quer aprender mais?

Te convido a visitar e seguir o meu canal lá na Twitch: https://www.twitch.tv/dwtoledo.
Lá a gente faz muitas lives de front-end e tem uma playlist muito legal sobre conceitos de HTML!

Blog