<!–

main_leaderboard, all: [728,90][970,90][320,50][468,60]

–>

Elementos de Formulário HTML

Neste capítulo, você encontrará uma descrição detalhada de todos os elementos de formulário HTML .

Ele representa uma seção do documento que contém controles interativos para envio de informações.



Os elementos HTML <form>

Em HTML , um elemento <form> pode conter um ou mais dos seguintes elementos:

  1. <entrada>
  2. <selecione>
  3. <botão>
  4. <rótulo>
  5. <optgroup>
  6. <lista de dados>
  7. <legenda>
  8. <área de texto>
  9. <saída>
  10. <conjunto de campos>
  11. <opção>

<entrada> Elemento:

<Input> é um dos elementos de formulário mais usados.

Depende do atributo type se o elemento de entrada é exibido de uma maneira diferente.

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><label for="fname">Your first name:</label><br><input type="text" id="fname" name="fname">
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Neste capítulo Tipos de entrada HTML , você encontrará uma descrição de todos os diferentes valores do atributo type.


O elemento <selecionar>

O elemento <select> possui uma lista suspensa gerada pelo elemento <select> :

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><label for="cars">Pick a car:</label><br><select id="cars" name="cars"><br><option value="tesla">Tesla Truck</option><option value="toyota">Toyota</option><br><option value="bmw">BMW</option><option value="audi">Audi</option><br></select><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Uma opção que pode ser escolhida é especificada pelo elemento <option> .

O primeiro item da lista suspensa é sempre selecionado por padrão.

Adicione o atributo selecionado à opção para criar uma opção pré-selecionada:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><option value="Tesla" selected>Free Tesla Truck</option>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Valores Visíveis:

Para definir o número de valores visíveis, basta usar o atributo size :

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><label for="cars">Select your car:</label><br><select id="cars" name="cars" size="3"><br><option value="tesla">Free Tesla Truck</option><option value="toyota">Toyota</option><br><option value="bmw">BMW</option><option value="audi">Audi</option><br></select>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Permitir seleções múltiplas:

Para fornecer ao usuário a opção de escolher mais de um valor, utilize a propriedade multiple . veja um exemplo de elementos de formulário HTML abaixo:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><label for="cars">Choose Your car:</label><br><select id="cars" name="cars" size="4" multiple><br><option value="tesla">Tesla Truck</option><option value="toyota">Toyota</option><br><option value="bmw">BMW</option><option value="audi">Audi</option><br></select>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um elemento <button>:

Um elemento com o atributo <button> especifica um botão que pode ser clicado quando se trata de elementos de formulário HTML :

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><button type="button" onclick="alert('Buy Tesla Truck')">Click Here</button>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um navegador renderizará o código HTML acima da seguinte maneira:

Nota: É sempre importante mencionar o atributo type para o elemento de botão quando falamos de elementos de formulário HTML . O elemento de botão padrão pode diferir entre os navegadores.


Elemento <datalist>:

Os elementos <Input> podem ser associados a uma lista de opções predefinidas, incluindo o elemento <datalist> nos elementos de formulário HTML .

Quando os usuários inserem dados, eles recebem uma lista suspensa de opções predefinidas.

Os atributos de lista dos elementos <input> devem apontar para os atributos id dos elementos <datalist> .

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><form action="/action-attribute-page.php"><br><input list="browsers"><datalist id="Tech Companies"><br><option value="Tesla"></option><option value="SpaceX"><br></option><option value="Google"></option><option value="Apple"><br></option><option value="IBM"></option></datalist><br></form>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O elemento <label>

Em HTML, o elemento <label> especifica rótulos para uma variedade de elementos de formulário.

É útil para leitores de tela, porque lê em voz alta o rótulo quando o usuário focaliza o elemento <input> .

Os usuários que têm problemas para clicar em áreas minúsculas (como botões de opção ou caixas de seleção) também podem se beneficiar do elemento <label> , pois ele alterna o botão de opção ou a caixa de seleção quando o usuário clica em seu conteúdo.

Para conectá-los, a propriedade for da tag <label> deve corresponder ao atributo id do elemento <input> .

O exemplo a seguir mostra o funcionamento do elemento <label> :

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><form><br> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br><br><br> <br> <label for="password">Password:</label><br> <input type="password" id="password" name="password"><br><br><br> <br> <label for="remember-me">Remember me:</label><br> <input type="checkbox" id="remember-me" name="remember-me"><br><br><br> <br> <input type="submit" value="Submit"><br></form><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elementos <fieldset> e <legend>:

Ao usar um <fieldset> , você pode agrupar dados relevantes em um formulário.

O elemento <legend> determina uma legenda <fieldset> .

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><form action="/action-attribute-page.php"><br><fieldset><legend>A person's personality:</legend><br><label for="fname">First name:</label><br><br><input type="text" id="fname" name="fname" value="Colin"><br><br><label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" value="Smith"><br><br><input type="submit" value="Submit"><br></fieldset><br></form>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um navegador renderizará o código HTML acima da seguinte maneira:

Personalidade:

Primeiro nome:

Sobrenome:


O elemento <textarea>

<Textarea> pode ser utilizado para caracterizar campos de entrada de várias linhas (uma área de texto) em elementos de formulário HTML :

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><textarea name="Here's a message" rows="10" cols="30"> Popular electric vehicle manufacturer Tesla. </textarea><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A propriedade rows indica o número de linhas que serão exibidas em uma área de texto.

A largura visível de uma seção de texto é determinada pelo atributo cols .

O seguinte é como um navegador verá o código HTML mencionado anteriormente:

CSS também pode ser usado para indicar o tamanho da área de texto:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><textarea name="message" style="width:200px; height:600px;"><br>Popular electric vehicle manufacturer Tesla.<br></textarea>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

<saída> Elemento:

Um elemento <output> exibe o resultado de um cálculo (como o resultado de um script).

Abaixo está um exemplo de elementos de formulário HTML:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><form action="/action-attribute-page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"><br>0<input type="range" id="a" name="a" value="50"><br>100 +<input type="number" id="b" name="b" value="50"><br>=<output name="x" for="a b"></output><br><br><br><br><input type="submit"><br></form><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


O elemento <Checkbox>:

Várias opções podem ser marcadas usando o controle de caixa de seleção.

Veja a seguir um exemplo de como o elemento checkbox funciona:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<title>Target _self attribute</title>
<style>
h2 {
color: blue;
}
body {
text-align:center;
}
</style>
</head>
<body>
<h2>CHECK BOXES</h2>
<form>
Which cars do you own:<br>
<input type="checkbox" id="tesla" name="tesla" value="tesla">
<label for="tesla">Tesla</label> <br>
<input type="checkbox" id="bmw" name="bmw" value="bmw">
<label for="bmw">BMW</label> <br>
<input type="checkbox" id="audi" name="audi" value="audi">
<label for="audi">Audi</label>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exemplo de formulário HTML

O seguinte é um exemplo de um formulário de registro padrão no que diz respeito aos elementos de formulário HTML :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<h2>Registration form</h2>
<form>
<fieldset>
<label>Name</label><br>
<input type="text" name="name"><br>
<label>Email</label><br>
<input type="email" name="email"><br>
<label>Password</label><br>
<input type="password" name="pass"><br>
<label>Re-enter Passowrd</label><br>
<input type="password" name="pass"><br>
<br><label>Select Gender</label><br>
<input type="radio" id="gender" name="gender" value="male">Male <br>
<input type="radio" id="gender" name="gender" value="female">Female <br>
<br>Address<br>
<textarea></textarea><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS também pode ser aplicado ao formulário aqui é como podemos fazer isso:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
<style>
h2{
color: blue;
}
label{
color: crimson;
}
input{
color: darkolivegreen;
}
</style>
</head>
<body>
<h2>Registration form</h2>
<form>
<fieldset>
<legend>User Data Form</legend>
<label>Name</label><br>
<input type="text" name="name"><br>
<label>Email</label><br>
<input type="email" name="email"><br>
<label>Password</label><br>
<input type="password" name="pass"><br>
<label>Re-enter Passowrd</label><br>
<input type="password" name="pass"><br>
<input type="submit" value="sign-up">
</fieldset>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elementos de Formulário HTML

Marcação Visão geral
<rótulo> Fornece um rótulo para um elemento <input> em elementos de formulário HTML .
<conjunto de campos> Em um formulário, os elementos relacionados são agrupados.
<forma> Cria um formulário HTML para receber a entrada do usuário.
<legenda> Adiciona uma legenda a um <fieldset>.
<selecione> Cria uma lista suspensa.
<optgroup> Lista suspensa contendo opções relacionadas.
<opção> Fornece uma lista suspensa com uma opção.
<lista de dados> Fornece uma lista de opções de controle de entrada predefinidas.
<saída> Calcula o resultado.
<botão> Define um botão clicável.
<entrada> Estabelece um controle de entrada.
<área de texto> Um controle de entrada que oferece suporte a várias linhas. (área de texto)

Confira nossa referência de tags HTML para obter uma lista mais abrangente de todas as tags HTML .

Importância dos elementos de formulário HTML

Os elementos de formulário HTML desempenham um papel crucial na facilitação da interação entre usuários e páginas da web. A seguir estão algumas razões pelas quais eles são importantes:

  • Coleta de dados: os formulários HTML permitem a coleta de entrada do usuário de maneira estruturada, que pode ser usada para diversas finalidades, como pesquisas, feedback e registro do usuário.
  • Interação do usuário: os formulários fornecem uma plataforma para os usuários inserirem dados e fazerem seleções, permitindo que eles interajam com as páginas da web.
  • Validação: os elementos de formulário HTML podem ser usados ​​para validar a entrada do usuário, garantindo que os dados inseridos sejam precisos e no formato correto, resultando em menos erros e melhor experiência do usuário.
  • Acessibilidade: os elementos de formulário melhoram a acessibilidade da página da Web, fornecendo rótulos e descrições para campos de entrada que podem ser lidos por tecnologias assistivas, como leitores de tela.
  • Segurança: formulários HTML podem ser usados ​​para enviar informações confidenciais, como detalhes de cartão de crédito e senhas. Os elementos de formulário podem implementar medidas de segurança como criptografia e validação do lado do servidor para garantir que esses dados sejam tratados com segurança.
Se você achar este artigo interessante, compartilhe esse conhecimento valioso com seus amigos clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone