2026年4月16日
HTML input type とは？
HTMLの <input> タグは、type 属性を変えることでさまざまな種類の入力欄を作れます。HTML input type の一覧を覚えると、フォームの作り方の幅が大きく広がります。
たとえば、type="text" では1行のテキスト入力欄、type="email" ではメールアドレス専用の入力欄（形式チェック付き）、type="date" ではカレンダーで日付を選べる入力欄が作れます。
この記事では、よく使うinputタイプをコード例とともに解説します。HTMLのフォームの基礎がまだ不安な人はHTMLフォームの作り方を先に読んでおきましょう。
テキスト系のinputタイプ
文字や文章を入力するタイプです。一番よく使います。
<!-- 1行テキスト入力 -->
<input type="text" placeholder="名前を入力" name="name">
<!-- メールアドレス（@が含まれているか自動チェックあり） -->
<input type="email" placeholder="example@mail.com" name="email">
<!-- パスワード（入力した文字が●で隠れる） -->
<input type="password" placeholder="パスワード" name="password">
<!-- 電話番号 -->
<input type="tel" placeholder="090-0000-0000" name="tel">
<!-- URL（https://で始まるか自動チェックあり） -->
<input type="url" placeholder="https://example.com" name="url">
<!-- 検索ボックス（×ボタンで入力クリアができる） -->
<input type="search" placeholder="検索...">💡 各タイプの自動バリデーションについて
type="email" は「@が含まれているか」、type="url" は「https://で始まるか」を自動でチェックします。フォームの送信時に入力値が正しくなければエラーメッセージが表示されます。
💡 HTMLレッスン1で基礎を確認できます。
数値・範囲のinputタイプ
数値やスライダーで入力するタイプです。年齢や点数の入力、音量調節などに使います。
<!-- 数値入力（min/max/stepで範囲指定） -->
<input type="number" min="0" max="100" step="1" value="50">
<!-- スライダー（バーを動かして値を入力） -->
<label for="volume">音量：</label>
<input type="range" id="volume" min="0" max="100" value="50">min：入力できる最小値max：入力できる最大値step：増減のステップ幅（step="5"なら0, 5, 10, 15...と変化）
🔗 あわせてdivとspanの違いもチェックしてみましょう。
選択系のinputタイプ
選択肢の中から選ぶタイプです。アンケートや設定画面でよく使います。
<!-- チェックボックス（複数選択可） -->
<p>好きな言語を選んでください（複数選択可）</p>
<input type="checkbox" id="html" name="lang" value="html">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="lang" value="css">
<label for="css">CSS</label>
<input type="checkbox" id="js" name="lang" value="js">
<label for="js">JavaScript</label>
<!-- ラジオボタン（1つだけ選択） -->
<p>学年を選んでください（1つだけ）</p>
<input type="radio" id="grade1" name="grade" value="1">
<label for="grade1">1年生</label>
<input type="radio" id="grade2" name="grade" value="2">
<label for="grade2">2年生</label>
<input type="radio" id="grade3" name="grade" value="3">
<label for="grade3">3年生</label>💡 checkboxとradioの違い
checkbox（チェックボックス）は複数選択できます。「好きな食べ物を全部選んでください」のような質問に使います。
radio（ラジオボタン）は同じ name の中から1つだけ選べます。「性別」「学年」など1つだけ選ぶ質問に使います。
日付・時刻のinputタイプ
日付や時刻を選ぶタイプです。ブラウザが自動でカレンダーや時刻ピッカーを表示してくれます。
<!-- 日付（カレンダーから選択できる） -->
<input type="date" min="2026-01-01" max="2026-12-31">
<!-- 時刻 -->
<input type="time">
<!-- 日時（日付と時刻を両方選択） -->
<input type="datetime-local">
<!-- 月（年と月だけ選択） -->
<input type="month">
<!-- 週（年と週番号で選択） -->
<input type="week">min と max で選べる日付の範囲を制限できます。例えば min="2026-01-01" max="2026-12-31" と書けば、2026年の日付しか選べなくなります。
📖 詳しくはブロック要素とインライン要素で解説しています。
その他のinputタイプ
ファイル選択や色選択など、特殊な入力に使うタイプです。
<!-- ファイル選択（複数ファイルも可） -->
<input type="file" accept="image/*"> <!-- 画像ファイルのみ -->
<input type="file" accept=".pdf,.docx" multiple> <!-- PDFかdocxで複数可 -->
<!-- 色選択（カラーピッカーが開く） -->
<input type="color" value="#0d9488">
<!-- 非表示フィールド（ユーザーには見えないがデータを送れる） -->
<input type="hidden" name="userId" value="12345">
<!-- 送信ボタン -->
<input type="submit" value="送信する">
<!-- リセットボタン（フォームを初期状態に戻す） -->
<input type="reset" value="入力をリセット">バリデーション属性で入力チェックをする
バリデーション（validation）とは、入力値が正しい形式かチェックすることです。HTMLには、JavaScriptを書かなくてもできるバリデーション属性があります。
<!-- required: 入力必須にする -->
<input type="text" required placeholder="必須入力">
<!-- minlength/maxlength: 文字数制限 -->
<input type="text" minlength="3" maxlength="20" placeholder="3〜20文字">
<!-- pattern: 入力パターンを正規表現で指定 -->
<!-- 半角数字4桁だけ受け付ける -->
<input type="text" pattern="[0-9]{4}" title="半角数字4桁で入力してください">
<!-- min/max: 数値や日付の範囲を制限 -->
<input type="number" min="0" max="100" step="5">
<!-- autocomplete: ブラウザの自動補完をOFF -->
<input type="password" autocomplete="new-password">これらの属性を使うと、フォームの送信時に自動でチェックが行われます。正しくない値が入力されていると、エラーメッセージが表示されて送信できません。
labelとfieldsetでアクセシビリティを高める
アクセシビリティ（accessibility）とは「誰でも使いやすいこと」です。目が不自由な方が使うスクリーンリーダー（読み上げソフト）にも対応した、正しいフォームの作り方を覚えましょう。
<!-- labelのfor属性とinputのid属性を一致させる -->
<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username">
<!-- labelをクリックするとinputにフォーカスが当たる → 操作がしやすくなる -->
<!-- スクリーンリーダーが「ユーザー名」と読み上げてくれる → アクセシビリティ向上 -->
<!-- fieldset/legendで関連する入力をグループ化 -->
<fieldset>
<legend>お届け先住所</legend>
<label for="zip">郵便番号：</label>
<input type="text" id="zip" name="zip">
<label for="address">住所：</label>
<input type="text" id="address" name="address">
</fieldset>labelを必ずつける理由
すべての <input> には <label> を対応させましょう。labelのメリットは2つあります。
- スクリーンリーダーがラベルの内容を読み上げてくれる
- ラベルをクリックすると対応するinputにフォーカスが当たる（操作しやすくなる）
fieldsetとlegendでグループ化する
関連する複数の入力欄は <fieldset> でまとめ、<legend> でグループ名をつけます。フォームの構造がわかりやすくなります。
実際に書いてみよう：プロフィール登録フォーム
複数のinputタイプを組み合わせた、実践的なフォームを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>プロフィール登録フォーム</title>
<style>
form {
max-width: 400px;
margin: 0 auto;
padding: 24px;
border: 1px solid #ccc;
border-radius: 8px;
}
label {
display: block;
margin-top: 16px;
font-weight: bold;
}
input, select {
width: 100%;
padding: 8px;
margin-top: 4px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
margin-top: 24px;
padding: 12px 24px;
background-color: #0d9488;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
</style>
</head>
<body>
<form id="profileForm">
<h2>プロフィール登録</h2>
<label for="name">名前（必須）：</label>
<input type="text" id="name" name="name" required placeholder="田中 太郎">
<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email" placeholder="example@mail.com">
<label for="birthday">生年月日：</label>
<input type="date" id="birthday" name="birthday">
<label>好きなプログラミング言語（複数選択可）：</label>
<input type="checkbox" id="html" name="lang" value="html">
<label for="html" style="display:inline; font-weight:normal;">HTML</label>
<input type="checkbox" id="css" name="lang" value="css">
<label for="css" style="display:inline; font-weight:normal;">CSS</label>
<input type="checkbox" id="js" name="lang" value="js">
<label for="js" style="display:inline; font-weight:normal;">JavaScript</label>
<button type="submit">登録する</button>
</form>
<script>
document.getElementById("profileForm").addEventListener("submit", (e) => {
e.preventDefault();
const name = document.getElementById("name").value;
alert(name + "さんの登録が完了しました！");
});
</script>
</body>
</html>このコードをHTMLファイルとして保存してブラウザで確認しましょう。名前を入力して「登録する」ボタンを押すと、アラートが表示されます。
まとめ
- ✅
type="text"・email・password：テキスト入力系 - ✅
type="number"・range：数値・スライダー - ✅
type="checkbox"：複数選択、type="radio"：1つだけ選択 - ✅
type="date"・time：日付・時刻の入力 - ✅
type="file"：ファイル選択、type="color"：色選択 - ✅
required・min・max・pattern：バリデーション属性 - ✅
<label>を必ずつけてアクセシビリティを高める
HTMLの基礎はHTML入門で復習できます。JavaScriptでフォーム値を取得する方法はDOM操作入門を参照してください。
あわせて読みたい記事
- HTMLとは？初心者向け解説 — HTML基礎に戻る
- HTMLフォームの作り方 — フォーム全体の構造
- JavaScript DOM操作入門 — JSでフォーム値を取得
- JavaScriptイベント入門 — フォームイベント処理
- addEventListenerの使い方一覧 — イベントの登録方法