HTML 表单制作

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/boonyaxnn/article/details/52303243
<!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开发人员的青睐。

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

My97DatePicker日期插件的常用功能说明

展开阅读全文

没有更多推荐了,返回首页