HTML 表单用法

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

hidden的作用：

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

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）

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

常用input标签的type及作用：

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

label标签

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

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

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

demo

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

  
输入框
  用户名： 
  

  密码： 
  



  
单选框
  ra1：
  

  ra2：
  

  ra3：
  

  ra4：
  


  ra5：
  

  ra6：
  

  ra7：
  

  ra8：
  




  
复选框
  CK1：
  

  CK2：
  

  CK3：
  

  CK4：
  



  
File
  
  



  
image 按钮
  
  



  
隐藏域
  
  


  =

  
下拉菜单
  
    1
    2
    3
    4
  
  



  
多行文本
  123