HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで要素の名前を設定するには？name属性の使い方を解説

HTMLでは、name属性を使うことで要素に名前を設定できます。この属性は、フォーム送信時のデータ識別やスクリプトからの要素参照など、さまざまな場面で重要な役割を果たします。

name属性が使用できるHTML要素

name属性は、以下のHTML要素に対して使用することができます。

  • <button>
  • <fieldset>
  • <form>
  • <iframe>
  • <input>
  • <map>
  • <meta>
  • <object>
  • <output>
  • <param>
  • <select>
  • <textarea>

特に<input>や<select>などのフォーム部品においては、name属性で付けた名前が送信データのキーとして使われるため、サーバー側で値を受け取る際に必須となります。

name属性の実装例

以下のコードは、<input>要素にname属性を設定したシンプルな例です。実際にブラウザで動かして挙動を確認してみてください。

<!DOCTYPE html>
<html>
   <body>

      Subject: <input type = "text" name = "sub" spellcheck = "true">
      <p>上の入力欄にスペルミスのある単語を入力すると、何が起こるか確認してみましょう。</p>

      <p contenteditable = "true" spellcheck = "true">これは編集可能なテキストです。スペルミスが含まれています。クリックして編集してみてください。</p>

   </body>
</html>

まとめ

name属性は、要素に名前を付けるための基本的な属性です。フォームのデータ送信だけでなく、JavaScriptから要素へアクセスする際（document.getElementsByName()など）にも活用できるため、正しく理解しておくとWeb開発がよりスムーズになります。

  1. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

    HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値