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="p_w_picpath">，生成一个图片按钮，点击可提交并传送分区响应数据

示例
<input type="p_w_picpath" 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="p_w_picpath/gif, p_w_picpath/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>

</select>
属性
说明
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>