Web编程基础实验：HTML表单设计与实现.pdfVIP

实验三表单

班级：网络班学号：112208206130：

【实验目的】

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

【实验要求】

1．掌握表单的创建；

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

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

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

5．掌握常见表单控件。

【实验内容与步骤】

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

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

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

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

1

实验三实验三

班级：网络班：112208206130：

【实验目的】

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

【实验要求】

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

本框和文本框;3.掌握单选按钮、复选框;

4.掌握提交按钮、重置按钮;5.掌握常见表单控

件。

【实验内容与步骤】

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

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

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

“练‑咖啡最终效果‑咖啡最终效果”）。

1

附录：用户参考代码

!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

2

附录：用户参考代码

！doctypehtmlpublic‑//w3c//dtdhtml4.01transitional//en

htmlcontent=“text/html;charset=gb2312“title用户

/title

body表单名称=“form1”method=“post“action{vy7}”table

width=Border=“1”TRtdwidth=“24％{V19％”div对齐=“左”用户

名：/Div/TDTD宽度=“76％”76％“输入名称=MaxLength=“10”/

TD/TRTRtddiv对齐=“left”：/div/tdtdinput类型=

名称=“TextField2”/TD/TRTRtdDiv对齐=“left”