2025年5月1日大约 2 分钟
示例代码
<!doctype html>
<html>
<head>
<title>表单节点的获取</title>
<meta charset='utf-8'/>
<style type="text/css">
table,td{border-collapse:collapse;}
td{padding:10px;}
div{margin-top:40px;}
</style>
</head>
<body>
<center>
<div>
<form action="" method ='post' enctype="multipart/form-data" >
<table border='1'>
<tr>
<td>用户名:</td>
<td>
<input type='text' name='username'/>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type='password' name='password'/>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type='password' name='repassword' />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type='radio' name='sex' value='男' checked="checked"/>男
<input type='radio' name='sex' value='女' />女
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td>
<input type='checkbox' name='hobby[]' value='篮球' checked="checked"/>篮球
<input type='checkbox' name='hobby[]' value='足球' checked="checked"/>足球
<input type='checkbox' name='hobby[]' value='排球' />排球
<input type='checkbox' name='hobby[]' value='乒乓球' />乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select name='city'>
<option value='北京'>北京</option>
<option value='天津' selected="selected">天津</option>
<option value='上海'>上海</option>
<option value='重庆'>重庆</option>
</select>
</td>
</tr>
<tr>
<td>个人介绍:</td>
<td>
<textarea name='intro' style='resize:none'>hello world</textarea>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type='file' name='profile' />
</td>
</tr>
<tr>
<td colspan='2' style='text-align:center'>
<input type='submit' value="提交" />
<input type='reset' value="重置"/>
<button>点击</button>
</td>
</tr>
</table>
</form>
</div>
</center>
<script type="text/javascript">
//设置和获取输入框的值
//获取表单
var forms = document.forms;
// var eles = forms[0].elements;
// console.log(eles);
// eles[0].style.border = 'solid 2px blue';
var uname = forms[0].username;
/*uname.onfocus = function()
{
this.style.border = 'solid 2px blue';
}
*/
// uname.value = 'ilikeyou';
// console.log(uname.value);
//获取单选框
var sex = forms[0].sex;
// console.log(sex);
for (var i = 0; i < sex.length; i++) {
//var che = sex[i].getAttribute('checked');
//console.log(che);
/*if(che == 'checked'){
console.log(sex[i].value);
}*/
//----------------------------------------
var che = sex[i].checked; //返回的是一个boolean
// console.log(che);
if(che){
// console.log(sex[i].value);
}
};
//复选框
var ches = document.getElementsByName('hobby[]');
// console.log(ches);
for (var i = 0; i < ches.length; i++) {
//
var cs = ches[i].checked;
if(cs){
console.log(ches[i].value);
}
};
//文本域的值
var texts = document.getElementsByName('intro');
// console.log(texts[0].value);
// console.log(texts[0].innerHTML);
//下拉框
var citys = document.getElementsByName('city');
// console.log(citys[0].value);
// citys[0].value='北京';
var ops = document.getElementsByTagName('option');
for (var i = 0; i < ops.length; i++) {
var sels = ops[i].selected;
if(sels){
console.log(ops[i].innerHTML);
}
};
//事件绑定
//1.属性名 属性值
<button onclick = 'func(this)'>点击</button>
function func(obj)
{
obj.style.border = 'solid 2px blue';
}
//2
buts.onclick = function()
{
}
//3.addEventListener('click', function(){})
</script>
</body>
</html>