HTML中表單form的相關知識說明

 在Javascript 中，頁面上的每一對

標記都解析為一個對象，也就是form 物件。

可以透過document.forms 取得以來源順序排列的文件中所有form 物件的集合。

如果表單物件定義如下：

取得該表單物件的方法：

  i>  document. forms["frm1"];   // 根據name屬性值

 ii>  document.forms[0];        // 根據索引號

iii>  document.frm1;            // 由以name值取得物件

 

## 屬性：

elements：取得以來源順序排列的給定表單中所有控制項的集合。但是 物件不在此集合內。 var txtName = myform.elements[0];         //獲得表單的第一個元素var txtName = myform.elements["txtName"]; //取得name屬性值為"txtName"的元素

var txtName = myform.elements.txtName; //取得name屬性值為"txtName"的元素

# 

enctype：設定或取得表單的多用途網際郵件擴充(MIME) 編碼。

                    此屬性的預設值為：application/x-www-form-urlencoded

  /form-data

 

form 表單中的 標籤：

 

每個表單元素的文字描述都應該使用標記！

       此標記用於將文字綁定到對應的表單元素上，它的for 屬性指定它所要綁定的表單元素id 值。綁定後點選該文字，滑鼠將聚焦到對應的文字方塊中或選取對應的選項。

       若安裝了某些桌面主題，某些表單元素也會轉換色彩來提示，這大大提升了使用者體驗。

範例程式碼：#    點我將聚焦到文字方塊   
    點我將選取單選框   
    點我將選取複選框> ;    ### ############

注意：

i >    每個表單元素應盡量使用標籤來提升使用者體驗；

#ii >   每個表單元素應指派name 屬性  和id 屬性。

        name 屬性：用來將資料提交至伺服器；

              的使用等。

                                ( name 屬性和id 屬性應該盡可能使用相同的或相關的值。)

 

在客戶端，Javascript 對表單及表單元素的操作，更青睞使用其name 屬性。

因為，對於某些特定的表單元素(如：單選按鈕等)，使用其name 屬性更容易取得元素值，也更方便向伺服器傳送資料！

 

Javascript 操作form 表單元素，比較少用的屬性：

defaultChecked 設定或取得複選框或單選鈕的狀態。
defaultValue 設定或取得物件的初始內容。
disabled 設定或取得控制項的狀態。

 

提交表單

提交表單的範例：

##  < ;form name="frm" method="post" action="javascript:alert('提交成功！');">                              onclick="document.forms['frm'].submit();">
卷 onclick="this.disabled=true; this.form.submit();">注意：

i >   如果使用submit( ) 方法來提交表單，則不會觸發

表單元素的onsubmit 事件，

       這是與使用提交元素不同的地方；

ii >  可以在按鈕的提交或點擊事件中，使用disabled 屬性來停用使用者重複點擊提交按鈕的行為，

       減少伺服器的回應負擔；

 

設定文字方塊

i >   控制文字方塊的字元數

文字方塊: ######
############多行文字方塊:########################

注意：多行文字方塊 中的maxlength 為自訂屬性；如果在<textarea> 中輸入字元時，換行也算一個字元；

 

ii >  滑鼠經過時，自動選取文字方塊

#    };    txtName.onfocus = function(){#          };#}

window.onload = function(){

#    var txtName = document. getElementsByName("myName")[0];

    txtName.onmouseover = function(){

##

實現了行為與結構的分離。  設定單選按鈕function getChoice(){    var oForm = document.forms["myForm1"];    // radioName是單選按鈕的name屬性值    var aChoices = oForm.radioName;    //遍歷整個單一選項表    //遍歷整個單一選項表    for(i=0;i        if(aChoices[i].checked)        if(aChoices[i].checked)   #            break; //若發現了選取項目則退出    alert("您選取的「+aChoices[i].value);}function setChoice(_num){

#取得選取的單選按鈕& 設定單選按鈕被選取

<script></script>

//取得選取項目

//設定選取項目

######    var oForm = document.forms["myForm1"];############    //radioName是單選按鈕的name屬性值################################################################################################################################################################################################################################ #####    oForm.radioName[_num].checked = true; //其它選項的checked值會自動設定為false############}#################################################################################################### ######             //呼叫代碼#### ################

需要保證同一組單選按鈕的name 屬性值相同即可。

 

設定複選框

#設定複選框的「全選」、「全不選」及「反選」功能

 [i].checked = !oCheckBox[i].checked;        else #       #       #  0時則全不選            oCheckBox[i].checked = _action;#如果

<script></script>

function changeBoxes( _action){

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

    //myCheckbox 為所有複選框的name屬性值

    var oCheckBox = myForm.myCheckbox;

    for(var i=0 ;i

        if(_action 

##################################如果################################如果################################如果######################################' ##############

############aa############bb#################################### ############

#############

 

設定下拉列錶框

下拉列錶框的multiple 屬性用於設定或取得下拉列表框是否可以選取多個選項。

下拉列錶框預設只能選取一項，若要設定為可以選取多項，則 即可。

type 屬性：javascript 語言根據type 屬性的值獲得下拉列錶框select 控制項的類型。

type 屬性的值為：select-multiple 或select-one （注意：下拉列錶框的類型由multiple 屬性控制）

i >  查看下拉列錶框的選項（單一選項& 多重選項）

##    else{#        var aChoices = new Array();         for(var i=0;i    Box   )    Box    . selected)//若選取              //壓入陣列中   );        //輸出結果        alert("多重選，您選擇了：" + aChoices.join());    }}#    AA    BB#    CC

<script></script>

# function getSelectValue(_myselect){

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

    //根據參數(下拉列錶框(的name屬性值)取得下拉式選單項目

    var oSelectBox = oForm.elements[_myselect];

    //判斷是單選還是多重選擇

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

        var iChoice  選取項目

        alert("單選，您選取了" + oSelectBox.options[iChoice].text);

    }

#C ##

 ii >  新增下拉列錶框的選項#    var oBox = oForm.

追加新選項到最後

<script></script>

function AddOption(Box){ //追加選項到最後

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

    var oBox = oForm.

#   

    var oOption = new Option("乒乓球","Pingpang");

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

插入新選項到指定位置

#<script></script>

function AddOption(_select,_num){

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

#    var oBox = oForm.elements[_select];

    var oOption = new Option("text值","value值");

    //相容IE7，先新增選項到最後，再移動

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

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

}

#

注意：如果直接使用insertBefore( ) 方法插入選項，將會在IE 中出現一個空選項的bug。為了解決IE 的這個bug ，只能使用先追加新選項到末尾，然後再使用insertBefore( ) 方法將其移到對應的位置。

 

類似這樣：為了跳過瀏覽器的某些bug 或限制，實現預定目的的小技巧，通常稱之為hack 。

 

iii >  取代某一選項

<script></script>

//替換選項

#function ReplaceOption(_select,_num){

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

    var oBox = oForm.elements[_select];#f new Option("text值","value值");

    oBox.options[_num] = oOption; //取代第_num 個選項

#}

透過oBox.options[_num] = oOption 直接將建立的新選項會取代掉指定位置的選項。

 

iv >  刪除某一選項

<script><table style="border: 0px none; padding: 0px; width: 100%;"><tbody><tr class="firstRow"><td>function RemoveOption(_select,_num){<tr><td>    var oForm = document.forms["myForm1"]; <tr><td>    var oBox = oForm.elements[_select];<tr><td>    oBox.options[_num] = null; }<tr><td></script>#

##################################################### #......############# #######################直接透過oBox.options[_num] = null 刪除選項。 ###### ###

以上是HTML中表單form的相關知識說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！