2020-06-26-----HBuilder制作简单的调查问卷
程序员文章站
2022-03-10 08:47:24
...
HBuilder制作简单的调查问卷
简单表格的练习；js实现重置表单；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微信依赖程度调查表</title>
</head>
<body>
<form id="form" action="" method="post">
<h3 align="center "><font size="7" face="宋体"color="">微信依赖调查问卷</font></h3 >
<table width="800px" height="100px"border="10px" align="center">
<tr height="">
<td colspan="2" align="center" ><font size="5" face="黑体"color="">基本信息</font></td>
</tr>
<tr>
<td><lable for="name"></lable>请输入您的姓名</td>
<td><input type="text" id="name" size="10" placeholder="请输入您的姓名"/></td>
</tr>
<tr>
<td>您的性别</td>
<td>
男<input type="radio" name="sex"/>
女<input type="radio" name="sex" />
保密<input type="radio" name="sex" checked/>
</td>
</tr>
<tr>
<td>您是大学生吗</td>
<td>
是<input type="radio" checked/>
否<input type="radio" />
</td>
</tr>
<tr>
<td><lable for="position">您来自哪个省市</lable></td>
<td>
<select>
<option value="">山西</option>
<option value="">陕西</option>
<option value="">河北</option>
<option value="">河南</option>
<option value="">湖南</option>
<option value="">山东</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center"><font size="5" face="黑体"color="">微信使用基本情况</font></td>
</tr>
<tr>
<td>您使用微信的原因是</td>
<td width="">
<input type="radio" >生活缴费、充值、、购物等服务
<input type="radio" >周围的人都在用
<input type="radio" >便于与朋友交流
<input type="radio" >工作需要
<input type="radio" >其它
</td>
</tr>
<tr>
<td>您最常使用微信的那些功能</td>
<td>
<input type="radio" >聊天（文字、图片、语音等）
<input type="radio" >朋友圈
<input type="radio" >小游戏
<input type="radio" >看公众号
</td>
</tr>
<tr>
<td colspan="2" align="center"><font size="5" face="黑体"color="">微信依赖程度测量</font></td>
</tr>
<tr>
<td>在无法使用微信时，感到不自在甚至焦虑不安</td>
<td>
<input type="radio" >从不
<input type="radio" >偶尔
<input type="radio" >一般
<input type="radio" >经常
<input type="radio" >总是
</td>
</tr>
<tr>
<td>总是挂念着微信，老是不停地刷新</td>
<td>
<input width="50px"type="radio" >从不
<input type="radio" >偶尔
<input type="radio" >一般
<input type="radio" >经常
<input type="radio" >总是
</td>
</tr>
<tr>
<td>使用微信的时间比自己一开始预计的时间要长</td>
<td>
<input type="radio" >从不
<input type="radio" >偶尔
<input type="radio" >一般
<input type="radio" >经常
<input type="radio" >总是
</td>
</tr>
<tr>
<td>您认为微信对你最大的帮助是什么</td>
<td width="500px" height="100px"><input type="text" id="idea" placeholder="请输入您的想法" size="50" style="height:90px;width:490px;"/></td>
</tr>
<tr>
<td align="center" colspan="2">
<input style="height=20px;width=50px;" type="submit">
<input type="reset" οnclick="funClear()" >
</td>
</tr>
<tr>
<td colspan="2" align="right"><font size="5" face="黑体" color="">问卷结束，感谢您的支持！</font></td>
</tr>
</table>
</form>
<script type="text/javascript">
function funClear(){
document.getElementById("form").reset();
}
</script>
</body>
</html>
实现效果
单击“重置”，填写的表单内容都会清空。