這篇文章給大家分享的內容是關於適合初學者學習的一些常用html對象屬性的應用方法介紹本站收錄這篇文章適合初學者學習的一些常用html對象屬性的應用方法介紹，詳細解說文章中相關初學者對象屬性應用方法技術與知識，歡迎能給大家一些在這方面的支持和幫助！下面是詳細內容：
這篇文章給大家分享的內容是關於適合初學者學習的一些常用html對象屬性的應用方法介紹
Form 對象Form 對象方法
reset() ：把表單的所有輸入元素重置為它們的默認值。
submit() ：提交表單。
Text 對象Text 對象屬性
disabled ：設置或返回文本域是否應被禁用。
readOnly ：設置或返回文本域是否應是只讀的。
value ：設置或返回文本域的value 屬性的值。
Text 對象方法
focus() :在文本域上設置焦點。
示例
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> </head> <body> <form> <input name = wd /> <input type=submit value=百度一下onclick=sub()> </form> <script> var form = document.getElementsByTagName(form)[0]; var text = document.getElementsByName(wd)[0]; text.focus(); function sub(){ var text = document.getElementsByName(wd)[0];// text.value = 魔道;// text.readOnly = true;// console.log(text.readOnly);// text.disabled = true; console.log(text.disabled); text.focus(); } //type為text、password、textarea的標籤均有value、focus、disabled、readOnly </script> </body></html> Radio 對象Radio 對象屬性
checked ：設置或返回單選按鈕的狀態。
disabled ：設置或返回是否禁用單選按鈕。
value ：設置或返回單選按鈕的value 屬性的值。
Checkbox 對象Checkbox 對象屬性
checked ：設置或返回checkbox 是否應被選中。
disabled ：設置或返回checkbox 是否應被禁用。
value ：設置或返回checkbox 的value 屬性的值
Select 對象Select 對象集合
options[] ：返回包含下拉列表中的所有選項的一個數組。
Select 對象屬性
disabled ：設置或返回是否應禁用下拉列表。
length ：返回下拉列表中的選項數目。
selectedIndex ：設置或返回下拉列表中被選項目的索引號。
Select 對象方法
add() ：向下拉列表添加一個選項。
remove() ：從下拉列表中刪除一個選項。
Option 對象Option 對象構造方法
Option(text,value) ：通過text和value值創建Option對象
Option 對象屬性
selected ：設置或返回selected 屬性的值。
text ：設置或返回某個選項的純文本值。
value ：設置或返回被送往服務器的值。
Select對象及Option對象示例<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> </head> <body> <select id=grade> <option value=1>一年級</option> <option value=2>二年級</option> <option value=3>三年級</option> <option value=4>四年級</option> </select> <input type=button onclick=text() value=按鈕/> <script type=text/javascript> function text(){ var select = document.getElementById(grade); console.log(select.disabled); console.log(select.length); console.log(select.selectedIndex); console.log(~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`) var options = select.options; console.log(options[select.selectedIndex].value); console.log(@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@) for(var i=0;i<options.length;i++){ console.log(options[i].value); console.log(options[i].selected); console.log(options[i].text); } var option = new Option(五年級,5); select.add(option); select.remove(0); } </script> </body></html>註冊表<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> </head> <body> <span style=color:red; id=wrong-massage></span><br /> <form onsubmit=return check()> <table> <tr> <td>用戶名：</td> <td><input id=name placeholder=請輸入用戶名onblur=check_name() ></td> </tr> <tr> <td>密碼：</td> <td><input id=pw type=password placeholder=請輸入密碼onblur=check_pw()></td> </tr> <tr> <td>確認密碼：</td> <td><input id=pw-check type=password placeholder=請輸入確認密碼/></td> </tr> </table> <input type=radio name=sex value=0/>男<input type=radio name=sex value=1/>女<br /> <input type=checkbox name=hobby value=0/>羽毛球<input type=checkbox name=hobby value=1/>籃球<input type=checkbox name=hobby value=2/>乒乓球<input type=checkbox name=hobby value=3/>足球<br /> <select id=grade> <option value=1>大一</option> <option value=2>大二</option> <option value=3>大三</option> <option value=4>大四</option> </select> <br /> <td><input type=reset value=重置/></td> <td><input type=submit value=註冊/></td> </form> <script> //使用$()函數可節省代碼量function $(id){ return document.getElementById(id); } function check(){ var n = document.getElementById(name); var w = document.getElementById(pw); var msg = document.getElementById(wrong-massage); var c = document.getElementById(pw-check); if(n.value.length>12){ msg.innerHTML = 用戶名不能超過15個字符，請重新輸入！ ; n.focus(); return false; } if(n.value.length==0){ msg.innerHTML = 用戶名不能為空，請重新輸入！ ; n.focus(); return false; } if(w.value.length>12){ msg.innerHTML = 密碼不能超過12個字符，請重新輸入！ ; w.focus(); return false; } if(w.value.length==0){ msg.innerHTML = 密碼不能為空，請重新輸入！ ; w.focus(); return false; } if(w.value!=c.value){ msg.innerHTML = 密碼錯誤，請重新輸入！ ; c.focus(); return false; } var sex = document.getElementsByName(sex); var hobby = document.getElementsByName(hobby); for(var i=0;i<sex.length;i++){ sex[i].disabled=true; console.log(sex[i].checked+ +sex[i].value); } console.log(~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~) for(var i=0;i<hobby.length;i++){ hobby[i].checked = true; console.log(hobby[i].checked+ +hobby[i].value); } console.log(~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~) var select = document.getElementById(grade); var options = select.options; console.log(select.length); console.log(select.selectedIndex); console.log(options[select.selectedIndex].value); for(var i=0;i<options.length;i++){ var option = options[i]; console.log(option.value) select.disabled = true; } return false; } function check_name(){ var n = document.getElementById(name); var msg = document.getElementById(wrong-massage); if(n.value.length>12){ msg.innerHTML = 用戶名不能超過15個字符，請重新輸入！ ; n.value = ; n.focus(); } else if(n.value.length==0){ msg.innerHTML = 用戶名不能為空，請重新輸入！ ; n.focus(); } else{ msg.innerHTML = ; } } function check_pw(){ var w = document.getElementById(pw); var msg = document.getElementById(wrong-massage); if(w.value.length>12){ msg.innerHTML = 密碼不能超過12個字符，請重新輸入！ ; w.value = ; w.focus(); } else if(w.value.length==0){ msg.innerHTML = 密碼不匹配，請重新輸入！ ; w.focus(); } else { msg.innerHTML = ; } } </script> </body></html> Image 對象Image 對象屬性
src：設置或返回圖像的URL。
關於適合初學者學習的一些常用html對象屬性的應用方法介紹的內容寫到這裡就結束啦，您可以收藏本頁網址http://www.VeVb.com/web/a/2018090496002.shtml方便下次再訪問哦。