ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptノートフォーム処理
Web サイトのユーザーから情報を収集する必要がある場合は、フォームを使用する必要があります。
フォームには、入力フィールド、ラジオ ボタン、チェックボックス、ポップアップ メニュー、入力リストなど、最も一般的なグラフィカル インターフェイス要素を含めることができます。さらに、HTML フォームには、ユーザーの入力を覗き見から隠すパスワード フィールドを含めることができます。
フォームに入力後、メニューの「送信」ボタンをクリックすると、フォーム情報が Web サーバーに送信され、サーバー上の CGI プログラム (Web サーバー上で実行されるスクリプトである Common Gateway Interface) が解釈して動作します。データ。多くの場合、データは後で使用できるようにデータベースに保存されます。サーバー側でデータを使用する前に、ユーザーが入力したデータが正確な (正しい) 形式であることを確認する必要があります。
JavaScript は、データをチェックするための優れた方法です。この手法はフォーム検証と呼ばれます。 CGI を使用して検証を行うこともできますが (一部のユーザーはブラウザで JavaScript をオフにしているため、予防策として行う必要があります)、クライアント マシン上で JavaScript を使用した検証の方がはるかに高速で、ユーザーにとって効率的です。
フォームに関する概要:
フォームを取得します
[javascript]
var form=document.forms["form1"];
var form=document.fors[0];
フォームオブジェクトイベント
onsubmitはフォームが送信される前にトリガーされます
onresetはフォームがリセットされる前にトリガーされます
フォーム要素の参照
[javascript]
var element=tForm.elements[idex];
var element=tForm.elements[elementName] ];
フォーム内のすべてのフォームフィールドを走査する
[javascript]
for(var i=0;i
}
フォームフィールドの共通プロパティ
1)読み取り専用(利用不可) フォームフィールド
element.disabled=true;
element.disabled=false;
2) フォームフィールドの値を取得
value
フォームフィールドの共通メソッド
1) フォームフィールドがフォーカスを取得します: focus( )
2 ) フォームフィールドがフォーカスを失います:blur()
フォームフィールドの共通イベント
onFocus: フォーカスが取得されたときにこのイベントが生成されます
onBlur: フォーカスが失われたときにこのイベントが生成されます
onselect: このイベントテキストが強調表示 (選択) された後にファイルが生成されます
onchange: フォームフィールドの値が変更されたとき
onclick: キーボードのクリック
onkeydown: キーボードが押された
onkeyup: キーボードが放された
onkeypress: キーボードが押されて放された
onmouseover: マウスが移動されたup
onmouseout: マウスが外に移動しました
onmousedown :マウスダウン
onmouseup:マウスアップ
テキストフィールド、チェックボックス、ラジオボタン、ドロップダウンリストボックス、フォーム検証など。单 メニューを動的に変更するには、多くの場合、ポップアップ メニューを通じてユーザーに入る機会をユーザーに提供し、別のポップアップでユーザーが行った選択に従って 1 つ以上のポップアップ メニューの内容を変更する必要があります。選択した月の日数を選択し、2 番目のポップアップ メニューに入力します:
[html]
ポップアップ メニューで値を選択し、2 番目のポップアップ メニューのコンテンツを作成します
[javascript]
/**
* メニューを動的に変更します
*/
window.onload=initForm;
function initForm(){
document. "月").selectedIndex=0;
document.getElementById("月").onchange=populateDay;
function PopulateDay(){
var monthDays=new Array(31,28,31,30,31 ,30) ,31,31,30,31,30,31);
var monthStr=this.options[this.selectedIndex].value;
//メニューからこれ (最初のメニューでユーザーが選択した月) を使用します。 monthStr の値を monthStr に格納します
if(monthStr!=""){
document.getElementById("days").options.length=0;
for(var i= 0;i