Blog

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这些较先进的浏览器下是支持的,如下图:

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


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