見出し画像
Photo by golchiki

【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
最初のフォームの最初のエレメントの値を変数nuｍに代入

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>


この記事が気に入ったらサポートをしてみませんか？