表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素以及其它块级元素

表单用于向服务器传输数据。

<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>

标签属性

name

<form action="form_action.asp" method="get" name="myForm"></form>//Form 标签元素自身并没有数据传输,它的 name 属性只是提供了一种在脚本中引用表单的方法
获取form:
document.forms[formName] //得到页面中相应name的表单
document.formName;//最为常用的一种方式
document.getElementById(formId);
document.forms[i]  //得到页面中的第i个表单
document.getElementsByName("name名称");

accept-charset

<form accept-charset="value"> //规定服务器用哪种字符集处理表单数据,如需规定一个以上的字符集,使用逗号来分隔各字符集。

常用值:

  • UTF-8 - Unicode 字符编码
  • ISO-8859-1 - 拉丁字母表的字符编码
  • gb2312 - 简体中文字符集

action和method

<form action="form_action.asp" method="get"></form>//action:表单提交目标服务器地址,method:以什么方式提交,共有两种方法:POST 方法和 GET 方法

action可能的值:

  • 绝对 URL - 指向其他站点(比如 src="www.example.com/example.htm")
  • 相对 URL - 指向站点内的文件(比如 src="example.htm")

method数据传输过程:

采用 POST 方法,浏览器将会按照下面两步来发送数据。首先,浏览器将与 action 属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器就会按分段传输的方法将数据发送给服务器。

采用 GET 方法,这时浏览器会与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据:浏览器会将数据直接以?拼接在表单的 action URL 之后

ttp://www.example.com/example/program?x=28&y=66

采用post还是get?

  • 为获得最佳表单传输性能,可以采用 GET 方法发送只有少数简短字段的小表单。
  • 一些服务器操作系统会限制其数目和长度,对那些有许多字段或是很长的文本域的表单来说,就应该采用 POST 方法来发送
  • 想服务器端的表单处理简单点就用GET 方法。如果采用 POST 方法,就要在读取和解码方法做些额外的工作。
  • 如果安全性是个问题,那么我们建议选用 POST 方法。GET 方法将表单参数直接放在应用程序的 URL 中,这样网络窥探者可以很轻松地捕获它们,还可以从服务器的日志文件中进行摘录。如果参数中包含了信用卡帐号这样的敏感信息,就会在不知不觉中危及用户的安全。而 POST 应用程序就没有安全方面的漏洞,在将参数作为单独的事务传输给服务器进行处理时,至少还可以采用加密的方法。
  • 如果想在使用比如像a标签之类的发起请求,而且包括向其传递参数的过程,就要采用 GET 方法,因为该方法允许把表单这样的参数包括进来作为 URL 的一部分

注意分隔参数所用的 & 符号是字符实体中的插入符号

<a href="http://www.example.com/example/program?x=28&y=66">

enctype

<form action="form_action.asp" enctype="text/plain"></form>//enctype:规定在发送到服务器之前应该如何对表单数据进行编码。

enctype 属性可能的值:

  • application/x-www-form-urlencoded(默认)
  • multipart/form-data   (不对字符编码,用于发送二进制的文件,在使用包含文件上传控件的表单时,必须使用该值)
  • text/plain  (空格转换为 "+" 加号,但不对特殊字符编码。)

autocomplete

<form action="demo_form.asp" method="get" autocomplete="on"></form>//当用户开始输入时,浏览器基于之前输入过的值,显示出填写的选项。

autocomplete 属性适用于 <form>,以及下面的 <input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。

autocomplete属性可能的值:

  • on (启用自动完成功能)
  • off (禁用自动完成功能)

novalidate

<form action="demo_form.asp" novalidate="novalidate"></form>//当提交表单时不对其进行验证。

novalidate 属性适用于:<form>,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, range 以及 color。

target

<form action="form_action.asp" method="get" target="_blank"></form>//规定在何处打开 action URL。

target属性可能的值:

  • _blank(在新窗口中打开)
  • _self  (默认。在相同的框架中打开)
  • _parent  (在父框架集中打开)
  • _top (在整个窗口中打开)
  • framename (在指定的框架中打开)

ajax模拟表单提交

有时候前台的数据提交到后台,不想使用form表单上传,希望通过Ajax上传。

使用场景:

1、使用其他标签代替input标签写样式比较方便

2、在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化。一般这种异步的操作,我们都会想到ajax方式

怎么模拟,戳链接:

ajax提交表单、ajax实现文件上传

使用ajax提交form表单,包括ajax文件上传

另外附上个人一次使用formData开发的经验总结文章:移动端开发遇到的问题之:表单

表单相关标签之form标签的更多相关文章

  1. angular4 Form表单相关

    ng4中,有两种方式去声明一个表单 一:Template-Driven Forms - 模板驱动式表单   [引入FormsModule] 1.ngForm赋值 [可以方便的获取表单的值] <f ...

  2. django 表单系统 之 forms.Form

    继承forms.Form实现django表单系统 参考: https://www.cnblogs.com/zongfa/p/7709639.html https://www.cnblogs.com/c ...

  3. C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件(Form Controls) C#串口通信程序

    C#中缓存的使用   缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可:  <%@ Outp ...

  4. ajax表单提交插件jquery.form.js的运用

    该插件提交的数据包含上传的图片. 1.先导入jquery.form.js 2.form表单的元素: <form id="form2_form" method="po ...

  5. Ajax表单提交插件jquery form

    jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...

  6. PhpForm表单相关的超全局变量操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 表单相关标签之input标签

    用于搜集用户信息. <input type="text" name="fname" /> 标签属性 type 规定 input 元素的类型.输入字段 ...

  8. form表单以及内嵌框架标签

    今关于今天所学习的东西又复杂又简单,上午学习了form表单,也是挺简单的:搭配table表格使用也是非常熟练. 下午讲了讲给网页内嵌框架标签以及在内嵌框架标签中添加其他的网页:还有在内嵌框架标签中添加 ...

  9. html表单相关标签及属性

    1.<form>标签 定义整体的表单区域 action属性 定义表单数据提交地址 method属性 定义表单提交的方式,一般有“get”方式和“post”方式 2.<label> ...

随机推荐

  1. js 判断所选时间(或者当前时间)是否在某一时间段的实现代码

    var time_range = function (beginTime, endTime, nowTime) { var strb = beginTime.split (":") ...

  2. 激活miniconda2环境,出现activate命令不存在的解决方案(activate: No such file or directory)

    miniconda2版本比较低时会出现这种报错,通过更新miniconda2就可以解决这个问题,用到的命令行: /path/to/miniconda2/conda update conda 参考链接: ...

  3. python之OpenCv(二)---保存图像

    1.使用opencv保存图像 cv2.imwrite(存储路径,图像变量[,存盘标识]) 存盘标识: cv2.CV_IMWRITE_JPEG_QUALITY  设置图片格式为.jpeg或者.jpg的图 ...

  4. (线性dp,最大连续和)Max Sequence

    Max Sequence Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 18511   Accepted: 7743 Des ...

  5. nginx安装配置: configure命令

    configure命令用来配置nginx编译环境. 该命令定义了系统各方面功能,包括允许nginx使用的连接处理方式. 其执行结果是生成一个Makefile文件. configure命令支持如下参数: ...

  6. 1.1实战项目:电影周周看V1(初识小程序)

    第一小程序的实战项目: 覆盖的小程序技术: 讲解方式: 学习方法:

  7. PV、UV、UIP、VV、CPC、CPM、RPM、CTR解释

    PV.UV.UIP.VV.CPC.CPM.RPM.CTR 具体解释 PV:Page View,页面访问量,也就是曝光量. UV:Unique Visitor,独立访客数,同一个访问多次访问也只算1个访 ...

  8. 怎么正确的回滚git的代码?

    1. git reflog或者git log查看到节点的hash值 2. git reset滚回某个节点 1)如果想保留当前的代码用 git reset --mixed ${Hash} 2)如果想联通 ...

  9. NorFlash 学习

    目录 NorFlash 学习 NOR/NAND Flash的差别 引脚接口 命令 参数识别(CFI) 写数据 程序设计 程序优化 其他设计点 title: NorFlash 学习 tags: ARM ...

  10. JAVA核心技术I---JAVA基础知识(数据结构基础)

    一:数组 (一)基本内容是与C一致的 (二)数组定义和初始化 (1)声明 int a[]; //a没有new操作,没有被分配内存,为null int[] b; //b没有new操作,没有被分配内存,为 ...