Form表单的其他组件

Form表单的其他组件
fieldset 组件/标签

1.disabled (禁用filedset元素)

    disabled属性修饰的控件数据不进行提交
    <div>
        测试disabled:<input type="text" disabled value="123" name="test">
        <input type="submit">
    </div>

2.name (fieldset元素的名称)

   fieldset的标题由<legend>标签提供
   
 例如:
   <fieldset>
       <legend>必填项</legend>
   <div>
       <label for="">用户名:</label>
       <input type="text">
   </div>
   <div>
       <label for="">密码:</label>
       <input type="password">
   </div>
   </fieldset> 

button 表单组件

1.type (指定控件类型 )

    button,submit,reset 

2.name (按钮名称)

    例如:<button type="button" name="btn" value="btnValue">普通按钮</button>

label 表单组件
for (与为设定标题的表单组件的ID值一致 )

    例如:<label for="">用户名:</label>

select 表单组件/下拉列表

multiple   指定控件类型 布尔类型的值,表示是否允许多选
size       显示的行数,默认值为0
disabled   表示禁用组件,禁用组件的值也不能被提交
name       指定该组件的名字,会与其option子元素的value值组成键值对随其他表单数据一齐被提交 

option 表单组件

 option表选项,常包含在 <select>, <optgroup>中 

1.disabled 表示禁用组件,禁用组件的值不能被提交
2.value 定义控件的初始值。提交表单时,初始值会被提交给服务器。
3.selected 表示该选项默认被选中

例如:
    <select multiple size="5" name="address1" id="">
        <option value="">请选择</option>
        <option value="jiangsu">江苏省</option>
        <option value="shanxi" selected>山西省</option>
        <option value="hubei" disabled>湖北省</option>   
    </select>

optgroup 表单组件

optgroup表包含option的选项组,常包含在 <select>中

1.disabled 表示禁用组件,禁用组件的值不能被提交
2.label 表示选项组的名称

例如:
    <select style="width: 100px;" multiple name="city" id="">
        <optgroup label="购物">
            <option value="wuhan" selected>买车</option>
            <option value="xiaogan" selected>买房</option>
            <option value="huanggang">买包</option>
        </optgroup>
        <optgroup label="健身项目">
            <option value="shenzhen">游泳</option>
            <option value="guangzhou">跑步</option>
            <option value="dongguan" disabled>瑜伽</option>
        </optgroup>
    </select>

textarea 多行文本框

无value属性,其值被包含在标签内 
rows       文本框的行数
cols       文本框的列数 
wrap       是否自动换行 
    off    不自动换行 
    hard   自动硬回车换行,换行元素一同被传送到服务器中
    soft   自动软回车换行,换行元素不会传到服务器中
disabled   禁用组件,禁用组件的值也不能被提交 
readonly   该组件只读,其值依然会被提交
name       指定该组件的名字,会随着其值一同被提交到后台

例如:
    个人简介:<textarea name="info" id="" cols="30" rows="10" readonly>123</textarea>
发布了39 篇原创文章 · 获赞 0 · 访问量 185

猜你喜欢

转载自blog.csdn.net/yaningyin/article/details/105034112
今日推荐