ばけらの HTML リファレンス(未完成)

bakera.jp > 鳩丸リファレンス > ばけらの HTML リファレンス(未完成) > 要素一覧 > input要素

input要素

要素名バージョン開始タグ終了タグ分類/親中身
input2.0, 2.x, 3.2, 4.0, X1.0, X1.1必須禁止%formctrl;EMPTY
属性名バージョン属性値既定値備考
type3.2, 4.0, X1.0, X1.1%InputType;TEXTwhat kind of widget is needed
name3.2, 4.0, X1.0, X1.1CDATA#IMPLIEDsubmit as part of form
value3.2, 4.0, X1.0, X1.1CDATA#IMPLIEDSpecify for radio buttons and checkboxes
checked3.2, 4.0, X1.0, X1.1(checked)#IMPLIEDfor radio buttons and check boxes
disabled4.0, X1.0, X1.1(disabled)#IMPLIEDunavailable in this context
readonly4.0, X1.0, X1.1(readonly)#IMPLIEDfor text and passwd
size3.2, 4.0, X1.0, X1.1CDATA#IMPLIEDspecific to each type of field
maxlength3.2, 4.0, X1.0, X1.1NUMBER#IMPLIEDmax chars for text fields
src3.2, 4.0, X1.0, X1.1%URI;#IMPLIEDfor fields with images
alt3.2, 4.0, X1.0, X1.1CDATA#IMPLIEDshort description
usemap4.0, X1.0, X1.1%URI;#IMPLIEDuse client-side image map
ismap4.0, X1.0, X1.1(ismap)#IMPLIEDuse server-side image map
tabindex4.0, X1.0, X1.1NUMBER#IMPLIEDposition in tabbing order
accesskey4.0, X1.0, X1.1%Character;#IMPLIEDaccessibility key character
accept4.0, X1.0, X1.1%ContentTypes;#IMPLIEDlist of MIME types for file upload
align3.2, (4.0), (X1.0)%IAlign;#IMPLIEDvertical or horizontal alignment
datasrc%URI;#IMPLIEDa single or tabular Data Source
datafldCDATA#IMPLIEDthe property or column name
dataformatasplaintext|htmlplaintexttext or html
onfocus4.0, X1.0, X1.1%Script;#IMPLIEDthe element got the focus
onblur4.0, X1.0, X1.1%Script;#IMPLIEDthe element lost the focus
onselect4.0, X1.0, X1.1%Script;#IMPLIEDsome text was selected
onchange4.0, X1.0, X1.1%Script;#IMPLIEDthe 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" の機能を代替(だいたい)しきれないことがあります。

最近の日記

関わった本など