3. HTML form表单的用法

form表单的作用：

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法：<form method="传送方式" action="服务器文件">
注意事项：

<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
method ：数据传送的方式（get/post）。

常见的input标签:

submit 用于数据提交
text 可输入文本
password 用于输入密码，输入内容会呈现为小圆点，进行隐藏
checkbox 多选框
radio 多选框
select 下拉选择并和 option标签一起使用
file 上传文件
hidden 隐藏组件
bottom 按钮
reset 重置表单

get与post的差别：

本质上的区别是语义的区别，根据HTTP规范，GET的语义是请求获取指定的资源。GET方法是安全、幂等、可缓存的。POST的语义是根据请求负荷（报文主体）对指定的资源做出处理，具体的处理方式视资源类型而不同。POST不安全，不幂等，（大部分实现）不可缓存。具体差别如下：

get在后退刷新时是无害的，post会重新提交请求；
get参数通过URL传递，post放在Request body中；
get请求参数保留在浏览器历史记录中，post参数不会保留；
get产生的URL地址可以被存为书签，而post不可以；
对参数的数据类型，get只接受ASCII字符，而post没有限制；
get比post更不安全，因为发送的数据显示在URL上，在发送密码或其他敏感信息时绝不要使用get;
get请求只能进行url编码，而post支持多种编码方式。

input中name的作用：

将name属性相同的分为一组，对提交的表单数据进行标识。通过不同的name区别提交的value值是什么
在单选按钮中，name值相同的单选按钮被归为一组，在该组中只有一个按钮的checked属性为true。
总的来说，input的name属性用于提交一个form表单数据时，对数据的引用：
如<input type="text" name="text"/>用GET方式发送数据时，你能在URL地址中看到xxx.html?text=123
可以用于CSS中设置该类name值的元素的样式。
通过js的document.getElementsByTagName("atext")和jQ的$(".atext")等可以获取name属性值为atext的元素对象。

radio 如何分组?

通过name属性来分组，name值相同的单选按钮被归为一组。例如：

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

前两个为一组，name为sex；后两个为一组，name为sex1。

placeholder 属性的作用：

placeholder 属性提供可描述输入字段预期值的提示信息（hint），设置之后在输入框显示灰色提示文字。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

type=hidden隐藏域的作用：

表单隐藏域在页面上对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。通过隐藏域设置验证信息，用户提交信息后，隐藏域的数据也被提交到后台，后台进行校验，提高安全性。

例如可以用来防止CSRF攻击。如果是非法用户恶意提交表单的话，value里的值对不上，服务器会拒绝该请求。

用法实例：

文本输入框、密码输入框

<form  method="post" action="save.php">
    账户: 
    <input type="text" name="myName" />
    <br>
    密码: 
    <input type="password" name="pass" />
</form>

文本域，支持多行文本输入

<form  method="post" action="save.php">
        <label>联系我们</label>
        <textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>

使用单选框、复选框，让用户选择

<form action="save.php" method="post" >
    <label>性别:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender" checked"/>
    <label>女</label>
    <input type="radio" value="2"  name="gender" />
</form>

使用下拉列表框，节省空间

<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物" selected="selected">购物</option>
    </select>
</form>

<form action="save.php" method="post" >
    <label>爱好:</label>
    <select multiple="multiple">
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物" selected="selected">购物</option>
    </select>
</form>

使用提交按钮，提交数据

<form  method="post" action="save.php">
    <label for="myName">姓名：</label>
    <input type="text" value=" " name="myName " />
    <input type="submit" value="提交" />
</form>

使用重置按钮，重置表单信息

<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
    <input type="submit" value="确定"  />
    <input type="reset" value="重置"  />
</form>

form表单中的label标签

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

语法：
<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

<form>
   <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <br />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>