1.表单作用
传统意义上来说，“表单”这个词是指一个打印的文档，这个文档中含有一些空白区域供用户填写。
HTML利用表单这个概念定义一类元素，这些元素可以为网站收集来自访问者的信息，例如搜索框，个人信息注册等
——参考自《HTML&CSS设计与构建网站》by Jon Duckett
2.HTML表单常见标签及用法
- <form>
<form action="/getInfo" method="get">
......
</form>
创建一个表单时，用form规划一个表单的有效范围，在form之外的标签收集的信息，是无法提交到后台的
两个属性：
- action：数据提交给后台的地址；
- method：数据提交给后台的方式，get和post
- get：
表单中的值被附加在由action特性所指定的URL末尾，get方法适合以下情形：
- 短表单，例如搜索框
- 只从Web服务器上检索数据的情形，不发送需要改动数据库的数据；
- post：
使用post，表单中的值被放在http头信息中国进行发送，从经验来说，如果表单存在以下情况，需要使用post：
- 允许用户上传文件；
- 非常长；
- 包含敏感信息，如密码；
- 向数据库添加信息，或从数据库中删除信息；
总结来说，get用于向后台索要数据，安全性低；post用于向后台提交数据，安全性高；
- Label标签与div包裹
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" value="user">
</div>
如上所示代码
首先，用div将实现一个功能的控件包裹起来，这样做既有利于代码的结构清晰，增强可读性，同时也便于利用class对控件进行样式的设计；
其次，label标签的For特性，与表单控件id相匹配，扩展了可单击区域，用户既可以通过单击表单控件，也可以通过单击与其相关联的标签控件进行选择。
- 表单控件的name和value属性
<input id="username" type="text" name="username" value="user">
如上所示代码，有两个属性，name和value
- name：每个表单控件都需要有一个name特性，这个特性的值对表单控件进行标识并与输入的信息一同传送给服务器；可以理解为name标识了提问的问题，说明了该控件回答的是哪个问题的答案；
另外需要注意的是，如果几个表单控件完成的是对同一个问题的回答，那么这几个控件的name要保持一致，如后面提到的复选框控件中所示； - value：value特性为选项指定了被选中时提交给服务器的值，每个选项应该各不相同，且与后台协定，这样后台才知道用户选了哪个选项。
- <input>
Input输入框，通过type属性，可以实现不同功能；
- 单行文本输入框
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" value="ruo">
</div>
文本输入框，type="text"，单行输入，name指明了提供的是username这个问题的答案
- 密码输入框
<div class="password">
<label for="password">密码</label>
<input id="password" type="password" name="password" placeholder="输入密码">
</div>
密码输入框，type="password"，也是单行输入的框，输入内容默认以圆点展示；placeholder用于展示提示，即便不输入值，也不会提交到后台
- 复选框
<div class="hobby">
<label>爱好</label>
<input type="checkbox" name="hobby" value="read"> 读书
<input type="checkbox" name="hobby" value="music"> 听歌
<input type="checkbox" name="hobby" value="study"> 学习
</div>
复选框，type=checkbox，允许选择多项既取消选择，里面各选项的name要保持一致，value对应各自要提交给后天的值
- 单选按钮
<div class="sex">
<label>性别</label>
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女"> 女
</div>
单选按钮，type=radio，只让用户从一系列选项中选择其中一个
如果name相同，那么只能选择一个，如果name不同，可以多选
注意：一旦选中某个单选按钮，便不能取消选中，用户只能选择另一个选项。如果只为用户提供了一个选项并且允许他们取消， 那么应该改用一个复选框来完成该功能
- 文件上传域
<div class="file">
<input type="file" name="myfile" accept="image/png">
</div>
文件上传域，accept用于筛选上传的文件类型，png类型文件;
- 提交按钮
<div class="submit">
<button>提交</button>
<input type="submit" value="Submit" /> 会提交
<input type="image" src="images/subscribe.jpg" width=”100” height=”20”/>
</div>
如上所示，有三种提交方法，分别是用button按钮，用submit的Input控件，以及可以用图片作为提价按钮的第三种用法
- 重置输入按钮
<div class="textarea">
<input type="reset" value="Reset" /> 重置输入
</div>
type="reset"，可以重置输入
- select下拉菜单
<div class="select">
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="hangzhou">杭州</option>
</select>
</div>
Select用于创建一个下拉表框；
option元素指定用户的可选项；
value用来指定选项值，发送到服务器；
selected用来指定页面被加载时被选中的选项，如果没有使用selected特性，那么页面加载时表框中显示的是第一个选项， selected=“selected”
- 多行文本框
<div class="textarea">
<textarea name="article">
多行文本，注意和 type=text的区别
</textarea>
</div>
用CSS来控制文本框的行数，列数，是否能拖动；
- 隐藏表单控件
<div class="textarea">
<input type="hidden" name="csrf" value="12345623fafdffdd">
</div>
隐藏的表单控件不会显示在页面上
设计人员可以通过向表单中添加用户看不到的值，可以利用隐藏字段来指出用户提交表单时位于哪个页面
也可用在安全策略上，通过hidden输入的value来做安全校验
参考：
[1] [Form 表单by 若愚@饥人谷] (http://book.jirengu.com/jrg-team/frontend-knowledge-ppt/HTML-Form%E8%A1%A8%E5%8D%95.md.html)
[2]《HTML&CSS设计与构建网站》by Jon Duckett
网友评论