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

在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>