HTML - name 属性_HTML 菜鸟教程

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> 标签用于对 Web 表单中的多个控件和标签进行分组。
<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 属性来提及用户名和电子邮件的名称。

<!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 属性

让我们看一下以下示例，我们将在其中使用带有 select 标签的 name 属性。

<!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>元素添加名称以将其与其他元素区分开来。

<!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 属性

以下示例，我们将在其中使用带有 textarea 标签的 name 属性。

<!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://www.qikepu.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 QikepuCom
	 </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 属性

在此示例中，我们使用带有 meta 标记的 name 属性来命名彼此不同的元数据。

<!DOCTYPE html>
<html>

<head>
	 <meta name="viewport" 
				 content="width=device-width">
	 <meta name="description" 
				 content="Free Web QikepuCom">
	 <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>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - multiple 属性 HTML - open 属性 >>