2026年4月16日
HTML input type とは？
HTMLの <input> タグは、type 属性を変えることでさまざまな種類の入力欄を作れます。HTML input type の一覧を覚えると、フォームの作り方の幅が大きく広がります。
この記事では、よく使うinputタイプをコード例とともに解説します。
テキスト系のinputタイプ
<!-- 1行テキスト入力 -->
<input type="text" placeholder="名前を入力">
<!-- メールアドレス（形式チェックあり） -->
<input type="email" placeholder="[email protected]">
<!-- パスワード（文字が隠れる） -->
<input type="password" placeholder="パスワード">
<!-- 電話番号 -->
<input type="tel" placeholder="090-0000-0000">
<!-- URL -->
<input type="url" placeholder="https://example.com">
<!-- 検索ボックス -->
<input type="search" placeholder="検索...">💡 HTMLレッスン1で基礎を確認できます。
数値・範囲のinputタイプ
<!-- 数値入力 -->
<input type="number" min="0" max="100" step="1">
<!-- スライダー -->
<input type="range" min="0" max="100" value="50">🔗 あわせてdivとspanの違いもチェックしてみましょう。
選択系のinputタイプ
<!-- チェックボックス（複数選択可） -->
<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>
<!-- ラジオボタン（1つだけ選択） -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>ラジオボタンは同じ name 属性を持つグループの中から1つだけ選べます。
日付・時刻のinputタイプ
<!-- 日付 -->
<input type="date">
<!-- 時刻 -->
<input type="time">
<!-- 日時 -->
<input type="datetime-local">
<!-- 月 -->
<input type="month">📖 詳しくはブロック要素とインライン要素で解説しています。
その他のinputタイプ
<!-- ファイル選択 -->
<input type="file" accept="image/*">
<!-- 色選択 -->
<input type="color" value="#0d9488">
<!-- 送信ボタン -->
<input type="submit" value="送信する">
<!-- 非表示フィールド -->
<input type="hidden" name="token" value="abc123">まとめ
- ✅
type="text"・email・password：テキスト入力系 - ✅
type="number"・range：数値・スライダー - ✅
type="checkbox"：複数選択、type="radio"：1つだけ選択 - ✅
type="date"・time"：日付・時刻の入力 - ✅
type="file"：ファイル選択、type="color"：色選択
HTMLの基礎はHTML入門で復習できます。JavaScriptでフォーム値を取得する方法はDOM操作入門を参照してください。
あわせて読みたい記事
- HTMLとは？初心者向け解説 — HTML基礎に戻る
- HTMLフォームの作り方 — フォーム全体の構造
- HTMLでアクセシビリティを高める方法 — フォームのアクセシビリティ
- CSSでWebページにスタイルを付ける方法 — フォームのスタイリング
- JavaScript DOM操作入門 — JSでフォーム値を取得
- JavaScriptイベント入門 — フォームイベント処理