从HTML语言到网上家园 第六章 表单
作者:佚名 发布时间:2024-07-12 07:14:49
要想创建一个交互式的网页,就离不开控件。表单的作用就是用于标识网页中包含控件的部分,表单中的控件用于网页中的输入控制,实现了用户与服务器的交互。
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="http://www.it.com.cn/f/edu/049/images/wp08.gif" value="提交" name="submit"〉 〈input type="image" value="全部重写" name="reset" src="http://www.it.com.cn/f/edu/049/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〉 |
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〉 页面显示: |


猜你喜欢
- 如果你真正理解Javascript函数是如何调用工作的,那么就可以避免一些bug的发生; 首先让我们创建一个简单的函数,这个函数将在下文中使
- 对于当前数据库的监控方式有很多,分为数据库自带、商用、开源三大类,每一种都有各自的特色;而对于 mysql 数据库由于其有很高的社区活跃度,
- 先看看实现效果图, 模拟拖拽最终效果和在桌面上移动文件夹的效果类似原理介绍鼠标按下时,拖拽开始。鼠标移动时,被拖拽元素跟着鼠标一起移动。鼠标
- 这将为我们的团队节省每天重复的数据处理时间......简介如果你目前在一个数据或商业智能团队工作,你的任务之一可能是制作一些每日、每周或每月
- 目前 Linux 下有一些使用 Python 语言编写的 Linux 系统监控工具 比如 inotify-sync(文件系统安全监控软件)、
- 本文实例为大家分享了python3判断IP地址的具体代码,供大家参考,具体内容如下输入一串字符,判断该字符串是否为点分十进制的IP地址,若是
- 如下所示:<!--将以下代码加入HTML的<Body></Body>之间--><SCRIPT la
- 为什么,这么简单的一个python,我还要特意来写一篇文章呢?是因为留念下,在使用了Anaconda2和Anaconda3的基础上,现在需安
- 多个字段模糊查询, 括号中的下划线是双下划线,双下划线前是字段名,双下划线后可以是icontains或contains,区别是是否大小写敏感
- 前言在web测试中,不可避免的一个测试就是浏览器兼容性测试,在没有自动化测试前,我们总是苦逼的在一台或多台机器上安装N种浏览器,然后手工在
- 布尔类型是PHP中 最简单的类型。它的值可以为 TRUE 或 FALSE。如:$foo=false;$foo1=true;echo &quo
- 存储过程 in参数 的使用IN参数只用来向过程传递信息,为默认值。-- 存储过程中 in 参数的 使用DELIMITER ;; CREATE
- 本文实例讲述了PHP实现无限极分类的两种方式。分享给大家供大家参考,具体如下:面试的时候被问到无限极分类的设计和实现,比较常见的做法是在建表
- 之前就想要把一些 SQL 的常用函数记录下来,不过一直没有实行。。。嘿嘿。。。直到今天用到substring()这个函数,C# 里面这个方法
- 我们将研究一种判别式分类方法,其中直接学习评估 g(x)所需的 w 参数。我们将使用感知器学习算法。感知器学习算法很容易实现,但为了节省时间
- 一.Orcal临时表分类1.会话级临时表1).保存一个会话Session的数据。2).当会话退出时,临时表数据自动清空。表结构与元数据还存储
- 今天网页调试的时候在线订单出现错误:Server 对象 错误 'ASP 0178
- 项目意义如果你想在支付宝蚂蚁森林收集很多能量种树,为环境绿化出一份力量,又或者是想每天称霸微信运动排行榜装逼,却不想出门走路,那么该pyth
- python实现二级登陆菜单的代码如下所示:""" 1. * 菜单 注册 登陆 注销 2.进入每一个一级菜单,都
- 前言world:世界表格continent:大洲名称name:国家名称population:人口数量聚合函数介绍sum()求和函数avg()