input 标签

当我们在网页中构建表单时，使用 <input> 标签是非常常见的。<input> 标签用于接收用户输入的各种数据，例如文本、密码、数字等。它是一个自封闭标签，不需要闭合。

下面是一些常见的 <input> 标签的类型及其简介：

文本输入框 (type="text")

用于接收单行文本输入，例如名称、邮件地址等。例子：

<input type="text" name="username" />

密码输入框 (type="password")

用于接收输入的密码，并以圆点或星号等方式来隐藏实际输入的字符。例子：

<input type="password" name="password" />

数字输入框 (type="number")

用于接收数字输入，可以限制输入只能是数字。例子：

<input type="number" name="age" />

单选按钮 (type="radio")

用于从一组互斥选项中选择单个选项。例子：

<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female

复选框 (type="checkbox")

用于从一组多选选项中选择一个或多个选项。例子：

<input type="checkbox" name="hobbies" value="football"> Football
<input type="checkbox" name="hobbies" value="basketball"> Basketball

文件上传 (type="file")

用于允许用户选择并上传文件。例子：

<input type="file" name="avatar" />

这只是 <input> 标签的一小部分用法和类型，根据具体需求，还有其他类型，如日期选择、颜色选择、搜索框等。各种类型都可以通过设置不同的 type 属性来实现。

您可以在 <form> 标签中使用这些 <input> 标签并添加适当的属性来构建一个完整的表单。例如：

<form action="/submit-form" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required />

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required />

  <input type="submit" value="Submit" />
</form>

在上面的示例中，我们创建了一个包含用户名和密码的简单登录表单，并指定了必填字段（required）。提交表单时，将向 /submit-form 发送 POST 请求。

参考

详细参考-runoob.com/input