formオブジェクト
formオブジェクトはformの情報を提供したり、formの設定や操作を行うオブジェクトです。
フォーム内の要素を取得する方法
フォーム内の各要素を取得する方法は、まず、フォーム(<form>タグ)のname属性に名前を指定します。次にフォーム内の各要素(<inputタグ>)にも同様にname属性に名前を指定することにより以下の構文にて取得が可能となります。
document.フォーム名.要素名
以下のサンプルではフォームのname属性を指定して、テキストボックスの内容を表示しています。
<html>
<head>
<title>JavaScript form</title>
<script>
function dispText(){
var name = document.fm.input_name.value;
alert('入力した名前は' + name + 'です' );
}
</script>
</head>
<body>
<form name="fm">
フォーム内のテキストボックスの入力値を表示<br>
<input type="text" name="input_name">
<input type="button" value="確認" onclick="dispText()">
</form>
</body>
</html>
前述の方法以外にelements配列を使用してindex番号を指定することにより取得する方法もあります。index番号はフォーム内の各要素の宣言順に0から順番に割り当てられます。
なお、フォーム内の要素数はlengthプロパティにより取得できるので、lengthプロパティにより数を取得してfor文を使用して順次取得します。
document.フォーム名.elements[index番号]
以下のサンプルではelements配列を使用してテキストボックスの内容を表示しています。
<html>
<head>
<title>JavaScript form</title>
<script>
function dispText(){
var f = document.fm;
for( i = 0 ; i < f.elements.length ; i++){
if(f.elements[i].type=='text'){
alert(i + '番目の値は' + f.elements[i].value + 'です' );
}
}
}
</script>
</head>
<body>
<form name="fm">
フォーム内のテキストボックスの入力値を表示<br>
名前1:<input type="text" name="name1"><br>
名前2:<input type="text" name="name2"><br>
名前3:<input type="text" name="name3"><br>
<input type="submit" value="確認" onclick="dispText()">
</form>
</body>
</html>
プロパティの設定方法
document.フォーム名.property
document.forms[index番号].property
以下はformオブジェクトのプロパティの一覧です。
分類 | プロパティ名 | 内容 |
---|---|---|
オブジェクト | Button | Buttonオブジェクト |
Checkbox | Checkboxオブジェクト | |
Hidden | Hiddenオブジェクト | |
Password | Passwordオブジェクト | |
Radio | Radioオブジェクト | |
Reset | Resetオブジェクト | |
Select | Selectオブジェクト | |
Submit | Submitオブジェクト | |
Text | Textオブジェクト | |
Textarea | Textareaオブジェクト | |
File | Fileオブジェクト | |
情報 | action | フォーム内のデータの送り先 |
elements | フォーム内の内容(配列) | |
encoding | フォームのMINEエンコード | |
length | フォームのエレメント数 | |
name | オブジェクト名 | |
method | フォームの送信方法 | |
target | ターゲットウィンドウ |
メッソッドの設定方法
document.フォーム名.method()
document.フォーム名[index番号].method()
以下はformオブジェクトのメソッドの一覧です。
分類 | メソッド名 | 内容 |
---|---|---|
ボタン | submit | 送信ボタン |
reset | リセットボタン | |
オブジェクト | toString | オブジェクトを文字列に変える |
valueOf | オブジェクトの値 | |
toSource | オブジェクトの値を文字列を返す | |
その他 | handleEvent | イベント取扱者を特定する |