HTML - name 屬性

上一頁
下一頁

HTML name 屬性用於指定元素的名稱。伺服器使用它來識別表單提交中的欄位。

name 屬性值在表單提交後會顯示在 URL 中，並帶有各自的名稱。如果在表單控制元件中未指定 name 屬性或為空字串，則不會在 URL 中顯示任何表單資料。

語法

<tag name= "value"></tag>

應用於

以下列出的元素允許使用 HTML name 屬性

元素 描述
<input> HTML <input> 標籤用於接受使用者各種型別的輸入。
<select> HTML <select> 標籤用於線上表單中建立下拉列表。
<button> HTML <button> 標籤用於建立可點選按鈕。
<form> HTML <form> 標籤用於建立應用程式表單以提交使用者資料。
<fieldset> HTML <form> 標籤用於在一個網頁表單內分組多個控制元件和標籤。
<iframe> HTML <iframe> 標籤定義文件中一個矩形區域，瀏覽器可以在其中顯示單獨的文件。
<object> HTML <object> 用於在網頁上顯示多媒體，包括音訊、影片、圖片。
<output> HTML <output> 用於使程式設計師能夠動態地顯示計算或指令碼的結果。
<textarea> HTML <textarea> 用於接受使用者多行文字輸入。
<map> HTML <map> 用於定義影像地圖，以便在影像上建立可點選區域。
<meta> HTML <meta> 用於定義文件的元資料。
<param> HTML <param> 標籤用於向嵌入物件傳遞引數。

HTML name 屬性示例

以下示例將說明 HTML name 屬性，以及我們應該在哪裡以及如何使用此屬性！

input 元素的 name 屬性

考慮另一種情況，我們將使用 name 屬性和 input 標籤來提及使用者名稱和電子郵件的名稱。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Form Example with Name Attribute</title>
   <script>
      function showAlert() {
         var name = document.getElementById('name').value;
         var email = document.getElementById('email').value;
         alert('Name: ' + name + '\nEmail: ' + email);
      }
   </script>
</head>

<body>
   <h1>Contact Us</h1>
   <form onsubmit="return false;">
      <label for="name">Name:</label>
      <input type="text" 
               id="name" 
               name="user_name">
      <br><br>

      <label for="email">Email:</label>
      <input type="email" 
               id="email" 
               name="user_email">
      <br><br>

      <button type="button" onclick="showAlert()">
         Submit
      </button>
   </form>
</body>
</html>

select 元素的 name 屬性

讓我們看下面的例子，我們將使用 name 屬性和 select 標籤。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'name' attribute</title>
   <style>
      select {
         width: 200px;
         padding: 6px;
      }
   </style>
</head>

<body>
   <p>Choose language you knows: </p>
   <form onsubmit="return false;">
      <select name="languages" id="demo">
         <option value="">
               Choose you language
         </option>

         <option value="Hindi">Hindi</option>
         <option value="English">English</option>
         <option value="Telugu">Telugu</option>
      </select>
      <button>Submit</button>
   </form>
</body>

</html>

button 元素的 name 屬性

在下面的示例中，我們在 <button> 標籤內使用 HTML 'name' 屬性來指定其名稱。這裡我們定義了兩個名稱相同的按鈕，但在點選時提交不同的值。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>
      Button Name Attribute
   </title>
   <script>
      function showAlert(subject) {
         alert("You clicked the " + subject + " button");
      }
   </script>
</head>
<body>

<h1>The button name attribute</h1>

<form onsubmit="return false;" >
   Choose your favorite subject:
   <button name="subject" 
            type="submit" 
            value="Java" 
            onclick="showAlert('Java')">
               Java
   </button>
   <button name="subject" 
            type="submit" 
            value="Python" 
            onclick="showAlert('Python')">
               Python
   </button>
</form>

</body>
</html>

form 元素的 name 屬性

在這個例子中，我們為 form 元素新增 name 屬性，以便將其與其他元素區分開來。

<!DOCTYPE html>
<html>
<head>
   <title>Form name attribute</title>
</head>
<body>
<h1>The form name attribute</h1>
<form name="myForm" onsubmit="return false;">
   <label for="fname">
      First name:
   </label>

   <input type="text" id="fname" name="fname">
   <br><br>
   <input type="button" value="Send form data!">
</form>
</body>
</html>

textarea 元素的 name 屬性

以下是一個示例，我們將使用 name 屬性和 textarea 標籤。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'name' attribute</title>
   <style>
      select {
         width: 200px;
         padding: 6px;
      }
   </style>
</head>

<body>
   <p>Example of the HTML 'name' attribute</p>
   <p>
      Write your feedback in the below field and 
      submit by clicking on submit button.
   </p>
   <form onsubmit="return false;">
      <label for="">
            Your feedback....
      </label>
      <br>
      <textarea name="yourfeedback" 
                cols="30" 
                rows="8">
      </textarea>
      <br>
      <button>Submit</button>
   </form>
</body>
</html>

fieldset 元素的 name 屬性

在這個例子中，我們使用 name 屬性和 fieldset 元素來在點選按鈕時設定表單欄位的樣式。

<!DOCTYPE html>
<html lang="en">
      
<head>
<script>
   function changeFieldsetStyle() {
      var fieldset = document.querySelector('fieldset[name="fieldStyle"]');
      fieldset.style.border = "2px dashed blue";
      fieldset.style.backgroundColor='yellow';
   }
</script>
</head>

<body>
<h1>The fieldset name attribute</h1>

<form onsubmit="return false;">
   <fieldset name="fieldStyle">
      <label for="fname">
         First name:
      </label>
      <input type="text" 
               id="fname" 
               name="fname">
   </fieldset>
   <br>
   <button type="button" 
            onclick="changeFieldsetStyle()">
               Change fieldset style
   </button>
   <input type="submit">
</form>
</body>

</html>

iframe 元素的 name 屬性

在這個例子中，我們使用 name 屬性和 iframe 元素，並建立了一個指向 HTML 教程的超連結。超連結的目標與 iframe 的名稱匹配，因此連結將在 iframe 中開啟。

<!DOCTYPE html>
<html>

<head>
   <title>iframe name attribute</title>
</head>

<body>
   <iframe src="https://tutorialspoint.tw" 
           name="iframe_a" 
           width = 500px 
           height = 300 px>
      <p>Your browser does not support iframes.</p>
   </iframe>
   <br><br><br>
   <a href="/html/index.htm" target="iframe_a">
            HTML tutorials
   </a>

   <p>
      Here the target of hyper link matches name of 
      iframe Hence the link will open in the iframe. 
   </p>
</body>
</html>

meta 標籤的 name 屬性

在這個例子中，我們使用 name 屬性和 meta 標籤來區分不同的元資料。

<!DOCTYPE html>
<html>

<head>
   <meta name="viewport" 
         content="width=device-width">
   <meta name="description" 
         content="Free Web tutorials">
   <meta name="languages" 
         content="English, Hindi">
   <meta name="author" 
         content="John Doe">
</head>

<body>
   <h1>My Website</h1>
   <p>
      Here we used different types of meta data, 
      And to distinguish it from others we used 
      name attribute
   </p>
</body>

</html>

map 元素的 name 屬性

在這個例子中，我們使用 name 屬性和 map 元素。然後，這個名稱在 img 元素的 usemap 屬性中使用，以告訴影像使用特定的地圖。

<!DOCTYPE html>
<html lang="en">

<body>
   <h1>Welcome to our interactive map!</h1>
   <p>
      Click on a region to visit the 
      respective language page:
   </p>
   <img src="/html/images/lang.jpg" 
         usemap="#langmap" 
         alt="World Map" />

   <map name="langmap">
      <area shape="rect" 
            coords="0,0,180,165" 
            alt="HTML" 
            href="html/index.htm" 
            target="_blank" 
            hreflang="en" />
      <area shape="rect" 
            coords="180,0,375,167" 
            alt="JavaScript" 
            href="javascript/index.htm" 
            target="_blank" 
            hreflang="en" />
      <area shape="rect" 
            coords="0,166,180,338" 
            alt="PHP" 
            href="/php/index.htm" 
            target="_blank" hreflang="en" />
      <area shape="rect" 
            coords="180,165,375,338" 
            alt="ReactJS" 
            href="reactjs/index.htm" 
            target="_blank" 
            hreflang="en" />
   </map>
</body>
</html>

param 標籤的 name 屬性

在這個例子中，我們在 param 標籤內使用 name 屬性來為音訊元素指定自動播放和迴圈。

<!DOCTYPE html>
<html>

<head>
   <title>HTML name attribute</title>
</head>

<body>
   <audio controls>
         <source src=
"https://samplelib.com/lib/preview/mp3/sample-15s.mp3" 
                 type="audio/mpeg">
         <param name="autoplay" value="true">
         <param name="loop" value="true">
   </audio>
</body>

</html>

object 標籤的 name 屬性

在這個例子中，我們使用 name 屬性來命名 object 標籤。

<!DOCTYPE html>
<html>

<body>
   <h1>The object 'name' attribute</h1>
   <object data="html/images/html.jpg" 
           name="obj1" 
           height="150">
   </object>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
name 是 是 是 是 是
html_attributes_reference.htm
列印頁面
上一頁
下一頁
廣告