DAY-5:form相关元素和属性学习笔记

  

<form.../>元素用于生成输入表单,可以用<form>...</form>来创建一个表单向服务器提交数据。主要属性:

1.action属性

form标签的action属性的指规定了处理上传数据的页面,也可以理解为“上传数据并且跳转到该页面”,该页面需要对上传的数据进行查询或者保存,所以经常由php/jsp/aspx来担当。如:

<form action="message.jsp">

如果action的值为空或者#,则数据交由本页面处理。

2.method

method即方法,规定了浏览器上传数据的方式。method只有两个值可以选择,分别是get和post,默认值是get。以下分别介绍这两种方法的特性。

(1)method="get"时:

1>采用 GET 方法发送数据时,浏览器会与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据:浏览器会将数据直接附在表单的 action 的 URL 之后,这两者之间用问号进行分隔。这种方式并不安全,因为上传的数据可以直接在URL中反映出来。

2>GET方法提交数据后的URL链接是可以添加书签的,每次打开该书签都相当于向服务器提交了相同的数据。

3>URL的长度是有限的(约3000字符),所以get方式经常用来提交较小的数据。

4>结合以上特性,一般使用get方式来提交非敏感内容,比如说搜索查询。不仅速度较快,还可以将页面保存到书签之中。

(2)method="post"时

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

2>POST方法上传的数据没有长度限制,可以传输大量的数据,所以在上传文件只能使用Post。

3>大多数情况都应该使用POST方式进行数据的传输。

3.name属性

form 标签元素自身并没有数据传输,它的 name 属性只是提供了一种在脚本中引用表单的方法。与此同时,form标签元素内的数据都是通过name来传递的,只有设置了 name 属性的表单元素才能在提交表单时传递它们的。表单控件的name属性指定请求参数名,value属性指定请求参数值。如果某个表单空间设置了disabled,则它不再产生请求参数。

4.enctype属性

Enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码,有3个值:

1>默认的属性是application/x-www-form-urlencoded,意味着在发送前对所有字符进行编码,在不涉及文件传输时,一般使用这种方式。

2>multipart/form-data,这种编码类型不对字符编码,数据通过二进制的形式传送到服务器端。这个是专门用来传输特殊类型数据的,当我们上传文件时,比如图片、视频、MP3等,必须要使用这种编码方式。

3>text/plain,将内容设置为纯文本的形式。

5.target属性

Form标签的target属性和a标签的功能相似,规定了在何处打开表单上传后的处理页面。

1>_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
2>_self
这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。
3>_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
4>_top
这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

6.autocomplete属性(HTML5新增属性)

Autocomplete 属性规定表单是否应该启用自动完成功能。当用户在字段开始键入时,浏览器基于之前键入过的值,显示出在该字段中填写过的选项,从而简化用户的输入。autocomplete只有两个值,on 和 off,分别对应启用和关闭这个功能。默认值为on。

7.form属性(HTML5新增属性)

将不属于form元素内部的数据绑定在此form元素上进行上传请求。 form="addForm"

8.formaction(HTML5新增属性)

实现动态地让表单提交数据到不同URL。

9.formxxx属性(HTML5新增属性)

  1>formenctype 让按钮动态地改变表单的enctype属性
  2>formmethod 让按钮动态地设置表单以POST或GET方法提交

  3>formtarget    让按钮动态地改变表单的target属性

10.autofocus属性

用于自动聚焦。

11.fieldset和legend元素

 用于对表单内表单元素进行分组。

12.input元素

   主要用于接收用户输入,十分丰富。

 效果:

13.list属性

实现文本框与下拉菜单的结合,十分实用

效果:

 form标签及其相关元素及属性特别多,且十分常用,重要。须经常联系,以免忘记。

猜你喜欢

转载自blog.csdn.net/qq_41170231/article/details/88781422