HTML Form 表单的简单使用

概述

HTML中

元素被用来表示一个区域，该区域中的控件，可以用来向服务器提交数据。

常用属性

• action: 表示处理form的URL。
• method: 表示提交表单的方法
• enctype: 提交form给服务器的内容的 MIME 类型。
  • application/x-www-form-urlencoded: 如果属性未指定时的默认值
  • multipart/form-data: 这个值用于一个 type 属性设置为 file 的 元素
  • text/plain (HTML5)
  • target: 一个名字或者说关键字，用来指示在提交表单之后，在哪里显示收到的回复。

method方法中 POST和GET区别

GET是向服务器获取数据，POST是向服务器上传数据。

• 数据提交方式

  使用GET，数据被拼接成URL向服务器发送请求 如http://test.com/login?user=admin&password=123
  使用POST, 数据被包装在请求的body中向服务器发送请求。

• 安全性

POST的安全性高于GET,因为GET的数据会直接显示在URL里面

• 编码

GET只能发送ASCII字符，POST可以则可以发送整个ISO 10646中的字符。在Form中的enctype中，当属性为`multipart/form-data`,（form 数据中包含文件),只能使用POST

• 提交的数据长度

  GET提交的长度为2083个字符，受制于URL的长度。

• 缓存

  GET提交的记录会被浏览器缓存。在历史记录中。

  表单常用的input标签

  form表单的作用可以收集信息，提交给网站后台。常用的input标签如下：

  • text: 单行字段。
  • password: 一个值被遮盖的单行文本字段，使用maxlength可以指定输入的值的最大长度。
  • checkbox: 复选框。使用value属性定义控件被提交的值。使用checked属性表示控件是否被选择。
  • radio: 单选按钮，使用value属性定义控件被提交的值。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。
  • file: 可让用户选择文件。accept属性控制可以选择文件的类型。
  • hidden: 不显示在页面的上的控件，但是值会被提交到服务器。
  • button: 无缺省行为的按钮。
  • submit: 用于提交表单的按钮
  • reset: 用于将表单所有内容设置为缺省值的按钮

  代码示例

  
  
  姓名：
  
  
  
  密码：
  
  
  
  性别：
  男
  女
  
  
  取向：
  男
  女
  
  
  爱好：
  dota
  旅游
  宠物
  
  
  评论：
  
  
  
  我的Car:
  
    宝马
    奔驰
    奥迪
  
  
  
  
  

  其他

  • 元素中for属性表示，当点击label时，for对应id的元素会被focus。