初心者でも安心！HTML input要素のname属性とid属性を徹底解説
2024-04-02
HTML input要素におけるname属性とid属性の違い
name属性
役割:
- フォーム送信時に、サーバーへ送信するデータの名前を指定します。
- 同じ名前を持つ複数のinput要素は、まとめて一つのデータとして送信されます。
- ラジオボタンやチェックボックスなど、グループで選択する要素では、同じ名前を指定することでグループ化できます。
注意点:
- 同じ名前を持つinput要素は、同じページ内に複数存在してはいけません。
- サーバー側でデータを受け取る処理では、この名前を使ってデータを取得します。
id属性
- ページ内の要素を一意に識別するためのIDを指定します。
- JavaScriptやCSSで要素を操作したり、スタイルを適用したりするために使用されます。
- IDは、要素を識別するためのものなので、サーバーへ送信されるデータには影響しません。
- JavaScriptやCSSで要素を操作する際は、このIDを使って要素を取得します。
それぞれの属性の使い方
| 用途 | 属性 | 例 |
|---|---|---|
| フォーム送信 | name | <input type="text" name="username"> |
| ラジオボタン/チェックボックス | name | <input type="radio" name="gender" value="male"> |
| JavaScript/CSSによる要素操作 | id | <input type="text" id="my-input"> |
まとめ
name属性は、フォーム送信時に使用するデータの名前を指定します。- それぞれの属性は役割が異なるため、混同せずに使い分けることが重要です。
HTML:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML input - name vs. id</title>
</head>
<body>
<h1>ユーザー登録</h1>
<form action="submit.php" method="post">
<label for="username">ユーザー名：</label>
<input type="text" name="username" id="username" required>
<br>
<label for="email">メールアドレス：</label>
<input type="email" name="email" id="email" required>
<br>
<label for="password">パスワード：</label>
<input type="password" name="password" id="password" required>
<br>
<button type="submit">送信</button>
</form>
</body>
</html>
例:
- ユーザーがフォームに入力したユーザー名は、
usernameという名前で送信されます。 - JavaScriptを使って、
emailというIDを持つ要素の背景色を変更することができます。
その他のname属性とid属性の使い方
name属性
- フォーム送信時に、複数値を送信するために使用できます。
- 例：
<input type="checkbox" name="hobbies[]" value="reading">読書
<input type="checkbox" name="hobbies[]" value="writing">執筆
- 上記の例では、
hobbiesという名前で、選択されたチェックボックスの値が送信されます。
id属性
- アンカーリンクのターゲットとして使用できます。
<a href="#about">会社概要</a>
<h2 id="about">会社概要</h2>
- 上記の例では、
#aboutというIDを持つ要素へジャンプします。
その他
name属性とid属性は、アクセシビリティのために使用できます。
<label for="search">検索：</label>
<input type="text" name="search" id="search">
- 上記の例では、
searchというIDを持つ要素にラベルを関連付けています。
name属性とid属性は、HTML input要素で重要な役割を果たします。
それぞれの属性の役割を理解し、適切に使用することで、より効果的なフォームやページを作成することができます。
html html-input
