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

在创建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属性示例

<textarea form=" testform" >

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><!--使用style="display:none;"将detalist元素设定为不显示--></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 class="articles"> <div class="tit02"> <h4>相关文章</h4> </div> <ul> <li> <a target="_blank" href="/new/422339.htm">人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案</a> <span>11-21</span> </li> <li> <a target="_blank" href="/new/422338.htm">第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍</a> <span>11-21</span> </li> <li> <a target="_blank" href="/new/422337.htm">原神恰斯卡怎么培养</a> <span>11-21</span> </li> <li> <a target="_blank" href="/new/422336.htm">无期迷途四星装束是谁</a> <span>11-21</span> </li> <li> <a target="_blank" href="/new/422335.htm">王者荣耀帝丹高中校服怎么获得</a> <span>11-21</span> </li> <li> <a target="_blank" href="/new/422334.htm">光遇姆明季后续版本怎么玩</a> <span>11-21</span> </li> </ul> </div> </div> <div class="pages art-detail"> </div> </div> </div> </div> </div> <div class="hot-column"> <div class="cont"> <div class="tit"> <h4>热门栏目</h4> </div> <ul class="clearfix"> <li> <h6><a href="/list-1/" target="_blank">php教程</a></h6> <a href="/list-45/" target="_blank">php入门</a> <a href="/list-46/" target="_blank">php安全</a> <a href="/list-47/" target="_blank">php安装</a> <a href="/list-48/" target="_blank">php常用代码</a> <a href="/list-49/" target="_blank">php高级应用</a> </li> <li> <h6><a href="/list-2/" target="_blank">asp.net教程</a></h6> <a href="/list-78/" target="_blank">基础入门</a> <a href="/list-79/" target="_blank">.Net开发</a> <a href="/list-80/" target="_blank">C语言</a> <a href="/list-81/" target="_blank">VB.Net语言</a> <a href="/list-82/" target="_blank">WebService</a> </li> <li> <h6><a href="/list-6/" target="_blank">手机开发</a></h6> <a href="/list-208/" target="_blank">安卓教程</a> <a href="/list-209/" target="_blank">ios7教程</a> <a href="/list-210/" target="_blank">Windows Phone</a> <a href="/list-211/" target="_blank">Windows Mobile</a> <a href="/list-212/" target="_blank">手机常见问题</a> </li> <li> <h6><a href="/list-3/" target="_blank">css教程</a></h6> <a href="/list-99/" target="_blank">CSS入门</a> <a href="/list-100/" target="_blank">常用代码</a> <a href="/list-101/" target="_blank">经典案例</a> <a href="/list-102/" target="_blank">样式布局</a> <a href="/list-103/" target="_blank">高级应用</a> </li> <li> <h6><a href="/list-4/" target="_blank">网页制作</a></h6> <a href="/list-136/" target="_blank">设计基础</a> <a href="/list-137/" target="_blank">Dreamweaver</a> <a href="/list-138/" target="_blank">Frontpage</a> <a href="/list-139/" target="_blank">js教程</a> <a href="/list-140/" target="_blank">XNL/XSLT</a> </li> <li> <h6><a href="/list-7/" target="_blank">办公数码</a></h6> <a href="/list-236/" target="_blank">word</a> <a href="/list-237/" target="_blank">excel</a> <a href="/list-238/" target="_blank">powerpoint</a> <a href="/list-239/" target="_blank">金山WPS</a> <a href="/list-240/" target="_blank">电脑新手</a> </li> <li> <h6><a href="/list-11/" target="_blank">jsp教程</a></h6> <a href="/list-68/" target="_blank">Application与Applet</a> <a href="/list-69/" target="_blank">J2EE/EJB/服务器</a> <a href="/list-70/" target="_blank">J2ME开发</a> <a href="/list-71/" target="_blank">Java基础</a> <a href="/list-72/" target="_blank">Java技巧及代码</a> </li> </ul> </div> </div> <div class="footer"> <div class="cont"> <p> <a href="/" target="_self">一聚教程网</a>| <a href="javascript:;" class="about" target="_self">关于我们</a>| <a href="javascript:;" class="contact" target="_self">联系我们</a>| <a href="javascript:;" class="gg_contact" target="_self">广告合作</a>| <a href="javascript:;" class="friend_link" target="_self">友情链接</a>| <a href="javascript:;" class="copyright_notice" target="_self">版权声明</a> </p> <p> <span>copyRight@2007-2022 www.111CN.NET AII Right Reserved <a href="https://beian.miit.gov.cn/" target="_blank" class="beian"></a></span> </p> <p> <span> 网站内容来自网络整理或网友投稿如有侵权行为请邮件:111cn.com@163.com 我们24小时内处理 </span> </p> </div> </div> <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/func.js" type="text/javascript"></script> <!-- Google tag (gtag.js) --> <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> <script src="/js/stat.js"></script> </body> </html>