HTML <input> 标签用于在 Web 表单中创建交互式控件，以便接收用户输入。本教程将详细介绍该标签的各种属性和用法。
基础知识
<input> 标签是一个空元素，没有闭合标签。它通常在 <form> 标签内使用，以定义提交表单时要发送的数据。
<form action="/submit_form" method="post">
<input type="text" name="username" />
</form>
上面的示例创建了一个文本输入框，用户可以在其中输入用户名。当用户提交表单时，浏览器将把 name 属性的值（即 "username"）和用户输入的数据一起发送到服务器上的 "/submit_form" URL。
常见的 input 类型
HTML5 定义了多种不同类型的 <input> 元素，每种类型都有其自己的特殊功能和行为。以下是一些常见的输入类型：
文本输入框 (text)
<input type="text" name="username" />
用于创建单行文本输入框。适用于收集短文本数据，如用户名、电子邮件地址等。
密码输入框 (password)
<input type="password" name="pwd" />
用于创建密码输入框。输入的文本将被遮挡，以提供基本的安全性。
复选框 (checkbox)
<input type="checkbox" name="fruit" value="apple" /> Apple
<input type="checkbox" name="fruit" value="banana" /> Banana
<input type="checkbox" name="fruit" value="orange" /> Orange
用于创建复选框。可以让用户从给定的选项中进行多选。如果选择了一个复选框，则在提交表单时会发送 value 属性的值。
单选按钮 (radio)
<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female
用于创建单选按钮。可以让用户从给定的选项中进行单选。同一组单选按钮应具有相同的 name 属性，以确保只能选择一个选项。
提交按钮 (submit)
<input type="submit" value="Submit Form" />
用于创建提交表单的按钮。当点击该按钮时，浏览器会将表单数据发送到服务器上指定的 URL。
常见的 input 属性
除了 type 属性外，还有许多其他属性可用于自定义 <input> 元素的行为和外观。以下是一些常见的输入属性：
name 属性
<input type="text" name="username" />
指定表单数据中字段的名称。当提交表单时，该名称将与用户输入的数据一起发送到服务器。
value 属性
<input type="text" name="username" value="John Doe" />
指定输入字段的初始值。对于文本、密码和隐藏输入类型，该值将显示在输入框中。对于复选框和单选按钮，该值将与用户选择一起发送到服务器。
placeholder 属性
<input type="text" name="username" placeholder="Enter your username" />
指定在输入字段为空时显示的提示文本。该文本不会影响实际数据，只是帮助用户了解应该在字段中输入什么类型的数据。
required 属性
<input type="text" name="username" required />
指定输入字段必须填写才能提交表单。如果用户未在该字段中输入任何内容，则浏览器将显示错误消息并阻止表单提交。
disabled 属性
<input type="text" name="username" disabled />
指定禁用输入字段，使其无法接收用户输入。通常与 JavaScript 一起使用以基于某些条件启用或禁用输入字段。
结论
HTML <input> 标签是构建交互式 Web 表单的重要组成部分。通过理解不同的输入类型和属性，您可以创建能够接收各种数据并实现所需功能的表单。希望本教程对您有所帮助！