2.5 表单元素与输入类型

2.5 表单元素与输入类型

基础表单结构

1. 表单容器

<form action="/submit" method="POST" enctype="multipart/form-data" novalidate>
  <!-- 表单控件将放在这里 -->
</form>

关键属性：

• action：表单提交目标URL
• method：HTTP方法（GET/POST）
• enctype：编码类型（application/x-www-form-urlencoded默认值，multipart/form-data文件上传）
• novalidate：禁用浏览器默认验证

2. 表单分组与说明

<fieldset>
  <legend>个人信息</legend>
  <!-- 相关表单控件 -->
</fieldset>

输入类型大全

1. 基础输入类型

2. HTML5新增输入类型

3. 特殊输入类型

<!-- 文件上传 -->
<input type="file" accept=".jpg,.png" multiple>

<!-- 隐藏字段 -->
<input type="hidden" name="token" value="abc123">

<!-- 图像提交按钮 -->
<input type="image" src="submit.png" alt="提交">

高级表单元素

1. 下拉选择框

<select name="country" required>
  <option value="">-- 请选择国家 --</option>
  <optgroup label="亚洲">
    <option value="CN">中国</option>
    <option value="JP">日本</option>
  </optgroup>
  <option value="US">美国</option>
</select>

多选模式：

<select name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
</select>

2. 数据列表

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Edge">
</datalist>

3. 多行文本输入

<textarea name="comment" rows="4" cols="50" 
          placeholder="请输入您的意见..." 
          maxlength="500"></textarea>

表单增强特性

1. 输入验证

内置验证属性：

<input type="text" required minlength="3" maxlength="20" pattern="[A-Za-z]+">

自定义验证消息：

emailInput.addEventListener('invalid', () => {
  if(emailInput.validity.typeMismatch) {
    emailInput.setCustomValidity('请输入有效的邮箱地址');
  }
});

2. 输入约束

<!-- 只读字段 -->
<input type="text" value="固定值" readonly>

<!-- 禁用字段 -->
<input type="text" disabled>

<!-- 输入长度限制 -->
<input type="text" minlength="6" maxlength="20">

3. 表单关联

<label for="username">用户名：</label>
<input id="username" name="username">

<!-- 隐式关联 -->
<label>
  记住我 <input type="checkbox" name="remember">
</label>

现代表单实践

1. 响应式表单布局

<div class="form-group">
  <label for="email">电子邮箱</label>
  <input type="email" id="email" required>
  <div class="hint">请输入有效邮箱地址</div>
</div>

.form-group {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .form-group {
    grid-template-columns: 1fr 2fr;
    align-items: center;
  }
}

2. 动态表单控制

// 显示/隐藏字段
document.querySelector('#show-extra').addEventListener('change', (e) => {
  document.querySelector('.extra-fields').style.display = 
    e.target.checked ? 'block' : 'none';
});

// 实时字符计数
textarea.addEventListener('input', () => {
  counter.textContent = `${textarea.value.length}/500`;
});

3. 无障碍表单

<fieldset>
  <legend>支付方式</legend>
  
  <div role="radiogroup" aria-labelledby="payment-label">
    <span id="payment-label" class="visually-hidden">选择支付方式</span>
    
    <input type="radio" id="credit" name="payment" checked>
    <label for="credit">信用卡</label>
    
    <input type="radio" id="paypal" name="payment">
    <label for="paypal">PayPal</label>
  </div>
</fieldset>

完整案例：用户注册表单

<form id="register-form" novalidate>
  <fieldset>
    <legend>基本信息</legend>
    
    <div class="form-group">
      <label for="username">用户名 *</label>
      <input type="text" id="username" name="username" 
             required minlength="4" maxlength="20"
             pattern="[a-zA-Z0-9]+"
             aria-describedby="username-hint">
      <div id="username-hint" class="hint">4-20个字母或数字</div>
    </div>
    
    <div class="form-group">
      <label for="email">电子邮箱 *</label>
      <input type="email" id="email" name="email" required>
    </div>
  </fieldset>
  
  <fieldset>
    <legend>账号安全</legend>
    
    <div class="form-group">
      <label for="password">密码 *</label>
      <input type="password" id="password" name="password"
             required minlength="8"
             aria-describedby="password-strength">
      <meter id="password-strength" min="0" max="4"></meter>
    </div>
    
    <div class="form-group">
      <label for="confirm-pwd">确认密码 *</label>
      <input type="password" id="confirm-pwd" required
             oninput="checkPasswordMatch(this)">
    </div>
  </fieldset>
  
  <div class="form-actions">
    <button type="submit">注册</button>
    <button type="reset">重置</button>
  </div>
</form>

<script>
function checkPasswordMatch(input) {
  const password = document.getElementById('password');
  if(input.value !== password.value) {
    input.setCustomValidity('两次输入的密码不匹配');
  } else {
    input.setCustomValidity('');
  }
}

document.getElementById('register-form').addEventListener('submit', (e) => {
  if(!e.target.checkValidity()) {
    e.preventDefault();
    // 显示自定义错误提示
  }
});
</script>

兼容性与Polyfill

<!-- 为不支持HTML5输入的浏览器提供polyfill -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>

<!-- 日期选择器回退方案 -->
<input type="date" class="date-picker">
<script>
if(!Modernizr.inputtypes.date) {
  $('.date-picker').datepicker();
}
</script>

通过合理运用这些表单元素和输入类型，开发者可以构建出功能丰富、用户体验良好的数据输入界面，同时兼顾现代浏览器的增强功能和旧版浏览器的兼容性需求。