JavaScript 通過 type 屬性值獲取表單元素

admin發表於2017-03-19
JavaScript

input 表單元素通過 type 屬性可以宣告為不同的型別，如文字框、按鈕、單選按鈕和核取方塊等。

但實際應用中往往只需要其中的某一種型別。

程式碼如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script>  
window.onload=function()  {  
  var myform=document.getElementById("myform");
  var bt=document.getElementById("bt");
  var eleArray=myform.elements;
  var textEle=[];
  var index=0;
  for(var i=0;i<eleArray.length;i++){
    if (eleArray[i].type == "text"){
      textEle[index]=eleArray[i];
      index++;
    }
  }
  bt.onclick=function(){
    alert(textEle.length)
  }
}  
</script>  
</head>  
<body>  
<form id="myform" action="http://www.softwhy.com">  
<ul>  
  <li>使用者名稱:<input type="text" name="username" /></li>  
  <li>密碼：<input type="text" name="pw" /></li>  
  <li><input type="reset" value="重置" /><input type="submit" value="提交" /></li>  
</ul>  
</form>  
<input type="button" value="點選檢視結果" id="bt" />
</body>  
</html>

以上程式碼可以將單行文字框元素放入一個陣列，然後點選按鈕之後彈出文字框的數目。

相關文章