表单填写示例(通过JavaScript访问DOM)
2024-08-30 10:05:52 224人阅读
自己写就的代码,再烂也是自己的…
实现代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VisitDOMviaJavaScript</title> <style> .form { border: 1px #5e5e5e solid; width: 40%; margin: 10px auto; }
.divTitle { background-color: #9d9d9d; padding: 5px; }
.content { padding: 8px; font-size: 10pt; }
input { margin: 5px auto; }
input[type="button"] { margin: 8px auto;
}
#showTip { margin: 10px auto; display: none; } </style> </head> <body> <div class="form"> <div class="divTitle">请输入如下信息</div> <div class="content"> 姓名:<input type="text" placeholder="请输入你的姓名" id="name"><br/> 性别:<input type="radio" id="genderRadio1" name="gender">男 <input type="radio" id="genderRadio2" name="gender">女<br/> 婚姻状况:<input type="checkbox" value="http://www.mamicode.com/Married" id="CheckboxMerry1">已婚 <input type="checkbox" value="http://www.mamicode.com/Secret" id="CheckboxMerry2">帮我保密<br/> <input type="button" value="http://www.mamicode.com/填写完毕并提交" onclick="btnClick()"> </div> </div> <div class="form" id="showTip"></div> <script> function btnClick() { var inputName = document.getElementById(‘name‘).value; /*姓名栏框为必填的项目*/ if (inputName == "") { alert("请填写姓名"); } else { var inputGender = (genderRadio1.checked) ? "男" : "女"; /*当genderRadio1选中时,性别为男,当genderRadio1没有被勾选时候,性别为女*/ var inputMerry = (CheckboxMerry1.checked && CheckboxMerry2.checked) ? "已婚且帮我保密" : "你猜去!"; document.getElementById(‘showTip‘).style.display = "block"; document.getElementById(‘showTip‘).innerHTML = "<b>你填写的信息如下:</b>" + "<br/>" + inputName + " " + inputGender + " " + inputMerry; } } </script> </body> </html>
|
页面效果
表单填写示例(通过JavaScript访问DOM)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉:
投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。