formタグとJavaScript
テキスト入力域
テキスト入力域は、キーボートからの入力を表示するための一行の領域。出力域としても使える。
<form name="textin">
<input type="text" value="0" size="10" name="age">
</form>
上のタグは次のように表示される。
このテキスト入力域に表示される文字列は、document.textin.age.valueで参照できる。
ラベルつきボタン。
<form>
<input type="button" value="計算">
</form>
上のタグは次のように表示される。
JavaScriptで、ボタンがクリックされたときの処理を指定するには、inputタグにonclickに対するイベント処理を書く。
<input type="button" value="計算" onclick="JavaScriiptの記述">
チェックボックス
複数の選択が可能な選択ボタン。
<form name="in2">
<input type="checkbox" value="1" name="choice">項目１
<input type="checkbox" value="2" name="choice">項目２
<input type="checkbox" value="3" name="choice">項目３
<input type="checkbox" value="4" name="choice">項目４
</form>
上のタグは次のように表示される。
例えば、先頭のチェックボックスが選択されているかどうかは、
document.in2.choice[0].checked
の値がtrueかfalseかを調べることでわかる。
また、先頭のチェックボックスの値は、
document.in2.choice[0].valueで参照できる。
ラジオボタン
ひとつのみの選択が可能な選択ボタン。
<form name="in3">
<input type="radio" value="1" name="rb">項目１
<input type="radio" value="2" name="rb">項目２
<input type="radio" value="3" name="rb">項目３
<input type="radio" value="4" name="rb">項目４
</form>
上のタグは次のように表示される。
例えば、先頭のラジオボタンが選択されているかどうかは、
document.in3.rb[0].checkedの値がtrueかfalseかを調べることでわかる。
また、先頭のチェックボックスの値は、document.in3.rb[0].valueで参照できる。
arigat アットマーク acm.org
Last modified: Oct. 2014