1.form表单主要用于用户与Web服务器进行交互
action:url 用来处理表单信息的服务器地址
method 浏览器用来提交表单的方式 常用的get/post
get:通过这种方式提交的表单数据，会被附加在我们的链接上，通过"?"分割，发送敏感内容不建议使用
<form action="" method="get">
用户名： <input type="text" name="username" id="username">
<br/> 密码： <input type="password" name="password" id="password">
<br/>
<input type="submit" value="提交">
</form>
post:表单数据会存放在请求报文的体部，传递给服务器
表单元素：
input 用于接收来自用户的数据
name 用户设定控件名和提交数据的属性名
value 用于控件初始化 默认值等功能 （可选）
checked 给单选框或者复选框 默认选中
disabled 禁用组件 禁用后组件的值也不可提交
hidden 隐藏组件 隐藏后的组件值会被提交
size 控件的初始宽度 单位是像素（px） 但是text和password除外，他两是指字符的数目
maxlength可以输入字符数量的最大值
min number框专用
max number框专用
autofocus 自动聚焦
required 必填
<form action="" method="GET">
用户名：
<!-- 单行文本框 -->
<input type="text" name="username" id="username">
<br /> 密码：
<!-- 密码框 输入的内容会用小圆点替代 -->
<input type="password" name="password" id="password" pattern="">
<br/>
<!-- 年龄 -->
年龄：<input type="number" name="age" id="age" min="12" max="18">
<br />
<!-- 复选框 -->
爱好：<input type="checkbox" name="enjoy" id="play" value="play" checked>
<label for="play">玩游戏</label>
<input type="checkbox" name="enjoy" id="code" value="code">
<label for="code">写代码</label>
<input type="checkbox" name="enjoy" id="chest" value="chest">
<label for="chest">下棋</label>
<br/>
<!-- 单选框 -->
职业：<br />
<input type="radio" name="job" id="student" value="student"><label for="student">学生</label><br />
<input type="radio" name="job" id="teacher" value="teacher"><label for="teacher">老师</label><br />
<input type="radio" name="job" id="player" value="player"><label for="player">飞行员</label><br/><br />
<!-- -->
文件：<input type="file" name="file" id="file"> <br/>
<!-- -->
隐藏：
<input type="hidden" name="hidden" value="用户通过h5"> <br />
<!-- 用于展示年份和周数组成的日期 -->
<input type="week" name="week" id="week"><br />
<!-- reset 重置 不建议使用 -->
<input type="reset" value="重置">
<input type="submit" value="提交"> <br />
</form> select: 用于表示列表 或者下拉列表
multiple 指定控件类型（列表 或者下拉列表）是否可以多选
size 如果multiple生效，size表示同时展开的行数
name: 用来表示组件的名字
option 用于表示选项 包含在select中
disabled 表示禁用组件 禁用组件的值不能被提交
selected 默认被选中的项
value 定义控件的初始值 提交表单时，初始值会被提交
optgroup 包含option形成的选项组
label 只选项组的名称 包含在select或optgroup中
<form action="" method="get">
<!-- 下拉菜单 -->
列表： <select name="select" id="select" multiple size="2">
<option value="value">value1</option>
<option value="value">value2</option>
<option value="value">value3</option>
<br/>
</select> 下拉列表： <select name="select" id="select">
<!-- 选项组 -->
<optgroup label="水果">
<option disabled selected value="">请选择</option>
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
</optgroup>
</select>
<br />
<input type="submit" value="提交">
</form>fieldset:对表单中的控件或标签进行分组
legend标签：分组的标题
属性：disabled 直接禁用整个分组
<form action="" method="GET">
<fieldset>
<legend>个人信息</legend>
姓名：<input type="text" name="name" id="name"> 密码：
<input type="password" name="password" id="password">
</fieldset>
<input type="submit" value="提交">
</form>
textarea 设置文本框 没有value属性
row 文本框的初始行数
cols 文本框的初始列数
disabled 禁用
readonly 只读 但是可以提交
name
<form action="" method="get">
<textarea name="text" id="text" cols="30" rows="10" readonly>请输入文本内容</textarea>
<input type="submit" value="提交">
</form>progress 进度条
max 默认值是1
value 0~1之间 小数
<form action="" method="get">
<progress value="0.1"></progress>10%
</form>output 表示计算或用户操作的结果。
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" /> +
<input type="number" name="a" value="10" /> =
<output name="result"></output>
</form>
meter meter>元素用来显示已知范围的标量值或者分数值
datalist 包含了一组<option>元素，这些元素表示其它表单控件可选值.
表示其他控件可用的值
到select做对比
1.select选中后显示的是文本内容 datalist显示value
2.提交的时候都是提交value
3.在Firefox上只显示内容，而在chrome上显示的是内容和value
H5中对input的扩展
<form action="" method="GET">
<meter value="70" min="0" max="100" low="60" high="90"></meter>70
<meter value="95" min="0" max="100" low="60" high="90"></meter>95
<meter value="20" min="0" max="100" low="60" high="90"></meter>20
<br/>
<input list="myData" name="myData">
<datalist id="myData">
<option value="1">第一天</option>
<option value="2">第二天</option>
<option value="3">第三天</option>
<option value="4">第四天</option>
<option value="5">第五天</option>
</datalist>
</form>
