今日所学内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="form">
<p>姓名：<input type="text" id="name" /></p>
<p>手机：<input type="text" id="tel" /></p>
<p>
密码：<input type="password" id="pwd" /><input
type="button"
id="toggleType"
value="显示密码"
/>
</p>
<p>
性别：<input type="radio" name="sex" id="sex"/>男<input
type="radio"
name="sex" id="sex"
/>女 <input type="radio" name="sex" id="sex" />保密
</p>
<p>
爱好：<input type="checkbox" class="hob" name="hobs" />打球
<input type="checkbox" class="hob" name="hobs" />唱歌
<input type="checkbox" class="hob" name="hobs" />跳舞
<input type="checkbox" class="hob" name="hobs" />睡觉
<input type="checkbox" class="hob" name="hobs" />打游戏
<input type="checkbox" class="hob" name="hobs" />敲代码
</p>
<p>简介：<textarea id="desc" cols="30" rows="10"></textarea></p>
<p>
<button id="btn">提交</button>
<!-- <input type="button" id="check" value="单选复选" /> -->
</p>
</div>
<!-- 弹窗--蒙版层 -->
<div id="cover">
<div id="msgBox">
<h4>提示标题</h4>
<p id="msg">提示成功或失败</p>
<input type="button" id="closeBtn" value="关闭" />
</div>
</div>
<script>
//获取dom节点
const userName = document.querySelector("#name");
const hobs = document.querySelectorAll(".hob");
const pwd = document.querySelector("#pwd");
const tel = document.querySelector("#tel");
const sex = document.querySelectorAll("#sex");
const btn = document.querySelector("#btn");
const desc = document.querySelector("#desc");
const cover = document.querySelector("#cover");
const msgBox = document.querySelector("#msgBox");
const msg = document.querySelector("#msg");
const closeBtn = document.querySelector("#closeBtn");
const toggleType = document.querySelector("#toggleType");
</script>
</body>
</html>
|
