table of Contents
One, the text box
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="name" />
<script>
document.getElementById("name").focus();//设置焦点
function t1(){
var element = document.getElementById("name");
console.log(element.value);//获取输入值
element.value="Jimmy";//默认设置
element.readOnly=true;//设置后只读
element.disabled=true;//自动设置后禁用
}
</script>
<input type="button" value="测试" onclick="t1()" />
</body>
</html>
operation result:
Any value can be entered, and the text box will be displayed as Jimmy by default.
element.readOnly=true;//Read only after setting, the text box is not operable
element.disabled=true;//Disable the text box after setting
Second, the password box
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="password" id="password"/>
<script>
document.getElementById("password").focus();//设置焦点
function t1(){
var element = document.getElementById("password");
console.log(element.value);//获取输入值
element.value="Jimmy";//默认设置
element.readOnly=true;//设置后只读
//element.disabled=true;//自动设置后禁用
}
</script>
<input type="button" value="测试" onclick="t1()" />
</body>
</html>
The running result is similar to the text box
Three, text field
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<textarea id="summary"></textarea>
<script>
document.getElementById("summary").focus();//设置焦点
function t1(){
var element = document.getElementById("summary");
console.log(element.value);//获取输入值
element.value="Jimmy";//默认设置
element.readOnly=true;//设置后只读
//element.disabled=true;//自动设置后禁用
}
</script>
<input type="button" value="测试" onclick="t1()" />
</body>
</html>
The running result is similar to the text box
Fourth, the hidden box
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com/s">
<input type="hidden" name="wd" id="name" value="123456"/>
<input type="submit" value="登陆"/>
</form>
<script>
var element = document.getElementById("name");
element.disabled=true;//无效，因为hidden隐藏框没有disabled属性
</script>
</body>
</html>
operation result:
Except element.disabled=true is invalid, because the hidden box has no disabled attribute.
The rest is similar to the text box
Five, single selection box
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女
<input type="button" value="测试" onclick="t3()" />
<script>
function t3(){
//获取用户选中的值
var elements = document.getElementsByName("sex");
for(var i=0;i<elements.length;i++){
var element = elements[i];
console.log(element.checked+","+element.value);//checked当前选中，value获取值
}
}
document.getElementsByName("sex")[1].checked=true;
document.getElementsByName("sex")[1].disabled=true;//禁用
</script>
</body>
</html>
Code format:
getElements is plural
Use the traversal method to get the value of the selected user.
The forbidden format has also changed, and the forbidden element can be specified [i].
The format of the default element has also changed, checked=true;
Six, check box
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" name="hobby" value="0"/>篮球
<input type="checkbox" name="hobby" value="1"/>足球
<input type="checkbox" name="hobby" value="2"/>乒乓球
<input type="button" value="测试" onclick="t4()" />
<script>
function t4(){
//获取用户选中的值
var elements = document.getElementsByName("hobby");
for(var i=0;i<elements.length;i++){
var element = elements[i];
console.log(element.checked+","+element.value);//checked当前选中，value获取值
}
}
document.getElementsByName("hobby")[1].checked=true;
document.getElementsByName("hobby")[1].disabled=true;//禁用
</script>
</body>
</html>
Code format:
Similar to radio box
Seven, drop-down list
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="province">
<option value="">---请选择---</option>
<option value="001">北京市</option>
<option value="002">湖南省</option>
<option value="003">河南省</option>
</select>
<input type="button" value="测试" onclick="t5()" />
<script>
function t5(){
//获取选中的下拉项
var element = document.getElementById("province");
var options = element.options;
for(var i=0;i<options.length;i++){
var option = options[i];
console.log(option.selected+","+option.value);//checked当前选中，value获取值
}
}
document.getElementById("province").options[1].selected=true;//默认
document.getElementById("province").disabled=true;//禁用
</script>
</body>
</html>
Code format:
getElements is singular
selected instead of checked
The rest is similar to the radio button