首頁 > web前端 > js教程 > 主體

JavaScript筆記之表單處理

高洛峰
發布: 2016-11-26 09:53:30
原創
905 人瀏覽過

   如果需要從Web站點的使用者收集信息,那麼就需要使用表單。
        表單可包含大多數常見的圖形介面元素,包括輸入欄位、單選按鈕、核取方塊、彈出式功能表和輸入清單。另外,HTML表單可以包含密碼字段,這種控制項會隱藏使用者的輸入以免被別人偷看。
       填寫表格後,點選選單上的Submit按鈕將表單的資訊傳送至Web伺服器,在伺服器上CGI程式(Common Gateway Interface,它是在Web伺服器上執行的腳本)會解釋並操作這些資料。然後,常常將資料儲存在資料庫中以供日後使用。在伺服器端使用資料之前,需要確保使用者輸入的資料是準確(正確)的格式。
      JavaScript是檢查資料的好方法,此技巧稱為表單驗證(form validation)。儘管CGI可以完成驗證(而且應該作為預防措施,因為有些用戶會在瀏覽器中關閉JavaScript功能),但是在客戶機用JavaScript進行驗證要快得多,而且用戶操作的效率也更高。
       關於表單一些概括:
   取得表單
[javascript]
var form=document.forms["form1"]; 
var form=document.fors[0];

 form物件事件
onsubmit在表單提交之前觸發
onreset在表單被重置之前觸發
引用表單元素
[javascript]
var element=tForm.elements[idex]; 
varelement=tForm.
 
遍歷一個表單中的所有表單域
[javascript]
   for(var i=0;i   // 

)讀(不可用)表單域
  element.disabled=true;
  element.disabled=false;
  2)取得表單域的值
  value
fo )表單域失去焦點:blur()
 
 表單域的通用事件
onFocus:獲得焦點時,產生該事件
onBlur:失去焦點時,產生該事件
onselect:文字被加亮顯示後(選擇),產生該文件
onchange:表單域的值改變時
onclick:鍵盤單擊
onkeydown:鍵盤按下
onkeyup:鍵盤鬆開
onkeypress:鍵盤按下鬆開
onmouseover:鼠標移上
onmouseout:鼠標移出
onmousedown :滑鼠按下
onmouseup:滑鼠放開
文字域、複選框、單選按鈕、下拉列錶框、表單驗證等。
    動態地改變選單
         常常需要透過彈出式選單提供使用者輸入的機會,且希望根據使用者在另一個彈出式功能表中所作的選擇,而改變一個或多個快閃選單內容,以下列範例則是用來選擇月份,即依據所選月份選取月份的天數,填入第二個彈出式選單:
[html]
 
 

 
     Dynamic Menus  
      
   
   
     
        
     
   
   
   
 

 

 🠎

在彈出式選單中選擇一個值,然後就可以建立第二個彈出式選單的內容
[javascript]
/**
 * 動態地改變選單
 */ 
window.onload=initForm; 
 
.function initForm(){ 
getElementById("months").selectedIndex=0; 
    document.getElementById("months").onchange=populateDay; 

 
function 3ateDay; 

 
function 約片0,31 ,30,31,31,30,31,30,31); 
    var monthStr=this.options[this.selectedIndex].value; 
    //使用this(使用者在第一個選單].value; 
    //使用this(使用者在第一個選單中選擇的月份)從選單中選擇中取得數值,並儲存於monthStr中 
    if(monthStr!=""){ 
        var theMonth=parseInt(monthStr); 
  .
        for(var i=0;i            document.getElementById("days").options[i]=new Option(i+1); 


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!