Etiqueta de conjunto de campos HTML5

La etiqueta <fieldset> en HTML5 se usa para crear un grupo de elementos relacionados en el formulario y crea el cuadro sobre los elementos. La etiqueta <fieldset> es nueva en HTML5. La etiqueta <legend> se usa para definir el título del contenido del niño. Los elementos de la leyenda son el elemento principal. Esta etiqueta se utiliza para definir el título del elemento <fieldset>.

Sintaxis:

<fieldset>Contents</fieldset>

Atributo:

  • disabled : se utiliza para especificar que el grupo de elementos de formulario relacionados está deshabilitado. Un conjunto de campos deshabilitado no se puede hacer clic ni se puede usar.
  • form : Se utiliza para especificar uno o más formularios a los que pertenece el elemento <fieldset>.
  • name : Se utiliza para especificar el nombre del elemento Fieldset.
  • autocompletar : se utiliza para especificar que el conjunto de campos tiene un valor de activación o desactivación de autocompletado.

Ejemplo: Este sencillo ejemplo ilustra el uso de la etiqueta <fieldset> para crear un grupo de elementos relacionados en el formulario HTML.

HTML

<!DOCTYPE html>
<html>
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML <fieldset> Tag</h2>
    <form>
        <div class="title">
            Employee Personal Details:
        </div>
         
        <!--HTML fieldset tag starts here-->
        <fieldset>
            <legend>Details:</legend>
            Name:<input type="text">
            Emp_Id:<input type="text">
            Designation:<input type="text">       
        </fieldset>
        <!--HTML fieldset tag ends here-->
    </form>
</body>
</html>

Producción:

Etiqueta HTML <conjunto de campos>

Ejemplo: En este ejemplo, conoceremos el uso de la etiqueta <fieldset> para hacer el grupo de elementos relacionados.

HTML

<!DOCTYPE html>
<html>
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML <fieldset> Tag</h2>
    <form>
        <div class="title">
          Suggest article for video:
        </div>
       
        <!--HTML fieldset tag starts here-->
        <fieldset>
            <legend>JAVA:</legend>
            Title:<input type="text"><br>
            Link:<input type="text"><br>
            User ID:<input type="text">
        </fieldset>
        <!--HTML fieldset tag ends here-->
 
        <br>
       
        <!--HTML fieldset tag starts here-->
        <fieldset>
            <legend>PHP:</legend>
            Title:<input type="text"><br>
            Link:<input type="text"><br>
            User ID:<input type="text">
        </fieldset>
        <!--HTML fieldset tag ends here-->
    </form>
</body>
</html>

 Producción:

Etiqueta <fieldset> para agrupar el elemento relacionado 

Navegadores compatibles:

  • Google Chrome 
  • explorador de Internet 
  • Microsoft Edge 12.0 y superior
  • Firefox 
  • Safari 
  • Ópera 

Publicación traducida automáticamente

Artículo escrito por Vishal_Khoda y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *