はじめに
input要素を使って認証機能などを作る際に毎回この属性ってどういう意味だっけとなるので備忘録としてまとめます。inputタグに限ったものじゃないものもあるので注意してください。バックエンドとデータをやりとりする前提で書きます。
id属性
対象要素をHTML内で一意に識別するための属性。input要素に限らず、ほとんどの要素につけることが可能なグローバル属性。一意である必要があるので同じidを複数つけることは出来ない（正しく動作しない）。要素同士を結びつけたい時に使われることが多い。
name属性
バックエンドに送ったデータを識別する際の識別子。id要素とは異なり、すべての要素に存在するわけではない。特定の条件を除いて必ずしも一意である必要はないが、普通一意にする。要するにname属性をフロントエンド側で使用することは少なく、バックエンド側のための属性の意味合いが強い。
type属性
input要素の種類を選択する属性。20種類ほどあり、初期値はtext（一行入力欄）になっている。email,password,checkbox,submit,radioあたりがよく使われる。当然自分で勝手に決めてはならず、存在する種類の中から選ぶ必要がある
まとめ
id属性とname属性は一緒である必要はないが、一緒の方が分かりやすいので基本的に一緒にしているよう。ただバックエンド側で認識するのはname属性の値。type属性は存在するものの中から適切なものを調べて設定する。