前端Wiki/词条/form

form

定义HTML 表单容器，收集用户输入并通过提交发送到服务器或由 JS 拦截处理

form 是所有输入控件的容器，靠 action（提交地址）、method（GET/POST）、enctype（编码类型）三个属性定义提交行为。现代前端常用 e.preventDefault() 拦截提交，改由 fetch 异步处理——但原生校验依然好用。

HTML5 带来了免 JS 的表单验证：required、pattern、min/max、type="email"/"url"/"number"。提交前浏览器自动检查，配合 :valid / :invalid 伪类实时反馈，省下一大坨校验代码。

每个控件都要配 label（点击文字聚焦）；
name 属性是提交数据的键，没 name 的控件不提交；
文件上传必须 method="post" + enctype="multipart/form-data"。

HTML

<form id="login" action="/api/login" method="post">
  <label for="em">邮箱</label>
  <input id="em" name="email" type="email" required
         pattern=".+@.+\\..+">
  <label for="pw">密码</label>
  <input id="pw" name="password" type="password" minlength="8" required>
  <button type="submit">登录</button>
</form>
<script>
  document.getElementById('login').addEventListener('submit', e => {
    e.preventDefault();          // 改为异步提交
    fetch(e.target.action, { method: 'POST', body: new FormData(e.target) });
  });
</script>

⚠ 常见误区

忘记 name 属性是数据提交不上的头号原因
button 不写 type 默认 submit，容易误触发表单提交
移动端 input type 选对（email/tel）会唤起对应键盘

🔗 相关词条input 表单验证 alt aria