Creando un formulario con la etiqueta Fieldset

Introducción

La etiqueta HTML <fieldset> se utiliza para agrupar elementos HTML juntos y puede ayudar a crear documentos organizados y bien estructurados. Y al usar la etiqueta <fieldset>, se pueden agrupar los campos relacionados en un formulario para mostrar los campos del formulario de manera más organizada.

En este laboratorio, demostraremos cómo se puede usar la etiqueta <fieldset> para crear formularios estructurados y organizados.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_group("Grouping Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70756{{"Agrupación de formularios HTML"}} html/head_elems -.-> lab-70756{{"Agrupación de formularios HTML"}} html/layout -.-> lab-70756{{"Agrupación de formularios HTML"}} html/doc_flow -.-> lab-70756{{"Agrupación de formularios HTML"}} html/forms -.-> lab-70756{{"Agrupación de formularios HTML"}} html/form_group -.-> lab-70756{{"Agrupación de formularios HTML"}} html/form_access -.-> lab-70756{{"Agrupación de formularios HTML"}} html/custom_attr -.-> lab-70756{{"Agrupación de formularios HTML"}} end

Creando una página HTML

Crea un archivo llamado index.html y escribe la estructura básica de la página HTML.

<!doctype html>
<html>
  <head>
    <title>Creating a Form with Fieldset Tag</title>
  </head>
  <body></body>
</html>

Creando el formulario con Fieldset

Agrega un elemento de formulario al cuerpo HTML y luego utiliza la etiqueta <fieldset> para agrupar los campos relacionados del formulario. También agregaremos la etiqueta label a los elementos del formulario para agregar una descripción al campo de entrada.

<form>
  <fieldset>
    <legend>Detalles del usuario</legend>
    <label for="fname">Nombre:</label>
    <input type="text" id="fname" name="firstname" /><br /><br />
    <label for="lname">Apellido:</label>
    <input type="text" id="lname" name="lastname" /><br /><br />
    <label for="email">Correo electrónico:</label>
    <input type="email" id="email" name="email" /><br /><br />
  </fieldset>
  <fieldset>
    <legend>Detalles de la cuenta</legend>
    <label for="uname">Nombre de usuario:</label>
    <input type="text" id="uname" name="username" /><br /><br />
    <label for="pass">Contraseña:</label>
    <input type="password" id="pass" name="password" /><br /><br />
  </fieldset>
  <input type="submit" value="Enviar" />
</form>

El código anterior creará un formulario que está estructurado en dos fieldset. El primer fieldset agrupa los detalles personales del usuario y el segundo fieldset agrupa los detalles de la cuenta. Es posible que note que usamos la etiqueta label para proporcionar un contexto para los campos.

Agregando CSS

Podemos dar estilo al fieldset utilizando CSS para darle un diseño adecuado. Podemos agregar un borde, un color de fondo y un poco de relleno para que el fieldset se vea mejor.

<style>
  fieldset {
    padding: 10px;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    margin: 5px;
    background-color: #f8f8f8;
  }
</style>

Abre el archivo HTML en tu navegador para ver el formulario y probarlo.

Resumen

La etiqueta Fieldset crea un documento organizado y bien estructurado. Es útil para crear formularios. Utiliza las etiquetas label para proporcionar contexto a los campos de entrada. La etiqueta Fieldset agrupa los campos relacionados del formulario y agrega un borde alrededor de los campos relacionados. Finalmente, el estilo CSS le da un diseño al fieldset que lo hace lucir mejor.