大白话html第五章HTML5 新增表单元素和属性
大白话html第五章HTML5 新增表单元素和属性
HTML5 给表单带来了很多新的小伙伴，让我们收集用户信息变得更方便、更智能。
新增表单元素
<input type="date">：这个就像一个自带日历的小框框，用户可以直接在里面选择日期，不用手动输入。
<!DOCTYPE html>
<html>
<body>
<form>
<!-- 日期输入框，用户可以选择日期 -->
<label for="birthday">你的生日：</label>
<input type="date" id="birthday" name="birthday">
<input type="submit" value="提交">
</form>
</body>
</html>
<input type="email">：专门用来收集用户邮箱地址的，浏览器会自动检查用户输入的是不是一个合法的邮箱格式。
<!DOCTYPE html>
<html>
<body>
<form>
<!-- 邮箱输入框，浏览器会验证输入的是否为邮箱格式 -->
<label for="email">你的邮箱：</label>
<input type="email" id="email" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>
<input type="url">：当你需要用户输入网址的时候，用这个标签。浏览器会检查输入的是不是一个合法的网址。
<!DOCTYPE html>
<html>
<body>
<form>
<!-- 网址输入框，浏览器会验证输入的是否为网址格式 -->
<label for="website">你的网站：</label>
<input type="url" id="website" name="website">
<input type="submit" value="提交">
</form>
</body>
</html>
新增表单属性
required：这个属性就像一个小监督员，它会要求用户必须填写带有这个属性的表单字段。如果用户没填就提交表单，浏览器会给出提示。
<!DOCTYPE html>
<html>
<body>
<form>
<!-- 姓名输入框，为必填项 -->
<label for="name">你的姓名：</label>
<input type="text" id="name" name="name" required>
<input type="submit" value="提交">
</form>
</body>
</html>
pattern：它就像一个小法官，用正则表达式来判断用户输入的内容是否符合要求。比如要求密码必须包含字母和数字。
<!DOCTYPE html>
<html>
<body>
<form>
<!-- 密码输入框，要求密码包含字母和数字，至少 8 位 -->
<label for="password">设置密码：</label>
<input type="password" id="password" name="password" pattern="(?=.*\d)(?=.*[a-zA-Z]).{8,}" title="密码必须包含字母和数字，且至少 8 位">
<input type="submit" value="提交">
</form>
</body>
</html>
拖放 API
拖放 API 能让你在网页上实现像在桌面操作文件一样的拖动和放置效果。就好比你在网页上有一些小图标，你可以用鼠标把它们拖到别的地方。
代码示例：
<!DOCTYPE html>
<html>
<body>
<!-- 可拖动的元素 -->
<div id="dragMe" draggable="true" ondragstart="drag(event)">
拖动我
</div>
<!-- 放置区域 -->
<div id="dropHere" ondrop="drop(event)" ondragover="allowDrop(event)">
放到这里
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
在这个例子中，draggable="true" 表示这个元素是可以拖动的。当拖动开始时，drag 函数会记录被拖动元素的信息。当元素被放到目标区域时，drop 函数会把元素放到目标区域里。
地理定位 API
地理定位 API 就像一个小导航员，能让网页获取用户的地理位置信息。这在很多应用场景中都很有用，比如地图导航、附近商家推荐等。
代码示例：
<!DOCTYPE html>
<html>
<body>
<button onclick="getLocation()">获取我的位置</button>
<p id="locationInfo"></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("locationInfo").innerHTML = "你的浏览器不支持地理定位。";
}
}
function showPosition(position) {
document.getElementById("locationInfo").innerHTML = "纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
</body>
</html>
当用户点击“获取我的位置”按钮时，浏览器会询问用户是否允许获取地理位置。如果用户允许，就会调用 showPosition 函数，把用户的经纬度信息显示在网页上。
与 CSS、JavaScript 更深入结合
HTML 是网页的骨架，CSS 能让它变得漂亮，JavaScript 能让它动起来。把它们结合得更好，就能做出更酷炫的网页。
实现动态菜单效果
<!DOCTYPE html>
<html>
<head>
<style>
/* 导航菜单样式 */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
background-color: #333;
color: white;
}
nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
display: block;
}
nav ul li ul li a {
color: black;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">产品</a>
<ul>
<li><a href="#">产品 1</a></li>
<li><a href="#">产品 2</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</body>
</html>
在这个例子中，通过 CSS 实现了一个下拉菜单的效果。当鼠标悬停在“产品”菜单上时，会显示出子菜单。
点击按钮改变元素颜色
<!DOCTYPE html>
<html>
<body>
<button onclick="changeColor()">点击改变颜色</button>
<p id="myText">这是一段文本。</p>
<script>
function changeColor() {
var text = document.getElementById("myText");
text.style.color = "red";
}
</script>
</body>
</html>
这里用 JavaScript 实现了一个简单的交互效果，当用户点击按钮时，段落文本的颜色会变成红色。