11-2-1 插入表单与按钮
制作表单网页的首要步骤是在HTML文件中使用<FROM>…</FROM>标记插入表单,然后使用<INPUT> 标记插入按钮。表单上面通常会有“提交”(submit)和“重新输入”(Reset)两个按钮,当浏览者点击“提交”按钮时,浏览器默认的操作会将浏览 者输入的数据返回Web服务器,当浏览者点击“重新输入”按钮时,浏览器默认的操作会清除浏览者输入的数据,使表单恢复至起始状态。
现在我们就来为这个大大使用意见调查表插入表单及按钮:
1、首先,我们设置背景图片mobil0.jpg及插入标题图片mobil1.jpg;接下来,我们用<FROM>…</FROM>标记插入表单。
<HTML>
<BODY BACKGROUND=“mobil10.jpg”>
<P><IMG src=”http://127.0.0.1/Files/BeyondPic/2007-4/19/0741913555144159.jpg””></BUTTON>
如果您不想使用图片按钮,也可以这么写。
<BUTTON TYPE=“SUBMIT” NAME=“SUBMIT”>提交</BUTTON>
<BUTTON TYPE=“RESET” NAME=“RESET”>重新输入</BUTTON>
<BUTTON TYPE=“BUTTON” NAME=“QUERY”>查询</BUTTON>
<BUTTON>…</BUTTON>标记
标记说明:在表单内按钮,若配合上<IMG >标记,则可插入图片按钮。
属性说明:
◇ ACCESSKEY=“…”:设置按钮的按钮顺序。
◇ DISABLIED:取消按钮的功能。
◇ NAME=“…”:设置按钮的名称(限英文),此名称不会显示在网页,但可用于后端表单处理,供Script、表单处理程序使用。
◇ TYPE=“{SUBMIT,RESET,BUTTON}”:设置按钮的类型。SUBMIT表示按钮为提交按钮,当浏览者按下提交按钮时,表单数据会被返 回Web服务器;RESET表示按钮为重新输入按钮,当浏览者按下重新输入按钮时,表单数据会被消除或恢复为默认的状态;BUTTON表示为一般按钮无特 殊用途,但可另外指定Script、Applet等处理程序。
◇ VALUE=“…”:设置按钮的默认值。
◇ <BUTTON>标记含有CLASS、ID、STYLE、TITLE、LANG、DIR、onFocus、onBlur、onClick、 onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouerMove、onMouseOut、 onKeyPress、onKeyDown、onKeyUp等属性。
11-2-2 插入单行文本框
“单行文本框”允许浏览者输入单行的文字说明,如姓名、绰号、电话、地址、籍贯、出生地等信息。现在我们继续来为这个大哥大使用意见调查表插入单行文本框。
1、首先,我们要插入第一个单行文本框,这次,我们一样是使用<INPUT>标记,不同的是TYPE属性的值为“TEXT”,同时我们将单行文本框的宽度设置为40个字符,名称为“UserName”(限英文且需唯一)。
姓  名:<INPUT TYPE=“TEXT” NAME=“UserName” SIZE=“40”><BR>
备注:
◇ 同一个表单中所有字段的名称必须以英文命名且不得重复,这个名称不会显示在网页上,但可用于后端处理。
◇ 单行文本框默认是空白不显示任何数据,若要显示初始数据,可以在<INPUT>标记的VALUE属性中进行设置(中英文皆可)
◇ 若要设置浏览者可以输入的字符数,可以使用<INPUT>标记的MAXLENGTH属性;若要设置【Tab】键顺序,可以使用<INPUT>标记的TABINDEX属性,设定范围在1-999,数字越小,顺序越高。

2、接下来,我们要插入第二个单行文本框,这个文本框的名称为“UserMail”(限英文且需唯一),宽度为40个字符,初始值为username@mailserver.
<FORM>
姓  名:<INPUT TYPE=“TEXT” NAME=“UserName” SIZE=“40”><BR>
E-Mail:<INPUT TYPE=“TEXT” NAME=“UserMail”SIZE=“40”VALUE=“username@mailserver”><BR>
</FORM>
11-2-3 插入单选按钮
“单选按钮”就像只允许单选的选择题一样,我们通常会利用这个组件列出数选项,以询问用户的性别、年龄层、婚姻状况、最高学历等只有一个答案的问题。
现在我们来为这个大哥大使用意见调查表插入一组包含“未满20岁”、“20-29”、“30-39”、“40-49”、“50岁以上”等5个选项的单选按 钮,这组单选按钮的群组名称为“UserAge”(限英文且需唯一),默认的选项为第二个选项“20-29”,各个单选按钮的数值分别为Age1、 Age2、Age3、Age4、Age5(中英文皆可),同一组单选按钮的每个单选按钮需唯一的数值,这样在浏览者点击“提交按钮”,将表单数据返回 Web服务器之后,表单处理程序才能根据返回的群组名称及数值判断哪个单选按钮被选取。
年  龄:
<INPUT TYPE=“RADIO” NAME=“UserAge” VALUE=“Age1”>未满20岁
<INPUT TYPE=“RADIO” NAME=“UserAge” VALUE=“Age2”CHECKED>20-29
<INPUT TYPE=“RADIO” NAME=“UserAge” VALUE=“Age3”>30-39
<INPUT TYPE=“RADIO” NAME=“UserAge” VALUE=“Age4”>40-49
<INPUT TYPE=“RADIO” NAME=“UserAge” VALUE=“Age5”>50岁以上<BR>
11-2-4 插入复选框
“复选框”就像允许复选的选择题一样,它允许浏览者同时选取多个选项,我们通常会利用这个组件询问浏览者喜欢阅读哪些书籍、喜欢从事哪些活动等可以复选的问题。
现在,我们来为这个大哥大使用意见调查表插入一组包含“诺基亚”、“摩托罗拉”、“爱立信”、“三星”等四个选项的复选框,这四个复选框的名称为“UserPhone”(限英文且需唯一),其中“诺基亚”为初始状态。
您曾经使用过哪些厂牌的手机?
<INPUT TYPE=“CHECKBOX” NAME=“UserPhone” VALUE=“诺基亚”CHECKED >诺基亚
<INPUT TYPE=“CHECKBOX” NAME=“UserPhone” VALUE=“摩托罗拉”>摩托罗拉
<INPUT TYPE=“CHECKBOX” NAME=“UserPhone” VALUE=“爱立信”>爱立信
<INPUT TYPE=“CHECKBOX” NAME=“UserPhone” VALUE=“三星”>三星<BR>
11-2-5 插入多行文本框
“多行文本框”允许浏览者输入多行的文字说明,如个人意见、自我介绍等信息,我们可以使用<TEXTAREA>…</TEXTAREA>标记在表单中插入多行文本框。
<TEXTAREA>…</TEXTAREA>标记
标记说明:这个标记可在表单中插入多行文本框,它必须放在<FORM>…</FORM>标记之间。多行文本框默认是空白不显示任 何数据,若要在多行文本框显示默认数据,可以把数据放在<TEXTAREA>…</TEXTAREA>标记之间。
属性说明:
◇ ACCESSKEY=“…”:设置多行文本框的按键顺序。
◇ COLS=“n”:设置多行文本框的宽度(n表示字符数)。
◇ DISABLED:取消多行文本框,使之无法存取。
◇ NAME=“…”:设置多行文本框的名称(限英文),此名称不会显示在网页中,但可用于后端处理,供Script表单处理程序使用。
◇ READONLY:不允许浏览者更改多行文本框的数据。
◇ ROWS=“n”:指定多行文本框的高度(n表示列数)
◇ TABINDEX:设置【Tab】键顺序,也就是当浏览者按【Tab】键时,光标在表单字段跳跃的顺序,设置范围在1-999,数字越小,顺序越高。
◇ onFocus=“…”:设置当浏览者将焦点移到按钮上时所要执行的Script。
◇ onBlur=“…”:设置当浏览者将焦点自按钮上移开后所要执行的Script。
◇ onChange=“…”:设置当浏览者修改表单字段后所要执行的Script。
◇ onSelect=“…”:设置当浏览者在文字字段选取文字后所要执行的Script。
◇ <TEXTAREA>标记含有CLASS、ID、STYLE、TITLE、LANG、DIR、onClick、onDblClick、 onMouseDown、onMouseUp、onMouseOver、onMouerMove、onMouseOut、onKeyPress、 onKeyDown、onKeyUp等属性。
11-2-6 插入下拉式菜单
“下拉式菜单”允许浏览者从下拉式清单中选择项目,例如嗜好、兴趣、学历、籍贯等,我们可以使用<SELECT>…</SELECT>标记搭配<OPTION>标记来制作下拉式菜单。
<SELECT>…</SELECT>标记
标记说明:<SELECT>…</SELECT>标记的用途是在表单中插入下拉式菜单,这个标记必须搭配<OPTION>标记以指定下拉式菜单中的选项。
◇ ACCESSKEY=“…”:设置下拉式菜单的按键顺序。
◇ MULTIPLE:设置为浏览者可以在下拉式菜单中选取多个选项(复选)。
◇ NAME=“…”:设置下拉式菜单的名称(限英文),此名称不会显示在网页中,但可用于后端处理,供Script表单处理程序使用。
◇ READONLY:不允许浏览者更改下拉式菜单的选项。
◇ SIZE=“n”:设置下拉式菜单的高度。
◇ TABINDEX:设置【Tab】键顺序,也就是当浏览者按【Tab】键时,光标在表单字段跳跃的顺序,设置范围在1-999,数字越小,顺序越高。
◇ onFocus=“…”:设置当浏览者将焦点移到组件上时所要执行的Script。
◇ onBlur=“…”:设置当浏览者将焦点自组件移开后所要执行的Script。
◇ <SELECT>标记含有CLASS、ID、STYLE、TITLE、LANG、DIR、onChange、onSelect、 onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouerMove、 onMouseOut、onKeyPress、onKeyDown、onKeyUp等属性。
<OPTION>标记
标记说明:此标记放在<SELECT>…</SELECT>标记之间以指定下拉式菜单的选项。
属性说明:
◇ DISABLES:设置下拉式菜单选项,使之无法存取。
◇ SELECTED:设置预先选取的选项。
◇ VALUE=“…”:设置下拉式菜单选项的值(中英文皆可),当浏览者按下“提交”按钮之后,被选取的下拉式菜单选项的值会被返回服务器,若您没有设置VALUE属性,那么下拉式菜单选项的数据则会被返回服务器。
◇ <OPTION>标记含有CLASS、ID、STYLE、TITLE、LANG、DIR、onFocus、onBlur、onChange、 onSelect、onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、 onMouerMove、onMouseOut、onKeyPress、onKeyDown、onKeyUp等属性。
11-3 表单的后端处理
从上一节的<大哥大.htm>范例我们知道,在浏览者输入表单数据并按下“提交”按钮之后,表单数据会返回Web服务器,至于表单数据的返回 方式则取决于<FORM>标记的METHOD属性,METHOD=“GET”时,表单数据会被存储在环境变量QUERY_STRING中,表 单处理程序可由此变量取得表单数据(有些旧的浏览器会限制变量长度不得超过255个字符);当METHOD=“POST”时,表单处理程序可由标准输入 (Stdim)取得表单的数据。
如果我们使用<FORM>标记的ACTION属性指定表单处理程序,那么表单数据不仅会返回Web服务器,也会传送给表单处理程序,以做进一 步的处理,例如将表单数据以E-mail形式传送给指定的收件人、将表单数据写入数据库或查询数据库、将表单数据张,贴在留言簿或聊天室等等。
事实上,建立表单的输入界面并难,难的是在撰写表单处理程序,目前表单处理程序有CGI(Common Gateway Interface)程序和ASP(Active Server Pages)程序两种大类,这两类程序均属于服务器端程序,CGI程序通常由Perl或C语言撰写而成,而ASP程序通常由VBScript或 JavaScript撰写而成。
在本节中,我们将通过简单的ASP程序教导您如何使用Request对象读取浏览器端的数据及Cookie,至于电子邮件自动回复系统、聊天室、访客留言簿、在线投票、问卷调查表、搜索引擎、在线购物等高级的应用,请参阅后面的实例。

原创文章,转载请注明: 转载自老姜的博客

本文链接地址: 插入表单与按钮

无觅相关文章插件,快速提升流量

|2|left|yes