HTML : 表单实现
2016-12-12 本文已影响0人
z嘉嘉嘉
作业内容
使用纯html实现考试页面（不使用任何css/js），使用正确合适的标签做出如下的页面效果。内容需要完全一样，但页面样式仅供参考：
知识点
相关标签：
- **<textarea> **
<textarea>标签定义多行的文本输入控件。- 文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
- 可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
<textarea rows="3" cols="20">
hello world !
</textarea>
-
HTML 表单
[参考] W3School ： HTML 表单
思路
- 该页面分为6个模块
1个标题
5个题目模块
1个提交按钮
每个题目模块包含： 一个小标题 + 一个有序列表
每个列表的不同根据其实现内容不同列数和内容不同
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>统一建模语言理论测试</title>
</head>
<body>
<h1>统一建模语言理论测试</h1>
<div>
考试科目：统一建模语言<br/>
时间：100分钟<br/>
得分：<br/>
班级（必填）：<input type="text"/><br/>
学号（必填）：<input type="text"/><br/>
姓名（必填）：<input type="text"/><br/>
</div>
<div>
<h4>一、填空题（每空5分，共20分）</h4>
<ol>
<li>
UML的中文全称是：<br/>
<input type="text"/>
</li>
<li>
对象最突出的特征是：<br/>
<input type="text"/><input type="text"/><input type="text"/>
</li>
</ol>
</div>
<div>
<h4>二、选择题（每题10分，共20分）</h4>
<ol>
<li>UML 与软件工程的关系是：<br/>
<input type="radio">(A)UML就是软件工程<br/>
<input type="radio">(B)UML参与到软件工程中软件开发过程的几个阶段<br/>
<input type="radio">(C)UML与软件工程无关<br/>
<input type="radio">(D)UML是软件工程的一部分<br/>
</li>
<li>Java语言支持：
<input type="radio">(A)单继承<br/>
<input type="radio">(B)多继承<br/>
<input type="radio">(C)单继承和多继承都支持<br/>
<input type="radio">(D)单继承和多继承都不支持<br/>
</li>
</ol>
</div>
<div>
<h4>三、多项选择题（每题10分，共20分）</h4>
<ol>
<li>用例的粒度分为以下哪三种：<br/>
<input type="checkbox"/>(A)概述级<br/>
<input type="checkbox"/>(B)需求级<br/>
<input type="checkbox"/>(C)用户目标级<br/>
<input type="checkbox"/>(D)子功能级<br/>
</li>
<li>类图由一下哪三部分组成：<br/>
<input type="checkbox"/>(A)名称（Name）<br/>
<input type="checkbox"/>(B)属性（Attribute）<br/>
<input type="checkbox"/>(C)操作（Operation）<br/>
<input type="checkbox"/>(D)方法（Function）<br/>
</li>
</ol>
</div>
<div>
<h4>四、判断题（每题10分，共20分）</h4>
<ol>
<li>用例图只是用于和客户交流沟通的,用于确定需求。<input type="radio"/>对<input type="radio"/>错</li>
<li>在状态图中,终止状态在一个状态图中允许有任意多个。<input type="radio"/>对<input type="radio"/>错</li>
</ol>
</div>
<div>
<h4>五、简答题（每题10分，共20分）</h4>
<ol>
<li>简述什么是模型以及模型的表现形式？<textarea></textarea></li>
</ol>
</div>
<input type="button" value="计算分数"/>
</body>
</html>
