前面我们讲了HTML的各种数据输入方式,数据输入之后,一般来说应该提交给后台处理,HTML通过表单form来提交数据。

form包含1个或多个数据输入,如input,单选,复选,文件等等

form将其包含的输入项,打包提交给后台

form常用的2个属性action,method

一个注册表单如下,此表单包含3个输入项,用户名,密码,邮箱,1个提交按钮,点击提交按钮后,数据将以post方式,传给/test/form.php进行处理:

用户名:

密码:

邮箱:

form-属性actionaction属性定义了处理表单的页面,一般为后台页面

action为空则由当前表单页面进行处理

form-属性methodmethod定义提交表单时所用的 HTTP 方法(get 或 post)

何时使用 GET?表单默认通过get方式提交数据

提交数据量较少时,可以选择get方式

当您使用 get 时,表单数据在页面地址栏中是可见的,因此涉及隐私等重要数据时,不适合get方式

如下代码,点击提交时,数据在浏览器地址栏中可见,

/test/form?username=**&password=**&email=**

用户名:

密码:

邮箱:

用户名:

密码:

邮箱:

可以看到,点击提交后,地址栏中显示了输入的密码,因此涉及密码等隐私数据,不能使用get方式传递数据

何时使用 POST?如果表单包含敏感信息(例如密码)

如果表单包含大量的数据,如文章

如果表单包含文件上传

POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。

用户名:

密码:

邮箱:

用户名:

密码:

邮箱:

form-属性enctypeenctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

一般form可以不填写该属性

默认地,表单数据会编码为 "application/x-www-form-urlencoded"。就是说,在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值)。

在使用包含文件上传控件的表单时,必须设置enctype="multipart/form-data"

值描述

application/x-www-form-urlencoded在发送前编码所有字符(默认)

multipart/form-data不对字符编码。

在使用包含文件上传控件的表单时,必须使用该值。

text/plain空格转换为 "+" 加号,但不对特殊字符编码。

form属性列表:属性描述

accept-charset规定在被提交表单中使用的字符集(默认:页面字符集)。

action规定向何处提交表单的地址(URL)(提交页面)。

autocomplete规定浏览器应该自动完成表单(默认:开启)。

enctype规定被提交数据的编码(默认:url-encoded)。

method规定在提交表单时所用的 HTTP 方法(默认:GET)。

name规定识别表单的名称(对于 DOM 使用:document.forms.name)。

novalidate规定浏览器不验证表单。

target规定 action 属性中地址的目标(默认:_self)。

form.html,HTML表单form相关推荐

  1. html表单对于网页目地,html - 表单form

    一.表单 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select. ...

  2. html css移动form表单位置,表单form的研究

    起因 最近经常在群里看到诸如以下这些问题: 怎么按键盘的Enter键提交表单呢? 移动端怎么聚焦时让键盘变成数字键呢? 移动端如何绑定键盘右下角[提交按钮]事件? 移动端键盘右下角[提交]如果换成[搜 ...

  3. Jquery提交表单 Form.js官方插件介绍

    來源:http://hi.baidu.com/dereky/blog/item/f9e8ab64c52f4ff3f736540c.html [JQuery框架应用]:form.js官方插件介绍 For ...

  4. elementUI弹框form多元素表单问题 - 抛砖篇

    疑问1:elementUI的这个MessageBox弹框能否添加多个表单元素? 疑问2:如果能添加多个,怎么添加? 疑问3:使用el-dialog组件如何调用? 通过上述实践,总结发现还是使用el-d ...

  5. 前端:JS/32/form对象(表单)(form对象的属性,方法和事件),受返回值影响的两个事件(onclick事件,onsubmit事件),获取表单的元素对象的三种方式,表单的提交和验证方法总结

    form 对象(表单) 一个<form>标记,就是一个<form>对象: 1,form对象的属性 name :表单的名称,主要用来让JS来控制表单: action :表单的数据 ...

  6. web之表单form

    表单是我们平常编写Web应用常用的工具,表单(<form>)用来收集用户提交的数据,发送到服务器.比如,用户提交用户名和密码,让服务器验证,就要通过表单.表单是一个包含表单元素或控件的区域 ...

  7. html表单代码原理,HTML表单form

    源码下载 窗口HTML结构 账号:密码: 代码解析 最外层父元素form是块元素,form表单的属性action.method.name都是关于http通信功能的属性,不影响表单form块元素的布局和 ...

  8. DHTMLX 前端框架 建立你的一个应用程序 教程(八)-- 添加表单Form

    添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮 可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...

  9. HTML超文本标记语言(八)——表单form

    一.表单<form>标签及其属性 HTML表单用于收集用户输入.基本格式如下: <form>. form elements. </form> 表单元素指不同类型的i ...

最新文章

  1. SQL Server 插入含有中文字符串出现乱码现象的解决办法
  2. Python:使用threading模块实现多线程(转)
  3. 【周记:距gdoi43天】
  4. Oracle意外赢官司,程序员或过苦日子
  5. win98万能显卡驱动_万能显卡驱动下载
  6. VC 2012 visualstudio的项目属性表 .props文件
  7. 简单理解匈牙利KM算法
  8. 大多数Nobody游戏下载(带象棋残局攻略) 中文破解版
  9. Data Management Platform 数据管理平台全接触
  10. 燕十八PHP公益课堂学习笔记
  11. Android 实现指南针效果
  12. 宝山区企业技术中心、区级工程技术研究中心给予奖励20万元
  13. 自由了!在字节跳动做码农6年后,28岁郭宇宣布退休!
  14. 目标检测中anchor的概念
  15. 计算机硬件系统-CPU中的寄存器
  16. Java核心技术 卷1-总结-11
  17. 家居安防与监控全国产化电子元件推荐方案
  18. 安装软件时提示:Error 1324. The path My Documents contains a invalid character
  19. editplus终极爆破修改版:
  20. win10 内存或系统资源不足,无法打开PPT

热门文章

  1. linux文件的时间格式
  2. Getting Started with the Table Component
  3. IP SLA的路径控制
  4. Android Studio出现Failed to open zip file. Gradle's dependency cache may be corrupt问题的解决
  5. Diango博客--13.将“视图函数”类转化为“类视图”
  6. java如何限制输入值_[限制input输入类型]常用限制input方法
  7. python自学网站需要多长时间-怎么自学python,大概要多久?
  8. django后台多页面分页逻辑python代码
  9. 驱动框架3——在内核中添加或去除某个驱动
  10. 衰落信道中的平均信噪比和瞬时信噪比