input 要素は「ユーザーから“1つの値”を受け取るための入り口」
<input> は、 ユーザーから たった 1 つの値を受け取るためのパーツ です。
名前 メールアドレス パスワード チェックの ON/OFF ラジオボタンの選択 日付や数値
こういう「1 項目ぶんの入力」を担当するのが input。 フォーム全体の箱が <form>、その中の“1 項目ぶんの入り口”が <input> というイメージです。
input の超基本：type と name が“性格”を決める
type 属性は「どんな入力なのか」を決めるスイッチ
type を変えると、同じ input でも見た目も意味もガラッと変わります。
<input type="text" name="username">
<input type="email" name="email">
<input type="password" name="password">
<input type="checkbox" name="agree">
<input type="radio" name="plan" value="basic">
<input type="number" name="age">
<input type="date" name="birthday">
type="text" 自由な文字列。名前やタイトルなど。
type="email" メールアドレス用。スマホだと「@」が打ちやすいキーボードになったり、 ブラウザが「メールアドレスっぽいか」を軽くチェックしてくれたりします。
type="password" 入力内容が「●●●」で隠される。中身はちゃんと送信されます。
type="checkbox" ON/OFF のチェック。複数選択に向いています。
type="radio" 「グループの中から 1 つだけ選ぶ」ためのボタン。 同じ name を持つラジオは「1 グループ」として扱われます。
type="number" 数値専用。上下の矢印が出たり、数値以外を入れると警告されたり。
type="date" カレンダー UI が出て、日付を選べるようになります。
「どんな入力をさせたいか？」をまず決めて、それに合う type を選ぶ。 ここが input を使うときの最初の一歩です。
name 属性は「送信されるときの“キー名”」
フォームで送信されるデータは、 「name の値：入力された値」というペアになります。
<form action="/signup" method="post">
<input type="text" name="username">
<input type="email" name="email">
<input type="password" name="password">
<button type="submit">登録</button>
</form>
ユーザーが
- username → “MONO”
- email → “mono@example.com”
- password → “secret”
と入力して送信すると、 サーバー側にはだいたいこんな形で届きます。
username = "MONO"email = "mono@example.com"password = "secret"
name がない input は、送信データに含まれません。 「見た目だけ入力欄があるけど、サーバーには届かない」という事故の 9 割は name 付け忘れです。 input を書いたら「まず name を付ける」を癖にしてほしい。
よく使う type を、実際のフォームでイメージする
テキスト・メール・パスワードの王道 3 点セット
<form>
<p>お名前：</p>
<input type="text" name="username" placeholder="山田太郎">
<p>メールアドレス：</p>
<input type="email" name="email" placeholder="example@example.com">
<p>パスワード：</p>
<input type="password" name="password">
<button type="submit">登録</button>
</form>
placeholder は「薄く表示されるヒントテキスト」。 入力すると消えます。
ここで押さえてほしいのは、
typeで「入力の種類」を決めるnameで「送信されるときのキー名」を決めるplaceholderで「ユーザーへのヒント」を出す
という 3 つの役割がきれいに分かれていること。
チェックボックスとラジオボタンの違い
チェックボックス（複数選択 OK）：
<p>興味のある分野：</p>
<input type="checkbox" name="interest_frontend" value="frontend"> フロントエンド
<input type="checkbox" name="interest_backend" value="backend"> バックエンド
<input type="checkbox" name="interest_design" value="design"> デザイン
ラジオボタン（1 つだけ選ぶ）：
<p>プラン：</p>
<input type="radio" name="plan" value="basic"> ベーシック
<input type="radio" name="plan" value="standard"> スタンダード
<input type="radio" name="plan" value="premium"> プレミアム
ラジオボタンは「同じ name を持つものが 1 グループ」になります。 その中から 1 つだけ選べる。
チェックボックスは「1 個 1 個が独立した ON/OFF」。 複数 ON にしても OK。
「複数選んでいいか？ 1 つだけか？」で checkbox と radio を選び分ける。 ここを意識できると、フォーム設計が一気に上手くなります。
JavaScript と input：値を読む・書く・検証する
値を読む（ユーザーが入力したものを取り出す）
HTML：
<input type="text" id="username" name="username">
<button type="button" id="show">表示</button>
<p id="result"></p>
JavaScript：
const input = document.querySelector("#username");
const button = document.querySelector("#show");
const result = document.querySelector("#result");
button.addEventListener("click", () => {
const value = input.value; // ← ここが超重要
result.textContent = `入力された名前：${value}`;
});
input.value が「今その input に入っている値」です。 フォームを送信しなくても、JS からリアルタイムに読めます。
値を書く（初期値や変更を JS から反映する）
input.value = "MONO"; // 初期値をセット
ユーザーが入力したあとに、 バリデーション結果に応じて値を変えることもできます。
簡単なバリデーションを JS でやる
button.addEventListener("click", () => {
const value = input.value.trim();
if (value === "") {
result.textContent = "名前を入力してください。";
return;
}
if (value.length < 2) {
result.textContent = "名前は 2 文字以上にしてください。";
return;
}
result.textContent = `OK：${value}`;
});
ここでやっているのは、
- 空かどうか
- 長さが足りているか
というチェック。 input は「ユーザーの入力の入口」であり、 JavaScript は「その入力をどう扱うか」を決めるロジック という役割分担です。
HTML のバリデーション属性もかなり強い
required・min・max・pattern など
HTML だけでも、ある程度のチェックができます。
<input
type="email"
name="email"
required
placeholder="example@example.com"
>
required 空のまま送信しようとすると、ブラウザが「入力してください」と止めてくれます。
<input
type="number"
name="age"
min="0"
max="120"
>
min / max 数値の範囲を制限できます。
<input
type="text"
name="postal"
pattern="\d{3}-\d{4}"
placeholder="123-4567"
>
pattern 正規表現で「この形じゃないとダメ」と指定できます。
「簡単なチェックは HTML に任せて、複雑なロジックは JS でやる」 この分担を意識すると、コードがスッキリします。
input を使うか迷ったときの判断基準
「これは“1 項目ぶんの入力”か？」
自分にこう聞いてみてください。
「ここでユーザーに入力してもらいたいのは、1 つの値か？」 「名前・メール・パスワード・チェック・選択など、“1 項目”として自然か？」
YES なら input が候補になります。
名前・メール・パスワード → text / email / password ON/OFF → checkbox 1 つだけ選ぶ → radio 数値 → number 日付 → date
逆に、「長文の文章」を入力させたいなら <textarea> の方が向いています。 input は「1 行・1 項目」のイメージです。
初心者として「input タグ」で絶対に掴んでほしいこと
<input> は、 「フォームの中で、“1 項目ぶんの値”をユーザーから受け取るための入り口」 です。
type で「どんな入力か」を決める name で「送信されるときのキー名」を決める placeholder やバリデーション属性で「ユーザーへのヒントと簡単なチェック」を付ける JavaScript では input.value で値を読み書きし、ロジックを組み立てる
あなたが input を書くときに、 「この 1 個は“何という項目の、どんな種類の値”を受け取るためのものか？」 と一度自分に問いかけられるようになったら、 もう input を“ただの入力欄”ではなく、 “ユーザーとアプリをつなぐ、1 項目ぶんのインターフェース”として扱えている状態です。