【HTML】inputタグとは？type属性・name属性・valueの使い方を初心者向けに解説

HTMLで問い合わせフォームや会員登録フォームを作るとき、まず出てくるのが input タグです。画面に入力欄を表示するための基本タグですが、初心者のうちは type、name、value、placeholder の役割が混ざりやすいところでもあります。

結論からいうと、inputタグとは、ユーザーに文字入力・選択・チェックなどをしてもらうためのフォーム部品を作るタグです。この記事では、まず「ソースコードを書くと画面でどう見えるか」を確認してから、inputタグの基本、よく使う属性、実務での使いどころまで整理します。

まず見てください：inputタグを書くと画面ではこう見える
結論：inputタグはフォーム部品を作るための基本タグ
なぜinputタグだけではフォームとして足りないのか
inputタグの基本的な書き方
type属性で入力欄の種類が変わる
name属性とvalue属性は送信データを考えるための属性
実務でよく見るinputタグの例
inputタグでよくあるミス
まとめ

まず見てください：inputタグを書くと画面ではこう見える

最初に、ソースコードとブラウザでの表示結果を並べて見てみましょう。左側がHTMLに書くコード、右側がそのコードをブラウザで表示したときのイメージです。

この画像で見てほしいのは、<input type="email"> が画面上ではメールアドレス用の入力欄として表示され、<input type="checkbox"> がチェックボックスとして表示される点です。HTMLのコードは少し記号が多く見えますが、右側の画面と対応させると「どのコードがどの部品になっているか」が追いやすくなります。

inputタグは「入力欄を作るタグ」ですが、実務では「どんなデータとして送るか」までセットで考えると理解しやすいです。

結論：inputタグはフォーム部品を作るための基本タグ

input タグは、フォームの中でユーザーから情報を受け取るために使います。テキスト入力、メールアドレス入力、パスワード入力、チェックボックス、ラジオボタン、送信ボタンなど、かなり多くの部品を inputタグだけで作れます。

type で入力欄の種類を決める
name で送信時のデータ名を決める
value で初期値や送信される値を指定する
placeholder で入力例やヒントを表示できる

最初はすべてを暗記しようとしなくて大丈夫です。まずは typeは見た目と入力ルール、nameは送信データ名 と分けて覚えると、フォームのコードが読みやすくなります。

なぜinputタグだけではフォームとして足りないのか

inputタグだけを書けば、たしかに入力欄は表示できます。たとえば次のコードでも、ブラウザには文字を入力できる箱が出ます。

<input type="email" name="email">

ただし、このままだと画面を見た人には「何を入力する欄なのか」が伝わりにくくなります。メールアドレスなのか、ユーザー名なのか、問い合わせ内容なのか、入力欄だけでは判断しづらいからです。

そのため実際のフォームでは、labelタグで項目名を付け、必要に応じて入力例を placeholder で補います。inputタグは主役ですが、単独で完結するというより、labelやformと組み合わせて初めて使いやすいフォームになると考えるのが自然です。

inputタグの基本的な書き方

基本形はとてもシンプルです。type で入力欄の種類を指定し、name で送信データの名前を指定します。

<label for="user-name">氏名</label>
<input type="text" id="user-name" name="user_name">

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="sample@example.com">

この例では、id と label の for を同じ値にしています。これにより、項目名と入力欄がHTML上でも関連付けられます。画面を使う人にも、読み上げ機能を使う人にも、入力欄の意味が伝わりやすくなります。

属性	役割	初心者向けの覚え方
`type`	入力欄の種類を決める	どんな部品にするか
`id`	ページ内でその要素を識別する	labelとつなぐ目印
`name`	送信時のデータ名になる	サーバーへ渡す項目名
`placeholder`	入力例や補助ヒントを出す	項目名の代わりではなくヒント

type属性で入力欄の種類が変わる

inputタグで特に重要なのが type 属性です。同じ inputタグでも、typeの値を変えるだけで、文字入力欄、パスワード欄、チェックボックス、日付入力などに変わります。

type	作れる部品	使う場面
`text`	1行のテキスト入力	氏名、会社名、検索キーワード
`email`	メールアドレス入力	会員登録、問い合わせフォーム
`password`	入力文字が隠れる欄	ログイン、パスワード登録
`checkbox`	チェックボックス	同意確認、複数選択
`radio`	ラジオボタン	性別、プラン選択、単一選択
`date`	日付入力	予約日、誕生日、期限
`submit`	送信ボタン	フォーム送信

たとえばメールアドレス欄には type="email" を使うと、ブラウザがメールアドレスらしい形式かどうかを簡単に確認してくれることがあります。スマートフォンでは入力しやすいキーボードが出る場合もあり、見た目以上に使いやすさへ影響します。

name属性とvalue属性は送信データを考えるための属性

フォームを学び始めたときにつまずきやすいのが、name と value の違いです。画面に入力欄を表示するだけなら見落としがちですが、フォームを送信する場面ではとても重要です。

<input type="checkbox" id="news" name="newsletter" value="yes">
<label for="news">お知らせメールを受け取る</label>

この例では、チェックされた状態でフォームが送信されると、newsletter=yes のように「name=value」の形でデータが送られます。つまり name は項目名、value はその項目の値です。

テキスト入力では、ユーザーが入力した文字が value として扱われます。一方、チェックボックスやラジオボタンでは、選ばれたときに送る値をあらかじめ value で指定しておくことが多いです。

実務でよく見るinputタグの例

実務でよく見るのは、問い合わせフォームや会員登録フォームです。ここでは、名前、メールアドレス、同意チェックを持つ小さなフォームを例にします。

<form action="/contact" method="post">
  <label for="name">お名前</label>
  <input type="text" id="name" name="name" required>

  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email" placeholder="sample@example.com" required>

  <label for="agree">
    <input type="checkbox" id="agree" name="agree" value="yes" required>
    個人情報の取り扱いに同意する
  </label>

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

このコードでは、入力欄を作る inputタグだけでなく、フォーム全体を囲む formタグ、項目名を示す labelタグ、送信ボタンを作る buttonタグが一緒に使われています。実際のフォームでは、inputタグを単独で見るより、フォーム全体の中でどの役割を持っているかを見るほうが理解しやすいです。