La etiqueta de leyenda se utiliza para definir el título de los contenidos secundarios. Los elementos de la leyenda son el elemento principal. Esta etiqueta se utiliza para definir el título del elemento <fieldset> .
Sintaxis
<legend> Text </legend>
Atributo :
- align: Establece la alineación del elemento de la leyenda.
Ejemplo 1:
html
<!DOCTYPE html> <html> <head> </head> <body> <h1>GeeksforGeeks</h1> <strong>HTML Legend Tag</strong> <form> <fieldset> <!-- Legend tag using --> <legend>STUDENT::</legend> <label>Name:</label> <input type="text"> <br><br> <label>Email:</label> <input type="text"> <br><br> <label>Date of birth:</label> <input type="text"> <br><br> <label>Address:</label> <input type="text"> <br><br> <label>Enroll No:</label> <input type="text"> </fieldset> </form> </body> </html>
Producción:
Ejemplo 2: Dar estilo a la etiqueta de la leyenda usando las propiedades de CSS.
html
<!DOCTYPE html>
<html>
<head>
<style>
form{
width: 50%;
}
legend {
display: block;
padding-left: 10px;
padding-right: 10px;
border: 3px solid green;
background-color:tomato;
color:white;;
}
label {
display: inline-block;
float: left;
clear: left;
width: 90px;
margin:5px;
text-align: left;
}
input[type="text"] {
width:250px;
margin:5px 0px;
}
.gfg {
font-size:40px;
color:green;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "gfg">GeeksforGeeks</div>
<h2>HTML Legend Tag</h2>
<form>
<fieldset>
<!-- Legend tag using -->
<legend>STUDENT:</legend>
<label>Name:</label>
<input type="text">
<br>
<label>Email:</label>
<input type="text">
<br>
<label>Date of birth:</label>
<input type="text">
<br>
<label>Address:</label>
<input type="text">
<br>
<label>Enroll No:</label>
<input type="text">
</fieldset>
</form>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 6 y superior
- Firefox 1 y superior
- Ópera 12.1 y superior
- Safari 3 y superior
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA