ir para conteúdo

Treinamento de HTML

Formulários

Formulários HTML são um dos principais pontos de interação entre um usuário e um web site ou aplicativo. Eles permitem que os usuários enviem dados para o web site. Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web também pode interceptar para usá-los por conta própria.

Observação: Os números mencionados nos exemplos, são as linhas do código fonte HTML.

Retornar para página principal

Sem rótulo atrelado

Exemplo Incorreto



<form method="post">
<div>
<label>Nome:</label>
<input type="text" />
</div>

<div>
<label>E-mail:</label>
<input type="text" />
</div>

<div>
<label>Celular:</label>
<input type="text" />
</div>
</form>

Exemplo prático

Exemplo Correto



<form method="post">
<div>
<label for="nome">Nome:</label>
<input type="text" id="nome" />
</div>

<div>
<label for="email">E-mail:</label>
<input type="text" id="email" />
</div>

<div>
<label for="celular">Celular:</label>
<input type="text" id="celular" />
</div>
</form>

Exemplo prático

Sem tag label

Exemplo Incorreto



<form method="post">
<div>
Nome:
<input type="text" placeholder="Seu nome aqui"/>
</div>
<div>
E-mail:
<input type="text" />
</div>
<div>
Celular:
<input type="text" />
</div>
</form>

Exemplo prático

Nome:
E-mail:
Celular:

Exemplo Correto



<form method="post">
<div>
<label for="nome">Nome:</label>
<input type="text" id="nome" />
</div>

<div>
<label for="email">E-mail:</label>
<input type="text" id="email" />
</div>

<div>
<label for="celular">Celular:</label>
<input type="text" id="celular" />
</div>
</form>

Exemplo prático

Retornar para página principal