HTML快速入门4
七、表单
1. 概述
建立交互式的站点,需要使用 HTML 表单,它可以让用户提供信息,并对此作出处理。可以建立类似
复选框、单选按钮及文本框的控件。
掌握表单的使用对 Active Server Pages 编程是必需的。 ASP 脚本的一个主要功能是对 HTML 表单中
输入信息进行处理,因此,表单是 ASP 应用程序中主要的用户接口,学习表单有关知识,为以后的
ASP 学习奠定基础。
建立 HTML 表单,可以使用 <FORM> 标记,下面是简单的表单例子
<HTML>
<HEAD>
<Title>a simple example page -FORM [ 人文教程 ] </title>
</HEAD>
<BODY>
<FORM>
<INPUT>
</FORM>
<BODY>
</HTML>
当该文件在浏览器上显示时,一个三维外观的框显示在浏览器中 , 你可以在框中输入文字。但输入
文字后什么也不会发生。该表单没有实 际用途。
该例的问题是 : 表单不知道你已经输入信息完毕。解决这个问题,需要加入另一个表单元素:提交
按钮 submit 。下面的例子是同一个表单,只是加了一个 submit 按钮:
<HTML>
<HEAD>
<Title> a simple example page –FORM 表单 </Title>
</HEAD>
<BODY>
<FORM>
<INPUT>
<INPUT TYPE=Submit Value=” 确定 ”>
</FORM>
</BODY>
</HTML>
修改后文件,出现了“确定”文字的按钮,用鼠标点击这个按钮,通知浏览器-表单的文本框中已
输完信息。
表单将信息收集后,一般情况下,要将输入的信息交给一个后台的程序去处理,如何交给别的程序,
需要借助表单的 ACTION 属性
假如要将信息交给某个 ASP 程序 mypage.asp 来处理,可以这样写:
<HTML>
<HEAD>
<TITLE>a simple example page -FORM [ 人文教程 ] </ TITLE >
</HEAD>
<BODY >
<FORM ACTION =“ /somedirectory/mypage.asp ” METHOD= “ POST ” >
<INPUT>
<INPUT TYPE=SUBMIT VALUE=” 确定 ”>
</FORM>
</BODY>
</HTML>
在此例中, ACTION 和 METHOD 属性指明表单信息由名为 mypage.asp 的 Active Server Pages 程序去处
理。 ACTION 属性给出了 Active Server Pages 的路径, METHOD 属性指明表单信息通过何种方式送出。
例中,在文本框中输入的表单信息通过 post 方式送给 Active Server Pages 。
POST 容许传送大量数据,但 GET 则只接受低於 1K 的数据。
几乎所有情况, <FORM> 标记都和本例的用法一样,用 ACTION 指定处理表单的程序,并通过 METHOD 指定
表单信息发送方式。
在上例,还要加入一条语句才能使之实用。包含例如文本框之类的表单元素时, 应为每个表单元素起
一个名字。你可以通过 <INPUT> 的 NAME 属性来实现这一点。下面的例子有两个不同的文本框,分别叫
作 text1 和 text2 :
<HTML>
<HEAD>
<TITLE>a simple example page -FORM [ 人文教程 ] </ TITLE >
</HEAD>
<BODY >
<FORM ACTION =“ somedirectory/mypage.asp ” METHOD= “ Get ” >
<INPUT NAME=“text 1” >
<INPUT NAME=“text 2” >
<INPUT TYPE=SUBMIT VALUE=” 确定 ”>
</FORM>
</BODY>
</HTML>
例中,名为 text1 的文本框中输入的信息被传给程序处理时,将会与名字 text1 相关联,第一个文本
框中输入信息就与其它表单元素(文本框)中输入的信息区别开来。
表单信息将会送到在 ACTION 属性中指定的程序,信息包括用 & 符号分隔的名字和值。如果在第一个文
本框中输入 your first name ,在第二个文本框中输入 your last name ,则送去处理的信息将会是:
text1=yourfirstname&text2=yourlastname
事实上,在发送之前,表单信息要先编码。当文本编码后,文本被一些特定的字符替换了。例如,
空格符被加号( + )代替。因此如果你在第一个文本框中输入 This is textbox1 ,而在第二个文本框中
输入 This is textbox2 ,则下列的文本将会被送去处理:
text1=This+is+textbox1&text2=This+is+textbox2
在以后的 ASP 课程中,将学习如何处理这些又网页提交的信息。
2. 表单输入的形式
A. 单行文字框
Type = “ Text ” 能输入单行文字,上限为 255 字符
例 :
<input type ="Text" name ="age" value ="20" align ="MIDDLE" maxlength ="255">
name : 单行文字输入框的名字,由处理程序接收该框的信息。
Value : 单行文字框的初始值,可省略。
Align : 文字的位置,可选值: top, middle, bottom, left, right 。
Size: 限制输入框的宽度
Maxlength : 此一单行文字盒可输入字符的上限
例:
<form action=telphone.asp method="POST">
请填入电话号码: <input type="Text" name="telphone" value=" " Size=10 Maxlength="8">
</form>
B. 单选框
Type= “ Radio ” 给出单选按钮 ,能产生一个单选框,
例:
<input type= "Radio" name="country" value="US&ENGL" align="MIDDLE" checked>
checked : 设该 Radio 为内定被选。同 name 的各个 Radio 中只能有一个使用,或全不使用
例 :
<form action="Iraqwar.asp" method="POST"> 请选支持的国家:
<input type="Radio" name="country" value="US&ENGL"> 美英
<input type="Radio" name="country" value="IRAQ" checked > 伊拉克
<P> 您认为美英联军对伊拉克的战争是违背国际法吗?
<P>
<input type="Radio" name="like" value="Yes"> 是
<input type="Radio" name="like" value="No"> 不是
<input type="Radio" name="like" value="NotSure"> 不清楚
</form>
C. 复选框
Type = “ Checkbox ” , 能产生复选框,以供挑选
例如: <input type= "Checkbox" name="Car" value="JETTA" align="Middle" checked>
checked : 设该 Checkbox 为内定被选。每个 Checkbox 都是独立的,所以每一个都可使用这参数,不像 Radio 。
<form action=" Car.asp" method="POST">
<br> 你喜欢以下那些汽车:
<input type="Checkbox" name="Clik1" value="JETTA"> 捷达
<input type="Checkbox" name="Clik2" value="STN"> 桑塔纳
<input type="Checkbox" name="Clik3" value="TOYATA" > 丰田
<input type="Checkbox" name="Clike4" value="CHINA" checked> 中华
</form>
Type = “ Password ” , 能产生一文字框,输入的字符全以 * 号表示,其他参数和 Text 是完全相同的。
<form action=" Pwd.asp" method=" POST ">
请输入 ID : <input type="Text" name="name"> <br>
请输入密码: <input type="Password" name="pw" maxlength="9">
</form>
E 确认和重置按钮
表单的两个重要的输入按钮
Type=“ Submit ” 确认
Type=“ Reset ” 重置
例:
<input type="Submit" name="subm" value=" 确认 align="MIDDLE">
<input type="Reset" value=" 清除 " align="MIDDLE">
value=" 提交 " ,显示在按钮上,可以不用,确认的内定值为 Submit Query
value=" 清除 " 显示在按钮上,重置的内定值为 Reset
例:
<form action=" Car.asp" method="POST">
<br> 你喜欢以下那些汽车:
<input type="Checkbox" name="Clik1" value="JETTA"> 捷达
<input type="Checkbox" name="Clik2" value="STN"> 桑塔纳
<input type="Checkbox" name="Clik3" value="TOYATA" > 丰田
<input type="Checkbox" name="Clike4" value="CHINA" checked> 中华
<br><br>
<input type="Submit" name="subm" value=" 提交 "
align="MIDDLE">
<input type="Reset" value=" 清除 " align="MIDDLE">
</form>
F. 列表框 (Selectable Menu)
<select name=*>
<option> ...
</select>
<SELECT> 是列表框标记,列表中的选项由 <OPTION> 给出。
例:
<form action="citychoice.asp" method="POST"> Which city you like?
<select name="Citylike">
< option value="cd"> 成都 </option>
<option value="sh" selected > 上海 </option>
<option value="sz"> 深圳 </option>
<option value="qd"> 青岛 </option>
<option value="km"> 昆明 </option>
</select>
</form>
selected : 表示该选项被预选
<form action="citychoice.asp" method="POST"> Which city you like?
<select name="Citylike" size=4 >
< option value="cd" selected > 成都 </option>
<option value="sh" > 上海 </option>
<option value="sz"> 深圳 </option>
<option value="qd"> 青岛 </option>
<option value="km"> 昆明 </option>
</select>
</form>
size=4: 列出选项的项数
<form action="citychoice.asp" method="POST"> Which city you like?
<select name="Citylike" size=4 multiple >
< option value="cd" selected > 成都 > </option>
<option value="sh"> 上海 </option>
<option value="sz"> 深圳 </option>
<option value="qd"> 青岛 </option>
<option value="km"> 昆明 </option>
</select>
</form>
multiple: 实 现列表中选项的多选,(用键盘的 Ctrl + 鼠标点击实现)
G. 文本区域
<textarea name=* rows=** cols=**> ... <textarea>
常用于填写较多文字的场合
<textarea name="comments" cols="40" rows="4">
name="comments" , 文字区域的名称,作识别之用,传到处理程序。
cols= "40" : 文字区域宽度 。
rows= "4" : 文字区域高度
例 :
<form action="notes.asp" method="POST">
请填入您的建议 :<p>
<textarea name="comments" cols="40" rows="4" >
这是预设的字句,可以什么都不写 </textarea>
</form>
八 . 嵌入多媒体流
1. 嵌入背景音乐 ( 仅适用于 IE)
<bgsound src=# loop=#2>
#1 音乐文件的 URL
#2 播放的循环数
<bgsound src=”http://202.115.4.176/zsecomer.wav” loop=2>
<bgsound src=”http://202.115.4.176/station.mp 3” >
2. 嵌入视频 ( 仅适用于 IE)
例 1
<img src=”url.gif” dynsrc=”url.avi”>
url.avi : 播放的视频文件
url.gif: 视频的封面,即:在浏览器尚未完全读入 AVI 文件时,
先在 AVI 播放区域显示该图象
<img src=”http://202.115.4.176/top.gif” dynsrc=
”http://202.115.4.176/Sample.avi”>
用鼠标控制播放
例 2
<img src= http://202.115.4.176/top.gif dynsrc=
"http://202.115.4.176/sample.avi"
start=mouseover >
start=mouseover: 鼠标移到 AVI 播放区域之上时才开始播放 AVI.
D. 密码框
HTML快速入门4的更多相关文章
- Web Api 入门实战 (快速入门+工具使用+不依赖IIS)
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...
- SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)
SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...
- 前端开发小白必学技能—非关系数据库又像关系数据库的MongoDB快速入门命令(2)
今天给大家道个歉,没有及时更新MongoDB快速入门的下篇,最近有点小忙,在此向博友们致歉.下面我将简单地说一下mongdb的一些基本命令以及我们日常开发过程中的一些问题.mongodb可以为我们提供 ...
- 【第三篇】ASP.NET MVC快速入门之安全策略(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- Mybatis框架 的快速入门
MyBatis 简介 什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除 了几乎所有的 JDBC 代码和参数的手工设置以及结果 ...
- grunt快速入门
快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本 ...
- 【第一篇】ASP.NET MVC快速入门之数据库操作(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 【第四篇】ASP.NET MVC快速入门之完整示例(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
随机推荐
- ThinkPHP中简单的CURD操作
前言 我们通过一个简答例子来简述CURD的操作.首先看一下数据库的样子,其中id为自增行,其它是varchar 一.查询操作 首先,创建在Controller文件夹下创建一个User控制器,在该控制器 ...
- 小记:Quartz 当 Job 执行时间超过触发间隔时间时所发生的情况
一个普通的 Job 实现如下: public class Job1 : IJob { public void Execute(IJobExecutionContext context) { Conso ...
- jquery事件的区别
1. mouseenter 和 mouseover (mouseleave 和 mouseout) 前者鼠标进入当前元素触发,内部的子元素不会触发事件. 而后者是进入当前元素后,当前元素和内部的子元 ...
- Spring aop的实现原理
简介 前段时间写的java设计模式--代理模式,最近在看Spring Aop的时候,觉得于代理模式应该有密切的联系,于是决定了解下Spring Aop的实现原理. 说起AOP就不得不说下OOP了,OO ...
- Error: java.lang.UnsatisfiedLinkError: no ntvinv in java.library.path
Error Message When compiling or executing a Java application that uses the ArcObjects Java API, the ...
- OpenLayers中地图缩放级别的设置方法
来源于:http://www.cnblogs.com/sailheart/archive/2011/03/15/1984519.html 一.概述 在OpenLayers中,地图必须具有一个缩放级别的 ...
- [转载]VS2012编译C语言scanf函数error的解决方法
在VS 2012 中编译 C 语言项目,如果使用了 scanf 函数,编译时便会提示如下错误: error C4996: 'scanf': This function or variable may ...
- WEB中的cookie
首先来一篇好文章,刚好看到的: 沉默中的狂怒 —— Cookie 大喷发---------------- http://www.cnblogs.com/index-html/p/mitm-cookie ...
- javaIO(三)
- 通过HTTP协议实现多线程下载
1. 基本原理,每条线程从文件不同的位置开始下载,最后合并出完整的数据. 2. 使用多线程下载的好处 下载速度快.为什么呢?很好理解,以往我是一条线程在服务器上下载.也就是说,对应在服务器上, ...