こんにちは、びぼうろくです。
基本的に、htmlにおいて属性タグに関しては何となく使っている方が多いのではないでしょうか？
私も属性に関してはform作る時だけみておけばいいか、くらいでした。
しかし、サーバー側の処理を担当するようになると、そうはいきません。
なのでここで確認しておきましょう。
【結論】id：唯一無二のものに付けるname：サーバー側に送るものの名前class：まとめてデザインを変更するものに
以上がイメージです。
このイメージを前提として持っていただくと、かなりこの3つの違いが理解しやすくなると思います。
id
唯一無二の存在につけてあげるといいです。
例えば、
cssでhtmlのidタグにスタイルを適応させる際には、#を先頭につけるのがルールです。
以下のようになります。
#thisIsTheId{
color: red;
}ホームページの要素が少なければ、特に使用しても問題はないですが、多くなってくるといちいちidを設定するのはかなり大変です。
なので、今後これは複数にはならないだろう、というものにidをつけることをオススメします。
name
nameはサーバー側に送る箱のことです。
誰かにプレゼントを送る時、段ボールに入れて、品名を書きますよね？「電化製品など」
それが、nameです。
その中身はどうやって書くのか？については、valueです。
ん、ならvalueとnameの違いは？
となるかもしれませんが、
これは、例を使って説明します。
たとえば送るものがテレビであれば、 name=電化製品、value=テレビとなります。
簡単ですね！
<!-- 好きな果物の選択 -->
<input type="radio" name="fruit" value="apple">りんご
<input type="radio" name="fruit" value="orange">オレンジ
<input type="radio" name="fruit" value="banana">バナナclass
これは、グループを作りたい時にかなり便利です。
例えば、以下のようなリストがあるとします。
<h2>リスト1</h2>
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
<h2>リスト2</h2>
<ul>
<li>アイテムA</li>
<li>アイテムB</li>
<li>アイテムC</li>
</ul>
<h2>リスト3</h2>
<ul>
<li>アイテムX</li>
<li>アイテムY</li>
<li>アイテムZ</li>
</ul>
<h2>リスト4</h2>
<ul>
<li>アイテムα</li>
<li>アイテムβ</li>
<li>アイテムγ</li>
</ul>
<h2>リスト5</h2>
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
これら全てに同じスタイルを適応させたいと思った時、もしidなら一つ一つ設定しなければなりません。
しかし、classを使用することによって、上記のリスト全てを一気に変更することができます。
注意すべき点
idとClassに関しては、一つのタグに２つを同時に設定することができます。
どういうことかというと、
<div id="id" class="class-one">Hello</div>↑のようなことができるのです。
先ほどのリストの例で説明すると、５つに共通したstyleをClassで設定した後、
さらにidで個々のタグのstyleを設定することができるのです。
ちなみに、唯一無二のidのstyleが常に優先されます。
例えば、idにcolor=”red”、classにcolor=”yellow”と設定した場合、idのredが優先されます。
まとめ
【結論】id：唯一無二のものに付けるname：サーバー側に送るものの名前class：まとめてデザインを変更するものに
大事なことなので２度言いました！！！
ただし、idとnameはidが優先されるので注意！
