HTML name 属性

前へ 全ての HTML 属性 次へ

定義と用法

name 属性は、要素の名前を指定します。

この name 属性は、JavaScript で要素を参照するために使用することができます。

form 要素の場合、送信されたデータを参照する時にも使われます。

iframe 要素の場合、フォーム送信のターゲットに使用することができます。

map 要素の場合、name 属性は <img> の usemap 属性に関連付けて、画像と map との関係を作成します。

meta 要素の場合、name 属性は content 属性の情報/値に対する名称を指定します。

param 要素の場合、name 属性は <object> タグで指定された プラグインのパラメータを指定する value 属性と一緒に使用します。


適用

name 属性は、以下の要素で使用することができます:

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

クリックしたときに異なる値を送信する、同じ name の 2 つのボタン:

<form action="demo_form.html" 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>
Try it Yourself ❯

Fieldset の例

A <fieldset> with a name attribute:

<fieldset name="personalia">
  Name: <input type="text"><br>
  Email: <input type="text"><br>
</fieldset>
Try it Yourself ❯

Form の例

name 属性を持つ HTML フォーム:

<form action="form_action.html" 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>
Try it Yourself ❯

Iframe の例

リンクのターゲットとして作動する <iframe>:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a>
Try it Yourself ❯

Input の例

3 つの入力フィールド(2 つのテキストフィールドと 1 つの送信ボタン)を持つ HTML フォーム:

<form action="demo_form.html">
  Name: <input type="text" name="fullname"><br>
  Email: <input type="text" name="email"><br>
  <input type="submit" value="Submit">
</form>
Try it Yourself ❯

Keygen の例

keygen フィールドを持つフォーム:

<form action="demo_keygen.html" method="get">
  Username: <input type="text" name="usr_name">
  Encryption: <keygen name="security">
  <input type="submit">
</form>
Try it Yourself ❯

Map の例

クリック可能なエリアを持つイメージマップ:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
Try it Yourself ❯

Meta の例

HTML 文書の説明、キーワード、作成者を定義するには name 属性を使用します:

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

Object の例

name 属性を持つ <object> 要素:

<object data="helloworld.swf" width="400" height="400" name="obj1"></object>
Try it Yourself ❯

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>
Try it Yourself ❯

Param の例

"autoplay" パラメータに "true" を設定すると、ページが読み込まれるとすぐに音の再生が始まります:

<object data="horse.wav">
  <param name="autoplay" value="true">
</object>
Try it Yourself ❯

Select の例

name 属性を持つドロップダウンリスト:

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
Try it Yourself ❯

Textarea の例

name 属性を持つテキストエリア:

<form action="demo_form.html">
  <textarea name="comment">Enter text here...</textarea>
  <input type="submit">
</form>
Try it Yourself ❯

ブラウザ・サポート

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
keygen Yes サポートなし Yes 6.0 Yes
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

前へ 全ての HTML 属性 次へ