HTML5 新的 “form” 属性

红薯 发布于 2011/06/16 07:00
阅读 1K+
收藏 0

在 HTML5 以前,所有的表单中的元素都必须在 <form> 和 </form> 中间。

不过现在 HTML5 有一种新的做法,请看下面的代码:

    <form id="contact_form" method="get">  
      
        <label>Name:</label>  
        <input type="text" id="name" name="name">  
      
        <label>Email:</label>  
        <input type="email" id="email" name="email">  
      
        <input type="submit" id="submit" value="SEND">  
      
    </form>  
      
    <textarea id="comments" form="contact_form"></textarea>  

这段代码有两个特殊之处:

  1. textarea 标签在 form 的外面
  2. textarea 使用了一个 form 的属性(来确定与表单之间的绑定关系)

这里有个 Demo 页面,你可以看看你的浏览器是否支持。目前仅有以下浏览器支持这种写法:

  • Opera 9.5+ (完全支持)
  • Safari 5.1+ (不确定支持的级别)
  • Firefox 4+ (部分支持)
  • Chrome 10+ (部分支持)
  • IE (完全不支持)
这是实际的测试结果。
加载中
0
清凌渡
清凌渡
额,HTML5之前,只要不需要POST提交数据,使用AJAX,我都不写FORM标签,直接ID引用。。 我是不是做错了?。。
0
魏涛
魏涛

呃,果然是新属性。。。

0
mallon
mallon
这个能省掉很多麻烦,可惜除了Opera...
0
ValueError
ValueError

其实倒不是很在意这个,只是 form 的 method 对仍不支持 put 和 delete 表示怨念。

好在有 jquery.form ……

0
ddatsh
ddatsh

我知道呀
我只是想表达 人家号称双核,两个核都不支持

0
寒武纪
寒武纪
跑到外面来的目的是啥呢?
0
k
kennyluck
我不太懂。這是個問題嗎?分享為什麼不用博客
-1
ddatsh
ddatsh

maxthon3 不支持
http://www.impressivewebs.com/demo-files/html5-form-attribute/?name=1&email=2

&comments=没有

G.
G.
maxthon3 ?? 哥们, 这货是浏览器吗? 它只是一个外壳而已...
返回顶部
顶部