DEV Community

loading...
Cover image for Tags HTML para Formulários e Dicas do VS Code.

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

Douglas Toledo
Sou um dev front-end com conhecimentos em HTML, CSS e JavaScript! Faço lives na Twitch para contribuir com a comunidade.
・5 min read

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

  • as principais tags e;
  • tabelas em HTML;

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

Vamos replicar o formulário abaixo?

Alt Text

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!

  1. Usamos a tag <input> para o usuário digitar os dados;
  2. Definimos qual é o tipo do dado usando o atributo type="";
  3. 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">
Enter fullscreen mode Exit fullscreen mode

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.
    Alt Text

  • 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.
    Alt Text

  • 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.
    Alt Text

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">
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

O resultado do html é:
Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

Olha o resultado!
Alt Text


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:

Alt Text


  • 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
Enter fullscreen mode Exit fullscreen mode

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 é:

Alt Text


  • 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>   
Enter fullscreen mode Exit fullscreen mode

O resultado é:

Alt Text


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">
Enter fullscreen mode Exit fullscreen mode

O resultado é:

Alt Text


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>
Enter fullscreen mode Exit fullscreen mode

Como resultado:
Alt Text


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>:
        <fieldset>
            <legend>Seleciona uma tarefa:</legend>
            <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>
        </fieldset>
Enter fullscreen mode Exit fullscreen mode

O resultado final do HTML completo é:

Alt Text


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!

Discussion (0)