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.com" 
           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
打印页面
上一页
下一页
广告