表单相关标签之form标签

时间：2022-08-29 21:05:50

表单能够包含 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开发的经验总结文章：移动端开发遇到的问题之：表单

相关文章