Javascript では、ページ上の タグの各ペアがオブジェクト (form オブジェクト) に解析されます。 document.forms を使用して、ソース順に配置されたドキュメント内のすべてのフォーム オブジェクトのコレクションを取得できます。 フォームオブジェクトが次のように定義されている場合: フォームを取得object メソッド: i> document.forms["frm1"] // name 属性値に従って ii> iii> ドキュメント。ただし、 オブジェクトはこのコレクションにはありません。 var txtName = myform.elements[0] //フォームの最初の要素を取得します var txtName = myform.elements["txtName"] //name 属性値を取得しますas "txtName" の要素 var txtName = myform.elements.txtName; //name 属性値が "txtName" である要素を取得します enctype: set またはMultiPurpose Internet Mail Extensions (MIME) エンコーディングのフォームを取得します。 この属性のデフォルト値は、 application/x-www-form-urlencoded 各フォーム要素のテキスト説明には タグを使用する必要があります。 このタグは、テキストを対応するフォーム要素にバインドするために使用されます。その for 属性は、バインド先のフォーム要素の ID 値を指定します。バインド後、テキストをクリックすると、マウスが対応するテキスト ボックスにフォーカスするか、対応するオプションを選択します。 特定のデスクトップ テーマがインストールされている場合、一部のフォーム要素の色も変更されてプロンプトが表示され、ユーザー エクスペリエンスが大幅に向上します。 サンプルコード: クリックしてテキストボックスにフォーカスします< ;/label> >クリックするとラジオボタンが選択されます クリックするとボックスにチェックが入ります 注: i > 各フォーム要素には、ユーザー エクスペリエンスを向上させるために タグを使用するようにしてください。ii > ： NAME 属性: サーバーにデータを送信するために使用されます。 ID 属性: タグのバインド、CSS セレクターなど、クライアント上で対応する操作を実行するために使用されます。 (name 属性と id 属性は、できる限り同じ値または関連する値を使用する必要があります。) クライアント側では、JavaScript はフォームおよびフォーム要素を操作するときにその name 属性を使用することを好みます。 一部の特定のフォーム要素 (ラジオ ボタンなど) では、name 属性を使用して要素値を取得する方が簡単であり、サーバーにデータを送信するのもより便利です。 JavaScript は、フォームのフォーム要素、あまり一般的には使用されない属性を操作します。 defaultChecked は、チェック ボックスまたはラジオ ボタンのステータスを設定または取得します。 defaultValue は、オブジェクトの初期コンテンツを設定または取得します。 disabled は、コントロールのステータスを設定または取得します。 フォームを送信 フォーム送信の例: Onclick = "document.Forms ['FRM'].Submit (); onclick="this.disabled=true; this.form.submit();"> 注: i > ) メソッドを送信する場合、 フォーム要素の onsubmit イベントはトリガーされません。これは、 を使用した要素の送信とは異なります。または、インシデントで Disabled プロパティを使用して、ユーザーが送信ボタンの動作を繰り返しクリックできないようにして、サーバーの応答負荷を軽減します。 textArea .value.length < _textArea.getAttribute("maxlength");} テキストボックス: 複数行テキスト ボックス: 注: 複数行のテキスト ボックス の maxlength はカスタム属性です。<textarea> に文字が入力されている場合、改行も 1 文字としてカウントされます。 ii > マウスを渡すと、自動的に中国語フレームが選択されます </p> <p></p> <p> & lt; script language = "javascript" & gt; {<br></p> <p></p> var txtName = document.geteedsByname ("MyName ")[0];<p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"> txtName.onmouseover = function(){<tbody> <tr class="firstRow"> <td></td> this.focus();</tr> <tr> <td></td> };</tr> <tr> <td></td> txtName.onfocus function( ){</tr> <tr> <td></td> this.select();</tr> <tr> <td></td> };</tr> <tr> <td></td>}</tr> <tr> <td></td></script></tr> <tr> <td></td><INPUT TYPE="text" NAME="myName" 値="デフォルト値が選択されています " /></tr> <tr><td></td></tr> <tr> <td></td> は動作と構造の分離を実現します。 </tr> <tr> <td></td> </tr> <tr><td>ラジオボタンを設定する </td></tr> 選択されたラジオボタンを取得し、選択されたラジオボタンを設定する </tbody> </table> <p><br></p> <p></p> <p><script language="javascript"></p> <p><br></p>// 選択された項目を取得する<p> </p> <p></p>function getChoice(){<p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"> var oForm = document.forms["myForm1"];<tbody> <tr class="firstRow"> <td></td> //radioNameはラジオボタンのname属性値です</tr> <tr> <td></td> var aChoices = oForm.radioName ;</tr> <tr> <td></td> //単一選択肢テーブル全体を走査</tr> <tr> <td></td> for(i=0;i<aChoices.length;i++) </tr> <tr> <td></td> if(aChoices[i].checked) </tr> <tr> <td></td> Break ; //選択した項目が見つかったら終了</tr> <tr> <td></td>alert("What you selected is:"+aChoices[i].value);</tr> <tr> <td></td>}</tr> <tr> <td></td>//選択した項目を設定します</tr> <tr> <td> </td>function setChoice(_num){</tr> <tr> <td></td> var oForm = document.forms["myForm1"];</tr> <tr> <td></td> //radioName はラジオ ボタン </tr> <tr> <td></td> oForm.radioName[_num ] の name 属性値です。 selected = true; //他のオプションのチェックされた値は自動的に false に設定されます</tr> <tr> <td></td></script></tr> //コードを呼び出します <input type="button" value="選択された項目を取得します" onclick="getChoice();" /><tr><input type="button" value="選択される最初の項目を設定します" onclick=" setChoice( 0);" /><td></td> <tr> <p><br></p> <p>同じグループのラジオ ボタンの name 属性値が同じであることを確認する必要があります。 </p> <p></p> <p><br></p> <p>チェックボックスを設定します</p> <p>チェックボックスの「全選択」、「全選択解除」、「反転選択」機能を設定します</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"> ;</td> </tr><tr><td>function changeBoxes(_action){</td></tr><tr><td> var myForm = document.forms["myForm1"];</td></tr><tr><td> //myCheckbox はすべてのチェックボックスの name 属性値です </td></tr><tr><td> var oCheckBox = myForm。 myCheckbox;</td></tr><tr><td></td></tr><tr><td> for(var i=0;i<oCheckBox.length;i++) //各オプションをスキャン</td></tr><tr><td> if(_action < 0)//選択を反転します</td></tr> <tr> B OchEckBox [i] .Checked =! Ocheckbox [i] .Checked; <td></td></tr><tr> Else <td></td></tr> // _ アクションは 1 です。 .checked = _action;<tr><td></td>}</tr><tr><td></td>< /script></td></tr> <tr> <td></td><form name="myForm1"></tr> <tr> <td></td><input type="checkbox" name="myCheckbox" >aa</tr> <tr> <td></td><input type="checkbox" name ="myCheckbox">bb</tr> <tr> <td></td><input type="button" value="すべて選択" onclick="changeBoxes(1);" /></tr> <tr> <td></td><input type="button" value ="何も選択しません" onclick="changeBoxes(0);" /></tr> <tr> <td><input type="button" value="反転 " onclick="changeBoxes(-1);" </td></form></tr> <tr> <td></td> <p><br></p> <p> </p> <p><br></p> <p>ドロップダウン リスト ボックスを設定する </p> <p> ドロップダウン リスト ボックスの multiple 属性は、ドロップダウン リスト ボックスが複数のオプションを選択できるかどうかを設定または取得するために使用されます。 </p> <p> デフォルトでは、ドロップダウン リスト ボックスで選択できる項目は 1 つだけです。複数の項目を選択するように設定したい場合は、<select multiple = "multiple"> を選択します。 </p> <p>type 属性: JavaScript 言語は、type 属性の値に基づいてドロップダウン リスト ボックスの選択コントロールのタイプを取得します。 </p> <p> type 属性の値は: select-multiple または select-one (注: ドロップダウン リスト ボックスのタイプは multiple 属性によって制御されます) </p> <p>i > ドロップダウン リストのオプションを表示します。ボックス (単一のオプションと複数のオプション) </p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"></td></tr> <tr><td>function getSelectValue(_myselect){</td></tr> <tr><td> var oForm = document.forms["myForm1" ];</td></tr> <tr><td> //パラメーター (ドロップダウン リスト ボックスの name 属性値) に従って、ドロップダウン メニュー項目を取得します </td></tr> <tr><td> var oSelectBox = oForm.elements[_myselect];</td></tr> <tr><td> / /単一選択か複数選択かを決定します </td></tr> <tr><td> if(oSelectBox.type == " select-one"){</td></tr> <tr><td> var iChoice = oSelectBox.selectedIndex; //選択された項目を取得します </td></tr> <tr><td>; alert("単一選択、選択しました" + oSelectBox.options[iChoice].text);</td></tr> <tr> <td> }</td> </tr> <tr><td> else{</td></tr> <tr><td> var aChoices = new Array();</td></tr> <tr> <td> //Traverseドロップダウンメニューfor（var i = 0; i＆lt; oselectbox.options.length; i ++）if（oselectbox.options [i] .select）//</td>; </tr></script> <tr><td></td></tr><form method="post" name="myForm1"><tr><td></td></tr><select id="mysel" name="mysel" multiple="multiple" style=" height:60px;"> ;<tr><td></td></tr> <option value="a">AA</option><tr><td></td></tr> <option value="b">BB</option><tr><td></td></tr> < ;option value="c ">CC</option><tr><td></td></tr></select><tr><td></td></tr><input type="button" onclick="getSelectValue('mysel')" value="オプションを表示" /><tr><td> </td></tr> <tr><td></td></tr> <tr><td>ii > ドロップダウン リスト ボックスのオプションを追加します</td></tr> 新しいオプションを最後に追加します<tr><td></td></tr> <tr><td></td></tr><script language="javascript"> <tr> <td></td> </tr>function AddOption(Box ){ //オプションを最後に追加します <tr><td></td></tr> var oForm = document.forms["myForm1"];<tr><td></td></tr> var oBox = oForm.elements[Box];<tr> <td></td> </tr> var oOption ping = new Option(" ポンボール","ピンパン");</tbody></table> <p><br> oBox.options[oBox.options.length] = oOption;</p> <p></p> <p>}</p> <p></p> <p></script><br> </p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <p><br></p> <p>指定された位置に新しいオプションを挿入します</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"></td></tr> <tr><td>function AddOption(_select,_num){</td></tr> <tr><td> m = document.forms ["myForm1"];</td></tr> <tr><td> var oBox = oForm.elements[_select];</td></tr> <tr><td> var oOption = new Option("テキスト値","値値");</td></tr> <tr><td> //IE7と互換性あり, まずオプションを最後に追加してから、</td></tr> <tr><td> oBox.options[oBox.options.length] = oOption;</td></tr> <tr><td> oBox.insertBefore(oOption,oBox.options[_num]);</td></tr> <tr><td>} </td></tr> <tr><td></script></td></tr> <tr><td><input type="button" value="卓球を追加" onclick="AddOption('myselect',1);/></td></tr> </tbody></table> <p><br>" </p> <p> 注: insertBefore() メソッドを直接使用してオプションを挿入すると、IE に空のオプションのバグが発生します。 IE でこのバグを解決するには、新しいオプションを末尾に追加し、insertBefore() メソッドを使用して対応する位置に移動するだけです。 </p> <p></p> <p><br></p> <p>これと同様: ブラウザの特定のバグや制限を回避して意図された目的を達成するための、小さなトリックは通常ハックと呼ばれます。 </p> <p></p> <p>iii > オプションを置換します </p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"></td></tr> <tr><td>// オプションを置換します </td></tr> <tr><td>function ReplaceOption(_select,_num ) {</td></tr> <tr><td> var oForm = document.forms["myForm1"];</td></tr> <tr><td> var oBox = oForm.elements[_select];</td></tr> <tr> <td> var oOption = new Option("テキスト値","値値") </td> </tr> <tr><td> oBox.options[_num] = oOption; // _num オプションを置換します </td></tr> <tr><td>}</td></tr> <tr><td></script></td></tr> <tr><td><input type="button" value=" オプションを置換 " onclick="ReplaceOption('selName',1);" /></td></tr> </tbody></table> <p><br></p> <p> 指定された位置のオプションを、oBox.options[_num] = oOption によって作成された新しいオプションに直接置き換えます。 </p> <p></p> <p>iv > オプションを削除します</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"></td></tr> <tr><td>function RemoveOption(_select,_num){</td></tr> <tr><td> var oForm = document .フォーム["myForm1"]; var oBox = oForm.elements[_select]; </td></tr> <tr> oBox.options[_num] = null;/ script><td></td> </tr></head><tr><td></td></tr><body> ;<tr><td></td></tr><select id="mysel" name="mysel" multiple="multiple"><tr><td></td></tr>... ...<tr><td></td></tr><input type="button" value="オプションを削除" onclick="RemoveOption('mysel',1);" /><tr><td></td></tr> <tr><td></td></tr> oBox.options [_num] = null を介して直接オプションを削除します。 <tr><td></td></tr> </tbody></table> </tbody></table> </tr> </tbody></table> </tr> </tbody> </table> </tr></tbody> </table> </table> </tr></tbody> </table>
