您的位置：首页 > Web前端 > HTML

HTML 表单制作

2016-08-24 19:14 218 查看

<!doctype html>
<html>
<head>
<meta charset="GB2312">
<title>我的主页</title>
</head>

<body>
<h3>教学意见调查表</h3>
<form method="post" action="" enctype="text/plain">
<fieldset>
<legend>个人及课程资料</legend>
<ol>
<li>科目名称<input type="text" name="subject" autofocus/></li>
<li>请选择系所:
<select size="1" name="department">
<option>音乐系</option>
<option>法律系</option>
<option>英语系</option>
<option>土木系</option>
<option>电子工程系</option>
<option>商务管理系</option>
</select>
</li>
<li>讲师：<input type="text" name="teacher"></li>
<li>性别：
<input type="radio" name="sex" value="女生" checked/>女生
<input type="radio" name="sex" value="男生"/>男生
</li>
<li>开课日期：<input type="date" name="startdate"/>
</li>
</ol>
</fieldset>

<fieldset>
<legend>意见调查</legend>
<ol>
<li>这门课的出勤状况是
<input type="radio" name="assist" value="没有缺课"/>没有缺课 
<input type="radio" name="assist" value="缺课1-3次"/>缺课1-3次 
<input type="radio" name="assist" value="缺课3-5次"/>缺课3-5次 
</li>
<li>选这门课的原因（可所选）：
<input type="checkbox" name="reason" value="必修"/>必修
<input type="checkbox" name="reason" value="凑学分"/>凑学分
<input type="checkbox" name="reason" value="感兴趣"/>感兴趣
<input type="checkbox" name="reason" value="其它"/>其它
</li>
<li>请简述你对此门课程的期望和意见：<br/>
</li>
</ol>
</fieldset>
<textarea rows="4" name="hope" cols="60"></textarea>
<input type="submit" value="提交"/>
<input type="reset" value="重写"/>
</form>
</body>
</html>

效果图：

注意事项：

1.单选框对应的name属性名称保持一致，保持互斥性。

2.复选框对应的name属性保持一致，页面可以根据name获取到多个值。

3.日期可以使用日期插件，如：My97DatePicker。

My97DatePicker是一款优秀的日期插件，它可以很方便地实现各种日期选择效果，博得广大IT开发人员的青睐。

下面来讲讲它的常用功能及设置方法。

。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 表单

相关文章推荐

新的分享

章节导航