大白话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>