带有表单控件的输入标签 - HTML

在 HTML 中，表单控件指的是用来搜集用户数据的交互式元素。通常我们会用 <form> 元素来创建一个表单，表单中可以包含各种不同的表单控件。在本篇文章中，我们将介绍常见的表单控件及其对应的输入标签。

输入标签

<input type="text">

<input> 标签用于表示文本输入框，用户可以在文本输入框中输入文本。常见的应用场景包括搜索框、评论框等。它的基本语法如下：

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

其中，type 属性表示输入框类型，name 属性用于表单提交时后台获取输入框的值，id 属性用于指定输入框的唯一标识。此外，还可以通过 value 属性设置输入框的默认值，如下面的示例所示：

<input type="text" name="username" id="username" value="请在此输入用户名">

<input type="password">

<input> 标签的 type 属性还可以用于表示密码输入框。它与文本输入框的区别在于，在用户输入时，密码框只显示星号或圆点等通用替换字符，保护用户的密码安全。它的语法如下：

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

<input type="checkbox">

<input> 标签的 type 属性还可以用于表示复选框。复选框允许用户在多个选项中选择一个或多个选项。它的语法如下：

<input type="checkbox" name="fruit" value="apple" checked> Apple
<input type="checkbox" name="fruit" value="orange"> Orange
<input type="checkbox" name="fruit" value="banana" checked> Banana

以上代码会显示三个复选框，其中 checked 属性表示默认选中的选项。在后台获取用户的选择结果时，可以利用 name 和 value 属性来区分用户选择的不同选项。

<input type="radio">

<input> 标签的 type 属性还可以用于表示单选框。与复选框不同，单选框允许用户在多个互斥的选项中选择一个选项。它的语法如下：

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

以上代码会显示两个单选框，其中 checked 属性表示默认选中的选项。在后台获取用户的选择结果时，可以利用 name 和 value 属性来区分用户选择的不同选项。

<input type="submit">

<input> 标签的 type 属性还可以用于表示提交按钮。提交按钮用于提交表单到后台进行处理。它的语法如下：

<input type="submit" value="Sign In">

其中，value 属性表示按钮上显示的文本。

<input type="button">

<input> 标签的 type 属性还可以用于表示普通按钮。普通按钮用于触发客户端脚本，没有直接的表单提交功能。它的语法如下：

<input type="button" value="Click Me" onclick="myFunction()">

其中，onclick 属性表示按钮被点击时触发的 JavaScript 函数。

<textarea>

<textarea> 标签用于表示多行文本输入框。它的语法如下：

<textarea name="comment" id="comment" rows="4" cols="40">
Please enter your comment here
</textarea>

其中，rows 属性表示文本框的行数，cols 属性表示文本框的列数。

总结

本篇文章介绍了常见的带有表单控件的输入标签，包括文本输入框、密码输入框、复选框、单选框、提交按钮、普通按钮和多行文本输入框。以上标签可以用于搜集用户的输入数据，非常有用。