当前位置：翔宇亭IT乐园 → IT知识库 → WEB → HTML

HTML form表单

减小字体

增大字体作者：本站来源：本站整理发布时间：2023-07-01 16:24:16

在HTML中，表单用于收集用户输入的数据。用户输入的数据往往会被传回服务器端进行处理。

在HTML中使用<form>元素来定义一个表单。

HTML <form>标签

在HTML中，使用<form>元素来定义一个表单，在<form>元素中可以嵌套其它用于收集用户输入数据的HTML元素，如文本框、单选按钮、多选按钮等。

<form>定义的基本形式

<form>定义的基本格式如下：

<form action="url" method="post|get" target="" name="form_name">

  表单包含的其它元素

</form>

<form>元素是一个容器标签，在<form>和</form>之间可以添加其它用于用户输入的元素，如文本框、单选按钮、多选按钮，提交按钮等。表单中包含的所有元素请参考这篇文章：表单中的元素。

在上面的定义格式中，action属性用于给出表单提交的目的网页，目的网页用于接收和处理用户输入的数据。

method属性用于给出提交数据的HTTP方法，可以取post值或get值。

name属性是给出当前表单的名称。

target属性用于给出响应结果的显示方式。

HTML form的action属性

action属性通常给出表单数据提交的目标文件。一般提交到的目标文件是服务器端脚本文件，以便对用户输入的数据进行加工处理后保存到数据库或传递给其它文件，并给用户返回一个反馈。

当省略action属性时，默认目标文件为包含表单本身的文件中。

HTML form的name属性

name属性用于给出表单的名称。该名称可以将在同一个网页中的多个表单区分开来，用于DOM操作。如使用javascript获取某个表单的信息等。

HTML form的method属性

form表单的method属性用于指定表单的数据以什么方式发送到目标文件。method的取值主要有get和post两种方式。

当method值为get时，表单中的数据将以name=value的方式附加在action属性给定地址的后面。假如action属性的值为example.asp，表单中有名称为userid何userpwd的输入值，则其附加到action给的地址后面后为：example.asp?userid=用户输入的ID&userpwd=用户输入的密码。

目标地址与name=value之间使用?隔开，每个name=value之间使用&进行连接。

可以看到以get方式传输数据时，数据将出现在目标地址里，无法保证数据的安全性。同时，由于受到URL长度的限制，get方式传递的数据量有限。对于非敏感数据，如查询字符串，get方式是个不错的选择。

当method值为post时，表单中的数据将包含在HTTP请求内容里，提交的数据不会显示在URL中。使用POST方式没有数据量大小的限制，可以用于提交大规模数据。对于敏感数据或有安全需求的数据使用POST方式比较好。

HTML 表单的target属性

HTML表单的target属性用于给出在表单提交后，响应结果的显示方式。

用户在提交表单后，目标文件往往会给出反馈信息，target属性用于指定该响应信息网页的显示方式。其取值与链接的target属性相似，主要有以下几种情况：

HTML表单中target属性的可能取值
取值	含义
_blank	响应结果网页将在新窗口或浏览器新标签中打开。
_parent	在框架网页中，响应结果网页将在父框架中打开。
_self	响应结果网页将在当前窗口中显示，并替代当前网页。
_top	在框架网页或局部提交的网页中，显示结果将在包含整个框架的窗口打开，即替换框架所在的网页。
framename	响应结果将在指定名称的框架中进行显示。

其中，_self是target属性的默认值。

HTML 表单的 autocomplete 属性

HTML 表单的 autocomplete 属性是设置表单是否自动完成输入的属性。其取值为on或off。

当表单的 autocomplete 属性的值设置为on时，表单中的其它元素将自动填充用户曾经输入的数据。若想关闭此功能，用户可以将该属性的值设置为off。

HTML 表单的 novalidate 属性

在HTML5中， form表单具有自动验证功能，如果想禁止该项功能，可以使用novalidate属性来达到目的。

其使用方法如下：

<form action="url" method="post"  name="form_name" novalidate>

  表单包含的其它元素

</form>

HTML form表单的enctype属性

HTML form表的enctype属性用于指定表单数据在传输时使用的编码类型。主要有以下两种类型：

（1） application/x-www-form-urlencoded编码

此种编码方式是默认的编码方式。

其可以用于除传输文件之外的表单数据。

该编码方式将表单中的数据打包成 name1=value1,name2=value2, ...... 的形式，将其发送到服务器端后，使用服务器端的程序可以获取到打包过来的变量和值。

（2）multipart/form-data编码

该编码形式将表单数据编码为一条消息，常用于文件上传服务中。

也就是说，如果不是用于上传文件，则可以省略enctype属性或指定为第一种编码方式即可。

如果用于上传文件，则使用第二种编码方式。

HTML form表单简单示例

该例子演示了使用表单输入和处理数据的例子。

<form action="form_example.asp" method="post" target="iframe_a" name="form1">

  姓名：<input type="text" id="yourName" name="yourName"><br>

  地址：<input type="text" id="yourAddr" name="yourAddr"><br>

  <br>

  <input type="submit" value=" 提交 ">

</form>

<br>

<iframe name="iframe_a" style="width:100%;height:280px;border:1px solid #ccc;"></iframe>