javascript表單控件實例講解
更新時間：2016年09月13日 15:39:59 作者：gemingzhu
這篇文章主要為大家詳細介紹了javascript表單控件實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享js表單控件多個實例講解，供大家參考，具體內容如下
實例一：遍歷表單的所有控件
<script type="text/javascript">
//遍歷表單的所有控件
function getValues(){
var f = document.forms[0]; //獲取表單DOM
var elements = f.elements; //獲取所有的控件數(shù)組
var str = ''; //拼接字符串
//循環(huán)遍歷
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>
實例三：獲取表單內文本框的個數(shù)
<script type="text/javascript">
//獲取表單內文本框的個數(shù)
function getInputCount(){
var f = document.forms[0]; //獲取表單DOM
var elements = f.elements; //獲取所有的控件數(shù)組
var count = 0; //統(tǒng)計總數(shù)
//循環(huán)遍歷
for(var i=0; i<elements.length; i++){
//當前的控件
var e = elements[i];
//是否為文本框
if(e.tagName == 'INPUT' && e.type == 'text'){
count++; //總數(shù)自加
}
}
//用提示框展示結果
alert("文本框一共有：" + count + "個");
}
</script>
實例四：修改表單的提交方法
method 屬性規(guī)定在提交表單時所用的 HTTP 方法（GET 或 POST），使用 GET 時，表單數(shù)據(jù)在頁面地址欄中是可見的，POST 的安全性更加，因為在頁面地址欄中被提交的數(shù)據(jù)是不可見的。
<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>
實例五：動態(tài)指定表單的動作屬性
action 屬性定義在提交表單時執(zhí)行的動作。
向服務器提交表單的通常做法是使用提交按鈕。
通常，表單會被提交到 web 服務器上的網頁。
如果省略 action 屬性，則 action 會被設置為當前頁面。
<script type="text/javascript">
//動態(tài)指定表單的動作屬性
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>
實例六：動態(tài)選擇聚焦的控件
<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>
實例七：初始化表單里的所有控件的值到最初狀態(tài)
<script type="text/javascript">
//初始化表單里的所有控件的值到最初狀態(tài)
function init(){
var f = document.forms[0]; //獲取表單DOM
f.reset(); //使用reset()函數(shù)
}
</script>
實例八：批量為所有的表單控件加一個說明
<script type="text/javascript">
//批量為所有的表單控件加一個說明
function batchComment(){
var f = document.forms[0]; //獲取表單DOM
var children = f.childNodes; //獲取表單的所有子元素
var newArr = []; //定義新的元素數(shù)組
var j = 0; //為新元素數(shù)組定義下標
//循環(huán)遍歷子元素
for(var i=0; i<children.length; i++){
var e = children[i]; //當前子元素
newArr[j++] = e; //添加到新數(shù)組里
//判斷是否為控件
if(e.tagName == 'INPUT' || e.tagName == 'SELECT'){
//添加一個文字說明的節(jié)點
var text = document.createTextNode(" 此項必填");
newArr[j++] = text; //為新數(shù)組加入節(jié)點
}
}
//清空現(xiàn)有的表單內容
f.innerHTML = '';
//批量加上說明
for(var i=0; i<newArr.length; i++){
//把老的元素和說明節(jié)點加入form
f.appendChild(newArr[i]);
}
}
</script>
實例九：使用隱藏控件為表單添加參數(shù)
<script type="text/javascript">
//展示表單參數(shù)的函數(shù)
function showParams(){
//設置隱藏變量的值，這個值也可以通過標簽的value指定
document.forms[0].myhidden.value = '我是隱藏的';
//定義字符拼接變量
var str = '表單將提交的參數(shù)包括：';
//拼接年份參數(shù)
str += '\n年份:' + document.forms[0].myyear.value;
//拼接姓名參數(shù)
str += '\n姓名:' + document.forms[0].myname.value;
//拼接隱藏參數(shù)
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">
//勾選所有的函數(shù)
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; //獲取所有的控件數(shù)組
var str = ''; //拼接字符串
//循環(huán)遍歷
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了js+css實現(xiàn)計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了javascript實現(xiàn)自由編輯圖片代碼詳解，在當下的的前端項目中，圖片功能可以說是非常常見的，圖片的展示、圖片的裁剪編輯、圖片的上傳等，那么我們的項目便來了個需求。,需要的朋友可以參考下2019-06-06
下面小編就為大家?guī)硪黄獪\談JavaScript 覆蓋原型以及更改原型。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨過來看看吧2016-08-08
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)豎排slider效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
用js實現(xiàn)的可以讓div慢慢上升效果實現(xiàn)代碼，喜歡的朋友可以參考下2012-10-10
程序ColorGrads的作用是通過StartColor和EndColor生成顏色梯度集合。2009-03-03
這篇文章主要介紹了JavaScript移除數(shù)組內重復元素的方法,實例分析了javascript遍歷數(shù)組及刪除等操作的相關技巧,需要的朋友可以參考下2015-03-03
和同事討論js時，我說較為理想的狀態(tài)是，把js當一把好用的匕首，隨手拿來，捅一刀子就走。話雖如此，但現(xiàn)實生活中大部分時候的情況是不理想的。2009-06-06
js使用方法小結，比較不錯，無論是新手，還是老手都是不錯的。2009-05-05
分包指的是把一個完整的小程序項目，按照不同的需求劃分為不同的子包，在構建時打包成不同的分包，用戶在瀏覽時按需加載，這篇文章主要介紹了uni-app做微信小程序的分包處理,需要的朋友可以參考下2023-02-02