HTML 表单标签 - Html

HTML 表单是用于收集用户输入的重要工具，它允许用户在网页中输入数据，并将数据发送到服务器进行处理。下面是一些常见的 HTML 表单标签及其用法。

<form>标签

<form> 标签用于定义表单，其中包含了表单中所有的输入元素。它可以包含如下几个属性：

• action：指定表单数据提交到服务器的 URL。
• method：指定HTTP方法，常见的是 GET 和 POST。
• target：指定表单提交后的响应在何处显示，可取的值包括 _self、 _blank 等等。

下面是一个简单的表单示例：

<form action="/login" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密  码：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="登录">
</form>

<input>标签

<input> 标签是 HTML 表单中最重要的标签之一，它有多种类型，不同类型的 <input> 元素会创建不同类型的输入控件。常见的 <input> 类型有：

• type="text"：文本输入框。
• type="password"：密码输入框。
• type="radio"：单选按钮。
• type="checkbox"：复选框。
• type="submit"：提交按钮。
• type="reset"：重置按钮。

除了上述 <input> 类型之外，还有一些其他类型，比如：

• type="hidden"：隐藏字段。
• type="file"：文件上传字段。

下面是一些 <input> 标签的示例：

<input type="text" id="username" name="username">
<input type="password" id="password" name="password">
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="checkbox" name="hobby" value="swimming">游泳
<input type="checkbox" name="hobby" value="reading">阅读
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="hidden" name="token" value="123456789">
<input type="file" id="avatar" name="avatar">

<textarea>标签

<textarea> 标签用于创建一个多行的文本输入框，它有一个 cols 属性和一个 rows 属性用于控制文本框的大小。下面是一个 <textarea> 标签的示例：

<textarea cols="30" rows="10"></textarea>

<select>标签

<select> 标签用于创建一个下拉选择框，它可以包含多个 <option> 子标签，每个 <option> 子标签都代表一个选项。下面是一个 <select> 标签的示例：

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

<button>标签

<button> 标签用于创建一个按钮，它可以用于提交表单、重置表单或普通的按钮操作。下面是一个 <button> 标签的示例：

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">取消</button>

以上就是常见的 HTML 表单标签，它们能够满足大部分的表单需求。如果您有更高级的需求，还可以使用 JavaScript 和 CSS 进行表单扩展和美化。