JavaScript学習(2) form element_html/css_WEB-ITnose-htmlチュートリアル-php.cn

JavaScript学習(2) form element_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:50:38

オリジナル

910 人が閲覧しました

##JavaScript 学習-2

1. フォームとフォーム要素

1.1 フォームオブジェクト

フォームオブジェクトの参照: document.forms[0] または参照名属性 (例: document.forms["formname") ] 、 document.formname を直接使用してフォームオブジェクトを呼び出すこともできます

1.2 フォームの属性と要素

name、target、action、method、enctype
割り当ての変更: document.forms[0].action または document.formName .action

フォーム内の要素を取得するには、以下に示すように、form.elements[] を使用してテキスト値をクリアします

var form=window.document.forms[0];for(var i=0;i<form.elements.length;i++){    if(form.elements[i].type=="text"){        form.elements.value="";    }}

ログイン後にコピー

1.3 フォームコントロール

テキストボックスのテキスト、テキストの最も一般的に使用される属性は value 属性です通常、value 属性の内容は文字列です。

Buttonオブジェクトボタン、主にクリック処理イベント

Checkboxオブジェクトチェックボックス、属性がチェックされ、ブール型

ラジオボタンオブジェクトラジオ、このオブジェクトを設定するとき、それを取得するには同じ名前に設定する必要がありますラジオ選択ボタンオブジェクトの数は document.forms[0].groupName.length を使用して決定でき、選択範囲を強調表示するかどうかを検出するには、document.forms[0].groupName[0].checked

select オブジェクトを使用します。 select オブジェクトは、オプションオブジェクト配列のオブジェクトを含む適合オブジェクトです。アクセス方法は、現在選択されているインデックス document.forms[0].selectName.options を取得する document.forms[0].selectName.selectedIndex です。 [n].text および document.forms[0].selectName .options[n].value、ここで text 属性は、select オブジェクトによって表示される文字列です。後の一般的なダイレクトナビゲーションなどの onchange イベントハンドラーを使用できます。プルダウン後にウェブサイトを選択します。

<html><head><title></title><script type="text/javascript">function goThere () {    var list=document.forms[0].urlList;    location.href=list.options[list.selectedIndex].value;}</script></head><body><form name="radiolist">    <select name="urlList" onchange="goThere()">    <option selected value="http://www.baidu.com">baidu    <option value="http://www.qq.com">qq    </select></form></body></html>

ログイン後にコピー

1.4 フォームのデータと要素を関数に渡す

JavaScript はキーワード this を提供します。これは通常、オブジェクトを指します。このため、このオブジェクトには、このキーワードを使用するスクリプトが含まれています。そのため、テキストフィールドの onchange イベントハンドラーで使用できます。 this を関数パラメータのキーワードとして使用します。

function upperMe(field){ //dosomething }

各コントロールそれぞれが持っています含まれるテーブルを指す属性なので、 this.form を記述してフォームを取得できます

<html><head><title>js_4</title><script type="text/javascript">function processData (formthis) {    for(var i=0;i<formthis.Beatles.length;i++){        if(formthis.Beatles[i].checked){            break;        }    }    var beatle=formthis.Beatles[i].value;    var song=formthis.song.value;    alert("chcecking whether "+song+" feature in " +""+beatle);}function varifySong(entry){    var song=entry.value;    alert("checking whether "+song+" is a beatles tunes");}</script></head><body><form onsubmit="return false"><p>choose your favoriate Beatle:<input type="radio" name="Beatles" value="Jhon" checked>John<input type="radio" name="Beatles" value="Markey">Markey</p><p> input your song name:<br><input type="text" name="song" value="song search" onchange="varifySong(this)"><input type="button" name="process " value="process requset..." onclick="processData(this.form)"></p></p></form></body></html>

ログイン後にコピー

このコードには特別なロジックがあることがわかります。実験の結果、入力ボックスに入力して process requestset をクリックすると、最初のトリガーはテキストボックスのonchangeイベントですが、処理要求イベントは実行されていないことがわかります。テキストの onChange イベントはテキストがフォーカスを離れるときにトリガーされるため、テキスト以外の場所をクリックすると最初に onChange イベントがトリガーされ、ボタンのクリックは 2 回目のクリックまで実行されません。これが複合検証です。