フォームを使う

タグ : FORM / INPUT / text / password / radio / checkbox / button / submit / reset / hidden / SELECT / TEXTAREA / LABEL

プロパティ : radio / checkbox / select / textarea | メソッド | イベント

<form></form>タグ

オプション：name / id / target / action / method / enctype / accept-charset / accept

JavaScriptでフォームの指定をする場合、document.form名が使えますが、参照番号を使って、1番目のフォームという指定もできます。
その場合次のように記述します。配列と同じで「0」が最初です。

document.forms[0]

フォームの基本形

<form><input type="text"><input type="submit"></form>

<input>というタグを複数<form></form>の中に挟んで使います。この<input>タグはtypeを指定して、様々な入力形式を提供します。ここでは、textタイプを使って、文字列の入力欄を表示しています。また、submitタイプのように、送信ボタンも<input>タグによって設置されます。
上記の例文は、下のように表示されます。

上記の例ではボタンを押してもフォームが送信されないようにしてあります。

フォームの整形

テーブルの中に<form>を置くと上下に隙間ができるなど、ブラウザによってデザインが乱れます。また、フォームの項目名や入力項目などをテーブルで綺麗に整形してデザインしたい場合があります。
その時は、テーブルの前後に<form></form>を置くとデザインもしやすくなります。

<form>
<table><tr><td>表示例：</td><td><input type="text"><input type="submit"></td></tr></table>
</form>

上の表示例と下の表示例を比較してみてください。IE7では</form>の後に改行が入ってしまいますが、下ではそれが消えて、<td></td>で囲まれた２つの枠の中心が揃っています。

<table>の前後だけでなく、<tr>や<td>などのタグの前後に<form>を置くこともできます。タグの入れ子構造が崩れないように注意が必要です。
複数の<form>を使う場合は、それらが重なり合わないように配置しましょう。

メールアドレスへの送信

<form action="mailto:user@dammy.com" method="post" enctype="text/plain">
<input type="text" name="textfield">
<input type="submit" value="送信" >
</form>

actionとmethod、enctype上記のように指定し、メールアドレスに対してフォームの内容を送信することができます。
メールで送信されるため、専用のサーバやCGIが使えない場合でも、フォームのデータを受信することが可能です。

表示例のように、入力欄に「テスト」と入力し送信ボタンを押すと、ブラウザからメールが発信されます。
発信者のメールアドレスはブラウザで設定を行います。（IEの場合、インターネットオプションで設定します）
method="get"にすると、メールソフトが起動します。
enctypeを省略すると、データはエンコードされた状態で送信されますので、そのままでは読むことが出来ません。
複数の項目がある場合、項目毎に改行されます。

HTMLファイルへの送信

<form action="dammy.html" method="get">
<input type="text" name="textfield">
<input type="submit" value="送信" >
</form>

targetを使って新しいウィンドウでファイルを開いています。
method="post"では、エラーが発生し、ファイルを開くことができません。

複数の項目がある場合、「&」でつながれます。「?textfield=%83e&textfield2=%83g」のようになります。
送信されるデータに日本語や記号部分が含まれる場合、エンコードされます。この時、HTMLファイルが作られたフォーマットによって、送られる文字列も変化します。
このHTMLファイルはUTF-8で作られていますが、Shift-JISの場合には、表示例の下の文字列が送信されます。

dammy.htmlに送られたデータは、ファイル名の後の「?」以降に文字列として付加されています。
これをdammy.html内でJavaScriptを使い、次のようにして「?」以降のデータを読み取ることができます。

get_text = document.location.search;
get_text = get_text.substring(1,get_text.length);

1行目で送信されたデータを直接取得できるのですが、「?」が含まれてしまうため、2行目で最初の一文字を抜いています。

CGIファイルへの送信

<form action="dammy.cgi" method="post">
<input type="text" name="textfield">
<input type="submit" value="送信" >
</form>

method="get"でも送信はできますが、postかgetかでCGIの受信方法が異なります。下はperlでの受信方法です。

if ($ENV{'REQUEST_METHOD'} eq 'GET') {
$buffer = $ENV{'QUERY_STRING'};
} elsif ($ENV{'REQUEST_METHOD'} eq 'POST') {
read(STDIN,$buffer,$ENV{'CONTENT_LENGTH'});
}

#デコード
$buffer =~ s/\+/ /eg;
$buffer =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;

perlでは環境変数を使ってデータの受信を行います。getの場合とpostの場合で受信する環境変数が違うため、送信方法を確認して$bufferにデータを入れています。
次のデコード処理で「+」を半角スペースに戻したり、日本語を元の状態に戻しています。ただし、これはShift-JIS用のデコード方法です。
JavaScriptとは関係がなくなるため、今回はここまでにしておきます。

エンコードとデコードについて

日本語の文字がフォーム内の入力項目に含まれる場合、自動的にエンコードが行われ、1バイトの文字列に置き換えられます。
そのため、受信側で元の日本語が読めるようにデコードする処理が必要になります。
CGIでは、上記のように処理をしましたが、JavaScriptではどうすればいいのでしょうか。

実はJavaScriptにはShift-JISをデコードする関数がありません。
そこで、CGIを使えない場合に２つの方法があります。
１つは、日本語のまま送信しないで、先にescape関数を使ってエンコードしてしまうのです。これならunescape関数で元に戻せます。
もう１つは、HTMLファイルをUTF-8で保存してしまうのです。そうすれば、エンコードは自動で任せてしまうことができ、デコードだけdecodeURI関数を使います。

このサンプル集では、CGIを使わずに受信するため、ソースを簡便に見せるためにもフォーマットをUTF-8にして保存しています。

<script>
//URLの？以降を取得
get_text = document.location.search;
get_text = get_text.substring(1,get_text.length);
//受信したデータをそのまま表示
document.receive.textfield.value = get_text;
//デコードして表示
document.receive.textfield2.value = decodeURI(get_text);
</script>

これならサーバを使わずに受信が行えます。

escapeとunescapeを使う場合はsubmitを使わず、全てJavaScriptで準備する必要があります。
エンコードとデコードは次のようにします。

//エンコード
get_data = escape(get_data);
//デコード
get_data = unescape(get_data);

フォームのsubmitを使わないということは、送信の時にブラウザが行ってくれる手順をスクリプトで実現しなくてはなりません。
解説はしませんが、まずは各項目のデータを集めて連結し、エンコードされた送信用のデータを作ります。
あとは、送信したいURLの後ろに「?」を置いた後に送信用データを記述して、全体をURLとして表示させます。
ブラウザはそのURLをサーバへ送信しますので、任意のファイルにデータを受け渡すことができるのです。

//URLへのデータ送信
document.location.href = "http://www.dammy.com/dammy.html?" + get_data;

<input>タグ共通仕様

オプション：name / id / type / value / disabled

使用例

<input>を指定するためには、nameやidを使って名前で識別する方法と、要素をその順番で指定する方法があります。

（１）nameでの指定

document.forms["name"].elements["name"]

<form>や<input>にnameを使って名前を付け、どのフォームのどの項目かを直接的に指示します。
また、これは次のようにも書くことが出来ます。

document.name.name

（２）idでの指定

document.forms["id"].elements["id"]
document.id.id

nameとidは同じように扱えます。混在して使うことも出来ます。
ただし、nameがない項目はフォームから送信されませんので注意が必要です。多くの場合、nameを使うか、nameと同じidを使います。
idはタグやnameとは関係なく使えるので、処理の手順を分けて考えるときにも重宝します。

document.getElementById("id")

上記のように直接idを指定することもできます。

（３）参照番号での指定

1つ目のフォームの1つ目の項目は次のように指定します。

document.forms[0].elements[0]

nameやidと混在することもできます。

document.forms[0].elements["name"]

これら項目名やid名には変数を使うこともできます。
また、一部を変数名にして「"data"+num」のようにして、num=0のとき「data0」を指定することもできます。

使用不可

<form><input type="text" disabled><input type="checkbox" checked disabled><input type="submit" disabled></form>

使わせたくない項目にはdisabledで入力を拒否することが出来ます。
スクリプトを使って、条件を満たすと解除するように作ります。

グレーになった項目やボタンはクリックしても変化がありません。

<input type="text">

オプション：size / maxlength

使用例

<form><input type="text" name="textfield" size="20" maxlength="15" value="あいうえお"></form>

<form>タグと送信ボタンは省略しています。
valueを指定すると初期値として文字が入りますが、省略すると空で表示されます。

送信ボタンを押すと受信フォームにデータが送られます。

JavaScriptからの入出力

JavaScriptで入力されたデータにアクセスするには、「document.フォーム名.項目名.value」と指定します。

//フォームのデータを変数へ入力
get_data = document.forms[0].elements[0].value;
//変数のデータをフォームへ出力
document.forms[0].elements[0].value = get_data;

上記の例では、項目の入力内容を変数get_dataへ、また変数get_dataから項目へデータを写しています。

<input type="password">

オプション：size / maxlength

使用例

パスワードなど、画面上で表示を伏せながら入力することができます。

<form><input type="password" name="password" size="10" maxlength="8" value="abcdef"></form>

ここではvalueを使って文字を入れていますので、ソースファイルを見ると入力された内容が判ります。
この状態では検索サイトなどにデータとして収集される恐れがあり、通常は送信時に入力させます。
パスワードや暗証番号の入力に使用され、受信したサーバ側で管理しているデータと照合するために使います。

フォームを送信する場合、passwordの内容はそのまま送られます。画面の表示を隠すだけの機能ですので、通信の安全性は考慮されていません。
安全にパスワードを送信する必要がある場合、SSL等の暗号通信をする必要があり、対応したサーバが必要になります。

送信ボタンを押して、入力内容が受信されることを確認してください。
日本語を入れることもできますが、入力しにくいため、通常は英数字を使用します。

<input type="radio">

オプション：name / value / checked

使用例

<form name="fr">
設問１<input type="radio" name="Q1" value="win" checked>Windows <input type="radio" name="Q1" value="mac">Macintosh
設問２<input type="radio" name="Q2" value="春" checked>春 <input type="radio" name="Q2" value="夏">夏 <input type="radio" name="Q2" value="秋">秋 <input type="radio" name="Q2" value="冬">冬
</form>

上記の例では2種類の設問を用意して、name="Q1"には２つのボタンを、name="Q2"には４つのボタンがあります。
valueで指定したデータは画面には表示されません。別途タグの後などに判りやすい項目を記述します。

JavaScriptからの入出力

//設問１の項目を表示
function check_radio() {
if (document.fr.Q1[0].checked) {get_data = "Windows";}
else {get_data = "Macintosh";}
alert("設問１："+get_data);
}

//設問１のvalueを表示
function check_radio2() {
if (document.fr.Q1[0].checked) {get_data = document.fr.Q1[0].value;}
else {get_data = document.fr.Q1[1].value;}
alert("設問１："+get_data);
}

ラジオボタンの状態を調べるには、１つ１つ確認する必要があります。
上記例の場合、nameがQ1となっているボタンのうち「0」番（1つ目）をif文でチェックしています。

ラジオボタンを操作する場合は次のようになります。

<input type="button" onClick="input_radio(0)" value="春">
<input type="button" onClick="input_radio(1)" value="夏">
<input type="button" onClick="input_radio(2)" value="秋">
<input type="button" onClick="input_radio(3)" value="冬">

function input_radio(num) {
document.fr.Q2[num].checked = true;
}

JavaScriptでのプロパティ

数値/文字/条件…プロパティで入出力されるデータの種類。数値…数値のみ。文字…数値も含まれる。条件…true/false。
入…書込（入力）可能なプロパティ。
出…読込（出力）可能なプロパティ。

<input type="checkbox">

オプション：name / value / checked

使用例

<form name="fc">
設問１<input type="checkbox" name="Q1" value="win" checked>Windows <input type="checkbox" name="Q1" value="mac">Macintosh
設問２<input type="checkbox" name="Q2" value="春" checked>春 <input type="checkbox" name="Q2" value="夏">夏 <input type="checkbox" name="Q2" value="秋">秋 <input type="checkbox" name="Q2" value="冬">冬
</form>

設問１では、ラジオボタンと同様にnameをQ1で統一しています。
設問２の方は、nameをQ2で統一し、valueで項目名を識別しています。

チェックが入った項目だけが送信され、「name=value」の形式で送信されます。valueを省略しても「on」と表示されます。

JavaScriptからの入出力

//設問１の項目を表示
function check_checkbox() {
get_data = "";
if (document.fc.Q1[0].checked) {get_data = "Windows";}
if (document.fc.Q1[1].checked) {
if (get_data != "") {get_data += " / ";}
get_data += "Macintosh";
}
alert("設問１："+get_data);
}

//設問２のvalueを表示
function check_checkbox2() {
get_data = "";
for (i=0;i<4;i++) {
if (document.fc.Q2[i].checked) {
if (get_data != "") {get_data += " / ";}
get_data += document.fc.Q2[i].value;
}
}
alert("設問２："+get_data);
}

チェックボックスの状態を調べるのも、ラジオボタン同様に１つ１つ確認する必要があります。
「if (get_data != "") {get_data += " / ";}」の部分は、項目をつなげるときに間に「/」を挟むための処理です。get_dataに文字列が入っている場合を調べるために、条件式ではget_dataが空でない場合を真としています。
設問２のvalueはfor文を使って４つのチェックボックスを順番に調べています。

チェックボックスを操作する場合は次のようになります。

<input type="button" onClick="input_checkbox(0)" value="春">
<input type="button" onClick="input_checkbox(1)" value="夏">
<input type="button" onClick="input_checkbox(2)" value="秋">
<input type="button" onClick="input_checkbox(3)" value="冬">

function input_checkbox(num) {
document.fc.Q2[num].checked = !(document.fc.Q2[num].checked);
}

式は単純で、()は条件判断式になっており、「!」は条件の否定になっています。条件であるチェックボックスの内容がtrueなら逆のfalseを代入することになり、この1文でチェックの状態を切り換えています。

JavaScriptでのプロパティ

<input type="button">

オプション：value / size

使用例

<form>
<input type="text" name="test" value="テスト">
<input type="submit">
<input type="reset">
<input type="button" value="表示">
</form>

ボタンには3種類あります。フォームのデータを送信する「submit」、フォームの内容を初期状態に戻す「reset」、機能のないボタンを置くための「button」です。

「botton」の指定では、そのままでは何も起こりません。そこで、JavaScriptのイベント呼び出しを使います。
ボタンを押したときにスクリプト処理をするには「onClick」を使います。

<input type="button" value="表示" onClick="pop_alert()">

<script>
function pop_alert() {
alert("表示ボタンが押されました。");
}
</script>

上記の例では、ユーザー関数「pop_alert()」が実行されます。

表示ボタンを押すと、アラートが表示されます。

JavaScriptによる確認と送信

送信ボタンを使わずにボタンからスクリプトの処理をしてフォームを送信することができます。
これは、送信前にフォームの入力内容を確認して、送信をキャンセルしたり、送信先を分岐させたりするのに利用されます。

<form name="fs" action="sample6-2.html" method="get">
<input type="text" name="test">
<input type="button" value="送信" onClick="check_submit()">
</form>

<script>
function check_submit() {
var r = true;
//項目が空白の場合にアラート
if (document.fs.test.value == "") {
alert("項目が入力されていません。");
r = false;
}
if (r) {
//ダイアログを表示
r = confirm("送信しても良いですか？");
//フォームの送信
if (r) {document.fs.submit();}
}
}
</script>

ボタンの表示は「送信」としていますが、送信ボタン（submit）ではありません。
ボタンを押すとユーザー関数「check_submit()」が実行されます。
スクリプトでは、まず「test」項目が空白かどうかを調べています。空白ならアラートを表示して変数rをfalseに変更するので、次のif文が実行されません。rがtrueのままであれば、if文の中に処理が進みconfirmが実行されます。ダイアログが表示され、「OK」が押されるとrにはtrueが入りますので２つ目のif文でフォームの送信が実行されます。

上記フォームの項目に適当に文字を入力し、送信ボタンを押すとダイアログが表示されます。そこで「OK」を押すとフォームが送信されます。

<input type="submit">

オプション：value / size

使用例

<form name="fs" action="sample6-2.html" method="get">
<input type="text" name="test" value="テスト">
<input type="submit" value="送信">
</form>

送信ボタンを押すとフォームが送信されます。

送信の方法や送信先については<form>内のactionやmethodで指示しておきます。

<input type="submit" name="b_submit" value="送信">

実は上記の表示例では、送信ボタンにnameを設定しています。 次の事例との比較のためで必要はありません。
ここでは送信データに「b_submit=送信」が含まれていることを受信ページで確認しておいてください。

JavaScriptによる確認と送信

送信のための確認について２つの表現を紹介します。
１つ目は、「onKeyUp」を使ってキー入力のイベントを監視して、項目への入力があったかどうかの確認です。
もう１つは、スクリプトを使って送信前に確認処理をします。これには<form>内で 「onSubmit」を使います。

<form name="fs2" action="sample6-2.html" method="get" onSubmit="return check_submit2()" >
<input type="text" name="test" onKeyUp="check_field()">
<input type="submit" id="b_submit" value="送信" disabled>
</form>

<script>
function check_field() {
//項目の入力状態を確認する
document.fs2.b_submit.disabled = (document.fs2.test.value == "");
}

function check_submit2() {
//ダイアログの表示とフォームの送信
return confirm("送信しても良いですか？");
}
</script>

（１）入力の確認と送信ボタンの状態

送信ボタンは初期状態では使用不可になっています。 タグ内にはこの他に２つの準備が必要です。
１つは入力状況を確認したい<input>内にイベントを組み込みます。今回はテキストボックスなのでイベント処理の「onKeyUp」を使っています。これにより1文字入力する毎にユーザー関数を実行します。
もう１つの準備は、送信ボタンに名前を付けることです。これがないとスクリプトの対象となるボタンが判りません。nameを使っても良いのですが、それだと送信データに入ってしまうので、idを使っています。
ユーザー関数「check_field()」では、test項目が空欄かどうかを判定し、その結果をb_submitのdisabledプロパティに適用しています。（２）送信の確認

送信ボタンが押されるとイベント処理として「onSubmit」が呼び出されます。「return true」ならば送信、「return false」なら送信は行いません。
そこで、ユーザー関数「check_submit2()」を使って「true」か「false」を切り替えるようにしています。
スクリプトでは、確認のダイアログを表示し、その結果を「return」で戻しています。それを受けてonSubmitの中でフォームに対して「return」が実行されることになっています。

項目に文字を入力して、送信ボタンを押せばダイアログが出ます。「OK」を押すとデータの送信が行われます。

onSubmitを使わず、スクリプトからsubmit()を使って送信を行うことも可能です。前項目buttonを参照してください。

<input type="reset">

オプション：value / size

使用例

<form>
<input type="text" name="test" value="テスト">
<input type="reset" value="リセット">
<br>
<input type="checkbox" name="Q2" value="checkbox" checked > 春
<input type="checkbox" name="Q2" value="checkbox"> 夏
<input type="checkbox" name="Q2" value="checkbox"> 秋
<input type="checkbox" name="Q2" value="checkbox"> 冬
</form>

リセットボタンを押すと、フォームの入力内容を初期状態に戻します。

リセットボタンはフォームを初期状態に戻すため、項目に文字が入っていた場合は再び初期の文字列に戻ります。

JavaScriptによるリセットの代用

送信のようにリセットもスクリプトから行うことができます。

<form name="fs3">
<input type="text" name="test1" value="ここに文字を入力" onMouseUp="reset_field()"><br>
<input type="text" name="test2" onMouseUp="reset_field()"><br>
<input type="text" name="test3" onMouseUp="reset_field()">
</form>

<script>
function reset_field() {
document.fs3.reset();
}
</script>

リセットはユーザー関数「reset_field()」内の「reset()」で行っています。
どうやってユーザー関数「reset_field()」を呼び出しているかと言うと、３つのテキストボックスにイベント処理の「onMouseUp」を用意しています。マウスで項目内をクリックした後（マウスのボタンを放した時）に実行されます。

1つ目のテキストボックスにはあらかじめ文字が入っています。各項目に文字を入れたり消したりして、マウスでクリックして動作確認してみましょう。

<input type="hidden">

オプション：name / value

画面には項目として表示されないタグです。cookieや前処理から引き継いだデータをフォームに隠して置いて、送信されるデータに含みたい場合に使います。

例えば、利用者を区別するために任意のID番号を与えます。書き換えられると困るので、見えないようにしておきます。送信データには含まれるので、誰が送信したのか区別することができます。

使用例

<form action="sample6-2.html" method="get">
<input type="hidden" name="ID" value="007">
<input type="text" name="test" value="テスト">
<input type="submit" value="送信">
</form>

hiddenの項目はどこに置いても構いません。送信されるデータはタグの順番なので、受信側の処理の手順に合わせて順番を決めます。

送信ボタンを押すとフォームが送信され、hiddenの項目も一緒に受信されます。

JavaScriptからの入出力

スクリプトで送信時間を作って、それをhiddenに入れて送信してみましょう。

<form name="fh" action="sample6-2.html" method="get" onSubmit="get_time()">
<input type="hidden" name="time" value="">
<input type="text" name="test" value="テスト">
<input type="submit" value="送信">
</form>

<script>
function get_time() {
//現在時刻の取得
gt = new Date();
hour = gt.getHours();
if (hour< 10) {hour = "0" + hour}
min = gt.getMinutes();
if (min< 10) {min = "0" + min}
sec = gt.getSeconds();
if (sec< 10) {sec = "0" + sec}
//時間をまとめる
gt = hour + ":" + min + ":" + sec;
//アラートで表示
alert(gt);
//hiddenに入れる
document.fh.time.value = gt;
}
</script>

hiddenの項目はどこに置いても構いません。送信されるデータはタグの順番なので、受信側の処理の手順に合わせて順番を決めます。
送信ボタンを押すとonSubmitでユーザー関数を呼び出します。
ユーザー関数「get_time()」では、時刻を取得し、成型して、アラートの表示と送信データを作っています。時分秒のそれぞれについて、一桁の場合は前に0を加えるという処理も行っています。

送信ボタンを押すとonSubmitが実行された後でフォームが送信されます。

時間を連結するときに「:」を使わないで数字をそのまま連結する場合は次のようにします。

gt = hour + "" + min + "" + sec;

「gt = hour + min + sec」としてしまうと、文字列の結合ではなく、足し算が行われてしまうため、間に文字列を挟む必要があります。JavaScriptでは、変数の型宣言がないため、１つの変数を数値用にも文字列用にも使えます。途中で用途が自動的に変更されます。
そこで、 「""」は何もありませんが、文字列の処理とみなされるので、JavaScriptでは数値を文字列として接続するのに使うのです。

<select><option></select>

オプション：name / size / multiple / disabled / value / selected

プルダウンメニューで選択項目を表示します。選択項目が多い場合に使われます。

使用例

<form name="fsel1" action="sample6-2.html" method="get" target="win_receive">
<select name="place">
<option value="25" selected>滋賀</option>
<option value="26">京都</option>
<option value="27">大阪</option>
</select>
<input type="submit" value="送信">
</form>

送信するデータの項目名は<select>内にnameで指定し、データ内容は<option>内にvalueで指定します。画面の表示は<option>タグで挟んだ文字列になります。

プルダウンメニューを選択して、送信してください。都道府県番号が送信されます。

次にsizeとmultipleを使って例を見てみましょう。

<form name="fsel2" action="sample6-2.html" method="get" target="win_receive">
<select name="place" size="3" multiple>
<option value="25" selected>滋賀</option>
<option value="26">京都</option>
<option value="27">大阪</option>
</select>
<input type="submit" value="送信">
</form>

<select>内にsizeで高さ（段数）を指定し、複数行を選択できるようにしています。

複数の項目を選択する場合、WindowsならばCtrlキーを押しながらクリックします。Macintoshならoptionキーです。

JavaScriptからの入出力

（１）placeの切換

//placeの切換
function sel_place(num) {
//form fsel1
document.fsel1.place[num].selected = true;
//form fsel2
document.fsel2.place[num].selected = !(document.fsel2.place[num].selected);
}

<option>の選択項目に対して、選択のon/offをtrueとfalseで指示します。
この時、何番目の選択肢なのか番号で指示します。1つ目が0です。

<select>のnameで「place」が指定されていますので、これを対象にし、place[num]でその中の何番目(num)の選択肢かを指定します。
プロパティのselectedに対して、trueを与えることでその選択肢が選択状態になります。falseなら選択解除です。

フォームのfsel2については、複数選択が可能なので、fsel1の場合と同じ処理では選択が増えるばかりです。
そこで、まず「=」の右辺で、その行の現在の状態を取得して（）内で条件判断します。状態を切り換えるため、trueならfalseに、falseならtrueにするので、条件を「!」で否定することで条件が逆になるので、状態を切り換えることになります。

（２）placeを取得

//placeを取得
function get_place(num) {
var get = "";
get += "value=" + document.forms["fsel"+num].place.value + "\n";
get += "selectedIndex=" + document.forms["fsel"+num].place.selectedIndex + "\n";
//form fsel2
if (num == 2) {
for (i=0;i<document.fsel2.place.length;i++) {
get += "place[" + document.fsel2.place[i].value + "]=";
get += document.fsel2.place[i].selected + "\n";
}
}
alert(get);
}

肝心の部分は赤字の部分です。前後に文字列を足して、アラートを見やすく成型しています。
「place」に対しては「value」や「selectedIndex」を使って、現在選択中のデータを取得します。ただし、fsel2のように複数選択の場合は、最初の選択肢のデータのみ取得できます。
これだけではfsel2の、選択状況を正しく判断できないため、for文を使って選択肢の１つ１つを順番に調べています。
まず、「place.length」で選択肢の総数を得ています。次に「place[i]」で選択肢のi番目を指定して、「value」と「selected」を取得しています。

valueは<option>の指定値、selectedIndexは選択中の行番号、selectedは選択肢の選択状況を返しています。

JavaScriptでのプロパティ

<textarea></textarea>

オプション：name / rows / cols / wrap / disabled

複数行入力できるテキストボックスです。

使用例

<form name="fta" action="sample6-2.html" method="get">
<textarea name="textarea" cols="20" rows="5">ここに
文章を入力してください。</textarea>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>

テキストボックス内に文字列を表示させたい場合、<input>ではvalueを使いましたが、<tetarea>ではタグの間に文章を挟みます。改行はタグを使わずにそのまま反映されます。

JavaScriptからの入出力

//ftaの表示
function pop_textarea() {
alert(document.fta.textarea.value);
}

//ftaに入力
function input_textarea() {
document.fta.textarea.value = "この文章が\n表示例に\n入ります。";
}

「ftaの表示」ボタンを押すと、最初の表示例にある<textarea>の内容がアラートで表示されます。
「ftaに入力」ボタンを押すと、用意された文章に入れ替わります。改行が使えるので「\n」で指示しています。

wrapの比較

offの場合、自動改行は行われません。元の文章にある改行はそのまま送信されます。

softの場合、画面上は自動改行されますが、送信データには元の改行だけが含まれます。

hardの場合、画面上の自動改行に対して、送信データにも同じ位置に改行コードが入ります。

JavaScriptでのプロパティ

<label></label>

オプション：for

ラジオボタンやチェックボックスが小さくて押しにくい場合があります。そのために、項目名を含む広い範囲でクリックできるようにするのが<label>というタグです。
項目名などテキスト部分をクリックするとラジオボタンやチェックボックスが選択されます。

もし、<label>の中に<input>を含むことができない場合は、forを使って<input>のidを指定して対応させます。

使用例

<form action="sample6-2.html" method="get" target="win_receive">
設問１
<label><input type="radio" name="Q1" value="win" checked>Windows</label>
<label><input type="radio" name="Q1" value="mac">Macintosh</label><br>
設問２
<label><input type="checkbox" name="Q2" value="春" checked>春（はる）</label>
<label><input type="checkbox" name="Q2" value="夏">夏（なつ）</label>
<label><input type="checkbox" name="Q2" value="秋">秋（あき）</label>
<label><input type="checkbox" name="Q2" value="冬">冬（ふゆ）</label>
<input type="submit" value="送信">
</form>

ラジオボタン、チェックボックスと項目名をそれぞれ<label>で挟んでいます。

挟まれた範囲は入力項目と一体となってクリックすることができます。

入力項目とラベルが離れている場合は次のように記述します。

<input type="checkbox" name="Q2" id="winter" value="冬">
<label for="winter">冬</label>

テーブルを組んだ場合など、利用の機会はあると思います。

メソッド

上のフォームに対して、下のメソッドの一覧にあるボタンから命令を送ります。

イベント処理

タグ内にオプションとして追加することで、タグの範囲を対象にしてイベント処理を実行させます。

書式：「イベント名="命令文"」または「イベント名="ユーザー関数"」

処理が1行で表記できる場合は、命令文をそのまま記述し、2行以上ある場合はユーザー関数内に処理を記述します。