• 【HTML5】调查问卷制作简约版

    当你第一次使用CSS时候

    目录

     1、调查问卷网页展示及源码

    1.1html源码

    1.2css源码

    2、form表单属性的用法

    2.1date属性

    2.2radio属性

    2.3checkbox属性

    2.4textarea标签

    2.5required属性

    2.6button标签

    前言：

    大家好，我是拳击哥带你捶键盘。首先感谢您的到来😘，今天给大家带来的是前端静态版调查问卷的设计，运用表单中radio单选框、checkbox复选框、date日历、required属性等属性以及textarea标签、button标签来制作一个简易的调查问卷。

     1、调查问卷网页展示及源码

    1.1html源码

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>制作调查问卷title>
    6. 		<link href="11_14.css" rel="stylesheet" type="text/css"/>
    7. 	head>
    8.  
    9. 	<body>
    10. 		<div class="index">
    11. 		<h1 class="biaoti">调查问卷h1>
    12. 		<hr width="597px" color="black"/>
    13. 		<form class="biaodan">
    14. 			<ol>
    15. 				<li>请选择今天的日期li>
    16. 				<label><input type="date" name="riqi"/>label>
    17. 				<br />
    18. 				<br />
    19. 				<li>你的学历是？li>
    20. 				<label><input type="radio" name="xueli" >label>高中及以下<br />
    21. 				<label><input type="radio" name="xueli"/>label>大专<br />
    22. 				<label><input type="radio" name="xueli"/>label>本科<br />
    23. 				<label><input type="radio" name="xueli"/>label>硕士研究生<br />
    24. 				<br />
    25. 				<li>你从事拳击/健身教练的时间？li>
    26. 				<label><input type="radio" name="time1"/>label>刚开始<br />
    27. 				<label><input type="radio" name="time1"/>label>1~2年<br />
    28. 				<label><input type="radio" name="time1"/>label>3~4年<br />
    29. 				<label><input type="radio" name="time1"/>label>5~10年<br />
    30. 				<br />
    31. 				<li>你是通过什么渠道学会拳击/其他这项技术的？li>
    32. 				<label><input type="radio" name="jishu"/>label>部队<br />
    33. 				<label><input type="radio" name="jishu"/>label>拳馆<br />
    34. 				<label><input type="radio" name="jishu"/>label>武校<br />
    35. 				<label><input type="radio" name="jishu"/>label>少林寺<br />
    36. 				<label><input type="radio" name="jishu"/>label>其他<br />
    37. 				<br />
    38. 				<li>你晚上睡觉的时间是？li>
    39. 				<label><input type="radio" name="night" />label>晚上八点至九点<br />
    40. 				<label><input type="radio" name="night" />label>晚上十点点至十一点<br />
    41. 				<label><input type="radio" name="night" />label>晚上十二点以后<br />
    42. 				<label><input type="radio" name="night" />label>通宵<br />
    43. 				<br />
    44. 				<li>你早上起床的时间是？li>
    45. 				<label><input type="radio" name="time2"/>label>早上六点至七点<br />
    46. 				<label><input type="radio" name="time2"/>label>早上八点至九点<br />
    47. 				<label><input type="radio" name="time2"/>label>早上十点至十一点<br />
    48. 				<label><input type="radio" name="time2"/>label>中午十二点之后<br />
    49. 				<br />
    50. 				<li>你最近有锻炼身体吗？li>
    51. 				<label><input type="radio" name="duanlian"/>label>一周三到五次<br />
    52. 				<label><input type="radio" name="duanlian"/>label>一周一到两次<br />
    53. 				<label><input type="radio" name="duanlian"/>label>一周一次<br />
    54. 				<label><input type="radio" name="duanlian"/>label>很久没锻炼了<br />
    55. 				<br />
    56. 				<li>你近期与别人发生过矛盾吗？li>
    57. 				<label><input type="radio" name="maodun"/>label>有，没和好<br />
    58. 				<label><input type="radio" name="maodun"/>label>有，和好了<br />
    59. 				<label><input type="radio" name="maodun"/>label>有，并且打了一架<br />
    60. 				<label><input type="radio" name="maodun"/>label>有，就吵了下嘴<br />
    61. 				<label><input type="radio" name="maodun"/>label>没有<br />
    62. 				<br />
    63. 				<li>你喜欢的运动有？（可多选）li>
    64. 				<label><input type="checkbox" name="sport" value="1"/>label>篮球<br />
    65. 				<label><input type="checkbox" name="sport" value="2"/>label>乒乓球<br />
    66. 				<label><input type="checkbox" name="sport" value="3"/>label>羽毛球<br />
    67. 				<label><input type="checkbox" name="sport" value="4"/>label>拳击<br />
    68. 				<label><input type="checkbox" name="sport" value="5"/>label>柔术<br />
    69. 				<label><input type="checkbox" name="sport" value="5"/>label>摔跤<br />
    70. 				<label><input type="checkbox" name="sport" value="5"/>label>散打<br />
    71. 				<br />
    72. 				<li>你期待的工资是？li>
    73. 				<label><input type="radio" name="xueli"/>label>3000~5000<br />
    74. 				<label><input type="radio" name="xueli"/>label>5000~10000<br />
    75. 				<label><input type="radio" name="xueli"/>label>10000~15000<br />
    76. 				<label><input type="radio" name="xueli"/>label>15000~20000<br />
    77. 				<br />
    78. 				<li>你的意见:li>
    79. 				<br />
    80. 				<textarea name="message"  placeholder="你的宝贵意见对我们帮助很大" required>textarea>	
    81. 			ol>
    82. 			<br />
    83. 				<button id="tijiao">提交button>	
    84. 		form>
    85. 		div>
    86. 	body>
    87. html>

    1.2css源码

    1.  
    2. body {
    3. 		background-color:bisque;
    4. }
    5. .biaoti {
    6. 	text-align: center;
    7. 	padding-top: 30px;
    8. }
    9.  
    10. .index {
    11. 	font-size: 20px;
    12. 	margin: auto;
    13. 	width: 600px;
    14. 	background-color: white;
    15. 	margin-top: 10px;
    16. }
    17.  
    18. .biaodan {
    19. 	padding-left: 50px;
    20. 	line-height:100%;
    21. }
    22.  
    23. #tijiao{
    24. 	width: 200px;
    25. 	height: 50px;
    26. 	font-size: 30px;
    27. 	color:whitesmoke;
    28. 	background-color:#3366CC;
    29.     margin-left: 150PX;
    30. 	margin-top: 16PX;
    31. 	margin-bottom: 20PX;
    32. 	border-radius: 6px;
    33. }

    2、form表单属性的用法

    2.1date属性

    date（日期），直接把type设置成date，会出现与你电脑相同的日期选项。

    1. <li>请选择今天的日期li>
    2. <label><input type="date" name="riqi"/>label>

    实现效果：

    2.2radio属性

    radio（单选框），直接把type属性设置为radio，并且所有的选项都得name相同。

    1. <li>你的学历是？li>
    2. <label><input type="radio" name="xueli" >label>高中及以下<br />
    3. <label><input type="radio" name="xueli"/>label>大专<br />
    4. <label><input type="radio" name="xueli"/>label>本科<br />
    5. <label><input type="radio" name="xueli"/>label>硕士研究生<br />

     实现效果：

    2.3checkbox属性

    checkbox（多选框），直接把type属性设置为checkbox，并且把所有选项的name设置相同这样就能实现多选。

    1. <li>你喜欢的运动有？（可多选）li>
    2. <label><input type="checkbox" name="sport" value="1"/>label>篮球<br/>
    3. <label><input type="checkbox" name="sport" value="2"/>label>乒乓球<br/>
    4. <label><input type="checkbox" name="sport" value="3"/>label>羽毛球<br/>
    5. <label><input type="checkbox" name="sport" value="4"/>label>拳击<br />
    6. <label><input type="checkbox" name="sport" value="5"/>label>柔术<br />
    7. <label><input type="checkbox" name="sport" value="5"/>label>摔跤<br />
    8. <label><input type="checkbox" name="sport" value="5"/>label>散打<br />

     实现效果：

    2.4textarea标签