溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本文實例講述了JS document form表單元素操作。分享給大家供大家參考，具體如下：
<html>
<head>
<title>form表單操作</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
function testForm(){
// 獲取form對象 方法一,通過id,比較普遍的方法
var fm=document.getElementById("fm");
alert(fm); //輸出fm的類型[object HTMLFormElement]
alert(fm.length); //輸出所用的表單項(表單類型參考Lgin.html)輸出值為8
// 獲取form對象 方法二，通過name,算是一個特殊的的方法
var frm=document.frm;
alert(frm);
alert(frm.length);
alert(fm===frm); //返回值為true,其無論是類型還是內(nèi)容都是一樣的，其本來就是同一個對象
}
function testOper(){
var fm=document.getElementById("fm");
// 輸出表單的元素
// alert(fm.elements); //顯示表單元素的類型[object HTMLFormControlsCollection]
// alert(fm.elements.length); //顯示表單元素的個數(shù)
// 利用表單的action屬性進行訪問地址的動態(tài)改變
fm.action="http://www.baidu.com";
alert(fm.action); //返回了action的值
// 利用表單的submit屬性使普通的按鈕也具有提交功能
// fm.submit(); //可以直接訪問修改后的網(wǎng)址
// alert(fm.submit()); //執(zhí)行了submit操作并且返回了undefined
}
function testCheck(){
// 獲取checkbox的對象
var fav=document.getElementsByName("fav");//通過Id無法獲取，但是通過Name
// 實現(xiàn)選中遍歷打印操作
for(var i=0;i<fav.length;i++){
if(fav[i].checked){ //
alert(fav[i].value); //其中fav沒有值，但是fav.value有值，無法打印fav,但是可以打印fav.value
}
}
}
// 實現(xiàn)全選操作
function checkBoxselect(){
var fav=document.getElementsByName("fav");
for(var i=0;i<fav.length;i++){
fav[i].checked=true;
}
}
// 實現(xiàn)清空選擇操作
function checkBoxclear(){
var fav=document.getElementsByName("fav");
for(var i=0;i<fav.length;i++){
fav[i].checked=false;
}
}
// 實現(xiàn)反選操作
function checkBoxchange(){
var fav=document.getElementsByName("fav");
for(var i=0;i<fav.length;i++){ //=是賦值符==和===才是判斷符
if(fav[i].checked){
fav[i].checked=false;
}else{
fav[i].checked=true;
}
}
}
function selectoper(){
// 獲取單選框?qū)ο? var sel=document.getElementById("Animation");
// 獲取單選框內(nèi)的選項
var os=sel.options;
for(var i=0;i<os.length;i++){
if(os[i].selected){
alert(os[i].value+":"+os[i].text);
}
}
}
</script>
</head>
<body>
<h4>form表單操作</h4>
<!--添加readonly表示標(biāo)簽只能讀，添加disabled標(biāo)簽表示該標(biāo)簽不能進行任何操作-->
<input type="button" name="" id="" value="測試form表單" onclick="testForm()" />
<input type="button" name="" id="" value="測試form表單基本操作" onclick="testOper()" />
<input type="button" name="" id="" value="測試form表單checkbox" onclick="testCheck()" />
<input type="button" name="" id="" value="測試form表單checkbox全擇" onclick="checkBoxselect()" />
<input type="button" name="" id="" value="測試form表單checkbox清空選擇" onclick="checkBoxclear()" />
<input type="button" name="" id="" value="測試form表單checkbox反選" onclick="checkBoxchange()" />
<input type="button" name="" id="" value="測試form表單select操作" onclick="selectoper()" />
<hr />
<form action="#" method="get" id="fm" name="frm" target="_blank">
<b>用戶名</b><input type="text" name="wd" id="" value="" disabled="disabled" /><br /><br />
<b>密碼</b><input type="password" name="pwd" id="" value="" readonly="readonly"/><br />
<br />
愛好 <br />
動漫<input type="checkbox" name="fav" id="fav" value="動漫" checked="false"/><br />
游戲<input type="checkbox" name="fav" id="fav" value="游戲" checked="false"/><br />
電影<input type="checkbox" name="fav" id="fav" value="電影" checked=""true/><br />
敲代碼<input type="checkbox" name="fav" id="fav" value="敲代碼" checked="false"/><br />
<br /><br />
<select name="" id="Animation">
<option value="">clannad</option>
<option value="">花開物語</option>
<option value="">未聞花名</option>
<option value="">四月是你的謊言</option>
</select>
<br /><br />
<input type="submit" name="" id="" value="登錄" />
</form>
</body>
</html>
運行效果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼