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

实验三表单

班级：网络班

学号：112208206104

：宋俊杰

【实验目的】

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

【实验要求】

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

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

框；4.掌握提交按钮、重置按钮；5.掌握常见

表单控件。

【实验内容与步骤】

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

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

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

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

实验三表单

班级：网络班

学号：112208206104

：宋俊杰

【实验目的】

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

【实验要求】

1.掌握表单的创建；

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

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

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

5.掌握常见表单控件。

【实验内容与步骤】

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

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

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

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

附录:用户参考代码

!DOCTYPEHTMLPUBLIC‑//W3C//DTDHTML4.01

Transitional//ENhtmlheadmetahttp‑equiv=Content‑Type

content=text/html;charset=gb2312title用户/title/head

body表单名称=form1方法=post动作=表格宽度=75%边框=1行单元格

宽度=24%对齐方式=left用户名：/div/td单元格宽度=76%输入框名称=

textfield类型=text最大长度=10/td/行行单元格对齐方式=left：/

div/td单元格输入类型=password名称=textfield2/td/行行单元格对

齐方式=left确认：/div/td单元格输入类型=password名称=textfield3

/td/行行单元格对齐方式=left电子邮件：/div/td单元格输入类型=

text名称=textfield4/td/行

附录：用户参考代码

!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