input要素
TOPページに戻る > html入門
スポンサード リンク
input要素
フォームの入力項目を作る要素です
ブラウザから値を入力できるようにするフォーム用の部品です。実際に使うときはinput要素をブロック要素の中にいれて、そのブロック要素をform要素の中に入れてつかます
input要素は終了タグがないので内容となるものはありません
使い方（書式）
<input>
input要素
| 対応ブラウザ | 
 |
| 要素の種類 | インライン要素 |
| 内容となる要素 | なし |
| 属性 | 説明 |
| type属性 | input要素で作るフォームの部品を指定します
type属性の指定がない場合の初期値は textです。type属性の値 スクリプト用のボタン、チェックボックス、ファイル参照、隠し項目、画像のボタン、パスワード入力欄、ラジオボタン、リセットボタン、送信ボタン、テキスト入力欄を作成できます |
| name属性 | 入力項目に名前をつけます。送信されたときに値がサーバーに送信されます |
| value属性 | サーバーに送る項目の値です
値を記述しておくと入力項目の初期表示として表示されます |
| size属性 | 入力項目の横幅を指定します。値には文字数分の整数を指定します
cssのwidthプロパティでも代用できます |
| maxlength属性 | type属性の値にpasswordか、textが指定されている場合に入力欄に入力できる最大文字数を指定します 値には最大文字数分の整数を指定します |
| checked属性 | type属性の値にradioか、checkboxが指定されている場合にchecked属性をつけることで、最初からチェックした状態で表示するようになります
checkedのみ記述します XHTMLでは属性値の省略ができないためchecked="checked"になります |
| disabled属性 | フォームの入力項目と選択を禁止して操作できなくします
この属性が付いている項目はサーバーに値を送信しません |
| readonly属性 | 入力項目を読み取り専用の項目にします
ユーザーは入力できなくなりますが値はサーバーに送信されます 値はreadonly |
| src属性 | type属性の値にimageが指定されている場合に、値にはボタンの画像のurlを指定します |
| alt属性 | type属性の値にimageが指定されている場合に、画像が表示できないときに代替となるテキストを表示します |
| align属性 | type属性の値にimageが指定されている場合に、画像の表示位置を指定
値はleft、right、top、middle、bottom 推奨されない属性なのでcssのfloat、vertical-alignプロパティを使ってください |
| ismap属性 | type属性の値にimageが指定されている場合に、cgiにクリックした画像の位置をサーバーに送る |
| usemap属性 | type属性の値にimageが指定されている場合に、イメージマップを作成するときの画像の名前を指定します
HTML4、XHTML1.0ではイメージマップ名の前に#を付けてください。XHTMLは#は必要ありません |
| accept属性 | type属性の値にfileが指定されている場合、サーバーが受け取れるファイルの種類をMIMEタイプで指定します |
| 共通属性 | html共通属性 |
| イベント属性 | htmlイベント属性 |
| type属性の値とブラウザの表示一覧 | ||
| type属性の値 | 実際の表示 | サンプルコード |
| text | <input type="text" name="hoge" value="hogehoge"> | |
| テキスト入力欄を作ります（1行のみ）value属性で初期表示の文字を指定できます | ||
| password | <input type="password" name="hoge" value="hogehoge"> | |
| パスワード入力欄を作ります。入力した文字が黒丸で表示されます | ||
| hidden | <input type="hidden" name="hoge" value="hogehoge"> | |
| 非表示の項目を作ります。nameとvalueの値をブラウザに非表示でサーバーに送信します | ||
| checkbox | <input type="checkbox" name="hoge" value="on" checked> | |
| チェックボックスを表示します。nameとvalueの値をサーバーに送信します | ||
| radio | <input type="radio" name="hoge" value="on"> | |
| ラジオボタンで表示します。nameとvalueの値をサーバーに送信します | ||
| file | <input type="file" name="hoge"> | |
| ファイルをアップロードを送信するためのボタンを作ります | ||
| submit | <input type="submit" value="送信ボタン"> | |
| サーバーにフォーム全体の入力値を送信するボタンを表示します | ||
| image | <input type="image" src="botan.gif" alt=""> | |
| サーバーにフォーム全体の入力値を送信する画像ボタンを表示します | ||
| reset | <input type="reset" value="リセット"> | |
| フォームの入力値をリセットするボタンを作成します | ||
| button | <input type="button" value="スクリプト用ボタン"> | |
| スクリプトで操作するボタンを作成します | ||