cman.jpWEBページ作成
広告
<input> 「入力欄、選択入力、ボタン」[読み方：インプット]
<form>～</form>の間に<input>、<select>、<textarea>などの入力部品を配置することで、サーバのプログラム（CGIなど）に入力内容を引き渡すことが出来ます。
1ページに複数の<form>を指定することが出来ます。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<input> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ(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) |  |
| "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="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="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" ,"datetime-local" ,"month" ,"week" は、HTML5勧告版で削除されました。
広告