5.4 综合实例——创建用户反馈表单

本实例将结合使用一个表单内的各种元素，来开发一个简单网站的用户意见反馈页面。具体操作步骤如下：


01 分析需求。反馈表单非常简单，通常包含三个部分：在页面上方给出标题；标题下方是正文部分（表单元素）；最下方是表单元素提交按钮。在设计页面时，需要把“用户注册”标题设置成h1大小，正文使用<p>标记来限制表单元素。

02 构建HTML页面，实现表单内容。

<!DOCTYPE html>
<html>
<head>
<title>用户反馈页面</title>
</head>
<body>
<h1 align=center>用户反馈表单</h1>
<form method="post">
<p>姓&nbsp;&nbsp;&nbsp;&nbsp;名：
<input type="text" class=txt size="12" maxlength="20" name="username"/>
</p><p>性&nbsp;&nbsp;&nbsp;&nbsp;别：
<input type="radio" value="male"/>男
<input type="radio" value="female"/>女
</p><p>年&nbsp;&nbsp;&nbsp;&nbsp;龄：
<input type="text" class=txt name="age"/>
</p>
<p>联系电话：
<input type="text" class=txt name="tel"/>
</p><p>电子邮件：
<input type="text" class=txt name="email"/>
</p><p>联系地址：
<input type="text" class=txt name="address"/>
</p>
<p>
请输入您对网站的建议<br />
<textarea name="yourworks" cols="50" rows="5"></textarea>
<br />
<input type="submit" name="submit" value="提交"/>
<input type="reset" name="reset" value="清除"/>
</p>
</form>
</body>
</html>

在IE 11.0中浏览效果如图5-17所示。

图5-17 用户反馈页面

上一章目录下一章