JavaScriptフォームの操作とフォームのドメインを理解する

一、フォームの取得方式
1.Dcument.getElemenntById()
2.document.forms[index]
3.document.forms[form_]name
4.document.form_name

function testGetForm() {
var frm = document.getElementById("regForm"); //   
console.log(frm);
frm = document.forms[0];
console.log(frm);
frm = document.forms["aaform"];
console.log(frm);
frm = document.aaform; //   ,       name    
console.log(frm);
}

二、フォームオブジェクトの属性
action:フォーム提出の住所
method：フォームの提出方法：get（デフォルト）、post
get方式とpost方式の違い
1.get方式では、提出したデータを（？name 1=value 1&name 2=value 2...)はurlの後ろに置いてあります。
post方式ではデータを（name 1=value 1&name 2=value 2...）で「要求エンティティ」に配置します。
2.getはデータをurlに置いた後、urlは長さがあり、urlは可視であるため、get方式は敏感なデータを送るのに適していない。
ポスト方式はデータを「要求エンティティ」に置くが、理論的には無制限であり、ポスト方式は敏感なデータを送るのに適している。
3.get方式の要求はキャッシュがあります。
post方式の要求はキャッシュされません。
.enctype//フォームの符号化方式aplication/x-www-form-urlencoded
enctypeの値の違い
1.appication/x-wn-form-urlencoded（デフォルト、常用）
post方式であれget方式であれ、フォームデータは全て（name 1=value 1&name 2=value 2...）で組織されています。
2.multiad/form-data（フォームアップロード時）
1）get方式で、フォームは（name 1=value 1&name 2=value 2...）でデータを組織する。
2）post方式では、フォームデータは「--------WebKitFormBoundaryGSF 0 lHBAvwWyAcuV」と似た文字列の中間に配置されます。
3.text/plin
1）get方式で、フォームは（name 1=value 1&name 2=value 2...）でデータを組織する。
2）post方式では、フォームデータはname 1=value 2、name 2=value 2であり、データ間に接続記号がない。
.elements//は、フォーム内のすべてのフォームドメインのオブジェクトの1つの配列を返します。
リスト内のフォームのフィールドオブジェクトの数を返します。

function testFormField() {
//     
var frm = document.aaform;
console.log(frm.id);
console.log(frm.name);
//       
console.log(frm.action); 
//       ：get（  ）、post
console.log(frm.method); 
//       
console.log(frm.enctype);
//           （input button select textarea）       
console.log(frm.elements); 
//             
console.log(frm.length);
}

三、フォームオブジェクトの方法
fram.submit（）//フォームを送信
fram.reset()//フォームをリセット
四、フォームオブジェクトのイベント
1.フォームに設定されたコミット、リセットボタンに対して、ワンストップイベント、オンスセットイベントがトリガされます。
2.フォームの外部でsubmit（）によるフォームの提出はonsubmitイベントをトリガしません。
3.フォームの外部では、リセットフォームによって、Oreetイベントがトリガされます。
4.onsubmitイベント、onresetイベントをfalseに返すと、イベントの実行を阻止できます。
オンレス=「return testFormEvent 2()」。
onsubmit="return testFormEvent 1";

function testFormMethod(){
var frm = document.aaform;
// frm.submit(); //    
frm.reset(); //    
}
function testFormEvent1(){
alert("     ！")
//        
return true;
}
function testFormEvent2(){
alert("     ！")
return false;
}
<form id="regForm" name="aaform" action="demo01.html" onreset="return testFormEvent2();" onsubmit="return testFormEvent1();">

五、フォームフィールドオブジェクトの属性
1.readonly
1）inputオブジェクトはreadonly=「readonly」を設定しているので、フォームドメインは読み取り専用です（ユーザはそのvalue属性を変更できません）。
2）jsを通じてinputオブジェクトに「読み取り専用」属性を追加し、「オブジェクト.readOnly=true」で追加します。
3）readonly=「readonly」はラベルにしか使えません。
2.disabled
1）inputオブジェクトがdisabled=「disabled」を設定している場合、フォームドメインは利用できません（ユーザはそのvalue属性を変更できません）。提出できません。
2）jsによりinputオブジェクトに「利用できません」属性を追加し、「オブジェクト.disabled=true」で追加します。
3）disabled=「disabled」は、すべてのフォームドメインを無効にすることができます。
3.name
1）フォームドメインを取得するためのもの
2）name属性を設定したフォームドメインのみを提出することができます。
4.value
1）ユーザーが入力した内容はvalueで、フォームはその属性の値を提出します。
2）selectタグのvalue値は現在選択されているoptionのvalue値です。
3）textareaにはvalue属性がありません。提出時にラベル中間のテキスト値を提出します。
5.form
フォームドメインの場所を取得するためのフォームオブジェクト
6.type
閲覧はtypeの値によって異なります。フォームの範囲も違います。
7.checked
1)2)3)4）jsを対象に「標準選択」の属性を追加するには、「オブジェクト.checed=true」を使って追加します。
8.selectタグの属性
1）selectedIndexは、現在選択されているオプトインの索引を表します。
2）optionsは、すべてのoptionタグオブジェクトの配列を表します。
3）lengthは、右のどれぐらいのプルダウンリスト項目を表していますか？
9.optionタグのプロパティ
1）valueはオプションの値であり、提出時にその属性の値を提出します。
2）textはoptionラベルの中間テキスト値で、innerTextに似ています。
3）selected=「selected」はページ読み込み時のデフォルトのオプションを表します。

<script type="application/javascript">
/**
*  、       
* 1.document.getElementById()
* 2.formObj.elements[index]
* 3.formObj.elements[formarea_name]
* 4.formObj.formarea_name
*/
function getFormArea(){
var obj = document.getElementById("nickid"); //  
console.log(obj)
var formObj = document.aaform
obj = formObj.elements[2];
console.log(obj);
obj = formObj.elements["nickname"];
console.log(obj);
obj = formObj.nickname; //  
console.log(obj);
console.log(formObj.aaa); // a       
}
//  disabled
function testReadonly(){
var formareaobj = document.aaform.username;
formareaobj.disabled = true;
}
//     
function testMethod(){
var formareaobj = document.aaform.username;
//     ，       
// formareaobj.focus();
//     ，        
// formareaobj.blur();
var cityobj = document.getElementById("cityid");
cityobj.focus();
}
function testEvent(){
var formareaobj = document.aaform.username;
//            
formareaobj.onfocus = function(){
console.log("      ！")
}
}
function testSelect(){
var sel = document.getElementById("cityid");
console.log(sel.value)
console.log(sel.selectedIndex);
console.log(sel.options);
console.log(sel.length);
var optionobj = sel.options[sel.selectedIndex];
console.log(optionobj.value)
console.log(optionobj.text);
}
</script>
<body>
<button onclick="getFormArea()">       </button>
<button onclick="testReadonly()">readonly</button>
<button onclick="testMethod()">          </button>
<button onclick="testEvent()">          </button>
<button onclick="testSelect()">       -select</button>
<hr/>
<form id="regForm" name="aaform" action="demo01.html">
   ：<input id="userid" type="text" name="username" value="admin" ><br/>
  ：<input type="password" name="password"><br/>
  ：<input id="nickid" type="text" name="nickname" value="    " abcd="1234" ><br id="brid"/>
  ： <input type="radio" name="gender" value="nan">&nbsp;&nbsp;
 <input type="radio" name="gender" value="nv"><br/>
  ： <input type="checkbox" name="fav" value="dog">
 <input type="checkbox" name="fav" value="cat">
  <input type="checkbox" name="fav" value="yt"><br/>
  <select id="cityid" name="city" >
<option value="1">  </option>
<option value="2" selected="selected">  </option>
<option value="3">  </option>
<option value="4">  </option>
</select><br/>
<textarea name="inc">     ,       ...</textarea><br/>
<input type="submit" value="  ">
<input type="reset" value="  ">
<button type="submit" disabled="disabled">     </button>
<a href="" name="aaa">baidu</a>
</form>
</body>

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。