Skip to content

Latest commit

 

History

History
210 lines (157 loc) · 6.42 KB

name.md

File metadata and controls

210 lines (157 loc) · 6.42 KB

HTML name 属性

定义和用法

name 属性指定 HTML 元素的名称。

这个 name 属性可用于引用 JavaScript 中的元素。

对于 <form> 元素，name 属性在提交数据时用作参考。

对于 <iframe> 元素，name 属性可用于定位表单提交。

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

对于 <meta> 元素，name 属性指定了 content 属性的信息/值的名称。

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

定义和用法

The name attribute can be used on the following elements:

元素 Element 属性 Attribute
<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">
  Choose your favorite subject:
  <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="./max.html" name="iframe_a"></iframe>
<br/>
<a href="../tags/iframe.html" target="iframe_a">点击在 iframe 中打开</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="Submit">
</form>

Map 示例

带有可点击区域的图像 <map>：

<img src="../assets/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

Meta 示例

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

<head>
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="Hege Refsnes">
</head>

Object 示例

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

<object
  data="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
  height="200"
  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="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
  <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 属性对每个元素都有以下浏览器支持：

元素 Element chrome edge firefox safari opera
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