全栈新手开发者求助：如何仅用HTML创建表单？

一、表单基本框架 #

所有表单元素必须包裹在 <form> 标签内，它负责定义表单的提交规则：

<form action="/submit-endpoint" method="POST">
  <!-- 所有表单控件都放在这里 -->
</form>

• action：表单数据提交到的后端接口地址
• method：提交方式，POST 用于敏感数据（如密码），GET 会把数据暴露在URL里，适合非敏感场景

二、常用表单控件标签 #

1. 文本输入类 #

• <input type="text">：单行文本输入，比如用户名

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

  • for 和 id 绑定标签与输入框，方便屏幕阅读器识别，提升可访问性
  • name 是后端识别数据的唯一标识，必须设置
  • required 标记该字段为必填，浏览器会自动校验

• <input type="email">：邮箱输入框，浏览器会自动验证邮箱格式

• <input type="password">：密码输入框，输入内容会被隐藏

• <textarea>：多行文本输入，比如留言、备注

  <label for="note">备注：</label>
  <textarea id="note" name="note" rows="3" cols="40"></textarea>
  

2. 选择类控件 #

• <select> + <option>：下拉选择菜单

  <label for="city">所在城市：</label>
  <select id="city" name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </select>
  

• <input type="radio">：单选按钮，同一组必须设置相同的name，确保只能选一个

  <p>用户类型：</p>
  <input type="radio" id="personal" name="user-type" value="personal">
  <label for="personal">个人用户</label>
  <input type="radio" id="business" name="user-type" value="business">
  <label for="business">企业用户</label>
  

• <input type="checkbox">：复选框，同一组name建议设为数组形式（如name="hobbies[]"），方便后端接收多个值

  <p>兴趣爱好：</p>
  <input type="checkbox" id="coding" name="hobbies[]" value="coding">
  <label for="coding">编程</label>
  <input type="checkbox" id="hiking" name="hobbies[]" value="hiking">
  <label for="hiking">徒步</label>
  

3. 操作按钮 #

• <input type="submit">：提交按钮，点击后触发表单提交
• <button type="submit">提交表单</button>：更灵活的提交按钮，内部可以放图标或自定义文本
• <input type="reset">：重置按钮，一键清空所有表单内容

三、提升表单体验的小细节 #

• 用 <fieldset> 和 <legend> 给相关控件分组，让结构更清晰：

  <fieldset>
    <legend>账户信息</legend>
    <!-- 用户名、密码输入框 -->
  </fieldset>
  

• 给输入框加placeholder属性，提示用户输入格式：

  <input type="email" name="email" placeholder="example@domain.com">
  

• 用disabled禁用不需要的控件，readonly让控件只读不可修改

内容的提问来源于stack exchange，提问作者Dhruv khandelwal