En este artículo, discutiremos la etiqueta <legend> en HTML. La etiqueta de leyenda se utiliza para definir el título de los contenidos del niño. Los elementos de la leyenda son el elemento padre. Esta etiqueta se utiliza para definir el título del elemento <fieldset> .
Sintaxis :
<legend> Some Text...... </legend>
Ejemplo 1: En este ejemplo, vamos a crear un estudiante «Nombre» y «No» en la etiqueta de la leyenda del estudiante.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <strong>HTML Legend Tag</strong> <form> <fieldset> <!-- Legend tag --> <legend>STUDENT::</legend> <label>Name:</label> <input type="text"> <br><br> <label>No:</label> <input type="text"> </fieldset> </form> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra cómo agregar estilos CSS a la etiqueta de leyenda.
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 -->
<legend>STUDENT:</legend>
<label>Name:</label>
<input type="text">
<br>
<label> No:</label>
<input type="text">
</fieldset>
</form>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sravankumar8128 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA