2008/09/28

瀏覽器差異: 標籤的預設行為

<button> 是 form 元素之一,其中的屬性 type 可用的值有 submit、reset、button,預設值是 submit,其效果等同於 <input>:
1. <button type="submit">submit</button> 等同於 <input type="submit">
2. <button type="reset">reset</button> 等同於 <input type="reset">
3. <button type="button">abc</button> 等同於 <input type="button" value="abc">

可是當 <button> 沒有指定 type 時,依據 W3C 的規範,預設等同於 submit,但是在 IE7 下,卻是等同於 button。

for Internet Explorer 7
<button>abc</button> 等同於 <input type="button" value="abc">

for Mozilla Firefox 3
<button>abc</button> 等同於 <input type="submit" value="abc">

因此,如下的表單在 IE 7 與 FF 3 下會有全然不同的行為:






原本預期按下 <button> check 之後,會執行 NameCheck() 函式。
在 IE 7 下會如期運作,但在 FF 3 下,這個表單會直接送出。

因此在使用 <button> 時,建議要指定 type 屬性,以免效果不如預期。

沒有留言:

張貼留言