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-424471.htm" class="s-card"> <div class="s-card-l"> <p class="tit">《燕云十六声》红尘无眼完成图文攻略</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-25</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241225/logo_676bd7c1e10901.jpg" alt="《燕云十六声》红尘无眼完成图文攻略" /> </div> </a> </li> <li> <a href="/art-424470.htm" class="s-card"> <div class="s-card-l"> <p class="tit">《燕云十六声》阴阳如影完成图文攻略</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-25</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241225/logo_676bd7c03d3a21.jpg" alt="《燕云十六声》阴阳如影完成图文攻略" /> </div> </a> </li> <li> <a href="/art-424469.htm" class="s-card"> <div class="s-card-l"> <p class="tit">《燕云十六声》悬檐之下四架椽屋图文攻略</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-25</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241225/logo_676bd7be0d6a71.jpg" alt="《燕云十六声》悬檐之下四架椽屋图文攻略" /> </div> </a> </li> <li> <a href="/art-424468.htm" class="s-card"> <div class="s-card-l"> <p class="tit">《燕云十六声》2024最新公测时间介绍</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-25</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241225/logo_676bd7bc4d25e1.jpg" alt="《燕云十六声》2024最新公测时间介绍" /> </div> </a> </li> <li> <a href="/art-424467.htm" class="s-card"> <div class="s-card-l"> <p class="tit">《燕云十六声》有没有藏宝阁</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-25</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241225/logo_676bd7bb77aa21.jpg" alt="《燕云十六声》有没有藏宝阁" /> </div> </a> </li> <li> <a href="/art-424466.htm" class="s-card"> <div class="s-card-l"> <p class="tit">《燕云十六声》制作公司介绍</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-25</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241225/logo_676bd7ba543751.jpg" 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/101287.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241225/logo_676b5caf46aa71.png" alt="闪电火柴人官方正版v1.77.3" /> </div> <p class="figure-head">闪电火柴人官方正版v1.77.3</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/101255.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241225/logo_676b5c57bfe211.png" alt="bvn全明星大乱斗安卓版v3.0" /> </div> <p class="figure-head">bvn全明星大乱斗安卓版v3.0</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/101237.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241225/logo_676b5c20e77591.png" alt="死神vs火影怜改安卓版v怜改" /> </div> <p class="figure-head">死神vs火影怜改安卓版v怜改</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/101233.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241225/logo_676b5c103546c1.png" alt="古荒遗迹2手游最新版v1.0.2" /> </div> <p class="figure-head">古荒遗迹2手游最新版v1.0.2</p> <span class="figure-btn">下载</span> </a> </li> </ul> <ul class="card-box-b"> <li class="card10"> <a href="/app/101304.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241225/logo_676b5cda97e8f1.png" alt="我最强舞者 (I, Best Dancer)安卓版v8" /> </div> <div class="figure-cont"> <p class="figure-head">我最强舞者 (I, Best Dancer)安卓版v8</p> <div class="figure-desc"> <span>模拟经营</span> <span>我最强舞者 (I, Best Dancer)安卓版v8</span> </div> <div class="figure-desc"> <p>我最强舞者（I, Best Dancer）是一款休闲放置类手</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/101280.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241225/logo_676b5c9c319411.jpg" alt="迷你世界国服版本2024 v1.43.0" /> </div> <div class="figure-cont"> <p class="figure-head">迷你世界国服版本2024 v1.43.0</p> <div class="figure-desc"> <span>模拟经营</span> <span>迷你世界国服版本2024 v1.43.0</span> </div> <div class="figure-desc"> <p>迷你世界国服版本2024是一款自由度非常高的沙盒游戏，玩法和</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/101270.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241225/logo_676b5c7ed7c861.png" alt="烹饪乐园安卓版v1.23.6" /> </div> <div class="figure-cont"> <p class="figure-head">烹饪乐园安卓版v1.23.6</p> <div class="figure-desc"> <span>模拟经营</span> <span>烹饪乐园安卓版v1.23.6</span> </div> <div class="figure-desc"> <p>烹饪乐园（Cooking Town）是一款非常好玩的餐厅模拟</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/101265.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241225/logo_676b5c6c949551.png" alt="迷你世界小米服最新安卓版v1.43.0" /> </div> <div class="figure-cont"> <p class="figure-head">迷你世界小米服最新安卓版v1.43.0</p> <div class="figure-desc"> <span>模拟经营</span> <span>迷你世界小米服最新安卓版v1.43.0</span> </div> <div class="figure-desc"> <p>迷你世界小米版是由迷你玩科技开发的休闲模拟经营类游戏。此版本</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/101263.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241225/logo_676b5c695bb271.png" alt="布娃娃Sprunki沙盒安卓版v0.0.1" /> </div> <div class="figure-cont"> <p class="figure-head">布娃娃Sprunki沙盒安卓版v0.0.1</p> <div class="figure-desc"> <span>模拟经营</span> <span>布娃娃Sprunki沙盒安卓版v0.0.1</span> </div> <div class="figure-desc"> <p>布娃娃Sprunki沙盒是一个非常有趣的沙盒游戏，复古简约的</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>