Tag HTML <conjunto de campos>

Exemplos de conjuntos de campos de tags são o tópico da postagem de hoje. Com fé razoável, satisfará as demandas educacionais.

A tag HTML <fieldset> é usada para agrupar elementos de formulário relacionados em um formulário da web. Ele fornece uma maneira de agrupar elementos de formulário visual e semanticamente e ajuda a melhorar a organização e a legibilidade dos formulários da web.

A tag <fieldset> é normalmente usada em combinação com a tag <legend>, que é usada para fornecer uma legenda ou título para o grupo de elementos de formulário dentro do <fieldset> . A tag <legend> deve ser colocada imediatamente após a tag <fieldset> de abertura .

Em um formulário, agrupe os elementos relacionados:

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>
<body>
<form action="/action-page.php">
<fieldset><legend>Educational Background:</legend>
<br>
<br>
<label for="years">Years of Education</label>
<input type="text" id="years" name="years">
<br>
<br>
<label for="mschool">Middle School</label>
<input type="text" id="lname" mschool="mschool">
<br>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<br>
<label for="heducation">Higher Education</label>
<input type="heducation" id="heducation" name="heducation">
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você pode usar os seguintes códigos CSS para estilizar <fieldset> e <legend> :

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
36
<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
background-color: #e6e1e1;
}
legend {
background-color: lightgrey;
color: white;
padding: 3px 6px;
}
input {
margin: 3px;
}
</style>
</head>
<body>
<form action="/action-page.php">
<fieldset>
<legend>Educational Background:</legend>
<label for="years">Years of Education</label>
<input type="text" id="years" name="years">
<br><br>
<label for="mschool">Middle School</label>
<input type="text" id="lname" mschool="mschool"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="heducation">Higher Education</label>
<input type="heducation" id="heducation" name="heducation"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo da tag <fieldset>:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Select your favorite color:</legend>
<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label>
<br>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label>
<br>
<input type="radio" id="green" name="color" value="green">
<label for="green">Green</label>
</fieldset>
<input type="submit" value="Submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca HTML <conjunto de campos>:

Uso do conjunto de campos de tags

Tag fieldset <fieldset> permite agrupar elementos associados em um formulário.

A tag <fieldset> cria uma caixa que envolve os elementos relacionados .

Aviso: A tag <legend> especifica a legenda associada ao elemento fieldset .

Atributos

Atributo	Valor	Visão geral
desabilitado	desabilitado	Especifica a desativação de um grupo de elementos de formulário relacionados.
forma	form_id	Indica o formulário ao qual o fieldset pertence.
nome	texto	Forneça um nome para o conjunto de campos.

Compatibilidade do navegador

Elemento
<conjunto de campos>	Sim	Sim	Sim	Sim	Sim

Atributos

Global

Em HTML, o conjunto de campos Tag <fieldset> também aceita Atributos Globais .

Evento

O conjunto de campos de tags também pode especificar atributos de evento em HTML com <fieldset> .

Configurações padrão de CSS

Um valor padrão será exibido pela maioria dos navegadores para o elemento <fieldset > :

fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove (internal value);
}

Benefícios da tag HTML <fieldset>

A tag HTML <fieldset> é usada para agrupar elementos de formulário relacionados em um formulário da web. Aqui estão alguns benefícios de usar a tag <fieldset> :

Ao agrupar elementos de formulário relacionados usando a tag <fieldset> , você pode melhorar a organização e a legibilidade de seus formulários da web. Isso torna mais fácil para os usuários entender a finalidade de cada elemento do formulário e preenchê-lo com precisão.
A tag <fieldset> também pode melhorar a acessibilidade para usuários que podem usar tecnologias assistivas para navegar em formulários da web. Ao fornecer um agrupamento claro e lógico dos elementos do formulário, você pode ajudar a garantir que os usuários possam preencher o formulário com mais facilidade e precisão.
A tag <fieldset> pode ser facilmente estilizada usando CSS, permitindo que você personalize a aparência de seus formulários da web para corresponder à estética de design do seu site.
A tag <fieldset> também pode ser usada para aplicar regras de validação personalizadas a um grupo de elementos de formulário relacionados. Isso pode ajudar a melhorar a precisão e integridade dos dados enviados por meio do formulário.
Ao agrupar elementos de formulário relacionados usando a tag <fieldset> , você pode simplificar a manutenção do formulário tornando mais fácil atualizar e modificar elementos de formulário relacionados de uma só vez.

Se este artigo foi informativo o suficiente para atender aos seus desejos educacionais, compartilhe essas informações significativas com seus amigos clicando nos links abaixo.

Nós valorizamos o seu feedback.

Tag HTML <conjunto de campos>

Example:

Example:

Example:

Uso do conjunto de campos de tags

Atributos

Compatibilidade do navegador

Atributos

Global

Evento

Configurações padrão de CSS

Benefícios da tag HTML <fieldset>

Sentindo entediado?