网页前端设计-作业四（HTML5）

表单的method属性用于规定了发送表单数据的两种HTTP方法：GET和POST方法。其中表单标签默认的提交方式为GET方法。 GET方法：提交表单数据时，GET方法会将表单组件的数据名称和值转换为文本形式的参数并直接加原URL地址后面，点击提交按钮后可以直接从浏览器地址栏看到全部内容。这种方式适用于传递一些安全级别要求不高的数据，并且有传输大小限制，每次不能超过2KB。 POST方法：这种方法传递的表单数据会放在HTML的表头中，不会出现在浏览器地址栏里，用户无法直接看到参数内容，适用于安全级别相对较高的数据。并且对于客户端而言没有传递数据的容量限制，完全取决于服务器的限制要求，总体来说传输的数据量比GET方法大。

5 . 普通 （2分）按钮标签有哪些类型？分别表示什么含义？

有三种类型，分别是提交（submit）、重置（reset）或无动作按钮（button）类型。提交（submit）用于提交表单数据；重置（reset）用于重置表单填写的内容；无动作按钮（button）本身没有任何动作，需要配合JavaScript代码使用。

6 . 普通 （2分）HTML5中新增了哪些标签的常用类型？分别表示什么含义？

HTML5中新增的常用类型如下表所示。 类型名称 解释 tel 电话号码 email 电子邮箱地址 url URL网址 number 数值 range 包含数值范围的滚动条 datetime UTC日期（包含年、月、日）和时间（包含时、分） datetime-local 本地日期和时间 time 选择时间（包含时、分） date 选择日期（包含年、月、日） week 选择星期（包含年、第几周） month 选择月份（包含年、月） search 搜索栏目的文本输入域 color 颜色选择器

7 . 容易 （2分）设置一个滑动条，最小值为0、最大值为100，并且数值间隔为10：。（区分大小写）

10、0、100

最小值是min、最大值是max、数值间隔是step。

8 . 容易 （2分）设置一个日期选择器，使其只显示年份和月份： 。（区分大小写）

month

9 . 容易 （2分）已知有，请填空使其成为不以明文显示内容的密码输入框。（区分大小写）

password

10 . 容易 （2分）在HTML5表单中可以使用域标签___将同一个表单中的多个元素分组显示，使用 ___标签在每个分组区域显示独立的域标题。（区分大小写）

、

11 . 容易 （2分）请填写空白位置，使其只允许上传.gif格式的图像文件。（区分大小写）

file、image/gif

文件上传控件是file类型，image/gif表示只允许上传.gif格式的图像文件。

12 . 容易 （2分）已知有文本框，请填空使其成为禁用状态（无法输入内容）的多行文本框。（区分大小写）

disabled

13 . 容易 （2分）在提交表单数据时，标签的method取值为___时会将表单参数直接放在URL中；取值为___时将安全性更高，参数不会出现在URL中。（区分大小写）

get、post

14 . 普通 （2分）在HTML5表单中，已知当前选中的下拉选项是苹果，那么提交表单时后台收到的值是“苹果"。

错误

后台收到的是value属性值，因此应该是“apple”。

15 . 容易 （2分）标签的type属性取值为 ___时可以用于显示提交按钮；取值为___时可以用于显示重置按钮。（区分大小写）

submit、reset

16 . 普通 （2分）在HTML5表单中已知有多选列表…内部选项代码略…，无论内容有多少选项都可以同时显示出来，无需滚动查看。

错误

默认只显示4条选项，如果希望全部都显示出来得追加size属性。

17 . 普通 （2分）在HTML5表单中已知有，那么只有2020年10月的1、5、10、15日为可选状态。

错误

只有2020年10月的1、6、11日为可选状态。

18 . 普通 （2分）在HTML5表单中类型为hidden的标签不会显示在页面上。

正确

该类型会生成一个隐藏域，可以用于提交表单数据，但是不会影响网页显示的内容。

19 . 普通 （2分）在HTML5表单中，width和height属性可以用于类型为text的标签。

错误

width和height属性可以用于类型为image的标签。

20 . 普通 （2分）在HTML5表单中，和不能同时被选中。

错误

只有name属性值相同的单选按钮才属于同一组，且不能同时被选中。本题的name名称不同（分别是group01和group02）互相不影响。

21 . 普通 （2分）HTML5表单新增的

错误

在文本输入框中添加list属性值为

22 . 普通 （2分）在HTML5表单中，已知有的method属性值为get，其内部有，那么点击该按钮时会以post方式提交而不是get。

正确

formmethod属性属于表单重写属性，它可以覆盖掉原先method的属性值，因此最后get失效而post有效。

23 . 普通 （2分）标签的type属性值为radio时表示复选框。

错误

radio表示的是单选框，checkbox才是复选框。

24 . 普通 （2分）标签的enctype属性值为text/plain主要用于通过表单发送邮件。

正确

正确，适用于表单的action属性值为mailto:URL的这种情况。

25 . 容易 （2分）在HTML5表单中placeholder属性不能用于以下哪种标签类型？（ ）。

A. text

B. checkbox

C. url

D. password

placeholder属性会在空白输入框中出现提示，输入框获得焦点时提示消失

26 . 容易 （2分）关于HTML5表单新增form属性，以下哪个说法不正确？（ ）。

A. 同一个外部标签只能在form属性中引用一个表单的id名称。

B. 放在表单内部的标签可以不用form属性引用表单的id名称。

C. 同一个表单允许被多个外部标签使用form属性引用。

D. 外部的标签通过form属性引用表单的id名称实现与该表单的关联。

同一个外部的标签允许同时从属多个表单，只要在form属性值中用逗号隔开即可。

27 . 容易 （2分）在HTML5表单中如何为类型为image的标签自定义宽度为100像素、高度为50像素？（ ）。

A.

B.

C.

D.

width表示宽度、height表示高度。

28 . 容易 （2分）在HTML5表单中已知有输入框用于输入用户名，且其所在表单元素中有属性novalidate="true"，请问在提交表单信息时以下哪种描述正确？（ ）。

A. 用户名为空时也可以提交成功，不去验证。

B. 用户名是必填内容，为空无法提交成功。

C. required属性的优先级大于novalidate，因此novalidate失效。

D. novalidate=”true”表示需要验证数据有效性。

required属性的优先级小于novalidate，因此required失效。novalidate=”true”表示不验证数据有效性。

29 . 容易 （2分）在HTML5表单中，如果希望上传文件的控件允许一次上传多个文件，需要用到以下哪个属性？（ ）。

A. many

B. multiple

C. multi

D. m

正确用法是

30 . 容易 （2分）在HTML5表单新增属性中，以下哪个可以要求用户在提交之前必须填写内容，提交时输入框不能为空？（ ）。

A. autofocus

B. autocomplete

C. required

D. placeholder

required表示当前输入内容不允许为空。

31 . 容易 （2分）在HTML5表单新增属性中，以下哪个可以为用户正在输入的域中提示曾经填写过的内容选项？（ ）。

A. autofocus

B. autocomplete

C. required

D. placeholder

autocomplete表示自动补全。

32 . 容易 （2分）在HTML5表单新增属性中，以下哪个可以使指定的输入框在页面加载时自动成为焦点？（ ）。

A. autofocus

B. autocomplete

C. required

D. placeholder

autofocus表示自动生成焦点。

33 . 容易 （2分）已知有，以下哪种输出标签可以与之相关联？（ ）。

A.

B.

C.

D.

for属性值应该是关联元素的id名称。

34 . 容易 （2分）以下哪个可以表示输入框内只允许填入英文小写字母，并且只能有6个字符？（ ）。

A.

B.

C.

D.

在正则表达式中[a-z]表示小写字母a-z，是中括号；{6}表示6个字符，是大括号。

35 . 容易 （2分）以下哪个不属于HTML5表单pattern属性支持的标签类型？（ ）。

A. text

B. tel

C. password

D. radio

pattern属性支持的标签类型有：text、search、url、tel、email和password。

36 . 容易 （2分）在HTML5表单新增输入类型color组件选择需要的颜色后，该输入框的value值是？（ ）。

A. 英文单词表示的颜色。

B. 十六进制表示的颜色。

C. RGB表示的颜色。

D. 八进制表示的颜色。

37 . 容易 （2分）在HTML5表单中声明一个数值输入类型，要求控制用户填写的数值在0-100之间，并且只能是5的整数倍。以下哪种写法正确？（ ）。

A.

B.

C.

D.

数值输入类型是number；最大值是max、最小值是min；间隔是step。

38 . 容易 （2分）HTML5表单新增了一些输入类型，以下哪种可以用于输入UTC日期和时间？（ ）。

A. datetime

B. datetime-local

C. time

D. date

datetime-local是本地日期和时间；time只有时间；date只有日期。

39 . 容易 （2分）关于

按钮元素以下说法不正确的是？（ ）。

A. 该标签之间可以包含普通纯文本。

B. 该标签之间可以包含图像。

C. 该标签之间可以包含文本格式化标签。

D. 该标签默认动作是提交表单。

该按钮只有放在表单内容并声明type=”submit”才是提交表单按钮，在表单之外是可以独立使用的，且可以配合脚本实现多样化的功能。

40 . 容易 （2分）以下哪个不能放在表单中起到提交按钮的作用？（ ）。

A.

提交

B.

C.

D. 提交

按钮的type属性值submit表示提交按钮，如不规定则IE浏览器默认其type值为button。

41 . 容易 （2分）

已知有下拉菜单相关代码如下：

苹果

香蕉

梨子

以下说法正确的是？（ ）。

A. 苹果选项是默认选中状态。

B. 香蕉选项是默认选中状态。

C. 梨子选项是默认选中状态。

D. 空白选项是默认选中状态。

在不加任何selected属性的情况下，页面首次加载时第一个选项为默认选中状态；如果有一个selected属性，则对应选项为选中状态；如果有多个选项都有selected属性，则默认只显示最后一个。

42 . 容易 （2分）声明一个10行、每行20个字符的多行文本框区域，以下哪句代码正确？（ ）。

A.

B.

C.

D.

rows表示行、cols表示列（即每行多少字符）。

43 . 容易 （2分）关于多行文本框描述不正确的是？（ ）。</strong></p> <p>A. 该元素允许文本换行。</p> <p>B. 文本的默认字体是Courier。</p> <p><span style="background-color:#fbd4d0;">C. 文本框默认是只读状态，需要用属性控制修改才能变成可编辑状态。</span></p> <p>D. 文本框的默认可见宽度是20个字符。</p> <blockquote> <p>默认是可编辑状态，加上readonly属性后才会变成只读状态。</p> </blockquote> <p><strong>44 . 容易 （2分）以下哪种方式可以允许上传图片格式文件？（ ）。</strong></p> <p><span style="background-color:#fbd4d0;">A. <input type=”file” accept=”image/*” /></span></p> <p>B. <input type=”file” accept=”text/css” /></p> <p>C. <input type=”file” accept=”application/rtf” /></p> <p>D. <input type=”file” accept=”video/mpeg” /></p> <blockquote> <p>image/*是所有图片格式文件；text/css是CSS样式文件；application/rtf是RTF格式文件；video/mpeg是MPEG格式视频文件。</p> </blockquote> <p><strong>45 . 容易 （2分）关于<input>标签的maxlength属性，以下说法不正确的是？（ ）。</strong></p> <p>A. 该属性用于规定<input>元素中允许的最大字符数。</p> <p>B. 如果该属性取值为4，那么最多只能显示4个汉字或英文字母。</p> <p><span style="background-color:#fbd4d0;">C. 如果该属性取值为2，那么最多可以显示2个汉字或4个英文字母。</span></p> <p>D. 如果该属性取值为3.5，最大能显示3个汉字。</p> <blockquote> <p>无论该属性取值为多少，最大能显示同样多的汉字、英文字母或数字。但是尽量填入整数，如果填入了小数也只能去尾法取整来显示字符。</p> </blockquote> <p><strong>46 . 容易 （2分）<input>标签的type属性取值为image时会显示成图片提交按钮，以下哪个描述是错误的？（ ）。</strong></p> <p>A. 该按钮的图片可以来源于自定义图片素材。</p> <p><span style="background-color:#fbd4d0;">B. 该按钮可以使用src和alt属性同时显示背景图片和替代文本内容。</span></p> <p>C. 该按钮和<input>标签type属性值为submit的按钮功能效果一样，用于提交表单数据。</p> <p>D. 该按钮的图片素材来源可以是本地或网络地址。</p> <blockquote> <p>只有src属性无效时才会显示alt属性中的替代文本内容，不会同时出现。</p> </blockquote> <p><strong>47 . 容易 （2分）<input>标签的type属性取值为button时会显示成按钮，以下哪个描述是错误的？（ ）。</strong></p> <p>A. 该按钮是一个无动作按钮，被点击后无任何效果，需要与脚本配合才能使用。</p> <p>B. 该按钮的默认样式与<input>标签生成的提交按钮、重置按钮都相同，也可以自定义。</p> <p><span style="background-color:#fbd4d0;">C. 该按钮等同于提交按钮，可以将表单数据提交给服务器。</span></p> <p>D. 可以为该按钮添加onclick事件来触发点击事件从而执行自定义函数内容。</p> <blockquote> <p>该按钮是无动作按钮，不会直接有提交功能。</p> </blockquote> <p><strong>48 . 容易 （2分）<input>标签的何种属性可以控制单选框或复选框为选中状态？（ ）。</strong></p> <p><span style="background-color:#fbd4d0;">A. checked</span></p> <p>B. selected</p> <p>C. include</p> <p>D. import</p> <blockquote> <p>checked属性完整写法为checked="checked"，也可简写为checked本身。如果没有使用该属性，则初始状态下所有选项均处于未被选中状态。</p> </blockquote> <p><strong>49 . 容易 （1分）<input>标签的type属性取值为checkbox表示复选框，如何将多个复选框组合在同一组使用？（ ）。</strong></p> <p>A. 为它们添加相同的id属性值即可表示在同一组。</p> <p>B. 为它们添加相同的class属性值即可表示在同一组。</p> <p>C. 为它们添加相同的value属性值即可表示在同一组。</p> <p><span style="background-color:#fbd4d0;">D. 为它们添加相同的name属性值即可表示在同一组。</span></p> <p><strong>50 . 容易 （1分）<input>标签的type属性取值为以下哪种时可以用于显示密码输入框？（ ）。</strong></p> <p>A. text</p> <p><span style="background-color:#fbd4d0;">B. password</span></p> <p>C. hidden</p> <p>D. reset</p> <p><strong>51 . 容易 （1分）关于<form>标签的target取值，以下哪个表示打开一个新窗口来显示内容？（ ）。</strong></p> <p><span style="background-color:#fbd4d0;">A. _blank</span></p> <p>B. _self</p> <p>C. _parent</p> <p>D. _top</p> <blockquote> <p>_blank表示在新打开窗口；_self表示覆盖当前窗口内容打开；_parent通常用在iframe中，表示子页面访问父页面；_top表示最顶层的框架。</p> </blockquote> <p><strong>52 . 容易 （1分）以下哪个不属于<form>标签的属性？（ ）。</strong></p> <p>A. method</p> <p>B. action</p> <p>C. target</p> <p><span style="background-color:#fbd4d0;">D. src</span></p> <blockquote> <p><form>标签具有5种属性，分别是：action、method、name、enctype以及target。</p> </blockquote> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1389758">vue 插槽-默认插槽</a> <br /> <a href="/Article/Index/1188742">【操作系统一】图解TCP/IP模型+实战</a> <br /> <a href="/Article/Index/1408163">el-select multiple表单校验问题</a> <br /> <a href="/Article/Index/1203215">Datafaker生成模拟数据</a> <br /> <a href="/Article/Index/1686239">鸿蒙HarmonyOS $r(““)与$rawfile(““)的区别</a> <br /> <a href="/Article/Index/1149583">mysql全表扫描和索引扫描</a> <br /> <a href="/Article/Index/1560864">关于Altera JTAG Sever服务的问题</a> <br /> <a href="/Article/Index/825383">Apache Doris的Colocation join本地join实现</a> <br /> <a href="/Article/Index/1331535">一站式开源持续测试平台 MerterSphere 之测试跟踪操作详解</a> <br /> <a href="/Article/Index/882028">Rsync+Inotify实现nginx配置文件同步</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/qq_61727355/article/details/126457099 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>