轻松上手,快乐学习!

HTML name 属性


定义和用法

name 属性指定元素的名称。

此名称属性可用于引用 JavaScript 中的元素。

对于表单元素,它也被用作提交数据时的参考,

对于 iframe 元素,它可用于定位表单提交。

对于 map 元素,name 属性与 <img> 的 usemap 属性相关联,并创建图像和地图之间的关系。

对于 meta 元素,name 属性指定 content 属性的信息/值的名称。

对于 param 元素,name 属性与 value 属性一起使用,为 <object> 标签指定的插件指定参数。


适用于

name 属性可用于以下元素:

元素 属性
<button> name
<fieldset> name
<form> name
<iframe> name
<input> name
<map> name
<meta> name
<object> name
<output> name
<param> name
<select> name
<textarea> name

实例

实例

两个同名的按钮,点击时提交不同的值:

<form action="/action_page.php" method="get">
  选择你最喜欢的科目:
  <button name="subject" type="submit" value="HTML">HTML</button>
  <button name="subject" type="submit" value="CSS">CSS</button>
</form>
亲自试一试 »

Fieldset 实例

带有 name 属性的 <fieldset>:

<fieldset name="personalia">
  Name: <input type="text"><br>
  Email: <input type="text"><br>
</fieldset>
亲自试一试 »

Form 实例

具有 name 属性的 HTML 表单:

<form action="/action_page.php" method="get" name="myForm">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="button" onclick="formSubmit()" value="Send form data!">
</form>
亲自试一试 »

Iframe 实例

作为链接目标的 <iframe>:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<a href="https://www.begtut.com" target="iframe_a">begtut.com</a>
亲自试一试 »

Input 实例

具有三个输入字段的 HTML 表单; 两个文本字段和一个提交按钮:

<form action="/action_page.php">
  Name: <input type="text" name="fullname"><br>
  Email: <input type="text" name="email"><br>
  <input type="submit" value="提交">
</form>
亲自试一试 »

Map 实例

图像映射,带有可点击区域:

<img src="planets.gif" width="145" height="126" alt="行星" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="太阳">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="水星">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="金星">
</map>
亲自试一试 »

Meta 实例

使用 name 属性来定义 HTML 文档的描述、关键字和作者:

<head>
<meta name="description" content="免费网络教程">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Hege Refsnes">
</head>
亲自试一试 »

Object 实例

具有 name 属性的 <object> 元素:

<object data="helloworld.swf" width="400" height="400" name="obj1"></object>
亲自试一试 »

Output 实例

执行计算并在 <output> 元素中显示结果:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>
亲自试一试 »

Param 实例

将 "autoplay" 参数设置为 "true",这样声音会在页面加载后立即开始播放:

<object data="horse.wav">
  <param name="autoplay" value="true">
</object>
亲自试一试 »

Select 实例

带有名称属性的下拉列表:

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
亲自试一试 »

Textarea 实例

具有名称属性的文本区域:

<form action="/action_page.php">
  <textarea name="comment">在此处输入文字...</textarea>
  <input type="submit">
</form>
亲自试一试 »

浏览器支持

multiple 属性对每个元素都有以下浏览器支持:

元素
button Yes Yes Yes Yes Yes
fieldset Yes 不支持 Yes Yes Yes
form Yes Yes Yes Yes Yes
iframe Yes Yes Yes Yes Yes
input 1.0 2.0 1.0 1.0 1.0
map Yes Yes Yes Yes Yes
meta Yes Yes Yes Yes Yes
object Yes Yes Yes Yes Yes
output 10.0 不支持 4.0 5.1  11.0
param Yes Yes Yes Yes Yes
select Yes Yes Yes Yes Yes
textarea Yes Yes Yes Yes Yes