HTML表单设计与控件应用实验指导.pdfVIP

实验三表格

课程：学号：：

【实验目的】

了解HTML表单，掌握各种表单控件。

【实验要求】

1.掌握表单的创建；2.掌握单行文本框、多行

文本框和文本框；3.掌握单选按钮、表单；

4.掌握提交按钮、重置按钮；5.掌握常用表单

控件。

【实验内容与步骤】

1、设计一个用户页面register.htm，效果图如下：

2、利用“练习案例‑咖啡”在Dreamweaver环境下建立一个站点。

3、在index.html页面表单的单元格中相应的表单元素，效果如图所示（可参考“练

习案例‑最终咖啡效果”）。

实验三表单

班级：学号：：

【实验目的】

了解HTML表单，掌握各种表单控件。

【实验要求】

1.掌握表单的创建；

2.掌握单行文本框、多行文本框和文本框；

3.掌握单选按钮、复选框；

4.掌握提交按钮、重置按钮；

5.掌握常见表单控件。

【实验内容与步骤】

1、设计一个用户页面register.htm，效果图如下：

2、利用“练习案例-咖啡”在Dreamweaver环境下建立一个站点。

3、在index.html页面表格的单元格中相应的表单元素，最终效果如图所示（可参考“练

习案例-咖啡最终效果”）。

附录：用户参考代码

!DOCTYPEHTMLPUBLIC‑//W3C//DTDHTML4.01过渡//EN

htmlheadmetahttp‑equiv=Content‑Type内容=text/html;字符集=

gb2312标题用户/title/head

正文表单名称=表单1方法=发布操作=表格宽度=75%边框=1trtd宽度=24

%div对齐=“左”用户名：/div/tdtd宽度=“76%”输入名称=“文本字段”类

型=“文本”maxlength=10/td/trtrtddivalign=left：/div/td

td输入类型=“”name=textfield2/td/trtrtddivalign=left确

认：/div/tdtdinput输入=名称=textfield3/td/trtrtddiv对齐=

左电子邮件:/div/tdtdinput类型=“文本”名称=“文本字段4”/td/tr

附录：用户参考代码

!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN

html

head

metahttp-equiv=Content-Typecontent=text/html;charset=gb2312

title用户/title

/head

body

formname=form1method=postaction=

tablewidth=75%border=1

tr

tdwidth=24%divalign=left用户名:/div/td

tdwidth=76%inputname=textfieldtype=textmaxlength=10/td

/tr

tr

tddivalign=left：/div/td

tdinputtype=passwordname=textfield2/td

/tr

tr

tddivalign=left确认：/div/td

tdinputtype=passwordname=textfield3/td

/tr

tr

tddivalign=left电子邮件：/div/td

tdinputtype=textname=textfield4/td

/tr