HTML快速入门4

简介: 七、表单 1. 概述 建立交互式的站点,需要使用 HTML 表单,它可以让用户提供信息,并对此作出处理。可以建立类似 复选框、单选按钮及文本框的控件。 掌握表单的使用对 Active Server Pages 编程是必需的。

七、表单

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>

HTML快速入门(四)

当该文件在浏览器上显示时,一个三维外观的框显示在浏览器中 , 你可以在框中输入文字。但输入

文字后什么也不会发生。该表单没有实 际用途。

该例的问题是 : 表单不知道你已经输入信息完毕。解决这个问题,需要加入另一个表单元素:提交

按钮 submit 。下面的例子是同一个表单,只是加了一个 submit 按钮:

<HTML>

<HEAD>

<Title> a simple example page –FORM 表单 </Title>

</HEAD>

<BODY>

<FORM>

<INPUT>

<INPUT TYPE=Submit Value=” 确定 ”>

</FORM>

</BODY>

</HTML>

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>

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>

HTML快速入门(四)

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>

HTML快速入门(四)

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>

HTML快速入门(四)

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>

HTML快速入门(四)

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: 列出选项的项数

HTML快速入门(四)

 

<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 + 鼠标点击实现)

HTML快速入门(四)

 

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>

HTML快速入门(四)

八 . 嵌入多媒体流

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.

HTML快速入门(四)

D. 密码框

HTML快速入门(四)

 
HTML快速入门系列均系转载
若转载请注明出处!若有疑问,请回复交流!
目录
相关文章
|
9天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
19 0
|
2月前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
46 0
|
4天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
14 1
|
1月前
|
移动开发 前端开发 JavaScript
HTML语言基础知识入门
HTML语言基础知识入门
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
64 1
|
2月前
|
移动开发 前端开发 搜索推荐
html5基础入门
html5基础入门
66 0
|
3月前
|
移动开发 Python HTML5
Python办公自动化【发送普通邮件、发送HTML邮件、发送附件邮件-smtplib、批量发送邮件-smtplib、发送邮件-zmail】(八)-全面详解(学习总结---从入门到深化)
Python办公自动化【发送普通邮件、发送HTML邮件、发送附件邮件-smtplib、批量发送邮件-smtplib、发送邮件-zmail】(八)-全面详解(学习总结---从入门到深化)
43 0
|
3月前
|
JSON 定位技术 API
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)
33 0
|
3月前
|
移动开发 JavaScript 前端开发
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)(上)
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)
43 0
|
3月前
|
JSON 定位技术 数据格式
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)
29 0