Html Fieldset

HTML fieldset

Created By: chatGPT

Fieldset is an HTML element used to group related elements in a form. It helps organize forms visually and semantically, improving the user experience. You typically use it in conjunction with the legend element, which provides a title for the grouped fields. Here’s how you can use it:

<fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>
</fieldset>

In the example above, we created a fieldset that groups Name and Email input fields together. The legend provides context, indicating that these fields relate to Personal Information.

<fieldset>
    <legend>Account Details</legend>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br>
</fieldset>

You can nest multiple fieldsets for more complex forms. This is helpful when dealing with various sections and categories of data, making it easier for users to fill out the form without confusion.

<form>
    <fieldset>
        <legend>Contact Information</legend>
        <fieldset>
            <legend>Address</legend>
            <label for="street">Street:</label>
            <input type="text" id="street" name="street"><br>
            <label for="city">City:</label>
            <input type="text" id="city" name="city">
        </fieldset>
    </fieldset>
</form>