【HTML】inputタグで指定できる入力用部品一覧

HTMLの<input>タグで指定できる主要な入力部品（type属性の値）の一覧と、それぞれの特徴について解説します。

inputタグのtype属性一覧

HTML5以降、type属性には多様な値が指定できるようになりました。以下に代表的な入力部品の種類を示します。

• text: 1行のテキスト入力欄
• password: パスワード入力欄（入力文字がマスクされます）
• file: ファイルアップロード選択欄
• checkbox: チェックボックス（複数選択可）
• radio: ラジオボタン（排他的選択）
• hidden: 画面に表示されない隠しフィールド
• submit: フォーム送信ボタン
• reset: 入力内容リセットボタン
• button: 汎用ボタン
• image: 画像を使った送信ボタン
• search: 検索クエリ用入力欄
• tel: 電話番号入力欄
• url: URL入力欄
• email: メールアドレス入力欄
• date: 日付入力欄（年・月・日）
• time: 時間入力欄（時・分）
• number: 数値入力欄
• range: スライダー形式の数値選択欄
• color: カラーピッカー
• month: 月入力欄
• week: 週入力欄

入力例とコード

実際に各種input要素を配置するコード例です。

<form id="test">
  <label>テキスト: <input type="text" name="text1"></label><br>
  <label>パスワード: <input type="password" name="password1"></label><br>
  <label>ファイル: <input type="file" name="file1"></label><br>
  <label>チェックボックス: <input type="checkbox" name="checkbox1"></label><br>
  <label>ラジオボタン: <input type="radio" name="radio1"></label><br>
  <label>検索: <input type="search" name="search1"></label><br>
  <label>電話番号: <input type="tel" name="tel1"></label><br>
  <label>URL: <input type="url" name="url1"></label><br>
  <label>メールアドレス: <input type="email" name="email1"></label><br>
  <label>日付: <input type="date" name="date1"></label><br>
  <label>数値: <input type="number" name="number1" min="1" max="10"></label><br>
  <input type="submit" value="送信"
</form>

注意事項

datetime型などの一部の古い仕様は現在非推奨（またはサポート外）となっているため、日時を扱う場合はdatetime-localやdate、timeを組み合わせて使用してください。