Los formularios se utilizan para hacer que un grupo sea más comprensible para todos los usuarios y clientes, ya que los campos de datos relacionados son más fáciles de identificar. También facilita que los usuarios se concentren en grupos más pequeños y más claramente definidos al comprenderlos uno por uno como individuos en lugar de tratar de captar todo el formulario de una sola vez.
La agrupación debe crearse visualmente para los usuarios y en el código para facilitar el manejo de los datos. De forma predeterminada, los elementos <fieldset> y <legend> se utilizan para agrupar los campos de datos de formulario relacionados.
Ejemplo 1: El siguiente ejemplo muestra el uso de la etiqueta <fieldset> predeterminada en HTML.
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GFG</h2> <fieldset> <legend> Shipping Address: </legend> <div> <label for="shipping_name"> Name: </label> <br> <input type="text" name="shipping_name" id="shipping_name"> </div> <div> <label for="shipping_street"> Street: </label> <br> <input type="text" name="shipping_street" id="shipping_street"> </div> </fieldset> <fieldset> <legend> Billing Address: </legend> <div> <label for="billing_name"> Name: </label> <br> <input type="text" name="billing_name" id="billing_name"> </div> <div> <label for="billing_street"> Street: </label> <br> <input type="text" name="billing_street" id="billing_street"> </div> </fieldset> </body> </html>
Producción:
Alternativa al efecto de conjunto de campos: el efecto de la etiqueta de conjunto de campos se puede lograr usando CSS personalizado, en caso de que el usuario no quiera usar la etiqueta <fieldset>. Utiliza un uso inteligente del borde, el margen y varias otras propiedades de CSS para lograr un efecto similar.
Ejemplo 2: El siguiente ejemplo demuestra el efecto fieldset alternativo.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Defining a custom border on all
sides except the top side */
.custom-field {
border: 4px solid;
border-top: none;
margin: 32px 2px;
padding: 8px;
}
/* Defining the style of the
heading/legend for custom fieldset */
.custom-field h1 {
font: 16px normal;
margin: -16px -8px 0;
}
/* Using float:left allows us to mimic
the legend like fieldset. The
float:right property can also be
used to show the legend on right side */
.custom-field h1 span {
float: left;
}
/* Creating the custom top border to make
it look like fieldset defining small
border before the legend. The width
can be modified to change position
of the legend */
.custom-field h1:before {
border-top: 4px solid;
content: ' ';
float: left;
margin: 8px 2px 0 -1px;
width: 12px;
}
/* Defining a long border after the
legend, using overflow hidden to
actually hide the line behind the
legend text. It can be removed
for a different effect */
.custom-field h1:after {
border-top: 4px solid;
content: ' ';
display: block;
height: 24px;
left: 2px;
margin: 0 1px 0 0;
overflow: hidden;
position: relative;
top: 8px;
}
</style>
</head>
<body>
<!-- Original fieldset tag
for comparison -->
<fieldset>
<legend>
Fieldset 1 Legend
</legend>
Original Fieldset
</fieldset>
<!-- Custom fieldset which is created
using custom CSS above -->
<div class="custom-field">
<h1>
<span>
Custom created Fieldset
</span>
</h1>
<div>
<label for="shipping_name">
Name:
</label>
<br>
<input type="text"
name="shipping_name"
id="shipping_name">
</div>
<div>
<label for="shipping_street">
Street:
</label>
<br>
<input type="text"
name="shipping_street"
id="shipping_street">
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por kevadiyasmeet y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA