HTML表单标记教程(2):_HTML/Xhtml_网页制作-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML表单标记教程(2):_HTML/Xhtml_网页制作

May 16, 2016 pm 04:44 PM

information submit Tutorial document Way mark form

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

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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn