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>

</FORM>

</BODY>

</HTML>

修改后文件，出现了“确定”文字的按钮，用鼠标点击这个按钮，通知浏览器－表单的文本框中已

输完信息。

表单将信息收集后，一般情况下，要将输入的信息交给一个后台的程序去处理，如何交给别的程序，

需要借助表单的 ACTION 属性

假如要将信息交给某个 ASP 程序 mypage.asp 来处理，可以这样写：

<HTML>

<HEAD>

<TITLE>a simple example page -FORM [ 人文教程 ] </ TITLE >

</HEAD>

<BODY >

<INPUT>

</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>

</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 字符

例 :

name ：单行文字输入框的名字，由处理程序接收该框的信息。

Value ：单行文字框的初始值，可省略。

Align ：文字的位置，可选值： top, middle, bottom, left, right 。

Size: 限制输入框的宽度

Maxlength ：此一单行文字盒可输入字符的上限

例：

请填入电话号码： <input type="Text" name="telphone" value=" " Size=10 Maxlength="8">
</form>

B. 单选框

Type= “ Radio ” 给出单选按钮，能产生一个单选框，

例：

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> 您认为美英联军对伊拉克的战争是违背国际法吗？

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 是完全相同的。

请输入 ID ： <input type="Text" name="name"> <br>
请输入密码： <input type="Password" name="pw" maxlength="9">

</form>

E 确认和重置按钮

表单的两个重要的输入按钮

Type=“ Submit ” 确认

Type=“ Reset ” 重置

例：

value=" 提交 " ，显示在按钮上，可以不用，确认的内定值为 Submit Query

value=" 清除 " 显示在按钮上，重置的内定值为 Reset

例：

<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> 中华

<input type="Submit" name="subm" value=" 提交 "

align="MIDDLE">

</form>

F. 列表框 (Selectable Menu)

<SELECT> 是列表框标记，列表中的选项由 <OPTION> 给出。

例：

<form action="citychoice.asp" method="POST"> Which city you like?
<select name="Citylike">
< option value="cd"> 成都 </option>

selected : 表示该选项被预选

<form action="citychoice.asp" method="POST"> Which city you like?
<select name="Citylike" size=4 >
< option value="cd" selected > 成都 </option>

size=4: 列出选项的项数

<form action="citychoice.asp" method="POST"> Which city you like?
<select name="Citylike" size=4 multiple >
< option value="cd" selected > 成都 > </option>

multiple: 实现列表中选项的多选，（用键盘的 Ctrl + 鼠标点击实现）

G. 文本区域

常用于填写较多文字的场合

name="comments" , 文字区域的名称，作识别之用，传到处理程序。

cols= "40" : 文字区域宽度。

rows= "4" : 文字区域高度

例 :

请填入您的建议 :<p>

这是预设的字句，可以什么都不写 </textarea>

</form>

八 . 嵌入多媒体流

1. 嵌入背景音乐 ( 仅适用于 IE)

#1 音乐文件的 URL

#2 播放的循环数

<bgsound src=”http://202.115.4.176/zsecomer.wav” loop=2>

2. 嵌入视频 ( 仅适用于 IE)

例 1

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快速入门系列均系转载

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 准备我推荐 ...

随机推荐

.net 开发人员如何自处
关于N家还是J家,谁家更阔绰有前途的问题,每年都要讨论一会,当然和各位兄弟在岗位上迷茫,不知位置在哪有关系,不过这个问题基本算是伪问题,这种东西放到更高的维度,真的什么都不是. 但是为什么J家好像是不 ...
22.C#分组和查询延续及选择综合症(十一章11.6-11.7)
对于昨天的连接还有一个知识点没有说,那就是分组连接.是11.5中的内容,补上. 分组连接的格式:join 元素 in 序列 on 条件表达式 into 新的序列内连接和分组连接之间的一个重要差异(即 ...
WEB前端开发规范
WEB前端开发规范规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本 ...
AtomicInteger源码分析
问题背景最近在看LinkedBlockingQueue看到了其中的count使用AtomicInteger修饰,之前也看过AtomicInteger的一些解释,也是似懂非懂的,今天深入的了解了其实现 ...
Google-解决在调试页面或者js时总是提示烦恼的断点问题
按F12键,然后切换到Source标签,看底下的那个跟暂停一样的图标是不是变成蓝色或紫色了? 如果是蓝色或者紫色,则把他切换到“灰色”状态(点击图标就会切换成不同的状态.或者可能是其他颜色状态),如下 ...
Java-小数点控制
package 运算及类型转换类; import java.text.DecimalFormat; public class 控制小数点类 { public static double decimal ...
【UVA 11401】Triangle Counting
题题意求1到n长度的n根棍子(3≤n≤1000000)能组成多少不同三角形. 分析我看大家的递推公式都是 a[i]=a[i-1]+ ((i-1)*(i-2)/2-(i-1)/2)/2; 以i 为 ...
使用XML序列化器生成XML文件和利用pull解析XML文件
首先,指定XML格式,我指定的XML格式如下: <?xml version='1.0' encoding='utf-8' standalone='yes' ?> <message&g ...
Cocos2d-X3.0 刨根问底（七）----- 事件机制Event源码分析
这一章,我们来分析Cocos2d-x 事件机制相关的源码, 根据Cocos2d-x的工程目录,我们可以找到所有关于事件的源码都存在放在下图所示的目录中. 从这个event_dispatcher目录中的 ...
直接运行可执行文件linux终端一闪而过
运行elasticsearch的时候进入bin目录,ela 然后tab提示的内容中没有e..s..,很奇怪,然后我直接双击运行es,终端一闪而过,我就手动打开终端, ./elasticsearch 这 ...

HTML快速入门4

<bgsound src=”http://202.115.4.176/zsecomer.wav” loop=2>

HTML快速入门4的更多相关文章

随机推荐

热门专题