标签：range submit 包含 focus mit 使用 w3c let 提交
表单<form></form>
<form></form>
一. 表单form的两个重要属性
1.action 表示表单提交的服务器地址
<form action=""></form>
2.method 表单提交数据的方式，有post和get两个可选值
<form action="" method="get"></form>
<form action="" method="post"></form>
3.[get和post的区别]
>>> get通过url传递数据，所有内容在url可以看到，而post无法看到。
>>> get传递数据不安全，而post传递数据安全。
>>> get能够传递的数据量是有限的，而且只能传递文本信息。post可以传递大量信息，并且可以传递图片、文件等其他内容。
>>>get的传输速度要比post快。
4.[get使用url传递数据的格式]
>>> http://url地址.html?name1=value1&name2=value2 百度搜索的时候用的get
>>> 用?表示参数传递的开始，多个参数之间用&符号链接，同一个参数用name来标识value。
当你使用百度搜索html时uml会变成这样：
https://www.baidu.com/s?wd=html&rsv_spt=1&rsv_iqid=0 我们可以看出百度搜索框的名字叫wd
>>> 所以使用表单时，input输入框的name属性一定不能省略。
>>> 如果省略input的name属性，那么这个input的数据不会往后台传送。
二. input的常用属性
1.type:声明input输入框是什么属性
<input type="text"/>
2.name:给input输入框起名字。传递数据时，使用name=value的形式传递。
<input type="text" name="user"/>
3.value:input输入框的默认值。
<input type="text" name="uer" value="username"/>
4.placeholder：输入框的提示文本。当输入框为空时，显示。当输入框有value时，消失。
<input type="text" name="user" value="username" placeholder="请输入用户名"/>
三.type的常用属性
1.text:表示input为文本输入框，输入的内容正常显示。
<input type="text"/>
2.password：表示input为密码输入框，输入的内容为小黑点。
<input type="password" />
3.submit:表示input会显示为提交按钮，点击可以提交整张表单。
<input type="submit"/>
4.radio:表示input为单选输入框，显示为单选空心圆圈
>>> radio标签的value属性不能省略，往后台传递值时传递的是value中的值。
>>> radio标签凭借name属性来判断是否为同一组标签，name相同为同一组，同一组当中只能选择一个。
>>> 使用checked="checked"可以设置默认选中项，这种属性名等于属性值的写法，可以省略属性值。例如：
性别<input type="radio" name="sex" value="男" checked/>
<input type="radio" name="sex" value="女" />
<input type="radio" name="sex" value="不明" />
5.checkbox:表示复选框，其他要求与radio相同。
爱好<input type="checkbox" name="city" value="吃" checked />
<input type="checkbox" name="city" value="喝" />
<input type="checkbox" name="city" value="玩" />
<input type="checkbox" name="city" value="乐" />
6.file:表示文件上传框，点击可以选择文件上传。
<input type="file" />需要后台
7.disabled="disabled" 设置input禁用，一旦使用了disabled禁用的输入框，在传递数据时，将不在往后台传递。
<input type="password" disabled="disabled" />
8.hidden="hidden" 隐藏输入框，隐藏的内容依然可以向后台传递。
<input type="hidden" name="hidden" value="111" />这时当我们提交表单时，hidden可跟着提交
四.select下拉选择区块
1.<select></select>标签中有多个选项，用<option></option>表示
<select name="" id="">
<option value=""></option>
</select>
2.一个<select></select>组合只能有一个name,所以使用的时候需给<select></select>标签起name，而不能给option起。
3.option标签，如果有value值，则传递数据时将传递value的属性值，如果没有value属性，则传递时讲传递<option></option>标签中的文字。
4.option标签的 title属性表示 鼠标指向后显示的文字。
5.给option标签加上 selected 表示 默认选中项。
6.给select标签加 multiple 表示这个下拉框可以多选，但是这个属性几乎不用。
7.optgroup 用于所有的option标签进行分组，使用label表示组名
所以完整的select下拉结构如下：
<select name="city">
<optgroup label="group1">
<option selected>111</option>
<option>222</option>
</optgroup>
<optgroup label="group2">
<option>333</option>
<option>444</option>
</optgroup>
</select>
五.textarea 文本域
1.文本域可以使用属性cols 和 rows 设定宽高，但是我们几乎不用。
我们使用style="height:50px;width:250px;"设定大小。
<textarea cols="200px" rows="200px">这是一个文本域</textarea>
<textarea style="height:50px;width:250px;"></textarea>
2.使用css样式style="resize:none;"设定文本域的大小不允许拖动和缩放。
<textarea style="resize: none;"></textarea>
3.使用属性readonly="readonly" 设置只读模式，不允许修改。
<textarea readonly="readonly" style="height: 50px;width: 250px; resize: none;"></textarea>
4.使用css样式 overflow 用于设置超出区域的文字如何显示
可选值有三个：
hidden：超出区域的文字默认直接隐藏，无法看到。
scroll：无论文字多少，都会显示水平和垂直方向的滚动条。
auto：默认效果，文字少的时候没有滚动条，文字多的时候自动显示垂直滚动条。
<textarea readonly="readonly" style="height: 50px;width: 250px; resize: none; overflow: auto;"></textarea>
这里我们一般使用auto比较简单美观。
也可以使用overflow-x overflow-y 单独设置水平方向滚动条和垂直方向滚动条是否显示。
只显示垂直方向滚动条:<textarea style="overflow-x: hidden;overflow-y: scroll;"></textarea>
只显示水平方向滚动条:<textarea style="overflow-x: scroll;overflow-y: hidden;"></textarea>
六. HTML5智能表单
1.h5为我们提供了input与form关联的信访室，并不要求input必须包含在form里面
如果input在form外面，只要给form标签一个id，让input标签通过form属性关联这个id，即可以实现form与input的关联。
<form id="form1"></form>
<input form="form1" name="" />
2.H5给我们提供了一系列新的input的type类型：
date number url email range color
3.H5 提供了input新属性：
placeholder：输入框默认提示内容
<input type="text" name="username" placeholder="请输入你的用户名" />
form：让表单外面的input关联表单id，实现input与form表单的关联
required:设置input为必填
<input type="text" name="nm" placeholder="请输入你的姓名" required="required" />
autofocus:设置input自动获得焦点
<input type="text" name="username" placeholder="请输入你的用户名" autofocus="autofocus" />
光标自动指向用户名
autocomplete:关闭自动提示完成功能。此功能浏览器会默认开启，设置为off关闭，设置为on打开。
可以给form整张表单设置autocomplete属性，整张表单自动完成功能是否开启，如有个别的input，可以单独在设置。
w3c 万维网联盟
标签尽量语义话 项目列表 就用列表 标签 而不是用p标签 便于搜索引擎 搜索
调整样式统一用css 分离 内容和表现分离
font size＝7 ＝》 h1
1 内容结构和表现样式分离（ html 和 css）
内容和行为分离（html 和 javascript）
2 html表现结构语义化
3 代码书写的规范
标签全部用小写
html 必须闭合
属性值必须用引号引起来
标签必须正确嵌套，不可交叉
标签：range submit 包含 focus mit 使用 w3c let 提交
原文地址：http://www.cnblogs.com/shihaojia/p/7071814.html
