Several properties in the text box:
value: set the initial text in the text box.
Disabled: the default is false. This text box is disabled when it is true.
readOnly: the default is false. When it is true, the text box cannot be typed and can only be read.
focus(); this method can set the default get focus.
The following is the experiment code:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<input type="" name="i" id="wd" value="" />
<input type="submit" name="" id="" value="Experiment" onsubmit="return submitf()"/>
</form>
<script>
var text=document.getElementsByName("i")[0];
text.value="Please enter text";
text.focus();
function submitf(){
var text=document.getElementsByName("i")[0];
text.readOnly=true;//This is read-only.
text.disabled=true;//Set disabled
console.log(text.readOnly);
return true;
}
//type =password or textarea tag also has value setting default value readonly disabled focus attribute '
</script>
</body>
</html>
//Set disable and read only default get focus when button is pressedSeveral properties in options (including the option type of checkbox radio)
disabled: set whether to disable this option;
Value: get the value of the tag;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="tishi" style="color: red;">
</span>
<form onsubmit="return test()">
<input type="submit" value="Submission"/>
<input type="radio" name="sex" value="0" />male<input type="radio" name="sex" value="1" />female
<input type="checkbox" name="hobby" value="0"/>Football
<input type="checkbox" name="hobby" value="1"/>Basketball
<input type="checkbox" name="hobby" value="2"/>Badminton
</form>
<script>
function test(){
var radios=document.getElementsByName("sex");
/*for (var i=0;i<radios.length;i++) {
var radio=radios[i];
radio.disabled=true;//Prohibit
console.log(radio.checked+","+radio.value);//checked Is the display selected
}*/
//For loop outputs checked for each option and value for each option
var checkboxs=document.getElementsByName("hobby");
var hobby=checkboxs[0];
hobby.disabled=true;
console.log(hobby.value);
//Disable an option and output its value
/*for (var i = 0; i < checkboxs.length; i++) {
var hobby=checkboxs[i];
hobby.disabled=true;//disabled Property owned disabled
console.log(hobby.checked+","+hobby.value);
}*/
//For loop outputs checked for each option and value for each option
</script>
</body>
</html>
Several properties in the drop-down list
Use document.getElementsByName or class name to get the options in the drop-down list by giving a name or class to select (note the problem of subscript because there may be more than one select) (id is also OK)
The length property can be used to get the number of options
Use the selectedIndex property to get the location of the selected option
Get the contents of the package in the corresponding option tag with the value attribute
The following options are arrays containing all the tags in the drop-down list
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="tishi" style="color: red;">
</span>
<form onsubmit="return test()">
<input type="submit" value="Submission"/>
<select name="g" class="g" id="g">
<option >first grade</option>
<option >second grade</option>
<option >Grade three</option>
<option >fourth grade</option>
</select>
</form>
<script>
function test(){
var selects=document.getElementById("g");
console.log(selects.length);
console.log(selects.selectedIndex);//What's inside is the chosen location
var options=selects.options;//option save the contents of this drop-down list
console.log(options[selects.selectedIndex].value);
for(var i=0;i<options.length;i++)//Default value is something in option
{
var option=options[i];
console.log(option.value);
}
for(var i=0;i<options.length;i++)//The option array contains the option tag in the drop-down list
{
var option=options[i];
console.log(option);
}
options[0].disabled=true;//You can set disable in the drop-down list
return false;
}
</script>
</body>
</html>