HTML 表单秘籍

表单是什么?

从某种意义上来说，“表单”就相当于一份问卷，这份问卷有一些空白的地方需要你来填写答案。

例如

知乎登录

Google的搜索框

表单如何工作?

用户填写表单，然后单击一个按钮将所填信息提交到服务器，之后每个表单中的控件的名字和用户输入或选择的值将会被一同发送给服务器。

用户填写表单，然后单击提交

表单中所有控件的名字和对应值被服务器接收

form表单

1. form表单有什么作用？

用来为网站搜集来自访问者的信息，不论是要向网站加一个简单的搜索框，还是要创建更复杂的保险申请单，都可以通过form表单中的控件来完成。

2. <form>表单结构

action特性

每个<from>元素都应该设置action特性,其特性值是服务器上一个页面的URL，这个页面用来在用户提交表单时接收表单中的信息。

method特性

表单的提交可以采用以下两种方法

1. get

使用get方法时，表单中的值被附加在由action特性所指的URL末尾

用户名和密码都显示在URL的末尾

2. post

使用post方法时，表单中的值被放在HTTP头信息中进行发送。

URL没有显示被提交的数据

被提交的数据被放到了HTTP头信息中

ps:
1. get是用来从服务器上获得数据，而post是用来向服务器上传数据
2. get将表单中数据按照variable=value的形式，添加到action所指向的URL后面，并且两者用“？”连接，而各个变量之间用“&”连接；post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传到action所指向URL
3. Get方式并不安全，因为在传输过程中，数据被放在了请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，放在某个地方保存，这样就会被第三方看到。另外，用户也可以直接在浏览器上看到被提交的数据，一些系统内部消息将会一同显示在用户面前。Post的所有操作用户都是看不到的。
4. get传输的数据量小，因为URL的长度是有限制的；而post可以传输大量数据，所以在上传文件时，只能用post
5. get限制form表单的数据值必须为ASCII字符；而post支持整个ISO10646字符集。

get&post取舍

那么我们什么时候用get什么时候用post呢？

情况	方法
短表单例如搜索框	get
只从web服务器上检索数据的情况	get
用户上传文件	post
非常长	post
包含敏感信息（例如密码）	post
向数据库中添加或删除数据	post

ps:
1. 如果<form>中没有使用method特性表单中的数据将用get方式发送
2. 所有的表单控件都应位于<from>元素中。
3. 每个<from>元素都应该设置action特性，通常还要设置method特性和id特性。

 <form action="/getInfo" method="get">
 </form>

表单控件多种多样的input

<input>

input元素用来创建不同的表单控件，其type特性的值决定了它将要创建哪种控件
当用户向表单中输入信息时，服务器需要知道每条数据被输入到了哪个表单控件。

例如，在一个登录表单中，服务器需要知道哪条数据是作为用户名输入的，哪条数据提供的是密码。因此，每个表单控件都需要一个name特性，这个特性的值对表单控件进行标识并输入的信息一同传送到服务器。

单行文本框

当type特性的值为text时，<input>y元素会创建一个单行文本框

 <input id="username" type="text" name="username" value="ruo">

单行文本框效果

密码框

当type特性的值为password时，<input>y元素会创建一个用起来和单行文本框类似的文本框，唯一不同之处在于其中的字符被隐藏起来为的是让那些在用户背后旁观的人看不到想密码这样的敏感数据。
ps:在任何文本输入控件上，你还可以使用一个名为placeholder的特性，在用户单击文本输入区域之前，文本框内显示的文本就是placeholder的特性的值。

 <input id="password" type="password" name="password" placeholder="输入密码">

密码框效果

文本域（多行文本框）

<textarea>元素用来创建多行文本框。与其他input元素不同，<textarea>元素并非空元素，因此它包含起始标签和结束标签
页面加载时，在起始标签<textarea>和结束标签</textarea>之间出现的所有文本将显示在相应的文本框中。

 <textarea name="article">
         多行文本，注意和 type=text的区别
 </textarea>

文本域效果

单选按钮

单选按钮只让用户从一系列选项中选择其中一个
ps:

当一个问题以单选按钮的形式给用户提供一系列答案时，用来回答这个问题的所有单选按钮的name特性值都应该相同
value特性为选项指定了被选中时要发送到服务器的值，同一组中的每个按钮的值应该各不相同（这样服务器才知道用户选择了哪个选项）
checked特性用来指定当页面加载时哪个选项会被选中

      <input type="radio" name="sex" value="男"> 男
      <input type="radio" name="sex" value="女"> 女

单选按钮效果

复选框

复选框允许用户在回答一个问题时选择一个或多个选项
ps:

当一个问题以复选框的形式给用户提供一系列答案时，用来回答这个问题的所有复选框的name特性值都应该相同
value特性指定复选框在被选中时需要发送到服务器的值
checked特性用来指定当页面加载时哪个选项会被选中

      <input type="checkbox" name="hobby" value="read"> 读书
      <input type="checkbox" name="hobby" value="music"> 听歌
      <input type="checkbox" name="hobby" value="study"> 学习

复选框效果

下拉列表框

下拉列表框让用户在一个下拉列表中选择其中一个选项
ps:

name特性指定这个表单控件的名称，此名称与用户选择的选项值一并发送到服务器
<select>元素用来创建下拉列表框，它包含两个或者两个以上的<option>元素
<option>元素用于指定用户选择的选项，在起始标签<option>和结束标签</option>之间的文字将显示在下拉列表中
<option>元素使用value特性来指定选项的值，如果该选项被选中，那么这个值将于控件的名称一并发送到服务器
selected特性可以用来指定当页面加载时被选中的选项。如果未使用selected特性，那么在页面加载时，下拉列表框中显示的将是第一个选项。如果用户没有选择任何选项那么列表中的第一个项目将作为这个控件的值被传送到服务器
下拉列表框的功能与单选按钮的功能类似，在抉择这两种方式的时候要考虑以下两点
size特性的值是你希望一次显示的选项数量
multiple特性来允许用户从这一列表中选择多个选项

如果用户需要一眼看到所有的选项，那么当然单选按钮更合适一些
如果是一个非常长的选项列表（如国家列表），那么下拉列表框则更适合一些

<select name="city">
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="hangzhou">杭州</option>
      </select>

下拉列表框效果

文件上传域

如果你希望让用户上传文件（例如图像、视频、MP3或者PDF等），就需要使用文件域
ps:

type="file"这个类型的input会创建一个后面附有选择文件（Browse）按钮的类似文本框的控件，当用户单击按钮时会弹出一个新窗口，来让用户们在他们的计算机中选择文件来上传到网站
如果允许用户上传文件，那么<form>元素上的method特性值设置为post（HTTP get方式是不能发送文件的）

<input type="file" name="myfile"">

文件上传域效果

提交按钮

提交按钮用来将表单发送给服务器
ps:

value特性用于控制在按钮上的文本

<input type="submit" value="提交" />

提交按钮效果

隐藏控件hidden