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

2024-06-01 05:34| 来源: 网络整理| 查看: 265

代码：Github仓库地址

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

Windows10 HBuilderX

三、实验步骤项目1 留言板设计——“中国科学技术协会科技工作者建言” 根据排版要求首先编写HTML5文字部分在这里插入图片描述

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

添加实验手册中提供的css样式在这里插入图片描述

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

留言板处标题未居中表单中文字颜色错误文字无缩进最后注意事项未居中提交清空按键位置未剧中添加新的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;”

根据显示效果，更改细节（字体大小及间距等…）在这里插入图片描述

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

根据排版要求首先编写HTML5文字部分在这里插入图片描述

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

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

添加新的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;”

根据显示效果，更改细节（字体大小及间距等…）在这里插入图片描述

四、结果与分析

项目1 留言板设计——“中国科学技术协会科技工作者建言” 在这里插入图片描述

项目2 大学生暑期社会实践调查问卷在这里插入图片描述

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

【本文地址】

公司简介

联系我们