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 >   控制文字方塊的字元數

文字方塊:

######
############< label for="comments">多行文字方塊:########################

注意：多行文字方塊 中的maxlength 為自訂屬性；如果在<textarea> 中輸入字元時，換行也算一個字元；</p> <p> </p> <p><br></p> <p>ii >  滑鼠經過時，自動選取文字方塊</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"> <td><script language="javascript"></td> </tr> <tr><td>window.onload = function(){</td></tr> <tr><td>#    var txtName = document. getElementsByName("myName")[0];</td></tr> <tr><td>    txtName.onmouseover = function(){</td></tr> <tr><td>      </td></tr> <tr>#    };<td></td> </tr> <tr>    txtName.onfocus = function(){<td></td> </tr> <tr>#      <td></td> </tr> <tr>    };<td></td> </tr> <tr>#}<td></td> </tr> <tr></script><td></td> </tr> <tr><td></td></tr> </tbody></table> <p><br></p> <p></p> <p></p> <p><br></p> <p></p> <p></p> <p><br>##<INPUT TYPE="text" NAME="myName" value="預設值被選取" /></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td></td></tr> <tr>實現了行為與結構的分離。 <td></td> </tr> <tr><td></td></tr>設定單選按鈕<tr><td>#取得選取的單選按鈕& 設定單選按鈕被選取</td></tr> <tr><td></td></tr> <tr><td><script language="javascript"></td></tr> <tr><td>//取得選取項目</td></tr> <tr><td></td></tr>function getChoice(){<tr><td></td></tr>    var oForm = document.forms["myForm1"];<tr><td></td></tr>    // radioName是單選按鈕的name屬性值<tr><td></td></tr>    var aChoices = oForm.radioName;<tr><td></td></tr>    //遍歷整個單一選項表<tr><td></td></tr>    //遍歷整個單一選項表<tr> <td></td> </tr>    for(i=0;i<aChoices.length;i++)   <tr><td></td></tr>        if(aChoices[i].checked)        if(aChoices[i].checked)   <tr> <td></td>#            break; //若發現了選取項目則退出</tr> <tr> <td></td>    alert("您選取的「+aChoices[i].value);</tr> <tr> <td></td>}</tr> <tr><td> <br>//設定選取項目<br><br> </td></tr>function setChoice(_num){</tbody></table>######    var oForm = document.forms["myForm1"];############    //radioName是單選按鈕的name屬性值################################################################################################################################################################################################################################ #####    oForm.radioName[_num].checked = true; //其它選項的checked值會自動設定為false############}#################################################################################################### ###</script>###             //呼叫代碼#### <input type="button" value="取得選取項" onclick="getChoice();" />###<input type="button" value="設定第1項已選取" onclick=" setChoice(0);" />#############<p><br></p> <p>需要保證同一組單選按鈕的name 屬性值相同即可。 </p> <p> </p> <p><br></p> <p>設定複選框</p> <p>#設定複選框的「全選」、「全不選」及「反選」功能</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"></td></tr> <tr><td>function changeBoxes( _action){</td></tr> <tr><td>    var myForm = document.forms["myForm1"];</td></tr> <tr><td>    //myCheckbox 為所有複選框的name屬性值</td></tr> <tr><td>    var oCheckBox = myForm.myCheckbox;</td></tr> <tr><td> </td></tr> <tr><td>    for(var i=0 ;i<oCheckBox.length;i++)    //遍歷每一個選項</td></tr> <tr><td>        if(_action < </td></tr> <tr> [i].checked = !oCheckBox[i].checked;<td></td> </tr> <tr>        else <td></td> </tr> <tr>#       <td></td> </tr> <tr>#       <td></td> </tr> <tr>#  0時則全不選<td></td> </tr> <tr>            oCheckBox[i].checked = _action;<td></td> </tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr>#如果</tbody></table>##################################如果################################如果################################如果######################################' ##</script>############<form name="myForm1">############<input type="checkbox" name ="myCheckbox">aa############<input type="checkbox" name="myCheckbox">bb############<input type="button" value="全選" onclick="changeBoxes(1);" />############<input type="button" value="全不選" onclick="changeBoxes(0);" />############<input type="button" value="反選" onclick="changeBoxes(-1);" /> ############</form>#############<p><br></p> <p> </p> <p><br></p> <p>設定下拉列錶框</p> <p>下拉列錶框的multiple 屬性用於設定或取得下拉列表框是否可以選取多個選項。 </p> <p>下拉列錶框預設只能選取一項，若要設定為可以選取多項，則<select  multiple = "multiple"> 即可。 </p> <p>type 屬性：javascript 語言根據type 屬性的值獲得下拉列錶框select 控制項的類型。 </p> <p>type 屬性的值為：select-multiple 或select-one （注意：下拉列錶框的類型由multiple 屬性控制）</p> <p>i >  查看下拉列錶框的選項（單一選項& 多重選項）</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"></td></tr> <tr><td># function getSelectValue(_myselect){</td></tr> <tr><td>    var oForm = document.forms["myForm1"];</td></tr> <tr><td>    //根據參數(下拉列錶框(的name屬性值)取得下拉式選單項目</td></tr> <tr><td>    var oSelectBox = oForm.elements[_myselect];</td></tr> <tr><td>    //判斷是單選還是多重選擇</td></tr> <tr><td>    if(oSelectBox.type == "select-one"){</td></tr> <tr><td>        var iChoice  選取項目</td></tr> <tr><td>        alert("單選，您選取了" + oSelectBox.options[iChoice].text);</td></tr> <tr><td>    }</td></tr> <tr><td></td></tr> <tr>##    else{<td></td> </tr> <tr>#        var aChoices = new Array();<td></td> </tr> <tr> <td></td>        for(var i=0;i<oSelectBox.options.length;i++)</tr> <tr> <td></td>    Box   )</tr> <tr> <td></td>    Box    . selected)//若選取</tr> <tr> <td></td>              //壓入陣列中</tr> <tr> <td></td>   );</tr> <tr> <td></td>        //輸出結果</tr> <tr> <td></td>        alert("多重選，您選擇了：" + aChoices.join());</tr> <tr> <td></td>    }</tr> <tr> <td></td>}</tr> <tr> <td></td></script></tr> <tr> <td> </td>#<form method="post" name="myForm1"></tr> <tr> <td></td><select id="mysel" name="mysel" multiple="multiple" style ="height:60px;"></tr> <tr> <td></td>    <option value="a">AA</option></tr> <tr> <td></td>    < option value="b">BB</option></tr> <tr> <td></td>#    <option value="c">CC</option></tr> <tr><td></td></tr> </tbody></table>#C ##</select><p><br></p> <p><input type="button" onclick="getSelectValue('mysel')" value="檢視選項" /></p> <p></p> <p></p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody>ii >  新增下拉列錶框的選項<tr class="firstRow"><td>追加新選項到最後</td></tr> <tr><td></td></tr> <tr><td><script language="javascript"></td></tr> <tr><td>function AddOption(Box){ //追加選項到最後</td></tr> <tr><td>    var oForm = document.forms["myForm1"];</td></tr> <tr><td>    var oBox = oForm.</td></tr>#    var oBox = oForm.<tr><td>#   </td></tr> <tr><td>    var oOption = new Option("乒乓球","Pingpang");</td></tr> </tbody></table>    oBox.options[oBox.options.length]###    oBox.options[oBox.options.length]###    oBox.options[oBox.options.length] = oOption;############}#############</script>############<p><br></p> <p>插入新選項到指定位置</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td>#<script language="javascript" ></td></tr> <tr><td>function AddOption(_select,_num){</td></tr> <tr><td>    var oForm = document.forms["myForm1"];</td></tr> <tr><td>#    var oBox = oForm.elements[_select];</td></tr> <tr> <td>    var oOption = new Option("text值","value值");</td> </tr> <tr><td>    //相容IE7，先新增選項到最後，再移動</td></tr> <tr><td>    oBox.options[oBox.options.length] = oOption;</td></tr> <tr><td>#    oBox.insertBefore(oOption,oBox.options[_num]);</td></tr> <tr><td>}</td></tr> <tr><td>#< /script></td></tr> <tr><td><input type="button" value="添加乒乓球" onclick="AddOption('myselect',1);" /></td></tr> </tbody></table> <p><br></p> <p>注意：如果直接使用insertBefore( ) 方法插入選項，將會在IE 中出現一個空選項的bug。為了解決IE 的這個bug ，只能使用先追加新選項到末尾，然後再使用insertBefore( ) 方法將其移到對應的位置。 </p> <p> </p> <p><br></p> <p>類似這樣：為了跳過瀏覽器的某些bug 或限制，實現預定目的的小技巧，通常稱之為hack 。 </p> <p> </p> <p>iii >  取代某一選項</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript "></td></tr> <tr><td>//替換選項</td></tr> <tr><td>#function ReplaceOption(_select,_num){</td></tr> <tr><td> #    var oForm = document.forms["myForm1"];</td></tr> <tr><td>    var oBox = oForm.elements[_select];#f new Option("text值","value值");</td></tr> <tr><td>    oBox.options[_num] = oOption; //取代第_num 個選項</td></tr> <tr><td>#}</td></tr> <tr><td></script></td></tr> <tr><td><input type="button" value="替換選項" onclick ="ReplaceOption('selName',1);" /></td></tr> <tr><td></td></tr> </tbody></table>透過oBox.options[_num] = oOption 直接將建立的新選項會取代掉指定位置的選項。 <p><br> </p> <p>iv >  刪除某一選項</p> <p></p> <p></p> <p><br></p><script language="javascript "><table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td>function RemoveOption(_select,_num){</td></tr> <tr> <td>    var oForm = document.forms["myForm1"];</td> </tr> <tr><td>    var oBox = oForm.elements[_select];</td></tr> <tr><td>    oBox.options[_num] = null; </td></tr>}<tr><td></td></tr></script><tr><td></td></tr>#</head><tr> <td></td> </tr><body><tr><td></td></tr><select id="mysel" name="mysel" multiple="multiple"><tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> </tbody></table> <p><br></p> <p></p> <p></p>##################################################### #......############<input type="button" value="刪除選項" onclick="RemoveOption('mysel',1);" /># #######################直接透過oBox.options[_num] = null 刪除選項。 ###### ###<p>以上是HTML中表單form的相關知識說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>陳述：</span><div>本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn</div></div></div><div class="nphpSytBox"><span>上一篇：<a class="dBlack" title="HTML解析原理說明" href="http://m.php.cn/zh-tw/faq/355555.html">HTML解析原理說明</a></span><span>下一篇：<a class="dBlack" title="HTML解析原理說明" href="http://m.php.cn/zh-tw/faq/355560.html">HTML解析原理說明</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相關文章</h2><em><a href="http://m.php.cn/zh-tw/article.html" class="bBlack"><i>看更多</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/zh-tw/faq/348757.html" title="Html小知識總結" class="aBlack">Html小知識總結</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348804.html" title="如何快速學習HTML" class="aBlack">如何快速學習HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348873.html" title="html xhtml xml的區別" class="aBlack">html xhtml xml的區別</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348884.html" title="src與href屬性的差別" class="aBlack">src與href屬性的差別</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348902.html" title="關於HTML5和CSS替換使用" class="aBlack">關於HTML5和CSS替換使用</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/zh-tw/"><b class="icon1"></b><p>首頁</p></a></li><li><a href="http://m.php.cn/zh-tw/course.html"><b class="icon2"></b><p>課程</p></a></li><li><a href="http://m.php.cn/zh-tw/wenda.html"><b class="icon4"></b><p>問答</p></a></li><li><a href="http://m.php.cn/zh-tw/login"><b class="icon5"></b><p>我的</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/zh-tw/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/zh-tw/"><b class="icon1"></b><span>首頁</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/course.html"><b class="icon2"></b><span>課程</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/article.html"><b class="icon3"></b><span>文章</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/wenda.html"><b class="icon4"></b><span>問答</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/dic.html"><b class="icon6"></b><span>詞典</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/course/type/99.html"><b class="icon7"></b><span>手册</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/xiazai/"><b class="icon8"></b><span>下載</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/faq/zt" title="專題"><b class="icon12"></b><span>專題</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/zh-tw/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/" >首頁</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/article.html" class="hover">文章</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/wenda.html" >問答</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/course.html" >課程</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/faq/zt" >專題</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/xiazai" >下載</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/game" >遊戲</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/dic.html" >詞典</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>