大白话html第五章HTML5 新增表单元素和属性

大白话html第五章HTML5 新增表单元素和属性

HTML5 给表单带来了很多新的小伙伴,让我们收集用户信息变得更方便、更智能。

新增表单元素
  • <input type="date">:这个就像一个自带日历的小框框,用户可以直接在里面选择日期,不用手动输入。
html 复制代码
<!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">:专门用来收集用户邮箱地址的,浏览器会自动检查用户输入的是不是一个合法的邮箱格式。
html 复制代码
<!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">:当你需要用户输入网址的时候,用这个标签。浏览器会检查输入的是不是一个合法的网址。
html 复制代码
<!DOCTYPE html>
<html>
<body>

  <form>
    <!-- 网址输入框,浏览器会验证输入的是否为网址格式 -->
    <label for="website">你的网站:</label>
    <input type="url" id="website" name="website">
    <input type="submit" value="提交">
  </form>

</body>
</html>
新增表单属性
  • required:这个属性就像一个小监督员,它会要求用户必须填写带有这个属性的表单字段。如果用户没填就提交表单,浏览器会给出提示。
html 复制代码
<!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:它就像一个小法官,用正则表达式来判断用户输入的内容是否符合要求。比如要求密码必须包含字母和数字。
html 复制代码
<!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 能让你在网页上实现像在桌面操作文件一样的拖动和放置效果。就好比你在网页上有一些小图标,你可以用鼠标把它们拖到别的地方。

代码示例

html 复制代码
<!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 就像一个小导航员,能让网页获取用户的地理位置信息。这在很多应用场景中都很有用,比如地图导航、附近商家推荐等。

代码示例

html 复制代码
<!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 能让它动起来。把它们结合得更好,就能做出更酷炫的网页。

实现动态菜单效果
html 复制代码
<!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 实现了一个下拉菜单的效果。当鼠标悬停在"产品"菜单上时,会显示出子菜单。

点击按钮改变元素颜色
html 复制代码
<!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 实现了一个简单的交互效果,当用户点击按钮时,段落文本的颜色会变成红色。

相关推荐
喝拿铁写前端6 分钟前
智能系统的冰山结构
前端
无奈何杨1 小时前
扣子coze的AI工作流搭建技术,开源项目FlowGram流程搭建引擎
前端
ElasticPDF-新国产PDF编辑器1 小时前
Angular 项目 PDF 批注插件库在线版 API 示例教程
前端·pdf·angular.js
6武71 小时前
Vue 数据传递流程图指南
前端·javascript·vue.js
jakeswang2 小时前
查询条件与查询数据的ajax拼装
前端·ajax
samuel9182 小时前
axios取消重复请求
前端·javascript·vue.js
三天不学习2 小时前
JiebaAnalyzer 分词模式详解【搜索引擎系列教程】
前端·搜索引擎·jiebaanalyzer
滿2 小时前
Vue 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js
安分小尧2 小时前
[特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
前端·javascript·react.js·typescript·excel