HTML 表单介绍

HTML 表单是 web 开发中常用的元素之一，用于收集用户输入的数据。通过表单，用户可以在网页上输入文本、选择选项、上传文件等。本文将介绍 HTML 表单的基本结构和常用的表单元素。

基本结构

HTML 表单使用 <form> 元素来定义，它包裹了表单内的所有内容，并提供了提交按钮。

<form action="/submit-form" method="POST">
  <!-- 表单内容 -->
  <input type="text" name="username" placeholder="输入用户名" required>
  <input type="password" name="password" placeholder="输入密码" required>
  
  <button type="submit">提交</button>
</form>

• action 属性用于指定表单提交的目标 URL；
• method 属性用于指定提交表单的 HTTP 方法，常见的有 GET 和 POST；
• <input> 元素用于创建表单字段，name 属性指定字段的名称，placeholder 属性用于显示提示文本；
• <button> 元素用于提交表单。

常用表单元素

<input> 元素

<input> 元素是 HTML 表单中最常见和多样化的元素之一，用于接收用户输入各种不同类型的数据。常见的 type 属性值有：

• text：用于输入单行文本；
• password：用于输入密码，文字内容会被隐藏；
• checkbox：用于选择一个或多个选项；
• radio：用于从一组选项中选择一个；
• file：用于上传文件；
• submit：用于提交表单。

<input type="text" name="username" placeholder="输入用户名" required>
<input type="password" name="password" placeholder="输入密码" required>
<input type="checkbox" name="hobbies" value="reading"> 阅读
<input type="checkbox" name="hobbies" value="music"> 音乐
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<input type="file" name="avatar">
<button type="submit">提交</button>

<select> 元素

<select> 元素用于创建下拉列表，用户可以通过点击列表中的选项进行选择。可以使用 <option> 元素定义选项，并使用 selected 属性指定默认选中的选项。

<select name="country">
  <option value="china" selected>中国</option>
  <option value="usa">美国</option>
  <option value="japan">日本</option>
</select>

<textarea> 元素

<textarea> 元素用于接收多行文本输入，可以通过 rows 和 cols 属性指定编辑区域的行数和列数。

<textarea name="description" rows="3" cols="30" placeholder="输入描述信息"></textarea>

<label> 元素

<label> 元素用于为表单元素提供标签，点击标签时会自动激活对应的表单元素。可以通过 for 属性和 id 属性建立关联。

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

总结

HTML 表单是 web 开发中收集用户输入数据的重要方式。通过 <form> 元素、<input> 元素和其他表单元素的组合，开发者可以创建出丰富多样的用户输入界面。上述介绍的只是表单的基础内容，还有更多属性和特性可以探索，如表单验证、表单样式等。希望本文能帮助你更好地理解和使用 HTML 表单。