没有合适的资源？快使用搜索试试~ 我知道了~

文库首页开发技术Web开发html添加表单Html网页设计参考手册。

html添加表单Html网页设计参考手册。

html

pdf

5星 · 超过95%的资源需积分: 20 7 下载量 16 浏览量 2013-07-17 17:23:47 上传评论收藏 675KB PDF 举报

温馨提示

试读

23页

Html网页设计参考手册。入门级pdf资料第九章。为了技术而存在。HTML十章基础学习资料第九章。免费的哦。新手使用。小白适用。

资源推荐

资源详情

资源评论

HTML 网页设计参考手册

·152·

添加表单

第

章

 表单标记——form

 添加控件

 输入类的控件

 菜单列表类的控件

 文本域标记——textarea

 id 标记

表单的用途很多，在制作网页，特别是制作动态网页时常常会用到。表单主

要用来收集客户端提供的相关信息，使网页具有交互的功能。它是 HTML 页面

与浏览器实现交互的重要手段。在网页的制作过程中，常常需要使用表单，例如

在进行用户注册时，就必须通过表单填写用户的相关信息。本章将讲解各种表单

的用法。

第 9 章添加表单

·153·

表单通常设计在一个 HTML 文档中，当用户填写完信息后做提交操作，将表单的内容从客户端的

浏览器传送到服务器上，经过服务器处理程序后，再将用户所需信息传送回客户端的浏览器上，这样

网页就具有了交互性。

在网页中，最常见的表单形式主要包括文本框、单选按钮、复选框、按钮等，如图 9-1 所示。在

网易的主页中，就包含了文本框、按钮、下拉列表等表单内容。

图 9-1 网页中的表单

下面就对如何使用 HTML 标志来设计表单进行详细的介绍。

9.1 表单标记——form

在 HTML 中，<form></form>标志对用来创建一个表单，也即定义表单的开始和结束位置，在标志

对之间的一切都属于表单的内容。

每个表单元素开始于 form 元素，可以包含所有的表单控件，还有任何必需的伴随数据，如控件的

标签、处理数据的脚本或程序的位置等。在表单的<form>标记中，还可以设置表单的基本属性，包括

表单的名称、处理程序、传送方法等。一般情况下，表单的处理程序 action 和传送方法 method 是必不

可少的参数。

9.1.1 处理程序——action

真正处理表单的数据脚本或程序在 action 属性里，这个值可以是程序或脚本的一个完整 URL。

语法：

……

</form>

说明：在该语法中，表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将

要传递的程序地址。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的地址形式，

例如发送 E-mail 等。

实例代码：

<html>

HTML 网页设计参考手册

·154·

<head>

<title>设定表单的处理程序</title>

</head>

<body>

下面是关于本产品的调查内容：

</form>

</body>

</html>

在这个实例中，就是定义了表单提交的地址为一个邮件，当程序运行后会将表单中收集到的内容

以电子邮件的形式发送出去。

9.1.2 表单名称——name

名称属性 name 用于给表单命名。这一属性不是表单的必需属性，但是为了防止表单信息在提交到

后台处理程序时出现混乱，一般要设置一个与表单功能符合的名称，例如注册页面的表单可以命名为

语法：

……

</form>

说明：表单名称中不能包含特殊符号和空格。

实例代码：

<html>

<head>

<title>设定表单的名称</title>

</head>

<body>

下面是关于本产品的调查内容：

</form>

</body>

</html>

在该实例中，将表单命名为 research。

9.1.3 传送方法——method

表单的 method 属性用来定义处理程序从表单中获得信息的方式，可取值为 get 或 post，它决定了

表单中已收集的数据是用什么方法发送到服务器的。

 method=get：使用这个设置时，表单数据会被视为CGI或ASP的参数发送，也就是来访者输入

第 9 章添加表单

·155·

的数据会附加在URL之后，由用户端直接发送至服务器，所以速度上会比post快，但缺点是数

据长度不能够太长。在没有指定method的情形下，一般都会视get为默认值。

 method=post：使用这种设置时，表单数据是与URL分开发送的，用户端的计算机会通知服务

器来读取数据，所以通常没有数据长度上的限制，缺点是速度上会比get慢。

语法：

……

</form>

说明：传送方式的值只有两种选择即 get 或 post。

实例代码：

<html>

<head>

<title>设定表单的传送方式</title>

</head>

<body>

下面是关于本产品的调查内容：

</form>

</body>

</html>

在这个实例里，表单 research 的内容将会以 post 的方式通过电子邮件的形式传送出去。

9.1.4 编码方式——enctype

表单中的 enctype 参数用于设置表单信息提交的编码方式。

语法：

……

</form>

说明：enctype 属性为表单定义了 MIME 编码方式，编码方式的取值见表 9-1。

表9-1 目标窗口的设置

enctype取值取值的含义

Text/plain

以纯文本的形式传送

application /x-www-form-urlencoded

默认的编码形式

multipart/form-data

MIME编码，上传文件的表单必须选择该项

实例代码：

<html>

<head>

HTML 网页设计参考手册

·156·

<title>设定表单的编码方式</title>

</head>

<body>

下面是关于本产品的调查内容：

</form>

</body>

</html>

在这个实例中，设置了表单信息以纯文本的编码形式发送。

9.1.5 目标显示方式——target

target 属性用来指定目标窗口的打开方式。表单的目标窗口往往用来显示表单的返回信息，例如是

否成功提交了表单的内容、是否出错等。

语法：

……

</form>

说明：目标窗口的打开方式包含 4 个取值：_blank、_parent、_self 和_top。其中_blank 是指将返回

的信息显示在新打开的窗口中；_parent 是指将返回信息显示在父级的浏览器窗口中；_self 则表示将返

回信息显示在当前浏览器窗口；_top 表示将返回信息显示在顶级浏览器窗口中。

实例代码：

<html>

<head>

<title>设定表单的目标窗口打开方式</title>

</head>

<body>

下面是关于本产品的调查内容：

<formaction="mailto:abcd@163.com" name="research" method="post" enctype="Text/plain"target="_self">

</form>

</body>

</html>

在这个实例中，设置表单的返回信息将在同一窗口中显示。

以上所讲解的只是表单的基本构成标记，而表单的<form>标记只有和它所包含的具体控件相结

合才能真正实现表单收集信息的功能。下面就对表单中各种功能的控件的添加方法加以说明。

剩余22页未读，继续阅读

评论收藏

内容反馈

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

typzwn

2013-07-21

不太实用，要是实用点就好了。

读你永不厌倦

粉丝: 0
资源: 18

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

html添加表单Html网页设计参考手册。

html无限添加表单元素的代码

html5表单元素及验证

html添加多媒体元素Html网页设计参考手册（第七章_总十章）

美工之路 网页设计视频教程Html篇-19.Form表单标签(2).rar

美工之路 网页设计视频教程Html篇-18.Form表单标签(1).rar

美工之路 网页设计视频教程Html篇-20.Form表单标签(3).rar

美工之路 网页设计视频教程Html篇-21.Form表单标签(4).rar

HTML网页设计参考手册.pdf

HTML网页设计参考手册

EXT简体中文参考手册（PDF&CHM电子档）

仿世纪佳缘婚介交友系统5.3 ASP+SQL

html使用图像_Html网页设计参考手册(html入门_第六章_总十章)

html表格的应用(Html网页设计参考手册_总十章_第八章)

jQuery详细教程

asp.net知识库

PHP基础教程 是一个比较有价值的PHP新手教程！

PT80-NEAT开发指南v1.1

Tcl_TK编程权威指南pdf

Activiti6.0教程例子下载

JAVA WEB 开发详解：XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part2

JAVA WEB 开发详解：XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part5

JAVA WEB 开发详解：XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part4

JAVA WEB 开发详解：XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part3

html网页做的动态爱心（超好看）

ECharts+html大数据可视化大屏展示模板，共整合了30多套源码+效果图，做大屏效果的不容错过

Logisim 头歌 CLA182四位先行进位电路设计图解及代码（计算机组成原理）免费下载！！！

javascript网页设计期末作业 购物网站

2023跨年代码（烟花+自定义文字+背景音乐+雪花+倒计时）

小兔鲜项目源码（动态网页，包含首页、注册页、登录页、购物页）原生HTML、CSS、Javascript

最新资源

美工之路网页设计视频教程Html篇-19.Form表单标签(2).rar

美工之路网页设计视频教程Html篇-18.Form表单标签(1).rar

美工之路网页设计视频教程Html篇-20.Form表单标签(3).rar

美工之路网页设计视频教程Html篇-21.Form表单标签(4).rar

PHP基础教程是一个比较有价值的PHP新手教程！

javascript网页设计期末作业购物网站