表单增强

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3

4
<head>
5
  <meta charset="UTF-8" />
6
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
  <title>通用HTML模板</title>
9
  <!-- 样式占位，可自定义CSS -->
10
  <style>
11
    body {
12
      font-family: Arial, Helvetica, sans-serif;
13
      margin: 0;
14
      padding: 0;
15
      background: #f8f9fa;
16
      color: #222;
17
    }
18

19
    main {
20
      max-width: 900px;
21
      margin: 2rem auto;
22
      background: #fff;
23
      padding: 2rem;
24
      border-radius: 8px;
25
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
26
    }
27

28
    nav {
29
      margin-bottom: 1.5rem;
30
    }
31

32
    a {
33
      color: #007bff;
34
      text-decoration: none;
35
    }
36

37
    a:hover {
38
      text-decoration: underline;
39
    }
40
  </style>
41
</head>
42

43
<body>
44
  <main>
45
    <h2>表单示例</h2>
46
    <form>
47
      <div style="margin-bottom: 1em">
48
        <label for="color">颜色选择：</label>
49
        <input id="color" name="color" type="color" />
50
      </div>
51
      <div style="margin-bottom: 1em">
52
        <label for="date">日期：</label>
53
        <input id="date" name="date" type="date" />
54
        <label for="datetime">日期时间：</label>
55
        <input id="datetime" name="datetime" type="datetime-local" />
56
        <label for="month">月份：</label>
57
        <input id="month" name="month" type="month" />
58
        <label for="week">周：</label>
59
        <input id="week" name="week" type="week" />
60
        <label for="time">时间：</label>
61
        <input id="time" name="time" type="time" />
62
      </div>
63
      <div style="margin-bottom: 1em">
64
        <label for="number">数字：</label>
65
        <input id="number" placeholder="值为0~10之间" step="0.5" required name="number" type="number" min="0" max="10"
66
          style="width: 100px;" />
67
        <span style="font-size: 12px; color: #888">number</span>
68
      </div>
69
      <div style="margin-bottom: 1em">
70
        <label for="email">邮箱：</label>
71
        <input id="email" name="email" type="email" required />
72
        <span style="font-size: 12px; color: #888">email 在提交时才会校验邮箱</span>
73
      </div>
74
      <div style="margin-bottom: 1em">
75
        <label for="tel">手机号：</label>
76
        <input id="tel" name="tel" type="tel" />
77
        <span style="font-size: 12px; color: #888">tel 没有格式校验，主要是移动端弹出数字键盘</span>
78
      </div>
79
      <div style="margin-bottom: 1em">
80
        <label for="search">搜索：</label>
81
        <input id="search" name="search" type="search" autofocus />
82
        <span style="font-size: 12px; color: #888">search
83
          浏览器会有清除按钮，利于SEO和可访问性，移动端弹出键盘的确认会变成搜索</span>
84
      </div>
85
      <div style="margin-bottom: 1em">
86
        <label for="range">范围：</label>
87
        <input id="range" name="range" type="range" />
88
      </div>
89
      <div style="margin-bottom: 1em">
90
        <label for="custom">自定义验证：</label>
91
        <input id="custom" name="custom" type="text" />
92
        <span id="custom-error" style="color: red; font-size: 12px;"></span>
93
      </div>
94
      <span style="font-size: 12px; color: #888">range</span>
95
      </div>
96
      <div style="margin-bottom: 1em">
97
        <label for="file">多文件上传：</label>
98
        <input id="file" name="file" type="file" multiple />
99
        <span style="font-size: 12px; color: #888">multiple 支持多文件上传</span>
100
      </div>
101
      <div style="margin-bottom: 1em">
102
        <label>height/width image</label>
103
        <input type="image" name="" value="" width="100" height="100">
104
      </div>
105
      <!-- <button type="submit" style="padding: 0.5em 1.5em">提交</button> -->
106
      <section style="margin-top:2em;">
107
        <div style="margin-bottom:1em;">
108
          <details>
109
            <summary>&lt;details&gt; 下拉详情演示</summary>
110
            用户会在他们输入数据时看到域定义选项的下拉列表。
111
            <br />
112
            例如：
113
            <input list="browsers" name="browser">
114
            <datalist id="browsers">
115
              <option value="Chrome">
116
              <option value="Firefox">
117
              <option value="Safari">
118
              <option value="Edge">
119
            </datalist>
120
          </details>
121
        </div>
122
        <div style="margin-bottom:1em;">
123
          <label for="progress-demo">&lt;progress&gt; 进度条：</label>
124
          <progress id="progress-demo" value="0.6" max="1" style="width:200px;"></progress>
125
          <span style="font-size:12px;color:#888;">展示连接/下载进度</span>
126
        </div>
127
        <div style="margin-bottom:1em;">
128
          <label for="meter-demo">&lt;meter&gt; 刻度值：</label>
129
          <meter id="meter-demo" min="0" max="100" value="70" low="40" high="90" optimum="80"
130
            style="width:200px;"></meter>
131
          <span style="font-size:12px;color:#888;">用于计量（如温度、权重、分数等）</span>
132
        </div>
133
        <div style="margin-bottom:1em;">
134
          <label for="output-demo">&lt;output&gt; 输出：</label>
135
          <span style="font-size:12px;color:#888;">用于不同类型的输出，比如计算或脚本输出</span>
136
        </div>
137
      </section>
138
      <button type="submit" onclick="validateForm()">验证表单</button>
139
      <button type="button" onclick="resetCustomValidation()">重置自定义验证</button>
140
    </form>
141
    <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
142
      <input type="range" id="a" value="50">+
143
      <input type="number" id="b" value="25">
144
      =
145
      <output name="result" for="a b">75</output>
146
    </form>
147
  </main>
148
  <script>
149
    // 获取表单元素
150
    const form = document.querySelector('form');
151
    const customInput = document.getElementById('custom');
152
    const customError = document.getElementById('custom-error');
153

154
    // 表单验证函数
155
    function validateForm() {
156
      // 检查整个表单的有效性
157
      if (form.checkValidity()) {
158
        alert('表单验证通过！');
159
      } else {
160
        // 检查单个输入的有效性
161
        const emailInput = document.getElementById('email');
162
        if (!emailInput.checkValidity()) {
163
          emailInput.reportValidity(); // 这会显示原生的验证提示
164
          return;
165
        }
166

167
        // 检查数字输入的有效性
168
        const numberInput = document.getElementById('number');
169
        if (!numberInput.checkValidity()) {
170
          numberInput.reportValidity();
171
          return;
172
        }
173

174
        alert('表单验证失败！');
175
      }
176
    }
177

178
    // 自定义验证示例
179
    customInput.addEventListener('input', function () {
180
      if (this.value.length < 5) {
181
        this.setCustomValidity('输入必须至少5个字符');
182
        customError.textContent = '输入必须至少5个字符';
183
      } else {
184
        this.setCustomValidity('');
185
        customError.textContent = '';
186
      }
187
    });
188

189
    // 重置自定义验证
190
    function resetCustomValidation() {
191
      customInput.setCustomValidity('');
192
      customError.textContent = '';
193
      customInput.value = '';
194
    }
195

196
    // 显示验证状态信息
197
    customInput.addEventListener('invalid', function (e) {
198
      e.preventDefault();
199
      customError.textContent = customInput.validationMessage;
200
    });
201

202
    // 显示验证状态信息
203
    customInput.addEventListener('input', function () {
204
      if (customInput.validity.valid) {
205
        customError.textContent = '';
206
      }
207
    });
208
  </script>
209
</body>
210

211
</html>