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 ??????表明用户必须输入一个值，否则无法通过输入验证