【Web开发及人机交互导论】表单

代码：Github仓库地址

一、实验目的

1. 理解表单的概念，熟练掌握表单创建方法。
2. 掌握表单相关属性设置。
3. 掌握表单输入、多行输入、列表框等对象属性的设置。
4. 学会使用域和域标题来分组表单元素。
5. 学会设计用户登录、用户注册、网上调查问卷等类似页面。

二、实验环境

Windows10
HBuilderX

三、实验步骤

项目1 留言板设计——“中国科学技术协会科技工作者建言”

1. 根据排版要求首先编写HTML5文字部分
   

注意：在div2中第一行，倒数第二行添加属性colspan=“2”，设置为一行一格

2. 添加实验手册中提供的css样式
   

对照目标样例，寻找需要优化部分

1. 留言板处标题未居中
2. 表单中文字颜色错误
3. 文字无缩进
4. 最后注意事项未居中
5. 提交清空按键位置未剧中

3. 添加新的CSS属性

问题1：添加属性align=“center”；
问题2：添加class=”td4”,

.td4 {
			line-height: 22px;
			font-size: 15px;
			color: #ff0000;
			width: 100px;
			font-weight: normal;
			}

问题3： 添加内嵌CSS：style=“text-indent: 2em; color: #5555ff;”
问题4： 添加属性align=“center”；
问题5： 使用相对位置属性，分别向右向左调整。style=“position: relative;right: 280px;”

5. 根据显示效果，更改细节（字体大小及间距等…）
   

项目2 大学生暑期社会实践调查问卷

1. 根据排版要求首先编写HTML5文字部分
   

2. 添加实验手册中提供的css样式

对照目标样例，寻找需要优化部分

1. 介绍语部分文字颜色错误，第二段未缩进
2. 第八段标题位置错误
3. 提交/清空按钮位置未居中
4. 版权声明未居中，颜色错误
   

3. 添加新的CSS属性

问题1：添加属性 style=" color:#0c49cc;text-indent: 2em;"
问题2：添加属性 style=“float: left;” 左浮动
问题3：使用相对位置属性，分别向右向左调整。style=“position: relative;left: 580px;”
问题4： 添加属性 style=“color: #0000FF;text-align: center;”

4. 根据显示效果，更改细节（字体大小及间距等…）
   

四、结果与分析

项目1 留言板设计——“中国科学技术协会科技工作者建言”

项目2 大学生暑期社会实践调查问卷

问题分析：
两个项目都遇到了将提交，清空按钮居中的问题。
其中第二个项目的大框架宽度是100%，利用position：relative设置相对位置，会使得页面由于不同显示器/浏览器的宽度而导致按钮未必一定位于中央，所以解决方案是将大框架的宽度设置为固定值1400px，从而使按钮位于大框架相对中央，解决不同显示器/浏览器而导致的问题。