cman.jpWEBページ作成
広告
<input> 「入力欄、選択入力、ボタン」[読み方：インプット]
<input>タグは、入力欄を表します。
<form>～</form>の間に配置することで、サーバのプログラム（CGIなど）に入力内容を引き渡すことが出来ます。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<input> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ フレージングコンテンツ type属性≠hiddenの時 インタラクティブコンテンツ、リストされた要素、ラベル付け可能な要素、送信可能な要素、リセット可能な要素、自動大文字継承要素、フォーム関連要素 パルパブルコンテンツ type属性＝hiddenの時 リストされた要素、送信可能な要素、リセット可能な要素、自動大文字継承要素、フォーム関連要素 | フレージングコンテンツを子要素にもてる場所 | 無 | 終了タグ無 |
<input>の属性
【構文】
<input type="ｘｘｘ" name="ｘｘｘ" ・・・>
TYPEにより使用する属性が異なりますので、詳細は、以下のTYPE別にご確認ください。
TYPEにより使用する属性は、【type別の属性対応表】参照
TYPEにより使用する属性は、【type別の属性対応表】参照
| INPUT TYPE | 入力内容 | 見え方(ブラウザにより異なる) |
|---|---|---|
| "text" | 1行のテキスト |  |
| "password" | パスワード |  |
| "hidden" | 非表示 | |
| "checkbox" | チェックボックス |  |
| "radio" | ラジオボタン |  |
| "file" | ファイルのアップロード |  |
| "submit" | formデータの送信ボタン |  |
| "image" | 画像を使用したボタン |  |
| "reset" | from内の入力内容リセット |  |
| "button" | 一般ボタン |  |
| "email" | メールアドレス (*1) |  |
| "url" | URL (*1) |  |
| "search" | 検索 (*1) |  |
| "tel" | 電話番号 (*1) |  |
| "number" | 数値 (*1) |  |
| "date" | 日付 (*1) |  |
| "datetime-local" | ローカル日時 (*1) |  |
| "month" | 月 (*1) |  |
| "week" | 週 (*1) |  |
| "time" | 時刻 (*1) |  |
| "range" | 範囲の選択（スライダ） (*1) |  |
| "color" | 色の選択 (*1) |  |
(*1) HTML5以降に追加されたTYPE。対応していないブラウザもあります。
| 廃止された属性 |
|
|
<input>のサンプル
<input type="text" value="テキスト"><br>
<input type="password" value="password"><br>
<input type="hidden"><br>
<input type="checkbox" checked> <input type="checkbox"> <input type="checkbox"><br>
<input type="radio" checked> <input type="radio"> <input type="radio"><br>
<input type="file" value="ファイル選択" style="width:150px;"><br>
<input type="submit"><br>
<input type="image" src="../../../image/image_buttonS.gif"><br>
<input type="reset"><br>
<input type="button" value="一般ボタン"><br>
<input type="email" value="sample@example.jp"><br>
<input type="url" value="http://example.jp"><br>
<input type="search" value="検索"><br>
<input type="tel" value="03-1111-2222"><br>
<input type="number" value="123"> <br>
<input type="date" value="2013-01-01"><br>
<input type="datetime-local" value="2013-01-01T23:59"><br>
<input type="month" value="2013-01"><br>
<input type="week" value="2013-W01"><br>
<input type="time" value="23:59"><br>
<input type="range" min="0" max="100" value="30" style="width:125px;"><br>
<input type="color" value="#FF6600"><br>
<input type="password" value="password"><br>
<input type="hidden"><br>
<input type="checkbox" checked> <input type="checkbox"> <input type="checkbox"><br>
<input type="radio" checked> <input type="radio"> <input type="radio"><br>
<input type="file" value="ファイル選択" style="width:150px;"><br>
<input type="submit"><br>
<input type="image" src="../../../image/image_buttonS.gif"><br>
<input type="reset"><br>
<input type="button" value="一般ボタン"><br>
<input type="email" value="sample@example.jp"><br>
<input type="url" value="http://example.jp"><br>
<input type="search" value="検索"><br>
<input type="tel" value="03-1111-2222"><br>
<input type="number" value="123"> <br>
<input type="date" value="2013-01-01"><br>
<input type="datetime-local" value="2013-01-01T23:59"><br>
<input type="month" value="2013-01"><br>
<input type="week" value="2013-W01"><br>
<input type="time" value="23:59"><br>
<input type="range" min="0" max="100" value="30" style="width:125px;"><br>
<input type="color" value="#FF6600"><br>
ブラウザによって見え方が大きく異なります。画面イメージを確認
留意事項
- 上記の通り、HTML5で追加されたTYPEはブラウザにより対応状況が異なります。未対応のブラウザの場合、<input type="text">を使用します。
- 上記<input>タグのサンプルの中の"datetime"は、HTML5以降に最終的に削除されました。
広告