input要素
要素名 | バージョン | 開始タグ | 終了タグ | 分類/親 | 中身 |
---|---|---|---|---|---|
input | 2.0, 2.x, 3.2, 4.0, X1.0, X1.1 | 必須 | 禁止 | %formctrl; | EMPTY |
属性名 | バージョン | 属性値 | 既定値 | 備考 |
---|---|---|---|---|
type | 3.2, 4.0, X1.0, X1.1 | %InputType; | TEXT | what kind of widget is needed |
name | 3.2, 4.0, X1.0, X1.1 | CDATA | #IMPLIED | submit as part of form |
value | 3.2, 4.0, X1.0, X1.1 | CDATA | #IMPLIED | Specify for radio buttons and checkboxes |
checked | 3.2, 4.0, X1.0, X1.1 | (checked) | #IMPLIED | for radio buttons and check boxes |
disabled | 4.0, X1.0, X1.1 | (disabled) | #IMPLIED | unavailable in this context |
readonly | 4.0, X1.0, X1.1 | (readonly) | #IMPLIED | for text and passwd |
size | 3.2, 4.0, X1.0, X1.1 | CDATA | #IMPLIED | specific to each type of field |
maxlength | 3.2, 4.0, X1.0, X1.1 | NUMBER | #IMPLIED | max chars for text fields |
src | 3.2, 4.0, X1.0, X1.1 | %URI; | #IMPLIED | for fields with images |
alt | 3.2, 4.0, X1.0, X1.1 | CDATA | #IMPLIED | short description |
usemap | 4.0, X1.0, X1.1 | %URI; | #IMPLIED | use client-side image map |
ismap | 4.0, X1.0, X1.1 | (ismap) | #IMPLIED | use server-side image map |
tabindex | 4.0, X1.0, X1.1 | NUMBER | #IMPLIED | position in tabbing order |
accesskey | 4.0, X1.0, X1.1 | %Character; | #IMPLIED | accessibility key character |
accept | 4.0, X1.0, X1.1 | %ContentTypes; | #IMPLIED | list of MIME types for file upload |
align | 3.2, (4.0), (X1.0) | %IAlign; | #IMPLIED | vertical or horizontal alignment |
datasrc | %URI; | #IMPLIED | a single or tabular Data Source | |
datafld | CDATA | #IMPLIED | the property or column name | |
dataformatas | plaintext|html | plaintext | text or html | |
onfocus | 4.0, X1.0, X1.1 | %Script; | #IMPLIED | the element got the focus |
onblur | 4.0, X1.0, X1.1 | %Script; | #IMPLIED | the element lost the focus |
onselect | 4.0, X1.0, X1.1 | %Script; | #IMPLIED | some text was selected |
onchange | 4.0, X1.0, X1.1 | %Script; | #IMPLIED | the element value was changed |
共通属性 …… %coreattrs;, %i18n;, %events;
inputの解説
さまざまな種類のフォームコントロールを作る要素です。type属性でフォームコントロールの種類を決定します。
いずれのコントロールにも、name属性 で名前、value属性 で初期値もしくは送信される値を設定することになります。submit, reset, button については、value属性の値がボタンのラベルとしてボタン表面に記されます。
disabled属性を指定すると、そのコントロールは無効となります。書き換えることも、フォーカスを移すこともできなくなりますし、値も送信されません。readonly属性は書き換えだけを禁止します。フォーカスを移すことはできますし値も送信されます。スクリプトと組み合わせて、「メールアドレスが空欄だと送信ボタンが押せない」などという仕組みを作ることが可能です。
tabindex属性はタブ移動順序を指定するものです。タブキーを押したとき、数値の小さいものから順にフォーカスが移動します。
accesskey属性も指定できますが、これは label に指定した方が良いかもしれません。
text
type属性を省略するか、あるいは type="text" と指定すると、一行の文字入力フィールドを作ります。value属性は入力文字の初期値になります。size属性で入力欄の長さを指定したり、maxlength属性で最大文字数を制限することもできます。ここで指定されるのは文字数であってバイト数ではありませんが、バイト数と解釈するブラウザも存在するようです。
password
type="password" と指定すると、パスワード入力フィールドとなります。type="text" とほぼ同じですが、入力結果が画面上で隠されるようになります。
ただし、このフィールドでは入力した値が見えないというだけで、特にセキュリティが考慮されているわけではありません。特に初期値の扱いには注意して下さい。value属性で初期値を設定した場合、この初期値は表示上は隠されるのですが、ソースを見れば丸見えになってしまいます。特に、エラー時にフォームを再出力するようなシステムでは input type="password" の value 値をフィルしないように気をつけないと、キャッシュからパスワードが漏洩する可能性があります。
checkbox
type="checkbox" とすると、チェックボックスが作られます。ある質問に yes/no で答えるなどという場合に用います。checked属性を指定すると、最初からチェックのついた状態にすることができます。
radio
type="radio" はラジオボタンとなります。チェックボックスに似ていますが、複数のボタンに同じ名前を付けた場合、それらは排他的な関係になります。あるラジオボタンが on になると、他のボタンが自動的に off になるのです。択一式の選択肢を用意するのに向いています。
ラジオボタンには初期値が必要です。どれかひとつに checked属性を指定して初期値を指定する必要があります。ブラウザによっては checked 属性が何もない場合に何も選択されていない状態になってしまう場合がありますが、このような動作はエラー処理であり、仕様で保証されているものではありません。必ずどれかひとつを checked とする必要があります。
submit
type="submit" は送信ボタンとなります。送信ボタンを押すと、そのフォーム内のデータが送信されます。
送信ボタンでは、value属性の値がボタンのラベルとして使用されます。name属性を指定しなければ value属性の値は送信されないので、単にボタンのラベルとして機能することになります。
name属性が指定されている場合、押されたボタンの name と value が送信されます。押していないボタンの値は送信されませんので、複数の送信ボタンがあるときに、どのボタンが押されたのかを見分けるために使えます。
reset
type="reset" はリセットボタンになります。リセットボタンを押すと、フォーム内の全コントロールが最初の状態に戻ります。
しかし、リセットボタンは本当に必要なのでしょうか? たいていのフォームでは、リセットボタンが役に立つケースより、間違ってリセットしてしまい残念な思いをするケースの方が多いのではないかという気もしますが……。
button
type="button" は押しボタンとなりますが、このボタンには既定の動作はありません。onclick属性などを指定して、スクリプトと組み合わせて使います。
……たまに、送信ボタンに見えるものがこれで実装されているフォームがあったりして閉口します。スクリプト無効環境では悲劇が起きること請け合いです。
file
type="file" は少々特殊で、ファイル送信のコントロールを作ります。普通、ファイル名選択の窓を表示し、ローカルのファイルを選択できるようになります。送信時にはそのファイルが送信されます (ファイル名ではなく、ファイルそのものを送ります)。
accept属性で、受け入れるファイルの種類を制限することもできます。
なお、このコントロールを使用する場合は、form要素の enctype属性の値を multipart/form-data にしておく必要があります。
hidden
type="hidden" は隠しコントロールを作ります。これは画面上に表示されませんし、ユーザーが自由に変更することもできません。CGI などに固定の値を送信するのに使います。また、スクリプトによってこっそりと値を送信するのにも使えます。
……なお、「ユーザが自由に変更することができない」といっても、HTML のソースを書き換えればいくらでも変更できますのでご注意ください。書き換えられてはマズイ値を input type="hidden" に指定すると、途方もない悲劇が起きることがあります。特にサーバ内のパスやファイル名らしき物が指定されていると最悪で、それだけで IPA に届け出られても文句は言えません。
image
type="image" はイメージボタンを作ります。src属性で画像の URI を指定すると、その画像がそのままボタンとして使われます。もちろん、画像が使用できない環境のために alt属性で代替テキストを指定することを忘れないでください。
イメージボタンを押すと、フォームデータが送信されます。つまり送信ボタンとして機能するわけですが、type="submit" の送信ボタンとは異なり、value属性 の値ではなく押された場所の座標値を送信します。ですので、サーバー側イメージマップとして機能させることもできます……が……そんな使い方は誰もしていないと思います。usemap 属性でクライアント側イメージマップにすることもできますが、同じくそんな使い方はされないでしょう。
value属性の値が送信されないというのがけっこう重要で、このために type="submit" の機能を
- 「input要素」にコメントを書く