HTML5 新增元素与属性用法介绍

作者：袖梨 2022-06-25

在创建Web应用程序的时候，免不了会用到大量的表单元素。在HTML 5标准中，吸纳

了Web Forms 2.0的标准，大幅度强化了针对表单元素的功能，使得关于表单的开发更快、更方便。

4.1 .1 新增属性

首先，让我们看一下HTML 5中关于表单新增了哪些诱人的属性，以及现在有哪些浏览

器支持了这些属性。

1、form属性

在HTML 4中，表单内的从属元素必须书写在表单内部，但是在HTML 5 中，可以把它

们书写在页面上任何地方，然后给该元素指定一个form属性，属性值为该表单的íd ，这样就可以声明该元素从属于指定表单了。form属性的使用示例如代码清单4- 1 所示。

代码清单4- 1 form属性示例

input元素从属于form表单，它被书写在表单内部，用不着再对它指定form属性。textarea

元素被书写在form表单之外，但它从属于form表单，所以将form表单的id指定给textarea元素的form属性。

这样做的好处是当需要给页面中的元素添加样式时可以更方便地添加，因为它们不是被

分散在各表单之内的了。

到目前为止只有Opera 10浏览器支持这一属性。

2、formaction属性

在HTML4中，一个表单内的所有元素都只能通过表单的action属性统一提交到另一个页

面，而在HTML 5 中可以给所有的提交按钮，诸如、

type="image"> 、都增加不同的formaction属性，使得点击

不同的按钮，可以将表单提交到不同的页面。formaction属性的使用方楼如代码清单4-2所示。

代码清单4-2 formaction属性示例

jsp">

目前尚没有浏览器支持这一属性。

3. formmethod属性

在HTML 4中，一个表单内只有一个action属性来对表单内所有元素统一指定提交页面，

所以每个表单内也只有一个method属性来指统一指定提交方式。在HTML 5 中，可以使用

formaction属性来对每个表单元素分别指定不同的提交页面，同时也可以使用formmethod属性来对每个表单元素分别指定不同的提交方式。 formmethod属性的使用方法如代码清单4-3所示。

代码清单4-3 formmethod属性示例

提交到S1

提交到S2

同formaction属性一样，目前尚没有任何浏览器支持该属性。

4 、placeholder属性

placeholder是指当文本框(或) 处于来输入状态时文本框中显示的输入提示。</p> <p>如图4-1所示，当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。</p> <p>实现方法非常简单，只要加上placeholder属性，然后指定提示文字就可以了。placeholder属性的使用方法如下所示。</p> <p><input type="text" placeholder="input me"></p> <p><a href="https://img.111cn.net/uploads/20220926/img_63315b68c3da230.png" class="js-smartPhoto-pc" target="_blank"><img alt="2013112201" src="https://img.111cn.net/uploads/20220926/img_63315b68c3da230.png" /></a></p> <p>图4-1 placeholder:属性示例</p> <p>目前为止，支持该属性的浏览器有: Safari 4 、<a href="/list-64/" target="_blank">Google</a> Chrome 3 、Firefox 4。</p> <p> </p> <p>5、autofocus属性</p> <p> </p> <p>给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动在得光标焦点。</p> <p>目前为止要做到这一点需要使用JavaScript ，譬如"control.focus()"。autofocus属性的使用方法如下所示。</p> <p><input type="text" autofocus></p> <p>一个页面上只能有一个控件具有该属性。从实用角度来说，请不要随便滥用该属性。强</p> <p>烈建议只有当一个页面是以使用某个控件为主要目的时，才对该控件使用autofocus属性，譬如搜索页面中的搜索文本框。</p> <p>目前为止，支持楼属性的浏览器有: Safari 4 、Google Chrome 3 、Firefox 4 。</p> <p> </p> <p>6、 list属性</p> <p>在HTML 5中，为单行文本框(<input type="text" >) 增加了一个list属性，该属性的值为某个datalist元素的id.。datalist元素也是HTML 5 中新增元素，该元素类似于选择框(<a href="/tags.php/select/" target="_blank">select</a>>) ，但是当用户想要设定的值不在选择列表之内时，允许其自行输入。该元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器上出现显示错误，可以用CSS等将它设定为不显示。list属性的使用方站如代码清单4-4所示。</p> <p> </p> <p>代码清单4-4 list属性示例</p> <p><input type="text" name="greeting" list="greetings"></p> <p></p> <p><datalist id="greetings" style="display: none;"></p> <p><option value="Good Morning">Good Morning</option></p> <p><option value="Hello">Hello</option></p> <p><option value="Good Afternoon">Good Afternoon</option></p> <p></datalist></p> <p>这段代码运行结果如固4-2所示。</p> <p>到目前为止，只有Opera 10浏览器支持list属性。</p> <p>为什么没有把input元素与datalist元素结合成一个元素，像其他语言中的可输入下拉框那样?这是基于兼容性的考虑一一在不支持HTML 5的浏览器中，可以忽略datalist元素，以便正常输入及用脚本编程的方式对input元素执行其他操作。</p> <p><a href="https://img.111cn.net/uploads/20220926/img_63315b69023bb31.png" class="js-smartPhoto-pc" target="_blank"><img alt="2013112202" src="https://img.111cn.net/uploads/20220926/img_63315b69023bb31.png" /></a></p> <p>图 4-2 list属性示例</p> <p> </p> <p>7、autocomplete属性</p> <p>辅助输入所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能。在HTML 5之前，因为谁都可以看见输入的值，所以存在安全隐患，但只要使用autocomplete属性，安全性就可以得到很好的控制。</p> <p>对于autocomplete属性，可以指定"on" 、"off" 与"" (不指定)这三种值.。不指定时，使用浏览器的默认值(取决于各浏览器的决定)。把该属性设为on时，可以显式指定候补输入的数据列表。使用detalist元素与l ist属性提供候补输入的数据列袭，自动完成肘，可以将该</p> <p>datalist元素中的数据作为候补输入的数据在文本框中自动显示。autocomplete属性的使用方</p> <p>能如下所示。</p> <p><input type="text" name="qreetinq" autocomplete=on list="greetinqs"></p> <p>到目前为止，只有Opera 10浏览器支持autocomplete属性。</p> <div class="clear"> </div> </div></td> </tr> </table> </div> </div> </section> <section class="wrap-box"> <div class="g-tit"> <h2>相关文章</h2> </div> <ul class="s-list nobord notop"> <li> <a href="/art-422339.htm" class="s-card"> <div class="s-card-l"> <p class="tit">人们熟悉的寄居蟹属于以下哪种分类神奇海洋11月21日答案</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-11-21</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241121/logo_673f15eb60f6c1.jpg" alt="人们熟悉的寄居蟹属于以下哪种分类神奇海洋11月21日答案" /> </div> </a> </li> <li> <a href="/art-422338.htm" class="s-card"> <div class="s-card-l"> <p class="tit">第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-11-21</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241121/logo_673f0c2f643951.jpeg" alt="第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍" /> </div> </a> </li> <li> <a href="/art-422337.htm" class="s-card"> <div class="s-card-l"> <p class="tit">原神恰斯卡怎么培养</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-11-21</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241121/logo_673f04afc5f411.jpeg" alt="原神恰斯卡怎么培养" /> </div> </a> </li> <li> <a href="/art-422336.htm" class="s-card"> <div class="s-card-l"> <p class="tit">无期迷途四星装束是谁</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-11-21</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241121/logo_673f04ae6dc3d1.jpeg" alt="无期迷途四星装束是谁" /> </div> </a> </li> <li> <a href="/art-422335.htm" class="s-card"> <div class="s-card-l"> <p class="tit">王者荣耀帝丹高中校服怎么获得</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-11-21</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241121/logo_673f04ad30dfd1.jpeg" alt="王者荣耀帝丹高中校服怎么获得" /> </div> </a> </li> <li> <a href="/art-422334.htm" class="s-card"> <div class="s-card-l"> <p class="tit">光遇姆明季后续版本怎么玩</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-11-21</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241121/logo_673f04aa7cc3a1.jpeg" alt="光遇姆明季后续版本怎么玩" /> </div> </a> </li> </ul> </section> <section class="wrap-box"> <div class="g-tit"> <h2>精彩推荐</h2> </div> <ul class="card-box"> <li class="card3"> <a href="/app/99428.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241018/671258fc7c56f.png" alt="沙威玛传奇安卓版" /> </div> <p class="figure-head">沙威玛传奇安卓版</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/99427.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241018/6711fc29100e3.png" alt="战盟大乱斗最新版" /> </div> <p class="figure-head">战盟大乱斗最新版</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/99426.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241018/6711ef93e4d90.png" alt="大侠立志传最新版" /> </div> <p class="figure-head">大侠立志传最新版</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/99425.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241018/6711ca5ba8572.png" alt="苍翼混沌效应最新版" /> </div> <p class="figure-head">苍翼混沌效应最新版</p> <span class="figure-btn">下载</span> </a> </li> </ul> <ul class="card-box-b"> <li class="card10"> <a href="/app/99454.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241019/671393f16002e.jpg" alt="驯龙高手旅程安卓版" /> </div> <div class="figure-cont"> <p class="figure-head">驯龙高手旅程安卓版</p> <div class="figure-desc"> <span>模拟经营</span> <span>驯龙高手旅程安卓版</span> </div> <div class="figure-desc"> <p>一款以奇幻世界为背景的模拟经营游戏</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/99397.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241015/670dc626d93dd.png" alt="全民农场最新版" /> </div> <div class="figure-cont"> <p class="figure-head">全民农场最新版</p> <div class="figure-desc"> <span>模拟经营</span> <span>全民农场最新版</span> </div> <div class="figure-desc"> <p>一款轻松风格的农场经营类型的游戏</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/99010.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20240907/logo_66dc0ba5ab7021.jpg" alt="散修功德模拟器完整版" /> </div> <div class="figure-cont"> <p class="figure-head">散修功德模拟器完整版</p> <div class="figure-desc"> <span>模拟经营</span> <span>散修功德模拟器完整版</span> </div> <div class="figure-desc"> <p>散修功德模拟器游戏是一款以功德修炼为题材的模拟游戏</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/99001.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20240907/logo_66dc094ae30941.jpg" alt="我的毕业日记无限金币下载" /> </div> <div class="figure-cont"> <p class="figure-head">我的毕业日记无限金币下载</p> <div class="figure-desc"> <span>模拟经营</span> <span>我的毕业日记无限金币下载</span> </div> <div class="figure-desc"> <p>开始毕业后的新生活吧！</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/98996.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20240907/logo_66dbd35fadafd1.png" alt="城堡之梦拼图和装饰下载最新版" /> </div> <div class="figure-cont"> <p class="figure-head">城堡之梦拼图和装饰下载最新版</p> <div class="figure-desc"> <span>模拟经营</span> <span>城堡之梦拼图和装饰下载最新版</span> </div> <div class="figure-desc"> <p>城堡之梦拼图和装饰玩家将会在游戏当中感受更多的乐趣体验，你可</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> </ul> </section> <footer class="foot"> <a href="/" class="logo-icon"> <img src="/mobile/images/logo2.png" alt="一聚教程网"> </a> <p>Copyright © 2010-2022</p> <p>111cn.net All Rights Reserved</p> </footer> <script> var advData = {"img_fixed_pc_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e9729f58.jpg","img_fixed_mob_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e8793225.jpg","url_adv":"http:\/\/shop.hushen.cn\/shop\/c\/baojianpin.html","str_adv":"\u864e\u795e\u5546\u57ce\uff1a\u5173\u7231\u7537\u6027\uff0c\u66f4\u61c2\u7537\u4eba\u3002\u89e3\u51b3\u5927\u4f17\u7684\u7537\u8a00\u4e4b\u9690","img_popup_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e748238d.png","pc_show_img":"2","pc_show_popup":"2","pc_show_video":"2","mob_show_img":"2","mob_show_popup":"2","mob_show_video":"2","close_adv":"https:\/\/img.111cn.net\/uploads\/20240508\/663b20650801e.png","video_adv":"\/pc\/images\/pc-adv.mp4"}; </script> <script src="/jspc/funcmob.js" type="text/javascript"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-DSRRGRV1TL"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DSRRGRV1TL'); </script> <div class="back-top" style="display: block;"> <span class="icon-box"> <svg class="icon" viewBox="0 0 1024 1024"> <path d="M213.333333 640h170.666667v256h256v-256h170.666667l-298.666667-341.333333zM170.666667 128h682.666666v85.333333H170.666667z" fill="#0374f3"></path> </svg> </span> </div> </div> <script src="/js/stat.js"></script> </body> </html>