HTML表单高级控件

HTML5提供高级表单控件，增强表单结构和交互能力。

datalist数据列表

基本用法

<input type="text" list="cities" placeholder="选择城市">
<datalist id="cities">
  <option value="北京">
  <option value="上海">
  <option value="广州">
  <option value="深圳">
  <option value="杭州">
</datalist>

• 提供预设选项列表
• 用户可输入或选择
• 实现输入+下拉组合效果

与select对比

<!-- datalist：可输入+可选择 -->
<input list="options">

<!-- select：仅可选择 -->
<select>
  <option value="1">选项1</option>
</select>

多类型搭配

<!-- 数字范围建议 -->
<input type="number" list="ages" min="0" max="100">
<datalist id="ages">
  <option value="18">
  <option value="25">
  <option value="35">
  <option value="50">
</datalist>

<!-- 颜色选择建议 -->
<input type="color" list="colors">
<datalist id="colors">
  <option value="#ff0000">
  <option value="#00ff00">
  <option value="#0000ff">
</datalist>

<!-- 日期建议 -->
<input type="date" list="dates">
<datalist id="dates">
  <option value="2024-01-01">
  <option value="2024-07-01">
</datalist>

output输出元素

基本用法

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" name="a" value="0"> +
  <input type="number" name="b" value="0"> =
  <output name="result">0</output>
</form>

计算示例

<form oninput="calculate()">
  <label>单价：¥<input type="number" name="price" step="0.01"></label>
  <label>数量：<input type="number" name="qty" min="1"></label>
  <output name="total">¥0.00</output>
</form>

<script>
function calculate() {
  const price = parseFloat(form.price.value) || 0;
  const qty = parseInt(form.qty.value) || 0;
  form.total.value = `¥${(price * qty).toFixed(2)}`;
}
</script>

for属性关联

<input type="range" id="slider" min="0" max="100" value="50"
       oninput="output.value = slider.value">
<output id="output" for="slider">50</output>

fieldset字段分组

基本结构

<fieldset>
  <legend>个人信息</legend>
  <label>姓名：<input type="text" name="name"></label>
  <label>年龄：<input type="number" name="age"></label>
</fieldset>

<fieldset>
  <legend>联系方式</legend>
  <label>邮箱：<input type="email" name="email"></label>
  <label>电话：<input type="tel" name="phone"></label>
</fieldset>

禁用整组

<fieldset disabled>
  <legend>不可编辑区域</legend>
  <input type="text" name="locked" value="锁定">
  <input type="text" name="locked2">
</fieldset>

disabled属性禁用整个分组内所有表单控件。

样式定制

fieldset {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}

legend {
  padding: 0 8px;
  font-weight: bold;
  color: #333;
}

表单分组示例

<form>
  <fieldset>
    <legend>账户信息</legend>
    <input type="text" name="username" required>
    <input type="password" name="password" required>
  </fieldset>

  <fieldset>
    <legend>个人资料</legend>
    <input type="text" name="realname">
    <input type="email" name="email">
    <select name="gender">
      <option value="">请选择</option>
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
  </fieldset>

  <fieldset>
    <legend>兴趣爱好</legend>
    <input type="checkbox" name="hobby" value="reading"> 阅读
    <input type="checkbox" name="hobby" value="sports"> 运动
    <input type="checkbox" name="hobby" value="music"> 音乐
  </fieldset>

  <button type="submit">提交</button>
</form>

legend标题元素

基本用法

<fieldset>
  <legend>分组标题</legend>
  <!-- 表单控件 -->
</fieldset>

定位样式

/* legend默认位于fieldset边框内 */
legend {
  position: relative;
  top: -10px;
  background: white;
  padding: 0 8px;
}

/* 移出边框 */
fieldset {
  padding-top: 20px;
}
legend {
  position: absolute;
  top: 0;
}

可访问性

<fieldset aria-labelledby="group-title">
  <legend id="group-title">必填信息</legend>
  <input type="text" required aria-label="姓名">
</fieldset>

表单属性关联

fieldset可设置表单属性关联外部表单：

<form id="mainForm" action="/submit">
  <!-- 主表单内容 -->
</form>

<fieldset form="mainForm">
  <legend>附加信息</legend>
  <input type="text" name="extra" form="mainForm">
</fieldset>

控件对比表

要点总结

• datalist配合input实现搜索建议效果
• output用于实时显示计算结果
• fieldset组织相关表单控件
• legend为fieldset提供标题
• fieldset的disabled属性禁用整组控件
• 合理分组提升表单可读性和可访问性