Tag HTML <legenda>

Neste artigo, abordaremos a legenda da tag HTML com exemplos. Com o objetivo de atender aos requisitos de aprendizagem.

A tag HTML <legend> é usada em conjunto com a tag <fieldset> para fornecer uma legenda ou título para um grupo de controles de formulário relacionados.

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
<!DOCTYPE html>
<html>
<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

Usando CSS, flutue a legenda do fieldset para a direita:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<body>
<form action="/action-page.php">
<fieldset><legend style="float:right">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

O <fieldset> e o <legend> podem ser estilizados através do CSS:

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
<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
background-color: grey;
}
legend {
background-color: blue;
color: yellow;
padding: 4px 8px;
}
input {
margin: 4px;
}
</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 <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
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<title>Mr Example</title>
</head>
<body>
<form>
<fieldset>
<legend>Contact Information</legend>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
<br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
</fieldset>
<br>
<fieldset>
<legend>Preferences</legend>
<label for="newsletter">Subscribe to our newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<br>
<label for="hobbies">Select your hobbies:</label>
<br>
<label>
<input type="checkbox" id="hobby1" name="hobbies" value="reading">
Reading
</label>
<br>
<label>
<input type="checkbox" id="hobby2" name="hobbies" value="traveling">
Traveling
</label>
<br>
<label>
<input type="checkbox" id="hobby3" name="hobbies" value="sports">
Sports
</label>
</fieldset>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Tag HTML <legenda>:

Uso da legenda da tag

Na legenda do Tag <legend> , é especificada a legenda do elemento <fieldset> .

A tag HTML <legend> é normalmente usada em conjunto com a tag <fieldset> para fornecer uma legenda ou título para um grupo de controles de formulário relacionados. Aqui estão alguns usos comuns da tag <legend> :

Quando você tem um formulário longo com muitos campos relacionados, usar as tags <fieldset> e <legend> pode ajudar a organizar o formulário e tornar mais fácil para os usuários entenderem quais informações precisam inserir.
A tag <legend> é importante para acessibilidade na Web, pois fornece uma descrição textual dos controles de formulário relacionados para usuários que usam leitores de tela ou outras tecnologias assistivas.
A tag <legend> pode ser estilizada com CSS para melhorar sua aparência e combinar com o design geral da página da web.
A tag <legend> pode fornecer contexto para os controles de formulário relacionados, explicando por que o usuário precisa inserir determinadas informações ou fornecendo instruções sobre como preencher o formulário.

Suporte do navegador

Elemento
<legenda>	Sim	Sim	Sim	Sim	Sim

Atributos

Global

A legenda da tag também pode especificar atributos globais em HTML.

Evento

A legenda da tag também pode especificar atributos de evento em HTML.

Configurações padrão de CSS

Os seguintes valores são definidos como padrão em quase todos os navegadores para o elemento <legend> :

legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}

Vantagens da legenda da etiqueta

Usar a tag <legend> em HTML tem várias vantagens:

A tag <legend> é um elemento importante para acessibilidade na web, pois fornece uma descrição textual dos controles de formulário relacionados para usuários que estão usando leitores de tela ou outras tecnologias assistivas.
A tag <legend> ajuda a organizar os controles de formulário relacionados, tornando mais fácil para os usuários entender quais informações precisam inserir.
A tag <legend> pode fornecer contexto para os controles de formulário relacionados, explicando por que o usuário precisa inserir determinadas informações ou fornecer instruções sobre como preencher o foA tag <legend> pode ser estilizada com CSS para aprimorar sua aparência e corresponder ao design da página web.
Usar as tags <fieldset> e <legend> para agrupar controles de formulário relacionados pode facilitar a manutenção do código e fazer alterações no futuro, pois você pode atualizar o conjunto de campos e a legenda em vez de atualizar cada controle de formulário individual.

Assine nosso boletim informativo abaixo para estar em contato com as informações técnicas mais recentes neste site.

Nós valorizamos o seu feedback.

Tag HTML <legenda>

Example:

Example:

Example:

Example:

Uso da legenda da tag

Suporte do navegador

Atributos

Global

Evento

Configurações padrão de CSS

Vantagens da legenda da etiqueta

Sentindo entediado?