HTML网页制作第六章,从HTML语言到网上家园 第六章 表单-网页设计,HTML/CSS

要想创建一个交互式的网页，就离不开控件。表单的作用就是用于标识网页中包含控件的部分，表单中的控件用于网页中的输入控制，实现了用户与服务器的交互。

6.1基本语法

表单的基本语法：

〈form

action=url

method= get | post

target= window_name | _blank | _parent | _self | _top〉

……

〈/form〉

actoin=url url指定了执行表单动作的文件。如果不指定，就执行本文件。

method= get | post 定义表单如何发送数据给服务器，post表示把表单的数据提交到数据库，get则是表单数据从服务器获取。

target 定义了action执行文件的目标窗口。

例：

〈form method=”post” action=”login.asp” target=_self〉

〈p〉用户名：〈input type=”text” name=”t1″ size=”16″〉〈/p〉

〈p〉口  令：〈input type=”password” name=”t2″ size=”16″〉〈/p〉

〈p〉〈input type=”submit” value=”提交” name=”b1″〉    〈input type=”reset” value=”全部重写” name=”b2″〉〈/p〉

〈/form〉

6.2表单中的常用控件

表单中常用控件有：单行文本框，复选框和单选框，按钮等，这些空间的基本格式：

〈input type=# 〉

type属性定义了控件的类型，不同的type值代表不同的控件。不同类型的控件却有一些共同的特性：

align=left | center | right 定义控件相对于页面或者表格单元格的队齐方式。

disabled 用来关闭一个元素，当选用该属性时，控件在页面不可操作，并显示为灰色。

size=n 规定了空间的尺寸。

name=name 规定控件的名称。

value=value 指定控件的默认值。

在接下来的几节例，我们将介绍不同控件的特性。

6.2.1单行文本框和密码框

在网页中，常常会用到要求输入诸如用户名和口令之类的方框，这就需要用到单行文本框和密码框。

type=text 定义单行文本框，用于单行文本项输入。

type=password 密码框，不显示用户输入内容，而是以“*”代替。

maxlenght属性可用于定义文本框和密码框中可输入的字符的最大个数。

例：定义输入用户名和口令的文本框，最大长度为16个字符，口令的最大长度为16个字符，相应的html代码及显示效果如下：

〈form method=”post” action=”–webbot-self–“〉

〈p〉用户名：〈input type=”text” name=”username” size=”16″〉〈/p〉

〈p〉口  令：〈input type=”password” name=”passwd” size=”16″〉〈/p〉

〈p〉〈input type=”submit” value=”提交” name=”b1″〉    〈input type=”reset” value=”全部重写” name=”b2″〉〈/p〉

〈/form〉

显示效果：

用户名：

口  令：

6.2.2复选框和单选框

当某一元素或对象可以有多个可选值，或者仅是一个简单的布尔型值时，可以用复选框(type=checkbox)。在提交数据时，选择的每个复选框都产生一个单独的名字/值对。复选框的默认值是on。

相反的，如果表单区中的一组值同时只能有一个有效，那么可以选用单选按钮(type=radio)。但选按钮需要一个显式value=属性。

说明：同一表单中的一组复选框或者单选框组中都要给出相同的名字。

例1：一个关于复选框的例子。

〈form method=”post” action=”–webbot-self–“〉

〈p〉搜索你想要的商品：〈/p〉

〈p〉〈input type=”checkbox” name=”chked” value=”on”〉服饰

〈input type=”checkbox” name=”chked” value=”on”〉数码

〈input type=”checkbox” name=”chked” value=”on”〉家居

〈input type=”checkbox” name=”chked” value=”on”〉手机〈/p〉

〈p〉〈input type=”submit” value=”搜索” name=”b1″〉〈/p〉

〈/form〉

页面效果：

搜索你想要的商品：

服饰   数码   家居   手机

例2：单选框的应用。

〈form method=”post” action=”–webbot-self–“〉

〈p〉按钮类型：〈/p〉

〈p〉〈input type=”radio” value=”v1″ name=”r1″〉普通

〈input type=”radio” value=”v2″ name=”r1″〉提交

〈input type=”radio” value=”v3″ checked name=”r1″〉重置〈/p〉

〈p〉〈input type=”submit” value=”确定” name=”b1″〉〈/p〉

〈/form〉

页面效果：

按钮类型：

普通  提交  重置

6.2.3按钮

根据需要，网页中的按钮可以分为三种类型普通按钮、重置和提交按钮：

type=button 定义普通按钮。

type=reset 定制重置按钮，在按下该按钮时，表单内的控件复位为初始设置的值。

type=submit 按下此按钮，提交表单内容。如果按下submit按钮是为了提交窗体，而且这个按钮规定了name属性，那么这个按钮就把名字/值对分配给提交的数据。否则，submit按钮便不把名字/值对分配给提交的数据。

例：

〈input type=”button” value=”按钮” name=”butt”〉

〈input type=”submit” value=”提交” name=”sub”〉

〈input type=”reset” value=”全部重写” name=”reset”〉

6.2.4图像按钮

很多情况下，当网页中使用的普通按钮(type=button | submit | reset)达不到预期的美观效果时，我们可以用图像按钮来替代完成submit或reset的功能。

图像按钮的基本格式：

〈input type=”image” name=”submit” align=”bottom” src=” wp08.gif”〉

type=image 单击一个图像段，使得它立即提交窗体。

name=submit 定义了按钮要执行的动作类型，是submit或者reset。

src＝url 指定图片的来源。

例：

〈form method=”post” action=”–webbot-self–“〉

〈p〉用户名：〈input type=”text” name=”username” size=”16″〉〈/p〉

〈p〉口  令：〈input type=”password” name=”passwd” size=”16″〉〈/p〉

〈p〉〈input type=”image” src=”../images/wp08.gif” value=”提交” name=”submit”〉

〈input type=”image” value=”全部重写” name=”reset” src=”../images/wp02.gif”〉〈/p〉

〈/form〉

页面显示：

用户名：

口  令：

6.2.5文件输入框

type=file时，控件是一个文件上装元素，允许用户提供文件作为输入。当需要打开一个文件，并将文件上传到服务器时常用到此控件。

例：文件输入框的一个实例。

〈form method=”post” action=”upload.asp”〉

〈p〉上传文件：〈input type=”file” name=”filedir” size=”30″〉〈/p〉

〈p〉〈input type=”submit” value=”提交” name=”b1″〉

〈input type=”reset” value=”全部重写” name=”b2″〉〈/p〉

〈/form〉

上传文件：

点击“浏览…”按钮，就会弹出文件选择对话框供用户选择需要的文件，用户也可以直接在文本框中输入文件的存放路径和文件名。

6.2.5隐藏的控件

当type=hidden时，控件不在网页中显示，但控件的value值同表单一起发送，这个值可以用来发送客户/服务器交互作用的状态信息。

例：

〈form method=”post” action=”–webbot-self–“〉

〈p〉用户名：〈input type=”text” name=”t1″ size=”16″〉〈/p〉

〈p〉口  令：〈input type=”password” name=”t2″ size=”16″〉〈/p〉

〈p〉〈input type=”hidden” name=”email” value=unknown@163.com〉〈/p〉

〈p〉〈input type=”submit” value=”登录” name=”b1″〉〈/p〉

〈/form〉

用户名：

口  令：

当提交表单数据到服务器时，email控件的值也会一起提交。

6.2.6列表框

列表框用于列举一组可供选择的内容，点击按钮可显示所有选项。使用列表框可以节省页面空间。下拉列表框的基本格式如下：

〈select name=name〉

〈option〉……〈/option〉

……

〈/select〉

〈select〉〈/select〉是列表框的头尾标记，其间包含多个〈option〉标记，用于标识列表框中的选项。

〈select multiple〉表示列表中可以选择多个项。默认情况下，列表只能是单项选择。

〈option selected〉用于设置列表的默认选项。如果不指出，第一个项便是默认选择项。

〈option value=value〉中value属性指定了该项的默认值。

例：

〈select name=catalog id=catalog style=width:155px〉

〈option value=”” selected〉在所有产品中〈/option〉

〈option value=”100″〉在所有图书中〈/option〉

〈option value=”300″〉在vcd中〈/option〉

〈option value=”200″〉在cd中〈/option〉

〈option value=”400″〉在dvd中〈/option〉

〈/select〉

在所有产品中在所有图书中在vcd中在cd中在dvd中

6.2.7文本区域

单行文本框一次只能输入一行内容，在网页中如果需要一次输入大量文本时，往往需要用到文本区域〈textarea〉。在文本区域中，用户可以键入和编辑文本。文本区域的基本格式是〈textarea〉……〈/textarea〉，常用的属性有：

align=absbottom | absmiddle | baseline | middle | right | texttop | top 定义文本区域的对齐方式。

cols=n 规定文本区域的宽度，单位是字符。

rows= n 规定文本区域具有的行数高度。

disabled 用来关闭一个元素。这个属性防止文本区接受输入焦点，并使得文本区变成灰色。

readonly 使得文本区内容为只读型，用户不可修改。

wrap=off | physical | virtual 指定如何处理文本区域中字换行：off表示关闭字回绕，是默认值；physical表示显示文本并提供字回绕；virtual表示显示文本并提供字回绕，但是按输入方式提交。

说明：文本区域的开始标记和结束标记必须成对出现，位于开始标记和结束标记之间的文本就是文本区域的初始值。

例：一个可发表文章的表单的html代码。

〈form name=frmtopic method=”post” action=”writeok.asp”〉

〈p〉文章标题：〈input type=”text” name=”topic” size=”50″〉〈/p〉

〈p〉文章内容：〈textarea rows=”5″ name=”content” cols=”48″〉〈/textarea〉〈/p〉

〈p〉

〈input type=”submit” value=”提 交” name=”sub”〉〈input type=”reset” value=”全部重写” name=”reset”〉〈/p〉

〈/form〉

页面显示：

文章标题：

文章内容：