資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML 中 id 和 name 屬性有什麼區別？
ID 屬性
ID 是一個輸入表單元素，與元素中包含的資料無關。輸入元素 ID 用於將元素與 JavaScript 和 CSS 關聯。透過使用 id 屬性，我們可以在客戶端驗證和操作元素的值。
在 JavaScript 中，使用 id 屬性我們可以獲取輸入元素的值。
document.getElementById("id").value;
在 CSS 中，ID 屬性用 # 字元引用。
#id
如果我們考慮 HTML 元素，ID 屬性是唯一的識別符號，它區分大小寫並以字母開頭，在 URL 中，ID 屬性可以用作錨點引用。
示例
以下示例演示了 ID 屬性的用法：
<!DOCTYPE html>
<html>
<head>
<style>
#myId {
background-color: yellow;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myId">TutorialsPoint</h1>
</body>
</html>
當我們執行以上程式時，輸出顯示為 Tutorialspoint 文字居中，文字顏色為黑色，背景顏色為黃色。
Name 屬性
name 屬性用於瀏覽器傳送到伺服器的 HTTP 請求中，作為與 value 屬性中包含的資料關聯的變數名。使用 name 屬性，我們可以在伺服器端驗證和操作元素的值。
在伺服器端，使用 name 屬性我們可以獲取輸入元素的值。
request.getParameter("name");
Name 屬性也區分大小寫並以字母開頭，但 Name 屬性不是唯一的。
在 JavaScript 中，name 屬性用以下方式引用：
getElementsByName();
在 CSS 中，無法引用 name 屬性。
Name 屬性在 HTML 中的用法
在 <form> 元素中，name 屬性用作提交資料的參考。
示例
以下示例顯示了 Name 屬性在 form 標籤中的用法：
<form action="action.php" method="get"> Select the course: <button name="course" type="submit" value="HTML">HTML</button> <button name="course" type="submit" value="JavaScript"> JavaScript</button> <button name="course" type="submit" value="CSS">CSS</button> </form>
示例
以下示例顯示了 Name 屬性在 iframe 標籤中的用法。
在 <iframe> 元素中，name 屬性用於指定表單提交的目標。
<iframe src=”sample.html name=”iframe1”></iframe> <a href=https://tutorialspoint.tw/index.htm target=”iframe1”> TutrialsPoint.com </a>
示例
以下示例顯示了 Name 屬性在 map 元素中的用法。
在 <meta> 元素中，name 屬性指示內容值的名稱。
<img src=”Flower.jpg” height=”120” width=”140” alt=”Flower” usemap=”#flowermap”> <map name=”flowermap”> <area shape=”circle” cords=”120,54,8” href=”rose.htm” alt=”Rose”> </map>
示例
以下示例顯示了 Name 屬性在 meta 元素中的用法。在 <meta> 元素中，name 屬性指示內容值的名稱。
<head> <meta name=”desc” content =”Tutorials”> <meta name=”keywords” content=”CSS, JavaScript”> </head>
示例
以下示例演示了 **Name** 屬性的用法：
<!DOCTYPE html>
<html>
<body>
<h1>Select Name attribute</h1>
<p>The name attribute mention the names of course in drop down list:</p>
<form action="page1.php">
<label for="course">Choose a course:</label>
<select name="course" id="course">
<option value="html">HTML5</option>
<option value="css">CSS</option>
<option value="java">JAVA</option>
<option value="oracle">ORACLE</option>
</select>
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
當我們執行以上程式時，會顯示帶有課程選項下拉列表的 name 屬性。並且觀察到標有“提交”的按鈕用於提交輸入的資訊。
HTML 中 ID 和 Name 屬性的區別
以下是解釋 ID 和 Name 屬性之間的一些區別：
ID 屬性 |
Name 屬性 |
|---|---|
ID 屬性在 HTML 中是唯一的 |
Name 屬性不是唯一的 |
它被稱為整個 HTML 元素的識別符號 |
在 HTML 中，它被稱為名稱-值對的識別符號。 |
ID 屬性可以應用於 CSS 樣式表和 JavaScript |
Name 屬性只能在 JavaScript 中使用，不適用於 CSS |
在元素內部與資料沒有對應關係 |
在元素內部與資料存在對應關係 |
與 Name 屬性相比，ID 的效能更高 |
與 ID 屬性相比，Name 屬性的效能較低 |
在 JavaScript 中，ID 屬性用 **document.getElementById("id").value;** 使用 |
在 JavaScript 中，Name 屬性用 **getElementsByName();** 引用 |
ID 是一個全域性屬性，可以從前端訪問 |
Name 是一個本地屬性，在後端編碼時插入 |
2K+ 閱讀量
