使用form表单中自带的fieldset与legend

最新推荐文章于 2025-04-07 19:43:00 发布

水痕01

最新推荐文章于 2025-04-07 19:43:00 发布

阅读量8.1k

点赞数 2

分类专栏： html css bootstrap 文章标签： bootstrap 表单

本文链接：https://blog.youkuaiyun.com/kuangshp128/article/details/62068287

版权

css 同时被 3 个专栏收录

17 篇文章

订阅专栏

html

16 篇文章

订阅专栏

bootstrap

2 篇文章

订阅专栏

在form表单中常常被忽视的两个标签`fieldset`和`legend`

下面我是用了bootstrap的样式，把一些默认样式去除了

<div class="container">
    <div class="col-md-5">
        <form role="form" action="" method="post">
            <fieldset>
                <legend class="text-center text-primary">用户注册页面</legend>
                <div class="form-group">
                    <label>用户名:</label>
                    <input type="text" name="name" placeholder="请输入用户名" class="form-control"/>
                </div>
                <div class="form-group">
                    <label>密码:</label>
                    <input type="text" name="password" placeholder="请输入密码" class="form-control"/>
                </div>
                <div class="form-group">
                    <label>选择你的性别:</label>
                    <div>
                        <label class="checkbox-inline" style="padding-left: 0;">
                            <input type="radio" name="sex" value="0">&nbsp;&nbsp;男
                        </label>
                        <label class="checkbox-inline" style="padding-left: 0;">
                            <input type="radio" name="sex" value="1">&nbsp;&nbsp;女
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="">选择你的兴趣爱好:</label>
                    <div>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="hobby" value="学习"/>&nbsp;&nbsp;学习
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="hobby" value="美女"/>&nbsp;&nbsp;美女
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="hobby" value="游戏"/>&nbsp;&nbsp;游戏
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="hobby" value="电话"/>&nbsp;&nbsp;电视
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label>请选择省份:</label>
                    <select class="form-control" name="province">
                        <option value="0">广东省</option>
                        <option value="1">湖南省</option>
                        <option value="2">广西省</option>
                        <option value="3">福建省</option>
                    </select>
                </div>
                <div class="form-group">
                    <input type="submit" value="注册" class="btn btn-primary"/>
                </div>
            </fieldset>
        </form>
    </div>
</div>

下面看个没样式的form表单

运行效果如图:
表单运行结果

<div style="width:400px;height: auto;">
    <form action="" method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <fieldset>
            <legend>用户注册表</legend>
            <table>
                <tr>
                    <td><label>用户名:</label></td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td><label>密码:</label></td>
                    <td><input type="password" name="password"></td>
                </tr>
                <tr>
                    <td><label>年龄:</label></td>
                    <td><input type="text" name="age"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="提交"/></td>
                </tr>
            </table>
        </fieldset>
    </form>
</div>