【HTML 基础】表单标签

文章目录

• • • 1. <form>
    • 2. <input>
    • 3. <select> 和 <option>
    • 4. <textarea>
    • 5. <button>
    • 结语

HTML 表单是互联网上交互性最强的元素之一，它允许用户输入、选择和提交数据。在这篇博客中，我们将介绍 HTML 中一些关键的表单标签，如 <form>, <input>, <select>, <textarea>, <button 等以帮助你理解如何创建功能强大的表单。

1. <form>

<form> 是 HTML 中定义表单的主要标签。它用于包裹表单中的各个元素，并提供了数据传输和处理的机制。<form> 可以包含各种输入元素，如文本框、单选框、复选框等。

<form action="/submit" method="post">
  <!-- 表单元素在这里 -->
</form>

• action 属性指定表单数据提交的目标 URL
• method 属性指定数据提交的方式，常见的有 post 和 get

2. <input>

<input> 是最常用的表单元素之一，用于创建各种类型的输入字段。根据 type 属性的不同取值，<input> 可以生成文本框、密码框、单选按钮等。

<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="checkbox" name="remember" id="remember"> <label for="remember">记住我</label>

• type 属性指定输入字段的类型
• name 属性用于标识输入字段的名称，以便在表单提交时使用

执行效果

3. <select> 和 <option>

<select> 用于创建下拉列表，而 <option> 则定义了下拉列表中的选项。

<select name="gender">
  <option value="male">男</option>
  <option value="female">女</option>
  <option value="other">其他</option>
</select>

执行效果

4. <textarea>

<textarea> 用于创建多行文本输入框，适用于用户输入大段文本的场景。

<textarea name="message" rows="4" cols="50" placeholder="请输入消息"></textarea>

• rows 和 cols 属性定义文本框的行数和列数

执行效果

5. <button>

<button>用于创建按钮，可用于提交表单或执行JavaScript等操作。

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="myFunction()">点击我</button>

• type 属性定义按钮的类型

  常见的有 submit（提交表单）、reset（重置表单）和 button（普通按钮）

执行效果

结语

以上是一些基本的 HTML 表单标签，通过巧妙地组合它们，你可以创建各种复杂的表单，实现用户数据的收集和交互。在实际应用中，还可以使用 JavaScript 来增强表单的交互性，使用户体验更加友好。无论是登录、注册还是数据查询，HTML 表单是构建交互性网页的不可或缺的工具。