【JavaScript】フォーム
フォームオブジェクト
forms フォームオブジェクト
form フォームを示す
フォームオブジェクトです。formはタグの中でthis.fomrのように使えます。
例
n = dofument.forms[0].elements[0].value
最初のフォームの最初のエレメントの値を変数nに代入する
document.calc.value = 0
フォーム名calcのエレメントの値に0を設定する
<input type="button" onclick="calc(this.form)">
ボタンが押されたら現在のフォームを引数にしてcalc関数を呼び出す
サンプル
<html>
<head>
<title>サンプル</title>
</head>
<h2>フォームオブジェクト</h2>
<form><input type="text"></form><br />
<form><input type="radio"></form><br />
<form><input type="checkbox"></form><br />
<form><input type="hidden"></form>
<script language="JavaScript">
<!--
for(i in document.forms) {
document.write(i + " = " +document.forms[i] + "<br />");
}
//-->
</script>
</body>
</html>
エレメントオブジェクト
button ボタンオブジェクト
checkbox チェックボックスオブジェクト
elements 各オブジェクト参照
filUpload ファイルアップロードオブジェクト
hidden 隠しオブジェクト
options 選択項目オブジェクト
password パスワードオブジェクト
radio ラジオボタンオブジェクト
select 選択オブジェクト
reset リセットオブジェクト
submit 送信オブジェクト
text テキストオブジェクト
textarea テキストエリアオブジェクト
フォームに含まれるオブジェクト
参照する場合はelementsを使って値を参照/設定します。
例
num = document.forms[0].elements[0].value
最初のフォームの最初のエレメントの値を変数numに代入
flag = document.forms[0].elements[0].selected
最初のフォームの最初のポップアップメニュー項目が選択されているかどうかを変数flagに代入する
サンプル
<html>
<head>
<title>サンプル</title>
</head>
<h2>エレメント</h2>
<form>
<input type="button">
<input type="checkbox">
<input type="fileUpload">
<input type="hidden">
<input type="password">
<input type="radio">
<input type="select">
<input type="submit">
<input type="text">
<textarea>textarea</textarea>
</form>
<script language="JavaScript">
<!--
for(i in document.forms[0].elements) {
document.write(i + " = " +document.forms[0].elements.type + "<br />");
}
//-->
</script>
</body>
</html>
送信先の参照/設定
action 送信先の参照/設定
<form>タグのactionオプションで指定されている送信先の参照/設定を行います
例
sact = document.forms[0].action
最初のフォームの送信先を変数nに代入する
document.calc.action = "mailto;aaa@bbb.com"
フォームのcalcの送信先を"aaaa@bbb.com"に設定する
サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--
function check() {
alert("Action : " + document.getElementById("act").action);
}
function sett() {
document.getElementById("actt").value = document.getElementById("act").action;
}
//-->
</script>
</head>
<h2>送信先の参照/設定</h2>
<form action="mailto:aaa@bbb.com" id="act" name="act">
action : <input type="text" id="actt" name="actt"><br />
<input type="button" value="送信先設定" onclick="sett()">
<input type="button" value="送信先確認" onclick="check()">
</form>
</body>
</html>
入力エリアのフォーカス
blur 入力ポインタを離す
focus 入力ポインタを合わせる
例
document.getElementById("rblur").blur()
id、rblurからフォーカスを離す
document.calc.result.focus()
フォーム名calcのエレメント名.resultにフォーカスする
サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--
function jsFOCUS1() {
document.getElementById("ffocus1").focus();
}
function jsFOCUS2() {
document.getElementById("ffocus2").focus();
}
function jsBLUR1() {
document.getElementById("ffocus1").blur();
}
function jsBLUR2() {
document.getElementById("ffocus2").blur();
}
//-->
</script>
</head>
<h2>フォーカス</h2>
その1:<input type="text" id="ffocus1" value="part1"><br />
その2:<input type="text" id="ffocus2" value="part2"><br />
<input type="button" value="その1へフォーカス" onclick="jsFOCUS1();">
<input type="button" value="その2へフォーカス" onclick="jsFOCUS2();">
<br />
<input type="button" value="その1フォーカス離す" onclick="jsBLUR1();">
<input type="button" value="その2フォーカス離す" onclick="jsBLUR2();">
</body>
</html>
チェックボックス/ラジオボタンの状態
checked 状態の参照/設定
チェックボックス、ラジオボタンの状態を参照/設定例
例
f = document.getElementById("ccheck").checked
id、ccheckのエレメントのチェック状態を変数に代入する
documet.calc.result.checked = true
フォーム名calcのエレメント名resultの状態をセットする
サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--
//チェックボックスにチェックを入れてボタンをクリックするとtrue
//チェックボックスにチェックを入れずにボタンをクリックするとfalse
function check() {
alert(document.getElementById("ccheck").checked);
}
//-->
</script>
</head>
<body>
<h2>チェックボックス</h2>
<input type="checkbox" id="ccheck">
<input type="button" value="Click!" onclick="check()">
</body>
</html>
自動クリック
click 自動クリック
ボタン等を自動的にクリックします。
例
f = document.getElementById("cclick").click()
id、cclickエレメントを自動クリック
document.calc.result.click()
フォーム名calcのエレメント名resultを自動クリックする
サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--
//ボタンをクリックしなくてもドキュメントロード時に
//自動クリックされて、その結果が表示される
function jsCLICK() {
alert("Click!?");
}
//-->
</script>
</head>
<body onload="jsCLICK()">
<h2>自動クリック</h2>
<input type="button" value="自動的にクリック" onclick="jsCLICK()">
</body>
</html>
初期(デフォルト)状態
defaultChecked チェックボックス/ラジオボタンの初期状態
defaultValue テキストエリアの初期状態
例
alert(document.getElementById("dflt").defaultChecked)
idのdfltの初期状態を表示する
document.getElementById("sselect").defaultSelected
ポップアップ項目のid、sselectが選択されている
txt = document.getElementById("ttxt").defaultValue
テキストエリアの初期の文字を変数txtに代入する
サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>デフォルト状態</h2>
<input type="checkbox" id="ccheck">
<br />
<input type="radio" id="rradio" checked>
<br />
<select id="sel">
<option value="項目1">項目1</option>
<option value="項目2" selected>項目2</option>
</select>
<br />
<textarea id="txt">OpenSpace</textarea>
<br />
<script language="JavaScript">
<!--
document.write("チェックボックス:" + document.getElementById("ccheck").defaultChecked + "<br />");
document.write("ラジオボタン:" + document.getElementById("rradio").defaultChecked + "<br />");
document.write("ポップアップ項目:" + document.getElementById("sel").defaultSelected + "<br />");
document.write("テキストエリア:" + document.getElementById("txt").defaultValue + "<br />");
//-->
</script>
</body>
</html>
送信形式/方式
encoding エンコード方式
method 送信形式
例
etype = document.fomrs[0].enoding
エンコード形式を変数etypeに代入する
document.fomrs[0].method = "POST"
送信形式をPOSTにする
サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<form method="post" enctype="text/plain">
<h2>送信形式/方法</h2>
<script language="JavaScript">
<!--
document.write("Endcoding : " + document.forms[0].encoding + "<br />");
document.write("Endcoding : " + document.forms[0].method + "<br />");
//-->
</script>
</form>
</body>
</html>
フォームの名前/数
length オブジェクト数
name フォーム名
lengthはフォームに含まれるエレメント数を返します。
nameはフォーム名、エレメント名を返します。
例
num = docoument.forms[0].length
フォームに含まれるオブジェクト数を変数numに代入する
alert(document.forms[0].name)
最初のフォーム名をアラートダイアログに表示する
サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>フォームの名前/数</h2>
<form id="001"></form>
<form id="002"></form>
<form id="003"></form>
<script language="JavaScript">
<!--
//フォーム名を取得していく
for(i = 0 ; i < document.forms.length ; i++ ) {
document.write(i + " ID: " + document.forms[i].id + "<br />");
}
//-->
</script>
</form>
</body>
</html>
テキスト選択
select テキスト選択
<input type="text">で定義されるテキストエリアの文字を選択状態にします。
例
document.getElementById("sselect").select()
id、sselectのエレメントの文字を選択状態にする
サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--
function jsSEL() {
document.getElementById("sselect").focus();
document.getElementById("sselect").select();
}
//-->
</script>
</head>
<body>
<h2>テキスト選択</h2>
<input type="text" value="part1" id="sselect">
<br />
<input type="button" value="テキスト選択" onclick="jsSEL()">
</form>
</body>
</html>
ポップアップメニュー選択状態/番号
index 参照番号
selected 選択状態
indexはポップアップメニューの参照番号を返します。
selectedはポップアップメニュー項目の選択状態を返します。
例
alert(document.getElementById("sslect").index)
参照番号を表示します
flag = document.getElementById("sselect").selected
項目が選択されているか変数flagに代入する
サンプル<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>ポップアップメニュー選択状態/番号</h2>
<select id="sel">
<option value="項目1">項目1</option>
<option value="項目2">項目2</option>
<option value="項目3">項目3</option>
<option value="項目4" selected>項目4</option>
</select>
<script language="JavaScript">
<!--
fjob = document.getElementById("sel");
document.write("<br />");
for( i = 0 ; i < document.getElementById("sel").length ; i ++ ) {
document.write("index : " + fjob.options[i].index + "<br />");
document.write("selected : " + fjob.options[i].selected + "<br />");
}
//-->
</script>
</body>
</html>
送信
submit フォーム内容送信
フォーム内容を送信します。
例
document.getElementById("sel").submit()
フォームデータを送信する
サンプル<html>
<head>
<title>サンプル</title>
<script language="Javascript">
function sel() {
document.getElementById("FORM").action="https://www.google.com";
document.getElementById("FORM").method="post";
document.getElementById("ssel").submit();
}
</script>
</head>
<body>
<h2>送信</h2>
<form id="FORM">
<input type="submit" id="ssel" value="自動的に送信" onclick="onclick()">
</form>
</body>
</html>
フォームデータの参照/設定
value データ内容
フォームデータの参照/設定を行います
例
document.getElementById("fdata").value = "MS-DOS"
idのfdataの項目に「MS-DOS」という文字を設定する
サンプル
<html>
<head>
<title>サンプル</title>
<script language="Javascript">
<!--
//テキストに入力文字を入れてボタンを押せば
//ポップアップに文字が表示されます
function getValue() {
alert("入力文字:" + document.getElementById("txt").value);
}
//-->
</script>
</head>
<body>
<h2>フォームデータの参照/設定</h2>
<input type="text" id="txt">
<input type="button" value="送信" onclick="getValue()">
</body>
</html>
この記事が気に入ったらサポートをしてみませんか?