<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.divFrame{
width: 260px;
border: 1px solid #666;
font-size: 10pt;
}
.divTitle{
background-color: #eee;
padding: 5px;
}
.divContent{
padding: 8px;
font-size: 9pt;
}
.divTip{
width: 244px;
border: 1px solid #666;
padding: 8px;
font-size: 9pt;
margin-top: 5px;
display: none;
}
.txtCss{
border: 1px solid #ccc;
}
.divBtn{padding-top:5px}
.divBtn .btnCss{border: 1px solid #535353;width: 60px}
</style>
<script>
function btnClick(){
var oTxValue=document.getElementById("text1").value;
var ORdoValue=(Radio1,checked)?"男":"女";
var OChkValue=(checkbox1.checked)?"已婚":"未婚";
document.getElementById("divTip").style.display="block";
document.getElementById("divTip").innerHTML=oTxValue+"<br>"+ORdoValue+"<br>"+OChkValue;
}
</script>
</head>
<body>
<title>控制DOM对象</title>
<div class="divFrame">
<div class="divTitle">请输入如下信息</div>
<div class="divContent">
姓名：<input type="text1" type="text" class="txtCss"><br>
性别：<input id="Radio1" name="rdoSex" type="radio" value="男">男
<input id="Radio2" name="rdoSex" type="radio" value="女" >女 <br>
婚否：<input id="Checkbox1" type="Checkbox" name="hf" value="已婚">已婚
<input id="Checkbox2" type="Checkbox" name="hf" value="未婚">未婚
<div class="divBtn">
<input id="button1" type="button" value="提交" class="btnCss" onclick="btnClick();">
</div>
</div>
</div>
<div id="divTip" class="divTip"></div>
</body>
</html>
网友评论