2.3 表单标签

        一般情况下,当填写完表单信息后做提交 (submit)操作,表单的内容就从客户端的浏览器传送到 Web 服务器上,经过JSP、ASP 或CGI 等服务器端的程序处理后,然后再返回一个页面到客户端的浏览器上。
2.3.1 <form></form>
要在HTML文档中创建一个表单,需要使用<frm></form>标签对来定义表单的开始和结束位置,在这个标签对之间需要嵌入各类表单字段元素(如:文本输入框、列表框、单选按钮、提交按钮等)才有意义。在<form></form>标签对之间除了可以包含表单字段元素之外,还可以包含文本、图像以及其他的 HTML 元素,但这些其他的 HTML 元素并不是相邻表单字段元素标签的内容,它们在使用上与表单字段元素没有任何关系,只是起到外观上的提示和装饰效果。
一个表单能够向 WWW 服务器传递多个信息,每个信息都需要有一个名称来标识,而这些信息正是由各个表单字段元素来产生的。因此,嵌入在<form>标签中的每个表单字段元素,都应有一个 name 属性,用于指定表单字段元素的名称,这样,WWW 服务器才能依据这些名称,了解到传递给它的每个值分别是由哪个表单字段元素产生的。WWW 服务器程序通过表单字段元素的名称来获得相应表单字段元素的设置值,没有指定 mame 属性的表单字段元素的数据不会被传递给 WWW 服务器程序。另外,许多表单字段元素都还有一个 value 属性,使用 value 属性可以设置每个表单字段元素的初始和默认值,也可以使用脚本程序来对 value 属性进行读写,从而获取或修改表单字段元素中的设置值<form>标签具有action、method、target、title、enctype等属性。
(1)action属性用来设置接收和处理浏览器递交的表单内容的服务器程序的URL,例如:<formaction="http://wwwit315rg/counter.cgi">,当用户提交表单时,服务器将执行网址 http://www.it315.org/上的名为 counter.cgi的CGI程序。也可以将action 属性的值设为使用mailto 协议的URL地址,将表单结果(输入的信息或选择的结果)作为电子邮件内容发送出去,这需要在访问者计算机上安装和正确设置好了邮件发送程序,所以在这里使用mailto 协议 URL 地址的情况十分少见。当不设置 action 属性,或设置值等于空字符串(即action=””)时,表单所在网页的URL 将作为默认值被启用

(2)method 属性用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式取值可以为 GET 和POST 中的任何一个。使用GET 方式,Web 浏览器将各表单字段元素及其数据按照URL参数格式的形式,附在<form>标签的action属性所指定的URL地址后面一起发送给 Web 服务器。例如,一个使用 GET 方式的FORM 表单提交时,在浏览器地
址栏中生成的 URL 地址具有类似下面的形式:http://www.it315.org/counter.cgi?name=zhangsan&password=123可见,GET 方式所生成的URL格式是:每个表单字段元素名与取值之间用等号 (=)分隔,形成一个参数;各个参数之间用&分隔;最后将这些参数集合与 action 属性所指定的URL 地址之间用问号(?)分隔。使用这种方式向 WWW 服务器传递参数时,会自动对表单字段元素值中的特殊字符作 URL 编码处理;而通过超链接方式传递参数给WWW服务器时,必须在网页自身中对参数部分的特殊字符进行 URL编码。使用GET 方式传送的数据量是有限制的,一般限制在1KB 以下
使用POST 方式,浏览器将把各表单字段元素及其数据作为 HTTP 消息的实体内容发送给 Web 服务器,而不是作为 URL 地址的参数传递。因此,使用 POST 方式传送的数据量要比使用 GET 方式传递的数据量大得多。根据HTML 标准,如果处理表单的服务器程序不会改变在 WWW 服务器上存储的数据,则应采用 GET 方式,例如,用来对数据库进行查询的表单通常都使用 GET 方式。反之,如果处理表单的结果会引起服务器上存储的数据的变化,例如,将用户的注册信息存储到数据库中,则英采用POST方式

务必不要使用 GET 方式来提交询问口令的表单。如果这样做了,则访问者输入的口令将作为URL的一部分存储在好几个地方,其中包括 Web 浏览器的历史记录文件和 Web 服务器的日志文件

(3)target 属性用来指定服务器返回结果显示的目标窗口或目标帧。(4)title 属性用来设置当网站访问者的鼠标在表单上的任一位置停留时,浏览器用黄色小浮标显示的文本(如表单的名称或描述)。这是许多HTML 标签都有的一个属性,读者值得留意,也许哪天你想在某个 HTML 元素上实现这种功能而不得不到处寻求帮助。title属性在表单中被使用的频率很高,所以放在这里介绍。
(5)enctype 属性指示浏览器使用哪种编码方法将表单数据传送给 WWW 服务器。该属性可以有两种取值:application/x-www-form-urlencoded 和multipart/form-data,默认的设置值为“application/x-www-form-urlencoded“,也就是浏览器在递交表单数据时,会先自动对表单字段元素值中的特殊字符作 URL 编码处理然后再将编码后的数据递交给 WWW服务器。一般情况下,没有必要修改这个属性的设置

 <input type="submit">
<input type="submit">标签用于定义一个提交按钮,和下面的所有表单字段元素一样此标签必须放在<form></form>标签对之间。所有的表单都有一个提交 (submit)按钮,访问者单击这个按钮就可以将表单结果(即在表单上输入的信息和所做的选择)发送到表单(<form>)标签中的action 属性指定的URL所指定的服务器程序否则让访问者填写表单是没有任何意义的。“提交”按钮表面所显示的标题文字就是 value 属性设置值,单击这个按钮提交表单时,此按钮的名称和值也会传送给服务器。一个表单中可以有多个“提交按钮,但只有那个被单击的“提交”按钮的名称和值才会被传递给服务器

 <input type="reset">
<input type="reset">用于定义一个重新填写的按钮,大多数表单(尤其是那些有多个输入区域的表单) 通常都会加入一个重置 (reset) 按,访问者单击这个按钮,就会将表单上所有的元素(文本输入区域、复选框、单选按钮、下拉列表框) 设置为初始值。重置按钮表面所显示的标题文字就是 value 届性值,重置 (reset)按的名称和值不会传递给服务器


 <input type="text">
<inputtype="text>用于在表单上创建单行文本输入区域,每个单行文本输入区域都具有如下几个典型的属性:
size 指定文本输入区域的宽度,以字符个数为度量单位。大
value 指定浏览器在第一次显示表单时或单击<input type="reset">按后,显示在输入区域中的文本内容。
maxlength 指定用户能够输入的最大字符串长度
readonly 属性存在时,文本输入区域可以获得焦点,但访问者不能改变文本输入区域中的值。
disabled 属性存在时,文本输入区域不能获得焦点,访问者也不能改变文本输入区域中的值,并且,提交表单时,浏览器不会将文本输入区域的名称和值发送给www服务器

 <input type="checkbox">
<input type="checkbox">用于在表单上添加一个复选框。如果希望让站点访问者从一个列表项目中选择一项或多项内容,那么就可以使用<input type="checkbox”>标签为列表中的每一个选项添加一个复选框。复选框典型的一个属性是 checked,该属性用来设置浏览器在首次显示此复选框时是否被选中,这是一个不需要赋值的属性,只要设置了该属性,复选框的初始状态即为选中。复选框的 value 届性指定复选框被选中时,这个表单字段元素所代表的结果值。如果表单递交时,某个复选框未被置为选中状态,复选框名称和值都不会传递给服务器,就像没有这个表单字段元素一样。如果表单递交时,复选框已被置为选中状态,复选框名称(由name属性指定)和值(由value 属性指定)都会传递给服务器

<input type="radio">
<input type="radio">用于在表单上添加一个单选按钮,它的使用方式与复选框类似。需要联合使用一组单选按钮才有意义,只要将若干单选按钮的 name 属性设置为一样,它们就形成了一组单选按钮。浏览器只允许一组单选按钮中的一个被置为选中状态,当访问者单击“提交”按钮后,在一个单选按钮组中,只有被选中的那个单选按钮的名称和值(即name/value对)才会被浏览器发送给服务器。同组的每个单选按的 value 属性值各不一样选择不同的按钮,就能实现同一参数名称有不同选择值的效果

<input type="hidden“>
<input type="hidden">用于在表单上添加一个隐藏的表单字段元素,浏览器不会显示这个表单字段元素,但当提交表单时,浏览器会将这个隐藏表单字段元素的 name 属性和 value属性组成的信息对发送给服务器。使用隐藏表单字段元素,可以预设某些要传送的信息,例如,网站的用户注册过程由两个步骤完成,每个步骤对应一个表单网页文件,用户在第步的表单网页中填写了自己的姓名,接着进入第二步的网页中,在这个网页文件中填写爱好和特长等信息。在第二个网页递交时,要将第一个网页中收集到的用户名称也传送给服务器,就需要在第二个网页的表单中加入一个隐藏表单字段元素,让它的 value 属性值等于第一个网页中收集到的用户名

<input type="password">
<input type="password”>用于在表单上添加一个密码输入区域,密码输入区域是单行文本区域的一种变体。当访问者在密码区域输入字符时,浏览器将每个字符都显示为星号(*),以使得文本的内容不可见。密码区域用在不希望他人从计算机屏幕上看见访问者输入信息的各种场合

<input type="button">
<input type="button">用于在表单上添加一个普通类型的按钮,这种普通按类型通常要与某个脚本程序代码相联系,用来告诉浏览器在访问者单击该按钮时去执行怎样的动作

<input type="file">
RFC1867 规范对表单的功能进行了扩展,增加了<input type="file">这个表单字段元素,以便Web 浏览器通过HTML的FORM表单向 Web 服务器上传文件。使用<input type="file">元素,浏览器会自动生成一个文本输入框和一个“浏览...”按钮,供用户选择上传到服务器的文件用户可以直接在文本输入框中输入本地的文件路径名,也可以使用“浏览...”按打开一个文件对话框选择文件。要上传文件的表单<form>标签的 enctype 属性必须设置为multipart/form-data”,并且method 属性必须是POST。

<input type="image">
<input type="image">用于在表单上创建一个图像元素,图像的源文件名由 src 属性指定,它没有 value 属性。图像元素可代替 submit 按,用户单击后,表单中的其他信息和图像上单击处的 x、y坐标一起传送给服务器,x坐标对应的参数名是图像元素名后加上.x(如map.x),y标对应的参数名是图像元素名后加上y(如mapy)

<select></select><option></option>2.3.12
<select></select>标签对用来创建一个下拉列表框或可以复选的列表框。此标签对用在<form></form>标签对之间。<select>的一个典型属性是size,该属性设定在列表框中可看见的选项数目,默认值为 1,这时,显示为下拉列表框,访问者可单击右边的下三角按钮而显示出所有的选项,如图 2.13 所示。如果将 size 属性设置为一个大于1的值,那么 Web浏览器将把下拉列表显示为一系列条目(根据需要添加一个滚动条),而不是只显示下拉列表中的一个选项,如图2.14 所示。<select>标签还有一个mutiple 属性,这是一个不用赋值的属性,直接加入到标签中即可,加入了此属性后,列表框显示的外观与 size 大于1的情况一样,访问者可以从列表框中选择多个选项,在进行多项选择时需要按住 Ctrl键

为了在下拉列表中添加条目,需要在<select></select>之间用起始和结束选项标签<option></option>来包含各个条目的显示文本。<option>标签具有下列属性:(1)value 单击某个选项作出选择后,这个选项的valu 属性值与<selec>标签的 name属性值一起作为 name/value 信息对传送给 wWW 服务器。如果<option>标签中没有 value属性,那么浏览器将把选项的显示文本(在起始和结束选项标签<option></option>之间的内容)作为name/value信息对中的value部分发送给WWW服务器。
(2)selected 通过在<option>标签中包含这个属性,指定浏览器在首次显示列表框或通过<reset>按钮重置整个表单时,列表框自动选中该选项

<lable>标签具有两个重要的属性:
(1) for 属性,指定快捷键将作用于的表单字段元素,设置值必须与某个表单字段元素的id 值相吻合

(2)accesskey属性,指定用于 for 属性所对应的表单字段元素的快捷键,如果要使用这个快捷键,必须同时按下Alt键和这个快捷键。accesskey 值不必出现在提示文本中,但是,如果要使用这些快捷键,必须要知道快捷键是什么。因此,最好在提示文本后也加上作为accesskey 属性值的字母,用一对圆括号将这个字母括起来,并在这个字母上添加下划线(使用<u></u>标签),以便更好地提示用户。如果在提示文本中包括有作为accesskey属性值的字母,那么就可以直接在那个字母上用<u></u>标签对进行下划线处理,如“open
就是直接在字母o上加下划线。最好还是使用Microsoft Visual StudioNET来添加表单字段元素和设置它们的属性例如,要在网页中添加一个表单,并在这个表单中添加一个<select>表单字段元素。首先,单击“视图”一“工具箱”菜单,切换到工具箱中的HTML面板,如图2.18所示,这个面板中列出了上面讲到的所有表单字段元素
 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值