HTML <fieldset> 标签

标签定义及使用说明

<fieldset> 标签可以将表单内的相关元素分组。

<fieldset> 标签会在相关表单元素周围绘制边框。

提示和注释

提示：<legend> 标签为 <fieldset> 元素定义标题。

 

 

 

< fieldset   style = "border-color:red" >

    

   </ fieldset >

 

 

 

< fieldset >

     < legend  > 我 是 被 定 义 的 标 题 </ legend >

    

   </ fieldset >

 

属性

New ：HTML5 中的新属性。

属性	值	描述
disabledNew	disabled	规定该组中的相关表单元素应该被禁用。
formNew	form_id	规定 fieldset 所属的一个或多个表单。
nameNew	text	规定 fieldset 的名称。

 

< fieldset >

     < legend  > 标 题 </ legend >

     这 里 写 入 内 容......

   </ fieldset >

看一个基本完整但没有样式的表单例子：

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