HTML 表单教程

HTML 表单是网页中用于收集用户输入信息的重要元素。本教程将介绍如何创建基本的 HTML 表单，包括表单字段、表单控件和提交按钮。

基本结构

一个基本的 HTML 表单通常包含以下部分：

<form>：定义表单的容器。
<input>：用于收集用户输入的单行文本。
<label>：为输入字段提供标签。
<button>：用于提交表单。

示例

<form action="/submit-form" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">提交</button>
</form>

表单控件

HTML 提供了多种表单控件，如文本框、单选按钮、复选框等。

文本框

<input type="text" name="text" placeholder="输入文本">

单选按钮

<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

复选框

<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">订阅邮件</label>

表单验证

HTML5 提供了内置的表单验证功能，如 required、pattern 等。

示例

<input type="email" name="email" required pattern="[^@ \t\r\n]+@[^@ \t\r\n]+\.[^@ \t\r\n]+">

总结

通过本教程，您应该已经掌握了创建 HTML 表单的基本知识。接下来，您可以访问我们的高级表单教程来学习更多高级技巧。