HTML 表单用法

表单是一个包含表单元素的区域
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
表单元素必须包含在form标签内 才能被提交至服务器

hidden的作用：

<input type="hidden" value="xxx" />

1.传递数据 但不让用户看到
2.安全策略 防止伪造页面 ，可以用hidden值做校验 阻止csrf攻击

form标签是表单的外壳，有以下属性

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.....

</form> 

属性	描述
accept-charset	被提交表单中使用的字符集（默认：页面字符集）。
action	表单提交的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	被提交数据的编码（默认：url-encoded）。
method	提交表单时所用的 HTTP 方法（默认：GET）。
name	识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	浏览器不验证表单。
target	action 属性中地址的目标（默认：_self）。

method：提交保单时所用的 HTTP 方法（GET 或 POST）

<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">

• GET（默认方法）：如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，适合用GET方法。get方法时，输入值会以name=value的形式更新在url的后面，安全性差，输入的内容量受到限制。
• POST：如果表单正在更新数据，或者包含敏感信息（例如密码），适合用POST方法。使用 POST方法，输入值不会更新在url中显示，安全性高，输入的内容量受限制小。

常用input标签的type及作用：

text 单行文本框
password 密码框
checkbox 多选组件
radio 单选组件
file 上传文件
hidden 隐藏组件
submit 提交数据按钮
button 普通按钮
reset 重置按钮

label标签

<label> 标签为 input 元素定义标注（标记）。

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

<label> 标签的 for 属性应当与相关元素的 id 属性相同。"for" 属性可把 label 绑定到另外一个元素。

demo

name 属性以name=value的形式对提交到服务器后的表单数据进行标识。check和radio靠相同的name值分组；
注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

<form action="xxx.php" method="post">
  <h3>输入框</h3>
  <label for="input_username">用户名：</label> <input id="input_username" name="username" type="text" placeholder="输入用户名" autofocus value="sss"/>
  <br/>
  <label for="input_pass">密码：</label> <input id="input_pass" name="password" type="password" placeholder="输入密码" />
  <br/><br/>

  <h3>单选框</h3>
  <label for="ck1">ra1：</label><input type="radio" id="ra1" name="ra" value="1" />
  <br/>
  <label for="ra2">ra2：</label><input type="radio" id="ra2" name="ra" value="2" />
  <br/>
  <label for="ra3">ra3：</label><input type="radio" id="ra3" name="ra" value="3" />
  <br/>
  <label for="ra4">ra4：</label><input type="radio" id="ra4" name="ra" value="4" />
  <br/><br/>
  <label for="ck5">ra5：</label><input type="radio" id="ra5" name="radio" value="1" />
  <br/>
  <label for="ra6">ra6：</label><input type="radio" id="ra6" name="radio" value="2" />
  <br/>
  <label for="ra7">ra7：</label><input type="radio" id="ra7" name="radio" value="3" checked="checked" />
  <br/>
  <label for="ra8">ra8：</label><input type="radio" id="ra8" name="radio" value="4" />
  <br/><br/>


  <h3>复选框</h3>
  <label for="ck1">CK1：</label><input type="checkbox" id="ck1" name="ck" value="1" />
  <br/>
  <label for="ck2">CK2：</label><input type="checkbox" id="ck2" name="ck" value="2" checked />
  <br/>
  <label for="ck3">CK3：</label><input type="checkbox" id="ck3" name="ck" value="3" />
  <br/>
  <label for="ck4">CK4：</label><input type="checkbox" id="ck4" name="ck" value="4" />
  <br/><br/>

  <h3>File</h3>
  <input type="file" accept="image/gif, image/jpeg"/>
  <br/><br/>

  <h3>image 按钮</h3>
  <input type="image" src="xxx.jpg" alt="Submit Form"/>
  <br/><br/>

  <h3>隐藏域</h3>
  <input type="hidden" value="xxx" />
  <br/><br/>
  =

  <h3>下拉菜单</h3>
  <select id="input_select">
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <br/><br/>

  <h3>多行文本</h3>
  <textarea cols="60" rows="5">123</textarea>
  <br/><br/>

  <input type="button" value="Button" />   
  <input type="submit" value="Submit" />    
  <input type="reset" value="Reset" />
</form>