HTML中的id和name
- id
此屬性指定一個元素的名稱。此名稱必須在文檔中是唯一的。 - name
單獨地在一個網(wǎng)頁里面,一個控件是否設(shè)置它的 name 屬性是不會影響到這個網(wǎng)頁的功能實現(xiàn)的。但是,當(dāng)我們需要把這個控件所關(guān)聯(lián)的數(shù)據(jù)傳遞到數(shù)據(jù)庫時,就必須要設(shè)置 name 屬性,否則,這個值是沒有辦法傳到服務(wù)器上面得到保存的。一個name可以同時對應(yīng)多個控件,比如checkbox和radio。
id和name的命名規(guī)則
id與name屬性的取值,必須以英文字母開始([A-Z,a-z]),后面可跟隨:
- 英文字母
- 數(shù)字([0-9])
- 連字符("-")
- 下劃線("_")
- 冒號(":")
- 句點(".")
id的用途
- id是HTML元素的Identity,主要是在客戶端腳本里用。
- 作為CSS選擇符
- 用id作為CSS(style sheet)的選擇符
- 代碼示例:
#dreamducolor_id
{
color: #cccc00;
}
- 作為JavaScript引用的元素名稱
作為通過腳本語言(例如:javascript)引用特定元素的方法 - label與form控件的關(guān)聯(lián),for屬性指定與label關(guān)聯(lián)的元素的id,不可用name替代。如
<label for="MyInput">My Input</label>
<input id="MyInput" type="text">
- 獲取上例:
var content;
content=document.getElementById("MyInput").value;
- 定義錨點
定義頁面錨點,作為超級鏈接(A)的目的地(同name屬性中定義錨點的方式)
<a id="dream" href="href="#dreamdu"">My dream</a>
- 聲明object元素
作為聲明HTML object元素的名稱 - 提高終端通用處理
為了客戶端通用的處理(例如:當(dāng)解壓數(shù)據(jù)從HTML網(wǎng)頁到數(shù)據(jù)庫中或翻譯HTML文檔為其它格式時,用戶標(biāo)識區(qū)域)
name的用途
- 標(biāo)識HTML表單
- 在提交HTML表單時,通過HTTP的Get或Post將表單數(shù)據(jù)傳送到服務(wù)端,name用于標(biāo)識這些表單元素,比如input、textarea、select,例如:
用戶名: <input type="text" id="username" name="username" />
密碼: <input type="password" id="password" name="password" />
- 在HTML表單中,input元素的type取radio時,會出現(xiàn)id不同而name相同的元素,例如:
<input type="radio" name="select" id="select1">
<input type="radio" name="select" id="select2">
- 定義錨點
定義頁面錨點,作為超級鏈接(A)的目的地。使用name屬性時我們通??梢赃@樣定義:
<a name="dream">My dream</a>
代替了<a href="url">My dream</a>的用法。
id與name的區(qū)別
- id要符合標(biāo)識的要求,比如大小寫敏感,最好不要包含下劃線(因為不兼容CSS)。而name基本上沒有什么要求,甚至可以用數(shù)字。
- table、tr、td、div、p、span、h1、li等元素一般用id。與表單相關(guān)的元素也可以賦ID值, 但為這些元素賦ID值的時候引用這些元素的方法就要變一下了,具體的如下:
- 賦name時,引用元素的方式: document.formName.inputName 或 document.frames("frameName")
- 賦id時,引用元素的方式: document.all.inputID 或 document.all.frameID
- 除去與表單相關(guān)的元素,只能賦id不能賦name,這些元素有body、li、a、table、tr、td、th、p、div、span、pre、dl、dt、dd、font、b等等。