The content shared by this article is about some commonly used html object attributes suitable for beginners to learn. This website includes some commonly used html object attributes suitable for beginners to learn. It explains the relevant methods and knowledge of the application methods and knowledge of the object attributes of beginners in the article. Welcome to give you some support and help in this regard! The following are the details:
What this article shares with you is about some commonly used html object properties suitable for beginners to learn.
Form ObjectForm object method
reset() : Reset all input elements of the form to their default values.
submit() : Submit the form.
Text objectText object properties
disabled: Sets or returns whether the text field should be disabled.
readOnly: Sets or returns whether the text field should be read-only.
value: Sets or returns the value attribute of the text field.
Text object method
focus() : Set focus on the text field.
Example
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> </head> <body> <form> <input name = wd /> <input type=submit value=Baidu 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 = magic;// text.readOnly = true;// console.log(text.readOnly);// text.disabled = true; console.log(text.disabled); text.focus(); } //Tags with type text, password, and textarea have value, focus, disabled, and readOnly </script> </body></html> Radio ObjectsRadio Object Properties
checked: Sets or returns the status of the radio button.
disabled: Sets or returns whether to disable the radio button.
value: Sets or returns the value of the radio button's value property.
Checkbox objectCheckbox object properties
checked: Sets or returns whether checkbox should be selected.
disabled: Set or return whether checkbox should be disabled.
value: Sets or returns the value of the checkbox value attribute
Select objectSelect object collection
options[]: Returns an array containing all the options in the drop-down list.
Select object properties
disabled: Sets or returns whether the drop-down list should be disabled.
length: Returns the number of options in the drop-down list.
selectedIndex: Sets or returns the index number of the selected item in the drop-down list.
Select object method
add() : Add an option to the drop-down list.
remove() : Remove an option from the drop-down list.
Option objectOption object construction method
Option(text,value): Create an Option object through text and value values
Option Object Properties
selected: Sets or returns the value of the selected property.
text: Sets or returns the plain text value of an option.
value: Sets or returns the value sent to the server.
Select object and Option object example <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> </head> <body> <select id=grade> <option value=1>First grade</option> <option value=2>Second grade</option> <option value=3>Second grade</option> <option value=4>Fourth grade</option> </select> <input type=button onclick=text() value=button/button/> <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(5th grade, 5); select.add(option); select.remove(0); } </script> </body></html> Registration form <!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>Username: </td> <td><input id=name placeholder=Please enter the username onblur=check_name() ></td> </tr> <tr> <td>Password: </td> <td><input id=pw type=password placeholder=Please enter the password onblur=check_pw()></td> </tr> <tr> <td>Confirm password: </td> <td><input id=pw-check type=password placeholder=Please enter the confirmation password/></td> </tr> </table> <input type=radio name=sex value=0/> Male<input type=radio name=sex value=1/> Female<br /> <input type=checkbox name=hobby value=0/> Badminton<input type=checkbox name=hobby value=1/> Basketball<input type=checkbox name=hobby value=1/> Table tennis<input type=checkbox name=hobby value=3/> Football<br /> <select id=grade> <option value=1>Freshman</option> <option value=2>Soul</option> <option value=3>Junior</option> <option value=4>Senior</option> </select> <br /> <td><input type=reset value=Reset/</td> <td><input type=submit value=Register/</td> </form> <script> //Using the $() function can save code amount 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 = The user name cannot exceed 15 characters, please re-enter! ; n.focus(); return false; } if(n.value.length==0){ msg.innerHTML = The user name cannot be empty, please re-enter! ; n.focus(); return false; } if(w.value.length>12){ msg.innerHTML = The password cannot exceed 12 characters, please re-enter! ; w.focus(); return false; } if(w.value.length==0){ msg.innerHTML = The password cannot be empty, please re-enter! ; w.focus(); return false; } if(w.value!=c.value){ msg.innerHTML = Password is wrong, please re-enter! ; 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 = The user name cannot exceed 15 characters, please re-enter! ; n.value = ; n.focus(); } else if(n.value.length==0){ msg.innerHTML = The user name cannot be empty, please re-enter! ; 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 = The password cannot exceed 12 characters, please re-enter! ; w.value = ; w.focus(); } else if(w.value.length==0){ msg.innerHTML = Password does not match, please re-enter! ; w.focus(); } else { msg.innerHTML = ; } } </script> </body></html> Image objectImage object properties
src: Set or return the URL of the image.
The content of the introduction to some commonly used html object properties suitable for beginners to learn is over here. You can bookmark the URL of this page http://www.VeVb.com/web/a/2018090496002.shtml for easy access next time.