HTML——表单

1.浏览器提交表单与服务器的交互过程：

问题：表单是什么？

HTML 表单是用于搜集不同类型的用户输入的，表单是一个包含表单元素的区域；表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素；表单使用表单标签（<form>）定义。

请参考：

https://www.cnblogs.com/sharpest/p/10068530.html

https://baike.baidu.com/item/%E8%A1%A8%E5%8D%95/5380322?fr=aladdin

2.表单的创建：

（1）使用<form>元素，以及在其间嵌入的相关元素（称为控件），就可以创建作为HTML文档一部分的表单。

（2）表单的基本语法：

<form method="get or post" action="URL">

……

</form>

（3）属性说明：

• （i）属性method：用于指定向服务器发送表单数据时所使用的HTTP方法，可以是get或post这两种方法的一种。

• Get:是缺省的方法，当采用get方法提交表单时，提交的数据被附加到URL（在属性action中指定）的末端，作为URL的一部分发送到服务器端。例如：我们指定action="reg.jsp",当提交表单后，在浏览器的地址栏中，我们会看到如下的信息： http://localhost:8080/reg.jsp?user=zhangsan&pwd=1234 
• 而post方法：是将表单中的信息作为一个数据块发送到服务器端。
• 无论是哪种方法，数据的编码都是相同的，格式为：name1=value&name2=value2

【他山之石】HTML表单中method属性： https://www.w3school.com.cn/tags/att_form_method.asp

①定义和用法:

• method 属性规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。
• 表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送。②

②method属性说明:

浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方法和 GET 方法。

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

在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。

•  另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method （方法）属性中指明表单处理服务器要用方法来处理数据，使 POST 还是 GET。

 

 （ii）属性action：   指定对表单进行处理的脚本的地址。也就是说，表单提交到服务器后，交由谁来处理，在action属性中指定处理者的URL。

【他山之石】HTML表单中action属性： https://www.runoob.com/tags/att-input-formaction.html

• action 属性规定当提交表单时，向何处发送表单数据。
• 语法：<form action="value">
• action的属性值填写方法

属性值：

 

值	描述
URL	规定当表单提交时处理输入控件的文件的 URL。 可能的值： 绝对 URL - 某个页面的完整地址（比如 href="http://www.example.com/formresult.html/index.php"） 相对 URL - 指向当前站点内的一个文件（比如 href="formresult.html/index.php"）

3.input对象下的多种表单表现形式：

页面中大部分表单的形式都是通过输入标记input来实现的

• <input>元素：用于接受用户输入的信息
• <input>元素是一个带有属性的空元素，用来创建表单中的控件，其语法是：

<input type="type" name="name" size="size" value="value">

说明：

• A.属性type：用来指定要创建的控件的类型。
• B.属性name:用来指定控件的名称，处理表单的服务器端脚本可以获得以名称-值对所表示的表单数据，利用名称，可以取出对应的值。

name属性在表单中并不显示。

【他山之石】：

• name表示输入数据的名字，其作用是为了让程序明白所提交的数据

例如：

<input type="text" name="length">   这个输入的数据命名为length

  var length=document.me.length.value;

如果缺少了这样一个name属性，虽然在浏览器中的显示没有什么变化，但是后台程序后JavaScript程序就不能获得提交的数据。

• C.属性size：用来指定表单中控件的初始宽度，属性value指定控件的初始值。
• 代码以及效果展示：

 

4.type属性表示所定义的是哪种类型的表单形式，该属性有十个可选值:

text	单行的文本框
password	将文本替换为"*"的文本框——密码框
checkbox	定义复选框
radio	定义单选按钮
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
hidden	定义隐藏控件——设定不可被浏览用户修改的数据
image	定义图像形式的提交按钮。
file	定义输入字段和 "浏览"按钮，供文件上传。
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。

参考：<https://www.cnblogs.com/sharpest/p/10068530.html>

 

说明：

hidden隐藏控件在浏览器表单中并不会显示，用户对它也不能进行操作，那么为什么要有hidden隐藏控件呢？

答：隐藏控件通常存在于服务器端脚本动态产生的表单中，用于保存客户端的跟踪数据和有用信息，这些数据和信息在用户提交表单时会传回服务器端。

【他山之石】

隐藏域可以用来传值。比如如果想把不是表单里面的值 提交到另一个页面

比如一个ifarme框架的id="if1"，一个名为Form1的表shu单的隐藏域的name="msg"

这时就要用。Form1.msg.value=if1.document.body.innerHTML

这样。这个框架里的HTML内容就可以提交到另一个页面了。

隐藏域这东bai西应用的方面太多du了，而且灵活性也是挺大zhi的，每dao一个开发人员对隐藏域的应用都zhuan不一样，我个人而言，shu它最大的作用就是可以做标记位，在EE中，它还跟Aciton的跳转有关等等，等你做项目的时候，你就可以再隐藏于中大做文章，慢慢理解你就明白了！！

最近回复：

关于“隐藏域”的用法，本来就没有一个标准的答案，没有任何一个人指定它是专门又来干啥用的！！关键是你在做项目的时候是怎么想的！！有时候用隐藏域是很方面的，它的用法只能在做项目的时候慢慢体会，时间长了你自然而然就知道该如何应用它！！嘿嘿！

另：参考博客：

《html中隐藏域hidden的作用介绍及使用示例》

https://www.jb51.net/web/100210.html