HTML5的表单新增属性form用法


HTML5增加了许多新标签和属性,这之后我将依次把我的所学与大家分享。今天我们来看一个名为form的属性,大家一看到这个单词,很容易就想到了表单标签form了吧,注意哦,这里说的是一个属性——form。
不过大家的联想也是有些靠谱的,因为这个属性就是为处理表单添加的新用法。下面我们来看看它的具体功能吧。
来一段实例代码:



  1. <form id="contactForm" method="get" action="http://www.ccjk.com/">

  2. <p>

  3. <label for="name">昵称:</label><input type="text" id="name" name="name">

  4. </p>

  5. <p>

  6. <label for="email">邮箱:</label><input type="email" id="email" name="email">

  7. </p>

  8. <p>

  9. <label for="password">密码:</label><input type="password" id="password" name="password">

  10. </p>

  11. <p>

  12. 留言:<textarea id="comments" name="comment"></textarea>

  13. </p>

  14. <p>

  15. <input type="submit" id="submit" value="提交">

  16. </p>

  17. </form>



这是我们在网页设计中的一个普通的表单,很显然我们在潜意识里都知道,需要提交的内容显然是要放在form标签里的;那么设想一个情况,假如现在由于设计的需要,我们要把留言这个文本域放在远离此表单的一个位置,但是又需要一并提交,这时该怎么办呢?在html4或xhtml里,需要借用js或程序调用,可以做到却很繁琐。而在HTML5中,我们运用form这个属性,便可轻松解决:


  1. <form id="contactForm" method="get" action="http://www.ccjk.com/">

  2. <p>

  3. <label for="name">昵称:</label><input type="text" id="name" name="name">

  4. </p>

  5. <p>

  6. <label for="email">邮箱:</label><input type="email" id="email" name="email">

  7. </p>

  8. <p>

  9. <label for="password">密码:</label><input type="password" id="password" name="password">

  10. </p>

  11. <p>

  12. <input type="submit" id="submit" value="提交">

  13. </p>

  14. </form>

  15. ......

  16. <p>

  17. 留言:<textarea id="comments" name="comment" form="contactForm"></textarea>

  18. </p>



细心的你应该看出来了吧,移到表单外面的文本域添加了form="contactForm",是的,就是这么简单。为什么加这个?有没有看到我们的表单命名为contactForm,而此处form属性的作用就是将此文本域关联到上面id名为contactForm的表单。也就是说HTML5中外部控件元素与表单相关联就是让其form属性值等于表单元素的id值,这不正和<label>元素的for属性值等于相对应的表单控件元素的id一个道理嘛。
当我们讨论html5的新知识时,很容易想到的问题就是IE是否支持,真是很遗憾,这个form属性IE是不支持的,当运行此表单的页面中输入相对应内容提交的时候,我们只能查询到三个表单内的字符串,如下图:

而在Opera、Firefox这些较先进的浏览器下是支持的,如下图:

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP