11.HTML表单元素【中】

                                                  第十章 表单元素【中】

一、type 属性总汇

   1、type为text时  :一个单行文本，默认行为；     //<input type="text">

             text为默认值，呈现的是一个可以输入任意字符的文本框，还提供了额外属性：

             |——————————————————————————————|

             |    属性名称      |                    说明                 |

             |      list        |     指定为文本框提供建议的datalist元素，其值为datalist元素的id值

             |    maxlegth      |     设置文本框字符的最大长度            |

             |    pattern       |     用于输入验证的正则表达式            |

             |  placeholder     |     输入文字的提示 （在输入框里，没有自字符时里面有你设置的提示信息）

             |    readonly      |     文本框处于只读状态                  |

             |    disabled      |     文本框处于禁用状态                  |

             |      size        |     设置文本框宽度                      |

             |     value        |     设置文本框初始值（在框里有一个初始值，也可以更改输入其他值）

             |    required      |     表明用户必须输入一个值，否则无法通过输入验证

             |——————————————————————————————|

          例： <form>

           <input type="text" list="abc">

               </form>

               <datalist id="abc">

           <option value="1">苹果</option>

           <option value="2">橘子</option>

           <option value="3" label="香蕉">

           <option value="菠萝">

               </datalist>

           

   2、type为password时  :隐藏字符的密码框；（输入的字符会变成黑圆圈）（和上面的额外属性一样）

   3、type为serch时  :在文本框后会显示一个叉来取消搜索内容，额外属性和text一样；（火狐浏览器不支持）

   4、type为number时（只能输入数字，输入字母不让提交）/range（输入数字的范围）  :

             |——————————————————————————————|

             |    属性名称      |                    说明               　　　　　　　  |

             |      list                   |     指定为文本框提供建议的datalist元素，其值为datalist元素的id值

             |      min     　　      |     设置可接受的最小值               　　   |

             |      max        　　  |     设置可接受的最大值                　　  |

             |    readonly   　     |     设置文本框只读                    　　  |

             |    required      　  |     表明用户必须输入一个值，否则无法通过输入验证

             |     value      　　  |     设置文本框初始值（在框里有一个初始值，也可以更改输入其他值）

             |      step      　　  |     指定上下调节值的步长               　　 |

             |——————————————————————————————|

   5、type为date系列时:  //<input type="date/month/time/week/datetime/datetime-local">（额外属性和number一样）

   6、type为color时   :文本框获取颜色的功能

   7、type为checkbox/radio  :

         （1）checked  设置复选框，单选框是否为勾选状况；

         （2）required 表示用户必须勾选，否则无法通过验证；

         （3）value    设置复选框，单选框勾选状态时提交数据，默认为on；

 

音乐<input type="checkbox" name="music" value="1">     }    可以选择一个或多个

体育<input type="checkbox" name="sport" value="2">     }

 

<input type="radio" name="sex" value="1" checked>男    }    只能选择其中一个，点一个，另一个会自动取消，且name必须一样。

<input type="radio" name="sex" value="2">女            }    checked默认首选。

   8、type为submit/reset/button时：（第10章【上】中的一、7）

         （1）submit  生成一个提交按钮；

         （2）reset   生成一个重置按钮；

         （3）button  生成一个普通按钮；

   9、type为image时：生成一个图片按钮，点击实现提交功能。     //<input type="image" src="图片名称">

          额外属性：src/alt（提供图片的文字说明）/width/height

   10、type为email（电子邮件格式，支持比较好）/tel（电话格式，基本不支持）/url（网络格式，支持一般）

   11、type为hidden时 ：生成一个隐藏文件，一般用于表单提交时关联主键ID提交，而这个数据作为隐藏存在。

   12、type为file时 ：上传控件，用于文件的上传。

          额外属性

           accept        指定接受html类型

          required       表明用户必须输入一个值，否则无法通过输入验证