HTML Living Standard/name属性

name属性

name属性は、フォームの入力フィールドやその他の要素に一意の名前を指定するための属性です。この名前は、フォームのデータをサーバーに送信する際にキーとして使用されます。また、スクリプトやスタイルで要素を識別する目的でも使用されます。

基本構文

  
<input type="text" name="username">  
<textarea name="comments"></textarea>

name属性の値は、任意の文字列を指定することができます。この値は、HTML文書内で一意である必要はありませんが、サーバー側でデータを処理する際に正確に識別できるように設定することが推奨されます。

効果

name属性を使用すると、以下のような効果があります：

• フォームデータを送信する際に、この属性の値がキーとして使用されます。
• JavaScriptでdocument.getElementsByName()を使用して要素を取得できます。
• 一部の要素ではid属性と同様の役割を果たしますが、idとは異なり、同じ値を複数の要素で共有できます。

使用例

以下は、name属性を使用した例です。

フォームデータ送信に使用

  
<form action="/submit" method="post">  
  <label for="username">ユーザー名:</label>  
  <input type="text" id="username" name="username">  

  <label for="password">パスワード:</label>  
  <input type="password" id="password" name="password">  

  <button type="submit">送信</button>  
</form>

この例では、usernameおよびpasswordというキーで入力データがサーバーに送信されます。

JavaScriptによる操作

  
<input type="text" name="email">  
<button id="getValueButton">値を取得</button>  

<script>  
  const button = document.getElementById("getValueButton");  
  button.addEventListener("click", () => {  
    const emailInput = document.getElementsByName("email")[0];  
    alert(`入力されたメールアドレス: ${emailInput.value}`);  
  });  
</script>

この例では、name属性を使用してメールアドレスの入力フィールドを取得し、値を取得します。

注意点

• name属性は、フォーム要素以外にもmetaタグやiframe要素などで使用されます。
• name属性を適切に設定しないと、サーバー側でデータ処理が困難になる可能性があります。
• id属性と混同しないように注意してください。idは文書全体で一意である必要がありますが、name属性にはその制限がありません。

互換性

互換性

ブラウザ	サポート状況
Chrome	対応
Edge	対応
Firefox	対応
Safari	対応
Opera	対応

関連項目

• id属性
• フォーム
• JavaScript

参考文献

• WHATWG HTML Living Standard - name attribute
• MDN Web Docs - name attribute