JavaScript實現表單元素的操作

2022-05-24 22:01:33

一、forms[]; Form 表單物件

document.forms[] 是一個陣列，包含了檔案中所有的表單（<form>）。要參照單個表單，可以用 document.forms[x]，但是一般來說，人們都會這樣做：在<form>標記中加上“name="..."”屬性，那麼直接用 “document.<表單名>”就可以參照了。

1、屬性

name 返回表單的名稱，也就是<form name="...">屬性。
action 返回/設定表單的提交地址，也就是<form action="...">屬性。
method 返回/設定表單的提交方法，也就是<form method="...">屬性。
target 返回/設定表單提交後返回的視窗，也就是<form target="...">屬性。
encoding 返回/設定表單提交內容的編碼方式，也就是<form enctype="...">屬性。
length 返回該表單所含元素的數目。

enctype屬性：編碼方式

表單中的enctype引數用於設定表單資訊提交的編碼方式。具體語法如下:

<form enctype="value"...</form>

引數說明:value的取值:

Test/plain: 以純文字的形式傳送
application/x-www-form-urlencoded : 預設的編碼形式
multipart/form-data: MIME編碼，上傳檔案的表單必須選擇該項

2、方法

reset() 重置表單。這與按下“重置”按鈕是一樣的。
submit() 提交表單。這與按下“提交”按鈕是一樣的。

3、事件

onreset; onsubmit。

二、表單元素

1、輸入標記

輸入標記<input>是表單中最常用的標記之一。常用的文字域、按鈕等都使用這個標記。語法如下：

<form>

      <input name="field_name" type="type_name">

</form>

field_name:控制元件名稱
type_name：控制元件型別

2、輸入類控制元件的type可選值

text 文字域
password 密碼域，使用者在頁面輸入時不顯示具體的內容，以*代替
radio 無線電鈕
checkbox 核取方塊
button 普通按鈕
submit 提交按鈕
reset 重置按鈕
image 影象域，影象提交按鈕
hidden 隱藏域，不顯示在頁面上，只將內容傳遞到伺服器上
file 檔案域

3、elements[]; Element 表單元素物件

<表單物件>.elements 是一個陣列，包含了該表單所有的物件。一般我們不用該陣列，而直接參照各個具體的物件。

Hidden 隱藏物件由“<input type="hidden">”指定。

屬性

name 返回/設定用<input name="...">指定的元素名稱。
value 返回/設定用<input value="...">指定的元素的值。
form 返回包含本元素的表單物件。

4、三個獲取表單物件的方法

注意：document.form[index]跟form.element[index]的原理一致，通過form表單在html檔案的先後順序來獲取表單相應的表單物件。

下例列舉了所有的表單元素，並把表達的相關操作都呈現出來

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
    <form name="everything">
        <table border="border" cellpadding="5">
              <tr>
                    <td>UserName:<br/>[1]<input type="TEXT" name="username" size="15"/></td>
                    <td>Password:<br/>[2]:<input type="PASSWORD" name="password" size="15"/>  </td>
                    <td rowspan="4">Input Events[3]<br/><textarea name="textarea" rows="20" cols="28"/></textarea> </td>
                    <td rowspan="4" align="center" valign="center">
                     [9]<input type="BUTTON" value="Clear" name="clearbutton"/><br/>
                     [10]<input type="BUTTON" value="submit" name="submitbutton"/><br/>
                     [11]<input type="RESET" value="Reset" name="resetbutton"/><br/>
                    </td> 
                </tr>
                <tr>
                    <td colspan="2">File:[4]<input type="FILE" name="file" size="15"/></td>
                </tr>
        <tr>
                    <td>My Computer Peripherals:<br/>
                            [5]<input type="CHECKBOX" name="extras" value="burner">DVD Writer<br/>
                            [5]<input type="CHECKBOX" name="extras" value="printter">Printer<br/>
                            [5]<input type="CHECKBOX" name="extras" value="card">cardReader<br/>    
                        </td>
                        <td>My Web Browser:</br>
                             [6]<input type="RADIO" name="browser" value="ff">Firefox<br/>
                             [6]<input type="RADIO" name="browser" value="ie">IE<br/>
                             [6]<input type="RADIO" name="browser" value="other">Other
                         </td>
                     </tr>
                     <tr>
                        <td> My Hobbies:[7]<BR/>
                                <select multiple="multiple" name="Hobbies" size="4">
                                    <option value="programmeing">Hacking Javascript
                                    <option value="surfing"> surfing the web
                                    <option value="caffeine">Drinking coffe
                                    <option value="annoying">annoying my friends
                                </select>
                            </td>
                            <td align="center" valign="center">My Favorite Color:<br>[8]
                                <select name="color">
                                    <option value="red">red      <option value="green">green
                                    <option value="Blue">Blue     <option value="white">white
                                    <option value="violet">violet   <option value="peach">Peach
                                </select>    
                            </td>
                     </tr>
      </table>
    </form>

    <div align="center">
           <table border="4" bgcolor="pink" cellspacing="1" cellpadding="4">
                 <tr>
                     <td align="center"><b>Form Elements</b></td>
                     <td>[1]Text</td> <td>[2]Password</td>  <td>[3]textarea</td>
                     <td>[4]FielU</td> <td>[5]Checkbox</td>
                    </tr>
                    <tr>
                        <td>[6]Radio</td><td>[7]select(list)</td><td>select(menu)</td>
                        <td>[9]BUTTON</td><td>[10]submit</td><td>[11]Reste</td>
                    </tr>
             </table>
         </div>
         <script type="text/Javascript">
             function report(element,event){
                if((element.type=="select-one") || (element.type=="select-multiple")){
                         value="";
                             for(var i=0;i<element.options.length;i++)
                                   if(element.options[i].selected)
                                           value+=element.options[i].value+"";
                    }
                    else if(element.type=="textarea") value="..."
                    else value=element.value;
                    var msg=event+":"+element.name+'('+value+')n';
                    var t=element.form.textarea;
                    t.value=t.value+msg;
            }
            function addhandlers(f){
             for(var i=0;i<f.elements.length;i++){
                 var e=f.elements[i];
                     e.onclick=function(){report(this,'Click');}
                     e.onchange=function(){report(this,'Change');}
                     e.onfocus=function(){report(this,'Focus');}
                     e.onblur=function(){report(this,'Blur');}
                     e.onselect=function(){report(this,'Select');}
             }
             //Define some special-case event handlers for the three buttions.
             f.clearbutton.onclick=function(){
                  this.form.textarea.value='';report(this,'CLick');
             }
             f.submitbutton.onclick=function(){
                 report(this,'Click');return false;
             }
             f.resetbutton.onclick=function(){
                 this.form.reset();report(this,'Click');return false;
             }
         }
         //Finally,activate our form by adding all possible event handlers
         addhandlers(document.everything);
         </script>     
</body>
</html>

三、Button 按鈕物件

由“<input type="button">”指定。參照一個 Button 物件，可以使用“<檔案物件>.<表單物件>.<按鈕名稱>”。<按鈕名稱>指在<input>標記中的“name="..."”屬性的值。參照任意表單元素都可以用這種方法。

屬性

<name 返回/設定用<input name="...">指定的元素名稱。
value 返回/設定用<input value="...">指定的元素的值。
form 返回包含本元素的表單物件。

方法

blur() 從物件中移走焦點。
focus() 讓物件獲得焦點。
click() 模擬滑鼠點選該物件。

事件

onclick; onmousedown; onmouseup

四、Checkbox 核取方塊物件

由“<input type="checkbox">”指定。

屬性

name 返回/設定用<input name="...">指定的元素名稱。
value 返回/設定用<input value="...">指定的元素的值。
form 返回包含本元素的表單物件。
checked 返回/設定該核取方塊物件是否被選中。這是一個布林值。
defaultChecked 返回/設定該核取方塊物件預設是否被選中。這是一個布林值。

方法

blur() 從物件中移走焦點。
focus() 讓物件獲得焦點。
click() 模擬滑鼠點選該物件。

事件

onclick

五、Password 密碼輸入區物件

由“<input type="password">”指定。

屬性

name 返回/設定用<input name="...">指定的元素名稱。
value 返回/設定密碼輸入區當前的值。
defaultValue 返回用<input value="...">指定的預設值。
form 返回包含本元素的表單物件。

方法

blur() 從物件中移走焦點。
focus() 讓物件獲得焦點。
select() 選中密碼輸入區裡全部文字。

事件

onchange

六、Radio 單選域物件

<input type="radio"> 標籤定義了表單單選框選項，<input type="checkbox"> 定義了核取方塊. 使用者需要從若干給定的選擇中選取一個或若干選項。

checked屬性表示是否被預設選擇

學生：
        男孩<input type="radio" value="boy" name="gender" checked="checked">
        女孩<input type="radio" value="girl" name="gender" >

由“<input type="radio">”指定。一組 Radio 物件有共同的名稱（name 屬性），這樣的話，document.formName.radioName 就成了一個陣列。

要存取單個 Radio 物件就要用：document.formName.radioName[x]。

單個 Radio 物件的屬性

name 返回/設定用<input name="...">指定的元素名稱。
value 返回/設定用<input value="...">指定的元素的值。
form 返回包含本元素的表單物件。
checked 返回/設定該單選域物件是否被選中。這是一個布林值。
defaultChecked 返回/設定該物件預設是否被選中。這是一個布林值。

方法

blur() 從物件中移走焦點。
focus() 讓物件獲得焦點。
click() 模擬滑鼠點選該物件。

事件

onclick

七、Reset 重置按鈕物件

由“<input type="reset">”指定。因為 Reset 也是按鈕，所以也有 Button 物件的屬性和方法。至於“onclick”事件，一般用 Form 物件的 onreset 代替。

八、Select 選擇區（下拉式選單、列表）物件

選單列表類的控制元件<select>和<option>選單是種最節省空間的方式，正常狀態下只能看到個選項，單擊按鈕開啟選單後才能看到部的選項。

列表可以顯示一定數量的選項，如果超過了這個數量，會自動出現卷軸。具體語法如下:

<select name="select_name" size=select_size multiple="multiple">
            <option value="option_value" selected="selected">選項</option>
             <option value="option_value">選項</option>
 </select>

1、屬性

name 返回/設定用<input name="...">指定的元素名稱。
length 返回 Select 物件下選項的數目。
selectedIndex 返回被選中的選項的下標。這個下標就是在 options[] 陣列中該選項的位置。如果 Select 物件允許多項選擇，則返回第一個被選中的選項的下標。
form 返回包含本元素的表單物件。

2、方法

blur() 從物件中移走焦點。
focus() 讓物件獲得焦點。

3、事件

onchange

4、操作select控制元件

新增、修改、刪除、選中、清空、判斷存在等

1、判斷select選項中是否存在Value=”paraValue”的Item

function jsselectisexititem(objselect,objitemvalue)
{
    var isexit = false;
    for(var i=0;i<objselect.options.length;i++)
    {
     if(objselect.options[i].value == objitemvalue)
     {
        isexit = true;
        break;
     }
    }      
    return isexit;
}

2、向select選項中加入一個Item

function jsadditemtoselect(objselect,objitemtext,objitemvalue)
{
    //判斷是否存在
    if(jsselectisexititem(objselect,objitemvalue))
    {
       alert("該item的value值已經存在");
    }
    else
    {
       var varitem = new option(objitemtext,objitemvalue);
       //      objselect.options[objselect.options.length] = varitem;
       objselect.options.add(varitem);
       alert("成功加入");
    }    
}

3、從select選項中刪除一個Item

function jsremoveitemfromselect(objselect,objitemvalue)
{
    //判斷是否存在
    if(jsselectisexititem(objselect,objitemvalue))
    {
      for(var i=0;i<objselect.options.length;i++)
      {
        if(objselect.options[i].value == objitemvalue)
        {
           objselect.options.remove(i);
          break;
        }
      }  
      alert("成功刪除");      
    }
    else
    {
         alert("該select中 不存在該項");
    }    
}

4、刪除select中選中的項

function jsRemoveSelectedItemFromSelect(objSelect)
{ 
    var length = objSelect.options.length - 1;   
    for(var i = length; i >= 0; i—){      
      if(objSelect[i].selected == true){  
        objSelect.options[i] = null;  
      }
   }
}

5、修改select選項中 value=”paraValue”的text為”paraText”

function jsupdateitemtoselect(objselect,objitemtext,objitemvalue)
{
    //判斷是否存在
    if(jsselectisexititem(objselect,objitemvalue))
    {
      for(var i=0;i<objselect.options.length;i++)
      {
         if(objselect.options[i].value == objitemvalue)
         {
       objselect.options[i].text = objitemtext;
       break;
         }
      }  
      alert("成功修改");      
    }
    else
    {
        alert("該select中 不存在該項");
    }    
}

6、設定select中text=”paraText”的第一個Item為選中

function jsselectitembyvalue(objselect,objitemtext)
{    
    //判斷是否存在
    var isexit = false;
    for(var i=0;i<objselect.options.length;i++)
    {
      if(objselect.options[i].text == objitemtext)
     {
         objselect.options[i].selected = true;
         isexit = true;
        break;
     }
    }      
    //show出結果
    if(isexit)
    { 
      alert("成功選中");      
    }
    else
    {
       alert("該select中 不存在該項");
    }    
}

7、設定select中value=”paraValue”的Item為選中

document.all.objSelect.value = objItemValue;

8、得到select的當前選中項的value

var currSelectValue = document.all.objSelect.value;

9、得到select的當前選中項的text

var currselecttext = document.all.objselect.options[document.all.objselect.selectedindex].text;

10、得到select的當前選中項的Index

var currSelectIndex = document.all.objSelect.selectedIndex;

11、清空select的項

document.all.objSelect.options.length =0;

九、options[]; Option 選擇項物件

options[] 是一個陣列，包含了在同一個 Select 物件下的 Option 物件。Option 物件由“<select>”下的“<options>”指定。

options[] 陣列的屬性

length; selectedIndex 與所屬 Select 物件的同名屬性相同。

單個 Option 物件的屬性

text 返回/指定 Option 物件所顯示的文字
value 返回/指定 Option 物件的值，與<options value="...">一致。
index 返回該 Option 物件的下標。對此並沒有什麼好說，因為要指定特定的一個 Option 物件，都要先知道該物件的下標。這個屬性好像沒有什麼用。
selected 返回/指定該物件是否被選中。通過指定 true 或者 false，可以動態的改變選中項。
defaultSelected 返回該物件預設是否被選中。true / false。

十、Submit 提交按鈕物件

由“<input type="submit">指定。因為 Submit 也是按鈕，所以也有 Button 物件的屬性和方法。至於“onclick”事件，一般用 Form 物件的 onsubmit 代替。

十一、Text 文字方塊物件

由“<input type="text">”指定。Password 物件也是 Text 物件的一種，所以 Password 物件所有的屬性、方法和事件，Text 物件都有。

十二、Textarea 多行文字輸入區物件

在HTML中還有一種特殊定義的文字樣式，稱為文字域<textarea>。它與文字欄位的區別在於可以新增多行文字，從而輸入更多的文字。語法如下：

<textarea name="textname" value="text_value" rows=rows_value cols=cols_value></textarea>

由“<textarea>”指定。Textarea 物件所有的屬性、方法和事件和 Text 物件相同，也就是跟 Password 物件一樣。

到此這篇關於JavaScript操作表單元素的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援it145.com。

JavaScript實現表單元素的操作

目錄

一、forms[]; Form 表單物件

1、屬性

2、方法

3、事件

二、表單元素

1、輸入標記

2、輸入類控制元件的type可選值

3、elements[]; Element 表單元素物件

4、三個獲取表單物件的方法

三、Button 按鈕物件

屬性

方法

事件

四、Checkbox 核取方塊物件

屬性

方法

事件

五、Password 密碼輸入區物件

屬性

方法

事件

六、Radio 單選域物件

單個 Radio 物件的屬性

方法

事件

七、Reset 重置按鈕物件

八、Select 選擇區（下拉式選單、列表）物件

1、屬性

2、方法

3、事件

4、操作select控制元件

九、options[]; Option 選擇項物件

options[] 陣列的屬性

單個 Option 物件的屬性

十、Submit 提交按鈕物件

十一、Text 文字方塊物件

十二、Textarea 多行文字輸入區物件

熱門文章