form部品（form要素）とJavaScriptに関する覚え書
form
formのmethodを省略すると、GETが指定された事になる。
以下は、それを確認するためのコードである。
上記コードの1行目は、下記のように指定したのと同じ。
aタグと同様、formタグにtaget属性を指定する事で、別windowに結果を表示できる。
formより送信されたデータを受け取るための、サーバサイドのphpプログラムの例を以下に示す。phpよりformのデータを扱うには、「
サンプル１のformをsubmitした時の結果画面は、下図のようになる。
イベントメソッド内のthis
form要素に限らないが、イベント内のthisはhtml要素自身を示す。
以下はその例。
elements配列によるform要素へのアクセス
elements配列を使うと、from内の全form要素へアクセスすることができる。
type属性によるform部品の判別
form部品には、inputタグで指定するものが多い。
そのため、inputタグのform部品の種類を判別するのに、type属性の情報が有用である。
form部品のイベント
ほとんどのform部品は、以下のイベントメソッドを使う事ができる。
- onclick
クリックされた。 - onchange
値が変化した。 - onfocus
focusを受け取った。 - onblur
focusを失った。
ボタン
ボタンには以下のような4つのタイプがある。
resetボタン
resetボタンは、form要素の値をデフォルトの状態に戻すのに使われる。
サンプル６のtextbox1の文字列を変更した後、resetボタンを押下すると、 textbox1の値が元に戻る。
resetボタンのonclickメソッドにてfalseを返すと、reset動作をキャンセルできる。
また、formにはonresetイベントが用意されていて、このメソッドがreset動作の前に呼ばれる。
この、メソッドもfalseを返すとreset動作がキャンセルされる。
formのresetメソッドを実行する事で、プログラムからreset動作をおこなわせる事もできる。
この場合も、reset動作をおこなう前にonresetイベントが発生する。
inputボタンとbuttonボタンとsubmitボタンの違い
inputボタン、buttonボタンとsubmitボタンは似かよっていてるが、動作が微妙に異なる。
submitボタンとbuttonボタンは、ボタンを押下するとsubmit動作（formの送信）が発生するのに対して、 inputボタンではsubmitは発生しない。
では、submitボタンとbuttonボタンの違いは何だろう。
submitボタンとbuttonボタンの違いは、 buttonボタンの場合には後述の例で示すように、buttonタグで囲まれた内部にhtml要素をネストできる点である。
これを利用して、ボタン内に画像等を挿入できる。
resetボタンと同様に、submitボタン，buttonボタンは、 ともにonclickメソッドにてfalseを返すと、submit動作をキャンセルできる。
同様に、formにはonsubmitイベントが用意されていて、 このイベントがsubmit動作の前に呼ばれる。
このイベントも、falseを返すとsubmit動作がキャンセルされる。
formのsubmitメソッドを実行する事で、プログラムからsubmit動作をおこなわせる事もできる。
この場合は、resetメソッドと異なり、onsubmitイベントは発生しない。
form部品を、formの外に配置する事もできる。
formの外にボタンを配置すると、対応するformのactionが存在しないので、submit動作しないボタンとなる。
ボタン関わるその他の話題
buttonボタンは、buttonタグで囲まれた内部にhtml要素をネストできる。
これを利用すると、ボタン内に画像を表示できる。
イメージボタンは、inputタグのtype属性にimageを，src属性に画像のurlを指定して、作る事もできる。
この場合、画像内のボタンが押された位置のxy座標のデータも送信される。
inputタグの場合には、ボタン画像を作らなければならない。
「フリーソフト ボタン画像 作成」のキーワードを指定してgoogle先生に聞いてみると、 いろいろと使えそうなボタン画像作成ツールが出てくる。
ここでは、「アクア風のボタン画像が簡単に作れるフリーソフト:AquaMaker2」 を使わせていただいた。
form部品とは関係ないが、「ボタン工房紹介」に htmlとcssを使ったボタンの作り方が出ていたので、 このページと「疑似クラス:hoverを使ったロールオーバー効果 - CSSテクニック - acky info」を参考に、aタグによるボタンの代用を試みてみた。
cssには、擬似クラス（「擬似クラス/CSSリファレンス」等を参照） というものがあって、これを使って、マウスの動きに合わせてボタン画像の表示を変化させている。
また、aタグのURLを指定する部分に、「javascript:」と指定して、JavaScriptのコードを実行できる。
ここに、void(0)を記述する事で、hrefの動作をキャンセルし、 onclickイベントでFormのsubmitの動作をおこなわせている。
但し、void(0)は使うべきでは無いという意見もある。 （「TAM テクニカルチーム | ＜a href=”void(0);”＞をやめてみる | Tips Note」等を参照）
余談ではあるが、この「javascript:」から始まるJavaScriptのコードを、 Webブラウザのお気に入りのURLに登録して呼び出す事で、 表示中のWebページに対してJavaScriptのコードを実行させる事ができる。
これは、ブックマークレットと呼ばれる便利な機能である。
テキストボックス
1行入力のテキストボックスは、inputタグのtype属性にtextを指定する。
複数行入力のテキストボックスは、textareaタグを使う。
パスワード入力用のテキストボックスには、inputタグのtype属性にpasswordを指定する。
formにテキストボックスが１個だけの場合、テキストボックスにEnter入力でformのsubmitがおこなわれる。onkeypress,onkeyup,onkeyupイベントを使うと、 特定の文字の入力を制限する等、より細かい制御をおこなう事ができる。
チェックボックス
チェックボックスを表示して、チェックボックスの状態を、JavaScriptで表示するコードの例を以下に示す。
inputタグにchecked属性を指定すると、デフォルトの選択状態を指定する事ができる。
JavaScriptでデフォルトの選択状態かどうかは、defaultCheckedプロパティで知ることができる。
注意すべき点として、チェックボックスのチェックがはずれた状態でformデータを送信しても、 サーバにチェックボックスのデータが送信されない事である。
ラジオボタン （オプションボタン）
ラジオボタンは、複数の候補からどれか一つを選択するform部品である。
name属性の同じラジオボタンが、選択候補のグループになる。
以下の例は、submitボタンが押された時に、 name属性がradioGroup1のラジオボタンのうちどれか一つが選択されているかどうかチェックして、 選択されている場合にのみformのデータを送信する例である。
チェックボックスと同様、inputタグにchecked属性を指定すると、デフォルトの選択状態を指定する事ができる。
ラジオボタンがデフォルトの選択状態かどうかは、defaultCheckedプロパティで知ることができる。
同じグループ内のどのラジオボタンも選択されていない状態でformデータを送信しても、 サーバにラジオボタンのデータは送信されない。
ドロップダウンリスト（プルダウンメニューともコンボボックスとも呼ばれる）とリストボックス
ドロップダウンリストとリストボックスをhtmlで記述するには、 ともに、selectタグ内にoptionタグを記述する。ドロップダウンリスト
ドロップダウンリストの状態を、JavaScriptで表示するコードを以下に示す。
リストボックス
リストボックスのコードはドロップダウンリストの場合とほとんど同じである。
上記のコードを修正して、2行目のselectタグの部分に size属性を追加して、 何行分のリストを表示するか指定するだけである。
複数選択リストボックス
複数の項目を選択できるリストボックスを、表示する事もできる。
この場合のコードもドロップダウンリストの場合とほとんど同じである。
上記のコードを修正して、2行目のselectタグの部分に multiple属性を指定するだけで良い。
複数の項目を選択するには、Shiftキーを押しながら項目を選択する。
複数選択リストボックスの選択値を、プログラムで扱うには工夫が必要である。
サーバサイドにPHPを使う場合には、
「
リストのグループ化
optgroupタグを使うとドロップダウンリストやリストボックスの選択項目をグループ化できる。
以下のコードは、リストボックスをグループ化する例である。チェックボックスと同様、リストに何も選択されていない状態でformデータを送信しても、 未選択のデータはサーバに送信されない。
デフォルトの選択状態
optionタグにselected属性を指定すると、デフォルトの選択状態を指定する事ができる。
JavaScriptでデフォルトの選択状態かどうかは、defaultSelectedプロパティで知ることができる。
ドロップダウンリストやリストボックスの選択項目の操作
項目の削除
項目を削除するにはnullを代入する。
削除された項目以降の項目は、自動的に順番に前に詰められる。
項目の追加
項目を新たに作成して追加することもできる。
defaultSelectedおよびselectedはtrueまたはfalse。
項目数の変更
options.lengthに数値を代入すると項目数が自動的のその値に調整される。
サンプル１８-ドロップダウンリストやリストボックスの選択項目の操作の例
hiddenタグ
hiddenタグを使って、非表示のパラメータを利用することができる。
その他のform部品
サバーに送信するファイルを指定するには、inputタグのtype属性に「file」を指定するinputタグのtypeにはさまざまなものがあるが、html5になって色や日時等、更にいろいろなものが追加されている。
「 HTML5でinput要素に追加された新しいタイプ13連発 - ＠IT」を参照。
入力要素以外のform部品
labelタグ
labelタグを使って、form部品にラベルを付ける事ができる。
labelに対応するform部品を指定するには、labelタグでform部品を囲む方法と、 for属性を使って対象となるform部品のid属性（name属性ではない）を指定する方法とがある。
labelの部分をクリックすると、対応するform部品がクリックされたのと同じ状態になる。
例えば、対応するform部品がテキストボックスの場合は、テキストボックスにフォーカスが移り、 チェックボックスの場合はチェックボックスのチェック状態が反転する。
fieldsetとlegend
fieldsetタグを使って、form部品をグル-プ化できる。
legendタグを使って、fieldsetのタイトルを表示できる。
fieldsetはformのelements配列に含まれるが，legend，labelは含まれない。
fieldsetのtype属性はブラウザによってはundefinedとなる。
サンプル２２-fieldset，legend，labelとelements配列とtype属性の関係
参考URL