本人所用编辑器：vscode；使用浏览器为chrome
目录
1.基础知识
1.1基础知识详解
1.2action和method属性
1.3input标签
2.调查问卷的实现
2.1问卷及效果
2.2源代码
1.基础知识
1.1基础知识详解
下方借用一下一位博主的知识分享，我感觉写的比较全面和详细。对于书本内容部分，我不在此处进行多余的解释。大家有空可以查看下这位博主写的文章。HTML之表单的基本知识/m0_46374969/article/details/113106325?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165762457316782246459341%2522%252C%2522scm%2522%253A%25220713.130102334..%2522%257D&request_id=165762457316782246459341&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-3-113106325-null-null.142%5Ev32%5Enew_blog_fixed_pos,185%5Ev2%5Econtrol&utm_term=%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE&spm=1018.2226.3001.4187
1.2action和method属性
form标签主要有两个属性：action和method。简单解释为；
（1)action：动作 将数据提交到哪里
(2) method：方法 表示怎么提交
action后面可以直接跟相对应的URL，但是method属性有2种不同的属性值分别为；get和post两种不同的提交方式。get方式提交：将所写的文字使用明文的方式展示在地址栏上最多不能超过2048字符，适合发送非安全数据； post方式提交：不在网址上显示所写内容，没有大小限制。可以发送敏感数据。
<!-- #代表提交到当前页面 --><form action="#" method="get/post"></form>
1.3input标签
<input> 标签规定了用户可以在其中输入数据的输入字段。<input> 标签可以在表单标签 <form> 中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。不同的type属性值的空间展示效果也不相同。详细属性部分内容可以查阅以下链接的作者的博客。input标签属性详解大全/weixin_42307675/article/details/90039721?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165762685216780357255383%2522%252C%2522scm%2522%253A%25220713.130102334..%2522%257D&request_id=165762685216780357255383&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-90039721-null-null.142%5Ev32%5Enew_blog_fixed_pos,185%5Ev2%5Econtrol&utm_term=input%E6%A0%87%E7%AD%BE&spm=1018.2226.3001.4187 作者在文中有列举input标签不同属性的效果，可以自行阅读了解详情。
2.调查问卷的实现
2.1问卷及效果
问卷使用了不同的input标签属性值，来逐一对其属性值的实现。效果图如下；
2.2源代码
注意对于背景图片和插入图片的路径需要自己进行修改才能实现对应的效果！
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>myQuestionnaire</title><link rel="icon" href="faviconfile.ico"></head><body><div align="center"><!-- fieldset元素用于对表单中的控制元素进行分组 即添加边框显示边界--><!-- 添加style属性，设置宽度和添加背景图。同时添加了背景图的路径 --><fieldset style="width: 100%;height: auto; background-image: url(../image/惊涛.jpg);"><!-- 居中设置 --><legend align="center">我的调查问卷</legend><div align="center"><img src="./image/爱心猫.jpg" alt="tom" title="拜托填一下问卷吧！" width="100px" height="100px"></div><!-- action 动作 表示将数据提交到那个位置 #号表示提交到当前页面 --><!-- <form action="/s"></form> 表示将数据提交到百度--><form action="#" method="get"><!-- 文本框 --><!-- placeholder属性 占位文字，填充未输入内容的文本框 --><b>姓名:</b><input type="text" name="name" placeholder="您的姓名"><br><b>年龄:</b><input type="text" name="age" placeholder="您的年龄"><br><!-- 单选框 --><!-- checked属性预选男孩 同名单选框互斥，可以改变选项 --><br><b>性别:</b><input type="radio" name="sex" value="b" checked="checked"><!-- 插入图标更改文本内容 即用小男孩图标取代文字 ‘男’/‘女’ --><img src="./image/男孩.png" alt="男孩"><input type="radio" name="sex" value="g"><img src="./image/女孩.png" alt="女孩"><br><!-- 选择日期 --><!-- date为html5新增的元素，慎用！可能在其他浏览器上有不兼容的情况 --><p><b>生日：</b></p><input type="date" name="birth" value="1"><br><br><!-- 配偶情况 --><!-- datalist标签的使用 -->婚恋：<input list="lover"><datalist id="lover"><option value="单身"></option><option value="恋爱"></option><option value="已婚"></option><option value="离异"></option><option value="丧偶"></option></datalist><!-- select标签 --><p><b>所在地</b></p><!-- multiple属性可以设置多选 --><!-- size属性设置一次显示的个数 默认为1--><!-- <select name="province" multiple="multiple" size="5"></select> --><select name="province"><option value="gs">甘肃</option><option value="bj">北京</option><option value="sh">上海</option><option value="wh">武汉</option><option value="sc">四川</option><option value="gd">广东</option><option value="nm">内蒙</option><option value="sd">山东</option><option value="zj">浙江</option><option value="cs">长沙</option></select><!-- 复选框 --><!-- 用div标签封装六个选项，使其呈现3*2的布局居中显示 --><p><b>爱好</b></p><div align="center"><input type="checkbox" name="hobby" value="read"><img src="./image/学习.png" alt="读书" title="read" width="40px" height="40px"><input type="checkbox" name="hobby" value="party"><img src="./image/吃饭.png" alt="聚会" title="party" width="40px" height="40px"><input type="checkbox" name="hobby" value="shopping"><img src="./image/购物.png" alt="购物" title="shopping" width="40px" height="40px"><br><input type="checkbox" name="hobby" value="music"><img src="./image/音乐.png" alt="听音乐" title="music" width="40px" height="40px"><input type="checkbox" name="hobby" value="sport"><img src="./image/羽毛球.png" alt="运动" title="sport" width="40px" height="40px"><input type="checkbox" name="hobby" value="travel"><img src="./image/旅行.png" alt="旅行" title="travel" width="40px" height="40px"><br></div><!-- textarea控件 生成一个可控大小的文本输入框 --><!-- 是html5新增的 --><p><b>喜欢做的事情</b></p><textarea name="favoriteThing" cols="30" rows="10"></textarea><!-- 上传文件 --><p><b>喜欢的图片</b></p><input type="file" name="picture" value="1"><br><br><!-- 重置按钮和提交按钮 --><input type="reset" value="重置"> <input type="submit" value="提交"><!-- 隐藏，不显示。但可以用于传输数据 --><input type="hidden" name="hidden" value="隐藏控件传输数据"></form></fieldset></div></body></html>
欢迎大家在评论区指出问题，也可以私信我哦。
