1. form 表单
| 示例 | <form name="myForm" action="www.baidu.com" method="post" target="_blank" autocomplete novalidate> |
| 属性 | 说明 |
| name | 表单名称，不提交 |
| action | 指定目标提交页面 |
| method | 指定表单的请求方式，取值：get或post |
| target | 指定表单的提交方式，取值如下： _blank，在新标签页中打开 _self，在当标签页中打开 |
| autocomplete | 使浏览器记住用户输入的数据，自动填充；默认开启 |
| novalidate | 不校验输入数据 |
2. input 用户输入
| 示例 | 用户名：<input name="user" value="lili" autofocus disabled form autocomplete type> |
| 属性 | 说明 |
| name | 输入元素名称 |
| value | 默认初始值 |
| autofocus | 自动聚焦光标 |
| disabled | 禁用，不可提交 |
| form | 指定挂钩的表单 |
| autocomplete | 使浏览器记住用户输入的数据，自动填充；默认开启 |
| pattern | 正则表达式，验证时使用 |
| type | input元素的类型，详见6-15 |
3. label 将inpute控件前的标签与之一体化，即点击标签也可聚焦input控件
| 示例 | <label> 用户名：<input name="user"> </label> | <label for="user"></label> 用户名：<input id="user"> |
| 属性 | 说明 | |
| for | 指定关联的input控件 | |
4. <fieldset> 对控件进行分组
| 示例 | <fieldset name="set1" form="myForm" disabled> <legend>注册分组</legend> //为分组添加标题 <input name="user"> <input name="email"> </fieldset> |
| 属性 | 说明 |
| name | 分组名称 |
| form | 指定挂钩的表单 |
| disabled | 禁用该组所有控件 |
5. <button> 按钮
| 示例 | <button type="submit" > |
| 属性 | 说明 |
| type | 按钮功能类型，取值： - submit 提交 - reset 还原初始值 - button 无实际用途，一般与JS结合使用 |
| form | 指定挂钩的表单 |
| formaction, formmethod, formtarget, formnovalidate | 覆盖挂钩表单的对应属性 |
6. <input type="text">
| 示例 | <input type="text" name="user" value="me" readonly disabled required maxlength size> |
| 属性 | 说明 |
| maxlength | 最多可输入多少个字符 |
| size | 输入框宽度，以字符个数度量 |
| list | 双击输入框，列出可选输入，用法： <input type="text" name="user" list="myList"> <datalist id="myList"> <option value="1">appple</option> <option value="2" label="orange"> <option value="banana"> </datalist> |
7. <input type="password">，包含text所有属性
| 示例 | <input type="password" readonly disabled required maxlength size placeholder="请输入密码"> |
| 属性 | 说明 |
| placeholder | 输入提示 |
8. <input type="number/range">，
| 示例 | <input type="number" name="num" value="1" readonly required min max step> |
| 属性 | 说明 |
| min,max | 最小值，最大值 |
| step | 步长，上下调节按钮的增减值 |
| list | 同text |
9. <input type="date/month/time/week/datetime/datetime-local">，Firefox和IE不支持，推荐使用jQuery等前端库来实现日历功能
10. <input type="color">，颜色选择器，IE不支持
11. <input type="checkbox/radio">，复选框与单选框
| 示例 | 音乐<input type="checkbox" name="music" checked value="1" > 体育<input type="checkboc" name="sport" value="2"> <input type="radio" name="sex" value="1" checked>男 <input type="radio" name="sex" value="2">女 |
12. <input type="image">，生成一个图片按钮，点击可提交并传送分区响应数据
| 示例 | <input type="image" src="img.png" alt="图片按钮" > |
| 属性 | 说明 |
| formaction, formmethod, formtarget, formnovalidate | 覆盖挂钩表单的对应属性 |
13. <input type="email/url">
14. <input type="hidden">，隐藏控件，可提交。示例: <input type="hidden" name="id" value="1">
15. <input type="file">，上传文件
| 示例 | <input type="file" accept="image/gif, image/png" required> |
| 属性 | 说明 |
| accept | 可接受的MIME类型 |
16. <select> 下拉列表
| 示例 | <select name="food"> <optgroup label="fruit"> //下拉列表分组 <option value="1">apple</option> <option value="2">orange</option> <option value="3">banana</option> </optgroup> |
| 属性 | 说明 |
| size | 下拉列表的高度 |
| multiple | 是否可多选（按ctrl健） |
17. <textarea> 多行输入框
| 示例 | <input type="textarea" name="content" form="myForm" readonly disabled maxlength autofocus required placeholder="please enter your suggestion" rows="10" cols="30" wrap="soft"> |
| 属性 | 说明 |
| rows, cols | 行数，列数 |
| wrap | 是否插入换行符，取值： - soft 显示换行，但不插入真正的换行符，默认值 - hard 显示换行，同时插入真正的换行符 |
18. <output> 与JS结合使用，表示运算结果，示例：
<form action=" name="reg" oninput="res.value = num1.valueAsNumber * num2.valueAsNumber"> <input type="number" id="num1"> * <input type="number" id="num2"> = <output for="num1 num2" name="res"> </form>
本文出自 “Julia's Study Note” 博客，请务必保留此出处http://juliastudynote.blog.51cto.com/9954906/1656043
原文地址：http://juliastudynote.blog.51cto.com/9954906/1656043
