HTML のフォームに関する情報

Javascript では、ページ上の

タグの各ペアがオブジェクト (form オブジェクト) に解析されます。

document.forms を使用して、ソース順に配置されたドキュメント内のすべてのフォーム オブジェクトのコレクションを取得できます。

ii> iii> ドキュメント。ただし、 オブジェクトはこのコレクションにはありません。 var txtName = myform.elements[0] //フォームの最初の要素を取得します

フォームオブジェクトが次のように定義されている場合:

フォームを取得object メソッド:

i> document.forms["frm1"] // name 属性値に従って

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 値を指定します。バインド後、テキストをクリックすると、マウスが対応するテキスト ボックスにフォーカスするか、対応するオプションを選択します。

特定のデスクトップ テーマがインストールされている場合、一部のフォーム要素の色も変更されてプロンプトが表示され、ユーザー エクスペリエンスが大幅に向上します。

サンプルコード:

クリックしてテキストボックスにフォーカスします >クリックするとラジオボタンが選択されます

クリックするとボックスにチェックが入ります

注:

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

注:

}

テキストボックス: label>

複数行テキスト ボックス:

注: 複数行のテキスト ボックス の maxlength はカスタム属性です。<textarea> に文字が入力されている場合、改行も 1 文字としてカウントされます。 ii > マウスを渡すと、自動的に中国語フレームが選択されます

& lt; script language = "javascript" & gt; {

var txtName = document.geteedsByname ("MyName ")[0];

txtName.onmouseover = function(){ this.focus(); }; txtName.onfocus function( ){ this.select(); };} は動作と構造の分離を実現します。 選択されたラジオボタンを取得し、選択されたラジオボタンを設定する

ラジオボタンを設定する

// 選択された項目を取得する

function getChoice(){

var oForm = document.forms["myForm1"]; //radioNameはラジオボタンのname属性値です var aChoices = oForm.radioName ; //単一選択肢テーブル全体を走査 for(i=0;i if(aChoices[i].checked) Break ; //選択した項目が見つかったら終了alert("What you selected is:"+aChoices[i].value);}//選択した項目を設定しますfunction setChoice(_num){ var oForm = document.forms["myForm1"]; //radioName はラジオ ボタン oForm.radioName[_num ] の name 属性値です。 selected = true; //他のオプションのチェックされた値は自動的に false に設定されます //コードを呼び出します

同じグループのラジオ ボタンの name 属性値が同じであることを確認する必要があります。

チェックボックスを設定します

チェックボックスの「全選択」、「全選択解除」、「反転選択」機能を設定します

B OchEckBox [i] .Checked =! Ocheckbox [i] .Checked; Else // _ アクションは 1 です。 .checked = _action;}aabb

ドロップダウン リスト ボックスを設定する

ドロップダウン リスト ボックスの multiple 属性は、ドロップダウン リスト ボックスが複数のオプションを選択できるかどうかを設定または取得するために使用されます。

デフォルトでは、ドロップダウン リスト ボックスで選択できる項目は 1 つだけです。複数の項目を選択するように設定したい場合は、 を選択します。

type 属性: JavaScript 言語は、type 属性の値に基づいてドロップダウン リスト ボックスの選択コントロールのタイプを取得します。

type 属性の値は: select-multiple または select-one (注: ドロップダウン リスト ボックスのタイプは multiple 属性によって制御されます)

i > ドロップダウン リストのオプションを表示します。ボックス (単一のオプションと複数のオプション)

function changeBoxes(_action){

var myForm = document.forms["myForm1"];

//myCheckbox はすべてのチェックボックスの name 属性値です

var oCheckBox = myForm。 myCheckbox;

for(var i=0;i

if(_action

; AABB CC 新しいオプションを最後に追加します

function getSelectValue(_myselect){

var oForm = document.forms["myForm1" ];

//パラメーター (ドロップダウン リスト ボックスの name 属性値) に従って、ドロップダウン メニュー項目を取得します

var oSelectBox = oForm.elements[_myselect];

/ /単一選択か複数選択かを決定します

if(oSelectBox.type == " select-one"){

var iChoice = oSelectBox.selectedIndex; //選択された項目を取得します

; alert("単一選択、選択しました" + oSelectBox.options[iChoice].text);

}

else{

var aChoices = new Array();

//Traverseドロップダウンメニューfor（var i = 0; i＆lt; oselectbox.options.length; i ++）if（oselectbox.options [i] .select）//

ii > ドロップダウン リスト ボックスのオプションを追加します

oBox.options[oBox.options.length] = oOption;

}

指定された位置に新しいオプションを挿入します

function AddOption(_select,_num){

m = document.forms ["myForm1"];

var oBox = oForm.elements[_select];

var oOption = new Option("テキスト値","値値");

//IE7と互換性あり, まずオプションを最後に追加してから、

oBox.options[oBox.options.length] = oOption;

oBox.insertBefore(oOption,oBox.options[_num]);

}

注: insertBefore() メソッドを直接使用してオプションを挿入すると、IE に空のオプションのバグが発生します。 IE でこのバグを解決するには、新しいオプションを末尾に追加し、insertBefore() メソッドを使用して対応する位置に移動するだけです。

これと同様: ブラウザの特定のバグや制限を回避して意図された目的を達成するための、小さなトリックは通常ハックと呼ばれます。

iii > オプションを置換します

// オプションを置換します

function ReplaceOption(_select,_num ) {

var oForm = document.forms["myForm1"];

var oBox = oForm.elements[_select];

var oOption = new Option("テキスト値","値値")

oBox.options[_num] = oOption; // _num オプションを置換します

}

指定された位置のオプションを、oBox.options[_num] = oOption によって作成された新しいオプションに直接置き換えます。

iv > オプションを削除します

oBox.options[_num] = null;/ script>... ... oBox.options [_num] = null を介して直接オプションを削除します。

function RemoveOption(_select,_num){

var oForm = document .フォーム["myForm1"]; var oBox = oForm.elements[_select];

以上がHTML のフォームに関する情報の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。