什么是表格填写形式（Form）？

最编程 2024-02-20 22:29:09

...

表单（FORM）定义

表单（FORM）在动态网站编程中占有重要的地位，使用FORM，可以从客户端向服务器端发送数据，在服务器端，可以使用ASP、JSP、Servlet、CGI等程序将传递过来的数据读取出来进行处理。FORM定义的基本格式如下：

...

</FORM>

在FORM定义中，可以指定ACTION、METHOD、NAME、ENCTYPE等属性，用于接收数据的各类表单元素定义在<FORM>和</FORM>之间。

ACTION属性用于指定此表单数据提交的目标URL，它通常是一个相对路径。如果没有设置这个属性或者属性值为空，表单数据将提交给此表单自身的URL。

METHOD属性用于指定提交表单数据的方式，常用的有GET和POST两种方式，如果没有设置此属性或者此属性值为空，则使用GET方式来提交数据。GET和POST提交方式的主要不同点在于如下两点：

因为GET数据是URL的一部分，所以它会将表单数据附在URL后面传送。也就是说，在浏览器的地址栏将会显示表单中的数据，并且，在通常情况下，浏览器会将这个附加数据后的URL保存起来，可以查阅通过浏览器的“历史”来得到它。所以，这种方式不适合于发送需要保密的数据的表单，比如，密码等。而POST不是URL的一部分，所以它不会将表单数据附在URL后面，所以这种方式不会发生上面的问题。
因为浏览器通常会限制URL的长度，所以，使用GET这种方式无法传送大量的数据。而POST方式不会有这种问题。

所以，如果没有特殊的需要，最好使用POST方式来传送表单数据。

NAME属性用于给这个FORM指定一个名字，可以用字母和数字组合的方式来给FORM命名，但不要用数字开头。

ENCTYPE属性用于定义数据在发送前需要完成的编码方式，如果没有设置这个属性，那么会使用默认的值application/x-www-form-urlencoded，它使用的编码方式是UTF-8。

ACCEPT属性用于指定处理表单数据的ASP、JSP、Servlet或者其他程序接受的MIME（Multipurpose Internet Mail Extension protocol, 多用途网际邮件扩充协议）数据类型，如果FORM中有文件组件（FILE），还可以使用它来限制上载文件的类型。

ACCEPT-CHARSET属性用于指定处理表单数据的ASP、JSP、Servlet或者其他的程序接受的字符编码。

文本组件

文本组件分成三种：文本框、密码框和文本域，它们都可以放在FORM标记中用于接收文本数据，下面我们来学习这三种文本组件。

l 文本框

文本框定义的基本格式如下：

文本框用标记INPUT定义，并且需要将它的TYPE属性值定义为TEXT，这也是INPUT标记的默认类型；NAME属性用于给文本框指定一个名字，这个属性是必需的；VALUE属性可以用于指定文本框的默认值；SIZE属性用于定义文本框的大小，默认是20；而MAXLENGTH是用于限制文本框的输入数据长度的属性。

l 密码框

密码框和文本框类似，唯一和文本框区别的地方在于，需要将INPUT标记的TYPE属性设置为PASSWORD，其他的属性设置和文本框的设置一样，另外，在密码框中输入数据的时候，密码框中不会明文显示输入的数据，而是用“*”或其他的掩盖字符来表示，但这并不影响到将输入的数据发送。

l 文本域

文本域使用<TEXTAREA>标记来定义，它的基本格式如下：

和前面的两个文本组件不同，<TEXTAREA>标记必须成对出现，它有三个属性必须定义：NAME用于设置文本域的名字，而ROWS用于设置文本域的行数，而COLS用于设置文本域的列数，如果文本域有默认值，则将默认值放在<TEXTAREA>和</TEXTAREA>之间。

<HTML>
	<BODY>
		<FORM ACTION="/reg/register.jsp" METHOD="post" 
NAME="userInfo">
			<INPUT TYPE="TEXT" NAME="UserName" SIZE="15" 
MAXLENGTH="30" VALUE="默认值"><BR>
			<INPUT TYPE="PASSWORD" NAME="UserPwd" 
SIZE="15" MAXLENGTH="30"><BR>
			<TEXTAREA NAME="DES" ROWS="5" COLS="20">
默认的值放在这里</TEXTAREA>
		</FORM>
	</BODY>
</HTML>

下拉列表

下拉列表向用户提供一系列的选项。它可以分为单选列表和多选列表两种。单选列表可以让用户选择一个选项，它也是下拉列表的默认设置；多选列表可以让用户选择多个选项。

下拉列表的基本格式如下：

</SELECT>

下拉列表使用SELECT标记来定义，需要使用“NAME”属性来给它指定一个名字，“SIZE”属性用于指定下拉列表在浏览器中显示的行数，如果不指定这个属性，那么在浏览器中只有一行可见。下拉列表的各个选项可以使用<OPTION>标记来定义，使用“VALUE”属性来给选项指定值，这个值不会显示在浏览器中，如果需要指定一个默认的选项，可以在该选项中加上一个“SELECTED”属性；而在<OPTION></OPTION>之间，可以定义显示到浏览器中的内容。

如果需要定义多选列表，可以通过指定<SELECT>标记的一个属性MULTIPLE来完成，并且同时将“SIZE”属性值设置为2或者2以上。

下面我们来看一个单选列表和多选列表的例子。

<HTML>
	<BODY>
		<FORM NAME="FN" ACTION="">
			<SELECT NAME="Favorite" SIZE="4" MULTIPLE>
				<OPTION VALUE="Basketball">篮球</OPTION>
				<OPTION VALUE="Volleyball">排球</OPTION>
				<OPTION VALUE="Table Tennis">乒乓球</OPTION>
				<OPTION VALUE="Tennis">网球</OPTION>
			</SELECT>
			<BR><BR>
			<SELECT NAME="Gender">
				<OPTION VALUE="Man" SELECTED>男</OPTION>
				<OPTION VALUE="Woman">女</OPTION>
			</SELECT>
		</FORM>
	</BODY>
</HTML>

单选框

单选框提供给用户多选一的组件，它的基本格式如下：

<INPUT TYPE="RADIO" NAME="#" VALUE="#">#

可以看出，单选框也是使用<INPUT>标记来定义，但是需要将它的“TYPE”属性设置为“RADIO”，需要给它指定一个名字。一个<INPUT>只能定义一个单选框选项，因此对于一组的选项，必须针对每个选项定义并且需要给它们提供一样的名字，这样这些选项就能组成一个“组”，在这些选项中，每次最多只能有一个选项被选中。如果需要指定默认的选项，可以给该选项指定“CHECKED”属性即可，如：

<INPUT TYPE="RADIO" NAME="性别" VALUE="男">男

<INPUT TYPE="RADIO" NAME="性别" VALUE="女" CHECKED>女

这样，对于 “性别”单选框，它有两个选项，默认选项是“女”。

多选框

多选框提供给用户一个选择多个选项的组件，它的基本格式如下：

<INPUT TYPE="CHECKBOX" NAME="#" VALUE="#">#

通常情况下，将一组同样性质的多选框指定一样的名字。如果需要指定某些选项为默认选项，可以给这个选项指定“CHECKED”属性。被选择中的各个选项值会组成一个字符串发送到服务器端，各个选项值之间用逗号隔开。

<HTML>
  <BODY>
    <FORM NAME="FN" ACTION="">
      选择性别：
      <INPUT TYPE="RADIO" NAME="性别" VALUE="男">男
      <INPUT TYPE="RADIO" NAME="性别" VALUE="女" CHECKED>女
      <BR><BR>
      选择你的兴趣爱好：
      <INPUT TYPE="CHECKBOX" NAME="兴趣" VALUE="上网" CHECKED>上网
      <INPUT TYPE="CHECKBOX" NAME="兴趣" VALUE="踢球">踢球
      <INPUT TYPE="CHECKBOX" NAME="兴趣" VALUE="篮球">篮球
      <INPUT TYPE="CHECKBOX" NAME="兴趣" VALUE="健身" CHECKED>健身
    </FORM>
  </BODY>
</HTML>

按钮

在HTML中，有三种类型的按钮：Submit、Button和Reset。使用Submit按钮可以将表单提交到FORM标记的ACTION所指定的url中；而Button类型的按钮通常情况下需要和JavaScript结合起来使用才有意义；Reset按钮可以将表单的内容回复到原始的状态。

l Submit按钮

Submit按钮定义的基本格式如下：

可以看出，Submit按钮的定义也是使用<INPUT>标记，只是需要将“TYPE”属性值指定为“SUBMIT”就可以了，另外需要给它指定一个名字。VALUE属性将显示在Submit按钮上，但它不是必需的，如果没有指定它，那么在浏览器中就会自己加上一个值，在不同的浏览器中可能会有所不同，如在英文的IE中通常会是“Submit Query”，而在中文IE中是“提交查询内容”等。

l Reset

Reset按钮用于将表单中的各个组件的值恢复到最初设置的初值，它的基本格式如下：

RESET按钮的定义也使用<INPUT>标记，只是需要将“TYPE”属性值指定为“RESET”就可以了，另外需要给它指定一个名字。VALUE属性将会显示在Reset按钮上，它可以不指定，而是让浏览器自己给它赋值，不同的浏览器中会有一些差别，如在英文IE中显示为“Reset”，而在中文IE中显示为“重置”等。

l Button

Button通常需要和JavaScript结合起来才能作用，因为它本身不能完成任何的功能，它的格式如下：

和Submit和Reset按钮一样，Button使用<INPUT>来定义，在Button定义中，需要给VALUE指定一个值，否则，在浏览器中的按钮组件上不会有任何的文字指示。

在FORM中，通常至少需要定义一个Submit按钮，这样表单才可以提交到ACTION指定的url中，或者使用Button按钮和JavaScript结合也能达到一样的目的，在下一节我们会学习这种方式。

隐藏域

隐藏域可以定义在FORM中，用来传递不需用户输入的值。和其他的FORM组件不同，它不会显示在浏览器中，用户不能去修改它的值。它的定义基本格式如下：

和文本框等组件一样，隐藏域的定义也是使用<INPUT>标记来完成的，需要将它的“TYPE”属性值设置为“HIDDEN”，并且需要给它指定一个名字。另外因为隐藏域不能接收用户的输入，所以通常需要给它指定一个VALUE值。

文件上载组件

有时候我们需要将客户端的文件上载到服务器端，这时候就需要使用文件上载组件来接收需要上载的文件的路径，它的基本格式如下：

文件上载组件也使用<INPUT>标记来定义，并且将它的“TYPE”属性值设置为“FILE”，同时需要给它的“NAME”指定一个值。MAXLENGTH和SIZE属性的含义和文本框的含义一样。文件上载组件在浏览器上的表现形式为一个“文本框”和一个“按钮”，这个按钮上面会在不同的浏览器上面显示类似“浏览…”的内容。点击这个按钮，将打开一个文件选择对话框，让用户选择一个文件。

原文地址：https://www.cnblogs.com/Aha-Best/p/10858419.html

上一篇： C#中Form-DATA表单提交：如何使用POST方法上传数据和文件

下一篇：恢复表单默认设置或清空内容

什么是表格填写形式（Form）？

什么是 SKU？在创建 iOS 应用程序时如何填写 SKU？如何解决这个问题？

什么是催眠？人机融合智能能否催眠？-基本形式

什么是表格填写形式（Form）？