HTML 基础- 4个实例

作者likuolei

以下是关于 HTML 基础的四个实例，结合中文讲解，旨在帮助理解 HTML 的核心概念和常见使用场景。每个实例都包含代码、详细说明以及与 input 元素中 readonly 和 disabled 属性的相关应用（基于你之前的提问）。这些实例从简单到复杂，适合初学者和需要复习的开发者。

实例 1：基本的 HTML 页面结构

目标：创建一个简单的 HTML5 页面，展示标题和段落。

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>欢迎体验 HTML</h1>
  <p>这是一个简单的网页，展示了 HTML 的基本结构。</p>
</body>
</html>

讲解：

  • 结构：
  • <!DOCTYPE html>：声明文档为 HTML5，确保浏览器正确解析。
  • <html lang="zh-CN">：设置页面语言为中文，提升无障碍性和 SEO。
  • <head>：包含元数据，如字符编码（charset="UTF-8"）和响应式视口（viewport）。
  • <body>：包含可见内容，<h1> 定义主标题，<p> 定义段落。
  • 用途：这是最基础的 HTML 模板，适用于任何网页的起点。
  • 与 readonly/disabled 关联：此例不直接使用 input，但它是后续表单实例的基础结构。

运行效果：浏览器显示一个标题“欢迎体验 HTML”和一段文字。

实例 2：简单的登录表单（使用 readonly）

目标：创建一个登录表单，包含只读的用户名字段和可编辑的密码字段。

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录表单</title>
  <style>
    .form-group { margin-bottom: 15px; }
    label { display: inline-block; width: 100px; }
    input { padding: 5px; }
  </style>
</head>
<body>
  <h2>用户登录</h2>
  <form>
    <div class="form-group">
      <label for="username">用户名:</label>
      <input type="text" id="username" name="username" value="user123" readonly>
    </div>
    <div class="form-group">
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" required>
    </div>
    <button type="submit">登录</button>
  </form>
</body>
</html>

讲解：

  • 结构：
  • 使用 <form> 创建表单，包含两个 <input> 元素：用户名和密码。
  • 用户名字段使用 readonly 属性，预填充值为 user123，用户无法修改，但表单提交时会包含该值。
  • 密码字段使用 type="password" 隐藏输入内容，required 确保不能为空。
  • <label> 提高无障碍性，关联输入框（通过 for 和 id）。
  • 样式：简单的 CSS 使表单更美观，form-group 分隔字段，label 固定宽度对齐。
  • 用途：适用于需要预设不可编辑字段的场景，如显示已登录用户的用户名。
  • 与 readonly/disabled 关联：readonly 确保用户名不可修改但可提交，适合预填充数据；未使用 disabled，因为需要提交用户名。

运行效果：显示一个表单，用户无法编辑用户名，但可输入密码并提交。

实例 3：动态禁用提交按钮（使用 disabled）

目标：创建一个注册表单，提交按钮初始禁用，只有在输入有效密码后启用。

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册表单</title>
  <style>
    .form-group { margin-bottom: 15px; }
    label { display: inline-block; width: 100px; }
    input, button { padding: 5px; }
    button:disabled { opacity: 0.6; cursor: not-allowed; }
  </style>
</head>
<body>
  <h2>用户注册</h2>
  <form id="registerForm">
    <div class="form-group">
      <label for="email">电子邮件:</label>
      <input type="email" id="email" name="email" value="user@example.com" readonly>
    </div>
    <div class="form-group">
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" required oninput="toggleSubmit()">
    </div>
    <button type="submit" id="submitBtn" disabled>注册</button>
  </form>

  <script>
    function toggleSubmit() {
      const password = document.getElementById('password').value;
      const submitBtn = document.getElementById('submitBtn');
      submitBtn.disabled = password.trim() === '';
    }
  </script>
</body>
</html>

讲解：

  • 结构：
  • 表单包含只读的电子邮件字段（readonly）和密码字段。
  • 提交按钮初始设置 disabled，通过 JavaScript 动态控制其状态。
  • oninput 事件触发 toggleSubmit() 函数，检查密码是否为空。
  • JavaScript：当密码字段不为空时，移除按钮的 disabled 属性，启用提交。
  • 样式：禁用按钮通过 opacity 和 cursor 提供视觉反馈。
  • 用途：适用于需要动态控制表单交互的场景，如确保用户输入必要字段。
  • 与 readonly/disabled 关联：
  • readonly 用于电子邮件字段，值不可编辑但可提交。
  • disabled 用于提交按钮，防止无效提交，动态启用增强用户体验。

运行效果：电子邮件字段不可编辑，提交按钮初始灰色禁用，输入密码后按钮启用。

实例 4：语义化表单与无障碍性

目标：创建一个语义化的表单，包含多选框和下拉列表，强调无障碍性和 disabled 的条件使用。

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>兴趣调查表单</title>
  <style>
    .form-group { margin-bottom: 15px; }
    label { display: inline-block; width: 150px; }
    input, select, button { padding: 5px; }
    input:disabled, select:disabled { opacity: 0.6; }
  </style>
</head>
<body>
  <header>
    <h1>兴趣调查</h1>
  </header>
  <main>
    <form id="surveyForm">
      <div class="form-group">
        <label for="userId">用户 ID:</label>
        <input type="text" id="userId" name="userId" value="ID-2025" readonly aria-readonly="true">
      </div>
      <div class="form-group">
        <fieldset>
          <legend>选择兴趣:</legend>
          <label><input type="checkbox" name="interest" value="music"> 音乐</label>
          <label><input type="checkbox" name="interest" value="sports" onchange="toggleSelect()"> 运动</label>
        </fieldset>
      </div>
      <div class="form-group">
        <label for="sportType">运动类型:</label>
        <select id="sportType" name="sportType" disabled>
          <option value="">请选择</option>
          <option value="football">足球</option>
          <option value="basketball">篮球</option>
        </select>
      </div>
      <button type="submit">提交</button>
    </form>
  </main>

  <script>
    function toggleSelect() {
      const sportsCheckbox = document.querySelector('input[value="sports"]');
      const sportType = document.getElementById('sportType');
      sportType.disabled = !sportsCheckbox.checked;
    }
  </script>
</body>
</html>

讲解：

  • 结构：
  • 使用语义化标签 <header>、<main>、<fieldset> 和 <legend>，提高代码可读性和 SEO。
  • 用户 ID 字段使用 readonly 和 aria-readonly="true"，增强无障碍性。
  • 复选框控制下拉列表的 disabled 状态，只有选择“运动”时下拉列表启用。
  • <select> 初始禁用，防止无关输入。
  • JavaScript：onchange 事件触发 toggleSelect()，根据“运动”复选框状态切换下拉列表的 disabled 属性。
  • 无障碍性：使用 aria-readonly 和 <label> 确保屏幕阅读器正确解读字段。
  • 用途：适用于条件性表单，如调查或配置页面，需动态控制字段可用性。
  • 与 readonly/disabled 关联：
  • readonly 用于用户 ID，值不可编辑但可提交。
  • disabled 用于下拉列表，动态启用/禁用，优化用户交互。

运行效果：用户 ID 只读，运动类型下拉列表初始禁用，选择“运动”后启用。

总结

这四个实例展示了 HTML 的核心功能：

  1. 基本结构：HTML5 模板为所有网页提供基础。
  2. 简单表单：使用 readonly 实现不可编辑但可提交的字段。
  3. 动态交互：结合 disabled 和 JavaScript 实现条件性控件。
  4. 语义化与无障碍性：通过语义化标签和 ARIA 属性提升可访问性。

与 readonly/disabled 的联系：

  • readonly 适合需要提交但不可编辑的字段（如用户 ID、预设值）。
  • disabled 适合条件性禁用或无关字段（如动态控制的按钮或下拉列表）。
  • 结合 JavaScript 和 CSS，可增强交互性和用户体验。

如果需要更深入的讲解、特定功能的代码（如表单验证、响应式设计）或额外实例，请告诉我！

类似文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注