2013年9月25日 星期三

HTML中id與name的差別

在Html中我們常會用到id和name這兩個屬性，
但因為常常分不清到底什麼時候該用哪個，所以會產生一些奇怪的bug，


因此，我用一個比較容易理解的方式來解釋，
name屬性主要是給form辨識的屬性；而id則是給script辨識用的
值得注意的是name是可以重複的(如:想要讓多個radio button屬於同一個群組)，
而id不可重複，否則又會出現奇怪的bug了!
這種現象就好比id為身份證字號是獨一無二的，而name就像名子一樣是可以重複的。
以下附上一個簡單的範例:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.   </head>

  6.   <body>
  7.   <form name="myform">
  8.   <div>
  9.   <input type="radio" name="group"/>radio1
  10. <input type="radio" name="group" checked/>radio2
  11. <input type="radio" name="group"/>radio3
  12. </div>
  13. <div id="result">Start</div>
  14. </form>
  16. <script type="text/javascript">
  17. var getResult = document.getElementById("result") ;
  18. getResult.innerHTML="End";
  19.   </script>
  20.   </body>
  21. </html>


執行結果如下圖:


程式碼中的3個radio button為同一個群組(只能選擇一個)
而透過script就可將原本id為result的<div>區塊內容由"Start"改為"End"了。
於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)