当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > HTML表单标记教程(2):

HTML/XHTML教程
CSS 循序渐进（四）表里春秋
精通 CSS 滤镜（五）
让css使网页图片半透明
实现页面图片阴影特效
发现CSS控件的好处
用CSS缩写给你的网站加速
CSS在IE和Nascape的显示差别
利用CSS，不通过replace替换标引HTML标记
拒绝单调 让网页超链接拥有多姿多彩的下划线
对CSS类及id的规范化命名
利用css里expression来实现界面对象的批量控制
利用CSS控制打印
第一章　ＣＳＳ的基本认识
第二章　ＣＳＳ的应用方式
第三章　ＣＳＳ的应用补充
第四章　颜色背景的ＣＳＳ
第五章　文字性质的ＣＳＳ
第六章　区块性质的ＣＳＳ
HTML之其他标记
HTML之链接标记

No. « 52 53 54 55 »

技术文章搜索

关键字

HTML/XHTML教程 中的 HTML表单标记教程(2):

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-11   浏览: 210 ::
收藏到网摘: n/a


本教程介绍FORM表单标记的各种属性在网页设计中的应用. <FORM>标记的NAME属性
基本语法 01 <Form name="Form＿name"> 02 …… 03 </Form>
语法解释
通过为表单命名可以控制表单与后台程序之间的关系。 文件范例：11-1.htm
在页面中插入表单。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：11-1.htm -->
03 <!-- 文件说明：插入表单 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>插入表单</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>
11 <Form name=invest>
12 </Form>
13 </body>
14 </html> 文件说明
第11行是表单标记，表单的名称为"invest"。
                                                   
<FORM>标记的ACTION属性
基本语法 01 <Form action="url"> 02 …… 03 </Form>
语法解释
在action属性中定义表单提交的地址。 文件范例：11-2.htm
设置表单的提交地址。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：11-2.htm -->
03 <!-- 文件说明：设置表单提交地址 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设置表单提交地址</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>
11 <Form name=invest action=mailto:[email protected]>
12 </Form>
13 </body>
14 </html> 文件说明
第11行是表单标记，表单的名称为invest，将表单内容以电子邮件的方式传送。
                                                   
<FORM>标记的METHOD属性
基本语法 01 <From method="method"> 02 …… 03 </From>
语法解释
mothod属性中，get方法是将表单内容附加在url地址后面，所以对提交信息的长度进行了限制，不可以超过8192个字符。如果信息太长将被剪去，从而导致意想不到的处理结果。同时get方法不具有保密性，不适合处理如信用卡卡号等要求保密的内容，而且不能传送非ASCII码的字符。post方法是将用户在表单中填写的数据包含在表单的主体中，一起传送到服务器上的处理程序中，该方法没有字符的限制，它包含了ISO10646的字符集，是一种邮寄的方式，在浏览器的地址栏不显示提交的信息，这种方法传送的数据是没有限制的。当不指明是那种方式时，默认为get方式。
如下代码，就是以get方式提交到[email protected]邮件地址的表单写法：
01 <Form name="guestbook" method="get" action="mailto:[email protected]">
02 ……
03 </Form> 文件范例：11-3.htm
设置表单的提交方式。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：11-3.htm -->
03 <!-- 文件说明：设置表单提交方式 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设置表单提交方式</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>
11 <Form name=invest action=mailto:[email protected] method=get>
12 </Form>
13 </body>
14 </html> 文件说明
第11行是表单标记，表单的名称为invest，将表单的内容以电子邮件的方式传送，并使用get传输方式。
                                                   
<FORM>标记的ENCTYPE属性
基本语法 01 <Form enctype="value"> 02 …… 03 </Form>
语法解释
value的取值如所下表所示
                         属性值             描述                               Text/plin             以纯文本形式传送信息                               Application/x-www-Form-urlencoded             默认的编码形式                               Multipart/Form-data             使用mine编码              文件范例:11-4.htm
设置表单信息提交的编码方式。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：11-4.htm -->
03 <!--文件说明：设置信息提交的编码方式-->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设置信息提交的编码方式</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>
11 <Form name=invest action=mailto:[email protected] method=get enctype=text/plain>
12 </Form>
13 </body>
14 </html> 文件说明
第11行是表单标记，表单的名称为invest，将表单内容以电子邮件的方式传送，并使用get传输方式，以纯文本的形式传送消息。
                                                   
<FORM>标记的TARGET属性
基本语法 01 <Form target="target＿win"> 02 …… 03 </Form>
语法解释
target的取值如下表所示
                         属性值             描述                               ＿blank             将返回信息显示在新开的浏览器窗口中                               ＿parent             将返回信息显示在父级浏览器窗口中                               ＿self             将返回信息显示在当前浏览器窗口中                               ＿top             将返回信息显示在顶级浏览器窗口中              文件范例:11-5.htm
设置表单信息返回的窗口。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：11-5.htm -->
03 <!-- 文件说明：设置信息返回的窗口 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设置信息返回的窗口</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>
11 <Form name=invest mailto:[email protected] method=get enctype=text/plain target=_blank>
12 </Form>
13 </body>
14 </html> 文件说明
第11行是表单标记，表单的名称为invest，将表单内容以电子邮件的方式传送，并使用get传输方式，以纯文本形式传送信息，如果有信息返回时，将以新开浏览器窗口的形式显示信息。
在<Form>标记中，可以包含4个标记，如下表所示
                         标记             描述                               <input>             表单输入标记                               <select>             菜单和列表标记                               <option>             菜单和列表项目标记                               <textarea>             文字域标记             
如下代码
01 <Form>
02 <input>……</input>
03 <textaarea>……</textarea>
04 <select>
05<option>……</option>
06 </select>
07 </Form>

各种表单域基本可以满足网站收集信息的要求。如果要求浏览者输入文字信息，如姓名、留言等，可以使用文本字段。如果要求浏览者在固定的范围内进行选择，可以选择单选按纽或者多选按纽，在实际应用中性别、籍贯、爱好常常采用这种方法。有时还会让浏览者提交文件的要求，可以使用文件域，例如某游戏选拔女主人公原型，要求申请者提交照片等。