この記事では、参照用のJSフォームコントロールの例を示します。特定のコンテンツは次のとおりです
例1：フォームのすべてのコントロールを繰り返します
<script type = "text/javascript"> // form function getValues（）{var f = document.forms [0]; // form dom var Elements = f.elements; //すべてのコントロール配列var str = ''を取得します。 // string string //ループトラバーサル（var i = 0; i <elements.length; i ++）{var e = elemention [i]; //現在の制御str += e.value; //コントロール値を分割しますstr += '/n'; // Split Separator} Alert（str）; //プロンプトボックスで結果を表示} </script> <form>テキストボックス：<入力タイプ= "テキスト" name = "mytext"/> <br/>ラジオボックス：<入力型= "myradio" value = "1"/> 1 <入力タイプ= "ラジオ" name "name" myradio "値=" 2 "/> value = ""> == == </option> <option value = "1"> 1 </option> <option value = "2"> 2 </option> </select> <br/> <入力タイプ= "ボタン"値= "getValues"/> </form>例2：コントロール名を介して特定のコントロールにアクセスする
<script type = "text/javascript"> //コントロール名function getFormdom（）{var f = document.forms [0]; // form dom var mytext = f.mytext; //名前でコントロールdomを取得//コントロール名と値アラート（mytext.name + "：" + mytext.value）; } </script> <form>テキストボックス：<入力型= "text" name = "mytext"/> <br/> <入力タイプ= "ボタン" value = "getControl" onclick = "getFormdom（）"/> </form>例3：形式でテキストボックスの数を取得する
<script type = "text/javascript"> //形式でテキストボックスの数を取得しますfunction getinputcount（）{var f = document.forms [0]; // dom var Elements = f.elementsのフォームを取得します。 //すべてのコントロールアレイvar count = 0を取得します。 //総数//ループトラバーサル（var i = 0; i <elements.length; i ++）{//現在のコントロールvar e = elemention [i]; //それはテキストボックスですか？ //総数は単独で追加されます}} //プロンプトボックスを使用して結果アラートを表示します（ "テキストボックスには合計：" + count + "s"）; } </script>例4：フォームを変更するための提出方法
メソッド属性は、フォームを送信するときに使用されるHTTPメソッド（取得または投稿）を指定します。 GETを使用すると、ページアドレスバーにフォームデータが表示され、ページアドレスバーで送信されたデータが見えないため、投稿はより安全です。
<script type = "text/javascript"> //フォーム提出方法function modifymethod（）{var f = document.forms [0]; // form dom var method = f.mymethod.value; //選択されたメソッドf.method = method; //選択した提出方法を変更する//プロンプトボックスを使用して結果アラートを表示します（ "フォームの現在の提出方法：" +メソッド）; } </script> <form method = "post">提出方法を選択してください：<選択name = "mymethod"> <option value = ""> ==選択== </option> <option値= "get"> get </option> <option値= "post"> post </option> </select> <br/> <入力タイプ= "値</form>例5：フォームのアクション属性を動的に指定する
アクション属性は、フォームを送信するときに実行されるアクションを定義します。
フォームをサーバーに送信して、送信ボタンを使用するのが一般的な慣行です。
通常、フォームはWebサーバー上のWebページに送信されます。
アクション属性が省略されている場合、アクションは現在のページに設定されます。
<script type = "text/javascript"> // form function modifyaction（）{var f = document.forms [0]; // get form dom var newurl = f.newurl.value; //選択された方法f.action = newurl; //送信フォームのアクションアドレスを変更する//プロンプトボックスを使用して結果アラートを表示します（ "フォームの現在のアクション：" + f.action）; } </script> <form method = "post">送信メソッドを選択してください：<入力タイプ= "テキスト" name = "newurl"/> <br/> <入力タイプ= "ボタン" value = "例6：動的選択フォーカスコントロール
<script type = "text/javascript"> //最初のラジオボックスはフォーカス関数focusit（）{var f = document.forms [0]; // form dom var myradio = f.myradioを取得します。 //ラジオボックスmyradio [0] .focus（）; //最初のラジオボックスはフォーカスを取得します} </script> <form>テキストボックス：<入力タイプ= "テキスト" name = "mytext"/> <br/>ラジオボックス：<入力タイプ= "ラジオ" name "name" name "name" name "value =" 1 "/> <入力タイプ="ラジオname " == </option> <option値= "1"> 1 </option> <option値= "2"> 2 </option> </select> <br/> <入力タイプ= "ボタン" value = "例7：形式のすべてのコントロールの値を初期状態に初期化します
<script type = "text/javascript"> //形式のすべてのコントロールの値を初期状態関数init（）{var f = document.forms [0]; //フォームdom f.reset（）; // reset（）function} </script>を使用します例8：バッチすべてのフォームコントロールに説明を追加
<script type = "text/javascript"> //すべてのフォームコントロールの説明function batchcomment（）{var f = document.forms [0]; // form dom var children = f.childnodes; //フォームのすべての子要素を取得var newarr = []; //新しい要素アレイvar j = 0を定義します。 //新しい要素配列の添え字を定義する//（var i = 0; i <children.length; i ++）{var e = children [i]; //現在の子要素newarr [j ++] = e; //新しい配列に追加//それがコントロールであるかどうかを決定する場合（e.tagname == 'input' || e.tagname == 'select'）{//テキストでノードを追加するvar text = document.createTextNode（ "このアイテムが必須"）; newarr [j ++] = text; //新しい配列にノードを追加}} //既存のフォームコンテンツをクリアf.innerhtml = ''; //（var i = 0; i <newarr.length; i ++）{//古い要素と説明ノードをフォームf.appendchild（newarr [i]）; }}} </script>例9：非表示のコントロールを使用してフォームにパラメーターを追加する
<script type = "text/javascript"> //関数showparams（）{//非表示変数の値を設定します。この値は、タグの値ドキュメントの値を使用して指定することもできます。 //文字を定義する変数var str = 'フォームで提出されたパラメーターは次のとおりです。 //スプリット年パラメーターstr + = '/n year：' + document.forms [0] .myyear.value; // split name parameter str + = '/n name：' + document.forms [0] .myname.value; //非表示パラメーターstr + = '/nhide変数：' + document.forms [0] .myhidden.value;アラート（str）; //文字の値を表示} </script> <form> <入力タイプ= "hidden" name = "myhidden"/> year：<select name = "myyear"> <option value = "2012"> 2012 </option> <option value = "2013"> <br/> <br/> <入力型= "button" value = "" onclick = "showparams（）;"/> </form>例10：すべてのチェックボックスをチェックします
<script type = "text/javascript"> //すべての関数関数checkall（c）{//すべてのチェックボックスvar arr = document.getelementsbyname（ 'myname'）; if（c）{//すべてのチェックボックスのチェックボックスを（var i = 0; i <arr.length; i ++）{arr [i] .checked = true; // select}} else {//すべてを選択しないでください//すべてのチェックボックスを（var i = 0; i <arr.length; i ++）{arr [i]。あなたの興味：<br> <入力タイプ= "チェックボックス" name = "myall" onclick = "checkall（this.checked）" /> select all <br> <input type = "checkbox" name "name =" myname " /> select all <input type =" checkbox "name =" myname " /> select all <input type ="チェックボックス " />例11：フォームのフォーカスコントロールに目を引くスタイルを設定する
<script type = "text/javascript"> function init（）{var f = document.forms [0]; // form dom var Elements = f.elements; //すべてのコントロールアレイを取得var str = ''; // splitr strings //ループトラバーサル（var i = 0; i <letenment.length; i ++）{var e = elemention [i]; //現在のコントロールe.onfocus = function（）{//フォーカスのスタイルコールバックを定義します} e.onblur = function（）{// focus this.style.border = ''を呼び出す//元のボーダースタイルを復元}}}} </script>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。