Html的表单基础知识

博客涉及HTML和ColdFusion技术,包含输入事件、动作及搜索相关内容,属于信息技术领域前端开发范畴。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Html的表单基础知识



组成Cgi程序的是两部分,一部分是html页面,就是用户看到的东西。另一部分则是运行在
服务器上的程序。一般来说,我们先些html页面,再些程序。所以我们的学习页是这样,先看看表单的写法,再去学习CGI程序。
对于html的表单,有比较复杂和详细的规定。但由于它们是属于html标准里的东西,所以我不打算详细讲解。最好是你自己找本书看看。

Html表单

<Form></Form>标记把输入域组合起来,并且说明了表单提交的方式 和地点.Form标签有许多属性,比如NAME等等.具体的属性,将在使用的时候说明.

在FORM里还有许多不同的标签,正是它们组成了表单的各种成分.


<INPUT [TYPE=TEXT] NAME="TEXT-ID" [SIZE=NN] [MAXLENGTH=NN] [VALUE='DEFAULT TEXT']>
该语句在HTML里产生一个文本标签,[]里表示该属性是可选的.

<INPUT TYPE=SUBMIT [NAME='BUTTON-ID'][VALUE="BUTTON LABLE TEXT"]>
该语句产生一个提交按键,用于表单的提交.它提供一个发送表单的按纽,信息发向<FORM>标记里 ACTION属性里给出的URL.根据表单方法(METHOD)指定的HTTP请求类型 提交信息.在以后我将详细讲解.

<INPUT TYPE=RESET[VALUE='BUTTON LABEL TEXT']>
具有TYPE=RESET属性的INPUT将产生一个按钮,它能重置表单各个域 的内容到初始状态.

<INPUT TYPE=RADIO NAME="RADIO-SET -ID" vALUE="CHOICE-ID" [CHECKED]>
表单可以用此标记提示用户从几个选择项里作出选择.么个选择项目都是一个单选按钮它们具有相同的NAME值.在任何时候只要有一个被选中.此标记有一个VALUE属性,如果它被 选中,则发送表单时将以"RADIO-SET-ID=CHOICE-ID"的形式发送.


<INPUT TYPE=CHECKBOX NAME='BOX-SET-ID' VALUE='CHOICE-ID' [CHECKED]>
此标签将产生一个'OFF'或'ON'的开关.它同RADIO相似,但是可以多选.当提交表单的时候 如果一个复选框是选中的饿,那么它的VALUE属性作为BOX-SET-ID表单数据的值被提交.几个 拥有同样NAME属性的复选框为一组.它们用','分开的列表.



 HTML之表单

<BUTTON>...</BUTTON>
用法:      创建一个按钮
开始/结束标识: 必须/必须
属性:      %coreattrs,%i18n,%events
         name="..."按钮的控制名
         value="..."按钮的值
         type="..."按钮的类型(button, submit, reset)
         disabled="..."把按钮的状态设置为不能使用
         tabindex="..."通过定义的tabindex值确定在不同元素之间获得焦点的顺序
         onfocus="..."当元素获得焦点时发生的事件
         onblur="..."当元素失去焦点时发生的事件
空:       不允许

<FIELDSET>...</FIELDSET>
用法:      把相互关联的控件组合成一组
开始/结束标识: 必须/必须
属性:      %coreattrs,%i18n,%events
空:       不允许

<FORM>...</FORM>
用法:      创建一个包含有能让用户输入数据的控件的表单
开始/结束标识: 必须/必须
属性:      %coreattrs,%i18n,%events
         action="..."接收数据的服务器的URL
         method="..."HTTP的方法(get, post)。其中get是被反对使用的
         enctype="..."指定MIME(Internet媒体类型)
         onsubmit="..."当提交表单时发生的内部事件
         noreset="..."在重新设置表单时发生的内部事件
         target="..."决定把内容显示在什么地方(_blank, _parent, _self, _top)
         accept_charset="..."编码字符的列表
空:       不允许

<INPUT>
用法:      定义用在表单中的控件
开始/结束标识: 必须/非法
属性:      %coreattrs,%i18n,%events
         type="..."用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button)
         name="..."控件的控制名(要求是除了submit和reset之外的任何名字)
         value="..."控件的初始值
         checked="..."把一个单选钮设置为选中的状态
         disabled="..."把控件的状态设置为不能使用
         readonly="..."只对输入密码的文本框使用
         size="..."表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目
         maxlength="..."指定可以输入的最多的字符数目
         src="..."一个图像控件的URL
         alt="..."另外一种文本描述
         usemap="..."到客户端图形镜像的URL
         align="..."被反对。控制对齐方式(left, center, right, justify)
         tabindex="..."通过定义的tabindex值确定在不同元素之间获得焦点的顺序
         onfocus="..."当元素获得焦点时发生的事件
         onblur="..."当元素失去焦点时发生的事件
         onselect="..."当元素被选中时发生的事件
         onchang="..."当元素状态被改变时发生的事件
         accept="..."允许上载的文件类型
空:       允许

<ISINDEX>
用法:      提示用户输入
开始/结束标识: 必须/非法
属性:      %coreattrs,%i18n
         prompt="..."为输入域提供一个提示条
空:       允许
注释:      被反对使用

<LABEL>...</LABEL>
用法:      为一个控件提供标签
开始/结束标识: 必须/必须
属性:      %coreattrs,%i18n,%events
         for="..."把一个标签与一个定义过的控件联系起来
         disabled="..."把控件的状态设置为不能使用
         accesskey="..."为该元素指定一个热键
         onfocus="..."当元素获得焦点时发生的事件
         onblur="..."当元素失去焦点时发生的事件
空:       不允许

<LEGEND>...</LEGEND>
用法:      为FIELDSET元素指定一标题
开始/结束标识: 必须/必须
属性:      %coreattrs,%i18n,%events
         align="..."被反对。控制对齐方式(left, center, right, justify)
         accesskey="..."为该元素指定一个热键
空:       不允许

<OPTION>...</OPTION>
用法:      在SELECT元素中设置一个选项
开始/结束标识: 必须/可选
属性:      %coreattrs,%i18n,%events
         selected="..."指定该选项是否被选中
         disabled="..."把控件的状态设置为不能使用
         value="..."如果一个控件被提交,设置这个提交的值
空:       不允许

<SELECT>...</SELECT>
用法:      为用户做选择创建各个选项
开始/结束标识: 必须/必须
属性:      %coreattrs,%i18n,%events
         name="..."按钮的控制名
         size="..."许多列组合到一起的宽度
         multiple允许同时选择多列内容
         disabled="..."把控件的状态设置为不能使用
         tabindex="..."通过定义的tabindex值确定在不同元素之间获得焦点的顺序
         onfocus="..."当元素获得焦点时发生的事件
         onblur="..."当元素失去焦点时发生的事件
         onselect="..."当元素被选中时发生的事件
         onchang="..."当元素状态被改变时发生的事件
空:       不允许

<TEXTAREA>...</TEXTAREA>
用法:      创建一个允许用户多行输入的区域
开始/结束标识: 必须/必须
属性:      %coreattrs,%i18n,%events
         name="..."按钮的控制名
         rows="..."各个行的宽度
         cols="..."各个列的高度
         disabled="..."把控件的状态设置为不能使用
         readonly="..."只对输入密码的文本框使用
         tabindex="..."通过定义的tabindex值确定在不同元素之间获得焦点的顺序
         onfocus="..."当元素获得焦点时发生的事件
         onblur="..."当元素失去焦点时发生的事件
         onselect="..."当元素被选中时发生的事件
         onchang="..."当元素状态被改变时发生的事件
空:       不允许
注释:      用于表示显示出来的文本内容



 建立HTML查询表单

建立HTML查询表单

创建动态参数的最常用的方法是使用作为用户界面的表单(Form)。你可以在表单中包含文本框,选择框,单选按钮,多选按钮等,供用户用来输入信息。表单很容易建立,并可提供许多灵活的数据输入选项。表单提交时,Form变量会自动被创建,你可以利用这些变量执行对数据源的查询。

除了HTML表单,你还可以用ColdFusion的CFFORM标签建立表单。关于这方面的详细内容后文有述。

例子:查询表单

下面的例子是一个简单的查询表单:

<FORM ACTION="employeesearch.cfm" METHOD="Post">

<PRE>

Last Name: <INPUT TYPE="text"

NAME="LastName">

Department:

<SELECT NAME="Department">

<OPTION>Accounting

<OPTION>Administration

<OPTION>Engineering

<OPTION>Sales

</SELECT>

<INPUT TYPE="Submit" VALUE="Search">

</PRE>

</FORM>

这个表单有两项输入:LastName和Department.用户可以在文本框中输入名字,从选择列表中选择一个部门。每个OPTION标签提供给用户一个选项。当提交按钮被点击时,ACTION属性所指定的文件会被打开,Form变量作为动态参数被传递给该文件。

假设用户输入了名字“Peterson”并选择了“Sales”。当她点击提交按钮时,下面的Form变量会被传递给文件employeesearch.cfm:

LastName=Peterson

Department=Sales

设置表单的ACTION属性和METHOD属性

你必须设置表单的ACTION属性,告诉流览器当用户点击提交按钮时调用哪一个文件。你还必须将表单的METHOD属性设置为Post。在下面的例子中,当用户点击提交按钮时,调用employeesearch.cfm文件。

<FORM ACTION="employeesearch.cfm" METHOD="Post">

实现数据查询字段

为表单建立查询字段非常简单。你只需要为你想搜索的数据库字段建立表单查询字段。为了使文件有更好的可读性,可以让表单字段与数据库字段有相同的名字。

例如,如果你有一个表Employees,表中有三个字段FirstName,LastName,和Department,你的表单字段可以是:

Name: <INPUT TYPE="text" NAME="FirstName">

LastName: <INPUT TYPE="text" NAME="LastName">

Department: <INPUT TYPE="text" NAME="Department">

URL参数REQUSTTIMEOUT

当请求一个ColdFusion文件时,你可以在URL中传递REQUESTTIMEOUT参数,指定数据源连接超时的秒数,以防止一个数据源连接花费太多的时间。这个参数将覆盖ColdFusion Administrator中的缺省值。其使用的语法为:

http://myserver.com/cfpages?REQUESTTIMEOUT=100

例子:动态SQL

下面的文件searchform.cfm建立了一个查询表单:

<HTML>

<HEAD>

<TITLE>Employee Search</TITLE>

</HEAD>

<BODY>

<FORM ACTION="employeesearch.cfm" METHOD="Post">

<PRE>

Last Name: <INPUT TYPE="text" NAME="LastName">

Department: <SELECT NAME="Department">

<OPTION>Accounting

<OPTION>Administration

<OPTION>Engineering

<OPTION>Sales

</SELECT>

<INPUT TYPE="Submit" VALUE="Search">

</PRE>

</FORM>

</BODY>

</HTML>

当用户点击提交按钮时,下面的文件Employeesearch.cfm用来选择和显示查询结果:

<!--- CFML application page to implement employee search --->

<!--- Query the database --->

<CFQUERY NAME="EmployeeList"

DATASOURCE="CompanyDB">

SELECT *

FROM Employees

WHERE LastName = ?LastName#

AND Department = ?Department#

</CFQUERY>

<!--- Page header --->

<HTML>

<HEAD>

<TITLE>Employee Search Results</TITLE>

</HEAD>

<BODY>

<H2>Organization Search Results</H2>

<!--- Summarize search criteria for user --->

<CFOUTPUT>

<P>The search for #Form.LastName# in

the #Form.Department#

returned these results:</P>

</CFOUTPUT>

<--- Display results --->

<CFOUTPUT QUERY="EmployeeList">

<HR>

#FirstName# #LastName# (Phone: #PhoneNumber#)<BR>

</CFOUTPUT>

<!--- Page footer --->

<P>

Thank you for searching the employee database!</P>

<HR>

</BODY>

</HTML>

模式匹配查询

当你允许用户输入文本作为查询条件的一部分时,你通常不想查询与输入完全匹配的值,你通常需要查询与输入文本类似的值。在这种情况下,可以使用模式匹配查询。要实现模式匹配查询,可以将一个或多个通配符(在ODBC中用“%”表示)与LIKE运算符结合使用。

例如,让用户填充一个名为“LastName”的Form字段,查询一员工信息,可以用如下语法:

SELECT *

FROM Employees

WHERE LastName LIKE ‘#LastName#%’

这个查询返回每个其名字以用户输入值开头的员工的信息。例如,若输入“Jon”,返回的记录可能有”Jones”和”Jonson”。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值