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。 可能的值:
|
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