項 目 | 説 明 |
---|---|
記述形式 | name = "名前" |
値 の形式 | フォーム,フレーム,コントロール,オブジェクトなどの名前 (テキスト) |
対応ブラウザー | C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa?+ |
適用可能な要素 (種 類) |
<button>,<fieldset>,<form>,<iframe>,<input>,<keygen> *,
<map>,<meta>,<object>,<output> *,<param>,<select>,<textarea> (固有属性) |
継 承 | しない |
name属性 は,
この名前の 特別な用途 として,
などがあります。 より具体的には,
a 要素 の name属性 は HTML5 では 廃止 されました。 リンク先の指定は,「リンクの書き方: <a href="xxxx"> ~ </a>」 に示すとおり,要素 の id属性 の値を指定して行います。
次の例では,button 要素 の name属性 に "test" という値を設定しています。 また,ボタンを押したときの処理内容として,JavaScript の alert( ) 関数がこの name属性 の値 test を引数として指定されています。 このとき,ボタンを押すと,この button 要素 についての情報が表示されます。 (alert("test") ではないことに注意!)
HTMLソース | |
---|---|
HTML <body> ~ </body> |
<button name="test" onclick="alert(test)">テスト</button> |
ブラウザー 表示例 |
---|
HTMLソース | |
---|---|
HTML <body> ~ </body> |
<form action="URL" method="post"> <fieldset> <legend>顧客名</legend> <p> <label>名前:<input type="text" name="username"></label> <label>年齢:<input type="number" name="age" min="0"></label> </p> <p><label>職業</label> <select name="job"> <option value="office">会社員</option> <option value="public">公務員</option> <option value="self">自営業・自由業</option> <option value="student">学生</option> <option value="house">主婦</option> <option value="other">その他</option> </select> </p> <p><label>電話番号:<input type="tel" name="tel"></label></p> <p><label>E-mail:<input type="email" name="email"></label></p> <p><label><input type="checkbox" name="dm" checked></label></p> <p><input type="reset"><input type="submit"></p> </fieldset> </form> |
ブラウザー 表示例 |
---|
HTMLソース | |
---|---|
HTML
<body> ~ </body> |
<p>イタリア語で「蝶」という意味のパスタはどれでしょう?</p> <ul> <li><a href="conchiglie.html" target="answer">コンキリエ</a></li> <li><a href="linguine.html" target="answer">リングイネ</a></li> <li><a href="farfalle.html" target="answer">ファルファッレ</a></li> <li><a href="tagliatelle.html" target="answer">タリアテッレ</a></li> </ul> <iframe src="temp.html" name="answer" width="400" height="150"></iframe> |
ブラウザー表示例 |
---|
イタリア語で「蝶」という意味のパスタはどれでしょう? |
HTMLソース | |
---|---|
HTML
<body> ~ </body> |
<p><input type="text" name="username" maxlength="10"></p> |
ブラウザー表示例 |
---|
HTMLソース | |
---|---|
HTML
<body> ~ </body> |
<p> <img src="image/map.gif" alt="mapテスト画像" usemap="#maptest" height="71" width="246"> </p> <map name="maptest"> <area shape="rect" coords="10,16,68,58" alt="HTML5" href="html5.html"> <area shape="poly" coords="121,6,150,35,121,64,92,35" alt="CSS3" href="css/css3.html"> <area shape="circle" coords="200,35,28" alt="逆引きメニュー" href="how2/index_how2.html"> <area shape="default" alt="Other" href="a.html"> </map> |
ブラウザー表示例 |
---|
|
次の例は,使用例3 とほぼ同内容ですが,HTML文書を表示する要素が 使用例3 の <iframe> から <object> に変更されています。 (ただし,IE では,インライン表示ではなく,新しいタブを作成して表示します。)
HTMLソース | |
---|---|
HTML
<body> ~ </body> |
<p>イタリア語で「蝶」という意味のパスタはどれでしょう?</p> <ul> <li><a href="conchiglie.html" target="answer_o">コンキリエ</a></li> <li><a href="linguine.html" target="answer_o">リングイネ</a></li> <li><a href="farfalle.html" target="answer_o">ファルファッレ</a></li> <li><a href="tagliatelle.html" target="answer_o">タリアテッレ</a></li> </ul> <p> <object data="temp.html" type="text/html" name="answer_o" width="400" height="150"> </object> </p> |
ブラウザー表示例 |
---|
イタリア語で「蝶」という意味のパスタはどれでしょう? |
次の例では,input 要素 と output 要素 の値を両者の name属性 から参照して,常に等しくなるようにしています。 input 要素 の値が変更されると output 要素 の値がそれに同期して表示されます。 (ただし,IE では,output 要素 による表示はされません。)
HTMLソース | |
---|---|
HTML
<body> ~ </body> |
<form oninput="result.value=bar.value;"> バー(5段階): <input type="range" name="bar" min="0" max="5"> <output name="result" ></output><br> </form> |
ブラウザー表示例 |
---|
HTMLソース | |
---|---|
HTML
<body> ~ </body> |
<object data="データ名" type="application/x-shockwave-flash" width="400" height="320"> <param name="allowScriptAccess" value="sameDomain"> <param name="allowFullScreen" value="false"> <param name="movie" value="データ名"> <param name="quality" value="high"> <param name="bgcolor" value="#ffffff"> </object> |
ブラウザー表示例 |
---|
データがないため表示されない |
HTMLソース | |
---|---|
HTML
<body> ~ </body> |
<p><textarea name="comment" cols="40" rows="2"> 何か打ってください! </textarea></p> |
ブラウザー表示例 |
---|