h5 表单实现

基本表单结构

HTML5表单通过<form>标签创建，包含输入控件（如<input>、<textarea>等）和提交按钮。基础结构如下：

<form action="/submit" method="POST">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  <button type="submit">提交</button>
</form>

• action：指定表单提交的服务器端点。
• method：定义HTTP方法（如GET或POST）。
• required：HTML5属性，标记字段为必填。

常用输入类型

HTML5新增多种<input>类型，优化用户体验和验证：

<input type="email" name="email" placeholder="邮箱">  
<input type="password" name="pwd" minlength="8">  
<input type="date" name="birthday">  
<input type="number" name="age" min="1" max="120">  
<input type="url" name="website">  
<input type="range" name="volume" min="0" max="100">  

• type="email"：自动验证邮箱格式。
• minlength/maxlength：限制输入长度。
• min/max：限制数值范围。

表单验证

HTML5内置验证可通过属性实现，无需JavaScript：

<input type="text" pattern="[A-Za-z]{3}" title="请输入3个字母">  
<input type="file" accept=".jpg,.png">  

• pattern：正则表达式验证输入格式。
• accept：限制文件上传类型。

高级控件

下拉选择框：

<select name="color">
  <option value="red">红色</option>
  <option value="blue" selected>蓝色</option>
</select>

多行文本输入：

<textarea name="comment" rows="4" cols="50"></textarea>

复选框与单选按钮：

<input type="checkbox" name="interest" value="sports"> 运动  
<input type="radio" name="gender" value="male"> 男  

表单提交与数据处理

表单数据可通过JavaScript的FormData对象处理，或直接提交到服务器：

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  console.log(Object.fromEntries(formData));
});

样式与布局建议

• 使用<label>关联输入控件，提升可访问性。
• 通过CSS Flexbox或Grid布局优化表单排列。
• 错误提示样式示例：

  input:invalid {
  border-color: red;
  }

兼容性注意事项

• 部分HTML5输入类型（如date）在旧浏览器中可能回退为text。
• 可通过Modernizr等工具检测特性支持，并提供备用方案。