Elementos de Formulário HTML

<!–

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

–>

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.

Índice-

Elementos de formulário HTML:
Os elementos HTML <form>:
<entrada> Elemento:
O elemento <selecionar>:
Um elemento <button>:
Elemento <datalist>:
O elemento <label>:
Elementos <fieldset> e <legend>:
O elemento <textarea>:
<saída> Elemento:
O elemento <Checkbox>:
Exemplo de formulário HTML:
Elementos de formulário HTML:
Importância dos elementos de formulário HTML:

Os elementos HTML <form>

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

<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:Popular electric vehicle manufacturer Tesla.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br>

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