前端表单小作业

不想成小白

已于 2022-11-15 15:06:16 修改

阅读量211

点赞数

文章标签：前端 javascript html

于 2022-11-12 15:35:53 首次发布

本文链接：https://blog.csdn.net/qq_63167889/article/details/127821045

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<li><label>姓名：</label>
<input id="username" type="text" name="" value="">
</li>
<li><label>性别：</label>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</li>
<li><label>爱好：</label>
<input type="checkbox" name="hobby" value="看书">看书
<input type="checkbox" name="hobby" value="绘画">绘画
<input type="checkbox" name="hobby" value="打篮球">打篮球
</li>
<li><label>年级：</label>
<select name="" id="grade">
<option value="大一">大一</option>
<option value="大二">大二</option>
<option value="大三">大三</option>
<option value="大四">大四</option>
</select>
</li>
<li><label>提交不同的元素值：</label>
<input type="button" name="" value="获取表单元素的值" οnclick="getVal()">
</li>

// var grade=document.getElementById('grade') //获取节点
// var value=grade.value //获取当前选中的value值
// var options=grade.options; //获取所有option的节点对象
// alert("年级:"+grade.value)
// var index = grade.selectedIndex //获取当前select标签下option的索引值
// var value1=options[0].value
// for(var i=0;i<options.length;i++){
// var text1=options[i].innerText
// console.log(text1)
// console.log(options)
// }
// alert(options[index].innerText)
// var text1=options[0].innerText
// console.log(value)
// console.log(options)
// console.log(value1)
// console.log(text1)

// var sex=document.getElementsByName('sex')
// for(var i=0;i<sex.length;i++){
// if(sex[i].checked){
// alert(sex[i].value)
// }
// }
str="";
var text=document.getElementById('username');
str="姓名: "+text.value;