💡 この記事でわかること
- input要素とは何か
- input要素の基本的な書き方
- type属性で指定できる主な種類の一覧
- よく使うtypeごとの使い方とサンプルコード
- 初心者がつまずきやすいポイント
1. input要素とは？
input要素とは、
👉 フォームの中でユーザーがテキストを入力したり、選択肢を選んだりするための「入力欄」を作るタグです。
会員登録フォームのメールアドレス欄や、アンケートのチェックボックスなど、Webサイトで見かける入力パーツのほとんどはこのinput要素で作られています。
💡 input要素は、type属性という「種類を指定する属性」を変えるだけで、テキスト入力・パスワード入力・チェックボックスなど、まったく違う見た目と動きの入力欄になります。この記事では、そのtype属性の種類と使い方を中心に解説します。
2. input要素の基本的な書き方
input要素は、他のHTMLタグと違い閉じタグを書かないのが特徴です。基本の形は次のようになります。
<input type="text" name="username" value="">よく一緒に使われる属性は、次の3つです。
type:入力欄の種類(text、email、checkboxなど)を指定するname:フォーム送信時に、この入力欄の値を識別するための名前value:入力欄にあらかじめ入れておく初期値
💡 type属性を省略すると自動的に「text」(1行のテキスト入力欄)として扱われますが、意図が伝わりやすいよう明示的に書くのがおすすめです。
3. type属性の一覧
type属性に指定できる主な値をまとめました。まずは全体像を確認してみましょう。
text:1行のテキスト入力欄(標準)email:メールアドレス専用の入力欄password:入力内容が●で隠される入力欄number:数値専用の入力欄tel:電話番号用の入力欄date:日付を選択する入力欄checkbox:複数選択できるチェックボックスradio:1つだけ選べるラジオボタンfile:ファイルを選択するための入力欄submit:フォームを送信するボタンbutton:何も送信しない汎用ボタンhidden:画面には表示されない、値だけ送信する入力欄
💡 この他にも、search・url・color・rangeなど細かい種類がありますが、まずは上記の代表的なtypeを覚えておけば実務の入力欄はほぼカバーできます。
4. よく使うtypeの使い方
text:通常のテキスト入力
名前や住所など、自由な文字列を1行で入力してもらいたいときに使います。
<input type="text" name="name" placeholder="山田 太郎">email:メールアドレス入力
見た目はtextとほぼ同じですが、スマートフォンでは「@」キーが押しやすいキーボードが自動で表示されるなど、入力の手助けをしてくれます。
<input type="email" name="email" placeholder="example@mail.com">👉 「@」を含まない文字列を送信しようとすると、ブラウザが自動でエラーメッセージを表示してくれます。この簡易チェックの仕組みはJavaScriptを書かなくても動きます。
password:パスワード入力
入力した文字が画面上で●●●のように隠されます。値そのものが暗号化されるわけではないので、通信の安全性はHTTPS化など別の対策で確保する必要があります。
<input type="password" name="password">number:数値入力
数値を増減させる小さな矢印ボタンが表示されます。minとmaxで入力できる範囲を制限できます。
<input type="number" name="age" min="0" max="120">checkbox:複数選択
「複数の選択肢の中から、当てはまるものをいくつでも選べる」ときに使います。同じnameを持つcheckboxを並べることで、グループとして扱えます。
<label><input type="checkbox" name="hobby" value="reading"> 読書</label>
<label><input type="checkbox" name="hobby" value="sports"> スポーツ</label>radio:単一選択
「複数の選択肢から1つだけ選べる」ときに使います。checkboxと違い、同じnameを持つradioは同時に1つしか選択できません。
<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>💡 checkboxとradioを混同してしまう初心者は多いですが、「複数OKならcheckbox」「1つだけならradio」と覚えておけば迷いません。
file:ファイル選択
画像などのファイルをアップロードしたいときに使います。「ファイルを選択」ボタンが自動で表示されます。
<input type="file" name="avatar" accept="image/*">submit:送信ボタン
クリックすると、そのinputを囲んでいるform要素の内容がまとめて送信されます。フォームの最後に置くのが基本です。
<input type="submit" value="送信する">5. あわせて覚えたい便利な属性
typeの種類とあわせて、次の属性を知っておくと入力欄の使い勝手を細かく調整できます。
placeholder:入力前の欄に薄く表示される、入力例のテキストrequired:未入力のまま送信しようとするとエラーになる必須項目にするdisabled:入力欄をグレーアウトさせ、操作も送信もできなくするmaxlength:入力できる文字数の上限を指定する
<input type="text" name="nickname" placeholder="ニックネーム" maxlength="20" required>👉 placeholderはあくまで「入力例の表示」であり、送信される値そのものではない点に注意してください。ユーザーが何も入力しなければ、その項目は空のまま送信されます。
6. 初心者がつまずきやすいポイント
name属性を忘れて値が送信されない
name属性がないと、その入力欄の値はサーバーに送信されません。「フォームを送信したのに値が届かない」というときは、まずname属性の書き忘れを疑ってみましょう。
checkboxとradioでnameを揃え忘れる
グループにしたいcheckboxやradioのname属性がバラバラだと、「1つだけ選べる」「複数選べる」といった本来の動きになりません。同じグループの入力欄には、必ず同じnameを指定してください。
閉じタグを書いてエラーになる
input要素は自己終了タグなので、</input>のような閉じタグは不要です。他のタグの癖で書いてしまわないよう注意しましょう。
まとめ
この記事では、HTMLのinput要素とtype属性の使い方について解説しました。
- input要素は、type属性の指定で見た目と動きが変わる入力欄タグ
- text・email・password・number・checkbox・radio・file・submitなど、用途に応じて使い分ける
- placeholder・required・disabled・maxlengthなどの属性で細かい挙動を調整できる
- name属性の書き忘れやcheckbox/radioのname不一致は特に注意
まずは今回紹介したtypeの中から、実際にご自身のフォームで使ってみて、少しずつ使い分けに慣れていきましょう。