本文實例為大家分享js表單控件多個實例講解，供大家參考，具體內容如下
實例一：遍歷表單的所有控件
<script type="text/javascript">
//遍歷表單的所有控件
function getValues(){
var f = document.forms[0]; //獲取表單DOM
var elements = f.elements; //獲取所有的控件數組
var str = ''; //拼接字符串
//循環遍歷
for(var i=0; i<elements.length; i++){
var e = elements[i]; //當前的控件
str += e.value; //拼接控件的值
str += '\n'; //拼接分隔符
}
alert(str); //用提示框展示結果
}
</script>
<form>
文本框：
<input type="text" name="myText"/>
<br/>
單選框：
<input type="radio" name="myRadio"value="1"/>1
<input type="radio" name="myRadio" value="2"/>2
<br/>
下拉列表：
<select name="mySelect">
<option value="">==請選擇==</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br/>
<input type="button" value="得到所有控件的值" onclick="getValues()"/>
</form>
實例二：通過控件名訪問特定的控件
<script type="text/javascript">
//通過控件名訪問特定的控件
function getFormDom(){
var f = document.forms[0]; //獲取表單DOM
var myText = f.myText; //通過名字獲取控件DOM
//提示控件的name和value
alert(myText.name + " : " + myText.value);
}
</script>
<form>
文本框：
<input type="text" name="myText"/>
<br/>
<input type="button" value="獲取控件" onclick="getFormDom()"/>
</form>
實例三：獲取表單內文本框的個數
<script type="text/javascript">
//獲取表單內文本框的個數
function getInputCount(){
var f = document.forms[0]; //獲取表單DOM
var elements = f.elements; //獲取所有的控件數組
var count = 0; //統計總數
//循環遍歷
for(var i=0; i<elements.length; i++){
//當前的控件
var e = elements[i];
//是否為文本框
if(e.tagName == 'INPUT' && e.type == 'text'){
count++; //總數自加
}
}
//用提示框展示結果
alert("文本框一共有：" + count + "個");
}
</script>
實例四：修改表單的提交方法
method 屬性規定在提交表單時所用的 HTTP 方法（GET 或 POST），使用 GET 時，表單數據在頁面地址欄中是可見的，POST 的安全性更加，因為在頁面地址欄中被提交的數據是不可見的。
<script type="text/javascript">
//修改表單的提交方法
function modifyMethod(){
var f = document.forms[0]; //獲取表單DOM
var method = f.myMethod.value; //選擇的方法
f.method = method; //修改選擇的提交方法
//用提示框展示結果
alert("表單當前的提交方法：" + method);
}
</script>
<form method="post">
請選擇提交方法：
<select name="myMethod">
<option value="">==請選擇==</option>
<option value="get">get</option>
<option value="post">post</option>
</select>
<br/>
<input type="button" value="修改提交方法" onclick="modifyMethod()"/>
</form>
實例五：動態指定表單的動作屬性
action 屬性定義在提交表單時執行的動作。
向服務器提交表單的通常做法是使用提交按鈕。
通常，表單會被提交到 web 服務器上的網頁。
如果省略 action 屬性，則 action 會被設置為當前頁面。
<script type="text/javascript">
//動態指定表單的動作屬性
function modifyAction(){
var f = document.forms[0]; //獲取表單DOM
var newURL = f.newURL.value; //選擇的方法
f.action = newURL; //修改提交表單的action地址
//用提示框展示結果
alert("表單當前的動作：" + f.action);
}
</script>
<form method="post">
請選擇提交方法：
<input type="text" name="newURL"/>
<br/>
<input type="button" value="修改提交Action" onclick="modifyAction()"/>
</form>
實例六：動態選擇聚焦的控件
<script type="text/javascript">
//第一個單選框為焦點
function focusIt(){
var f = document.forms[0]; //獲取表單DOM
var myRadio = f.myRadio; //獲取單選框
myRadio[0].focus(); //第一個單選框獲得焦點
}
</script>
<form>
文本框：
<input type="text" name="myText"/>
<br/>
單選框：
<input type="radio" name="myRadio" value="1"/>
<input type="radio" name="myRadio" value="2"/>
<br/>
下拉列表：
<select name="mySelect">
<option value="">==請選擇==</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br/>
<input type="button" value="第一個單選框為焦點" onclick="focusIt()"/>
</form>
實例七：初始化表單裡的所有控件的值到最初狀態
<script type="text/javascript">
//初始化表單裡的所有控件的值到最初狀態
function init(){
var f = document.forms[0]; //獲取表單DOM
f.reset(); //使用reset()函數
}
</script>
實例八：批量為所有的表單控件加一個說明
<script type="text/javascript">
//批量為所有的表單控件加一個說明
function batchComment(){
var f = document.forms[0]; //獲取表單DOM
var children = f.childNodes; //獲取表單的所有子元素
var newArr = []; //定義新的元素數組
var j = 0; //為新元素數組定義下標
//循環遍歷子元素
for(var i=0; i<children.length; i++){
var e = children[i]; //當前子元素
newArr[j++] = e; //添加到新數組裡
//判斷是否為控件
if(e.tagName == 'INPUT' || e.tagName == 'SELECT'){
//添加一個文字說明的節點
var text = document.createTextNode(" 此項必填");
newArr[j++] = text; //為新數組加入節點
}
}
//清空現有的表單內容
f.innerHTML = '';
//批量加上說明
for(var i=0; i<newArr.length; i++){
//把老的元素和說明節點加入form
f.appendChild(newArr[i]);
}
}
</script>
實例九：使用隱藏控件為表單添加參數
<script type="text/javascript">
//展示表單參數的函數
function showParams(){
//設置隱藏變量的值，這個值也可以通過標簽的value指定
document.forms[0].myhidden.value = '我是隱藏的';
//定義字符拼接變量
var str = '表單將提交的參數包括：';
//拼接年份參數
str += '\n年份:' + document.forms[0].myyear.value;
//拼接姓名參數
str += '\n姓名:' + document.forms[0].myname.value;
//拼接隱藏參數
str += '\n隱藏變量:' + document.forms[0].myhidden.value;
alert(str); //展示字符的值
}
</script>
<form>
<input type="hidden" name="myhidden"/>
年份：
<select name="myyear">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
<br/><br/>
姓名：<input type="text" name="myname"/>
<br/><br/>
<input type="button" value="提交" onclick="showParams();"/>
</form>
實例十：全部勾選所有復選框
<script type="text/javascript">
//勾選所有的函數
function checkAll(c){
//獲取所有的復選框
var arr = document.getElementsByName('myname');
if(c){ //是否全選
//遍歷所有的復選框
for(var i=0;i<arr.length;i++){
arr[i].checked = true;//選中
}
}else{ //否則，全不選
//遍歷所有的復選框
for(var i=0;i<arr.length;i++){
arr[i].checked = false;//不選中
}
}
}
</script>
<form>
你的興趣：<br>
<input type="checkbox" name="myall" onclick="checkAll(this.checked)"/>全選<br>
<input type="checkbox" name="myname" />全選
<input type="checkbox" name="myname" />全選
<input type="checkbox" name="myname" />全選
</form>
實例十一：為表單的聚焦控件設置醒目的樣式
<script type="text/javascript">
function init(){
var f = document.forms[0]; //獲取表單DOM
var elements = f.elements; //獲取所有的控件數組
var str = ''; //拼接字符串
//循環遍歷
for(var i=0; i<elements.length; i++){
var e = elements[i]; //當前的控件
e.onfocus = function(){ //定義聚焦的樣式回調
//修改邊框為紅色
this.style.border = '1px solid red';
}
e.onblur = function(){ //失去焦點的回調
this.style.border = ''; //恢復原有邊框樣式
}
}
}
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。