Fieldset()函数的实践案例及效果展示

Fieldset()函数是HTML中用来创建一个分组的元素，可以将一组相关的表单控件包含在一个fieldset元素中，从而形成一个组合框。它通常与legend元素一起使用，用来描述和标识这个分组的表单控件。

以下是一个实际的案例来展示Fieldset()函数的使用效果：

假设我们有一个注册表单，包含姓名、邮箱和密码等字段。我们希望将这些字段按照不同的组进行分组展示，并给每个分组设置一个标题。我们可以使用Fieldset()函数来实现这个效果。

HTML代码如下：

<form>
    <fieldset>
        <legend>个人信息</legend>
        
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" placeholder="请输入姓名" required>
        
        <br>
        
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
        
        <br>
        
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="请输入密码" required>
        
        <br>
        
        <label for="confirm-password">确认密码：</label>
        <input type="password" id="confirm-password" name="confirm-password" placeholder="请再次输入密码" required>
    </fieldset>
    
    <br>
    
    <fieldset>
        <legend>其他信息</legend>
        
        <label for="age">年龄：</label>
        <input type="number" id="age" name="age" required>
        
        <br>
        
        <label for="gender">性别：</label>
        <select id="gender" name="gender" required>
            <option value="">请选择性别</option>
            <option value="male">男</option>
            <option value="female">女</option>
        </select>
    </fieldset>
    
    <br>
    
    <button type="submit">注册</button>
</form>

上面的代码中，我们使用了两个fieldset元素来分别包裹个人信息和其他信息对应的表单字段。每个fieldset元素都使用了legend元素来添加标题。

效果展示如下图所示：


通过以上实例，我们可以看到，Fieldset()函数可以很方便地将一组相关的表单字段分组展示，并且添加标题以便更好地对字段进行描述。这样可以使表单更加清晰和易于使用。