常用输入input标签类型及用法详解 - HTML表单元素 - 常规

常用输入input标签类型及用法详解 - HTML表单元素

在HTML中，<input> 标签是表单元素中最常用的标签，它可以用来创建各种类型的输入框，方便用户与网页进行交互。以下列举一些常用的<input> 标签类型及用法：

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

用于接收用户输入的文本内容。

<input type='text' name='username' placeholder='请输入用户名'>

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

用于接收用户输入的密码，输入的内容以密文形式显示。

<input type='password' name='password' placeholder='请输入密码'>

单选框 (type='radio')

用于从多个选项中选择一个。多个单选框需要设置相同的 name 属性，才能保证一次只能选择一个。

<input type='radio' name='gender' value='male'>男
<input type='radio' name='gender' value='female'>女

复选框 (type='checkbox')

用于从多个选项中选择多个或全部。多个复选框可以设置不同的 name 属性，也可以设置相同的 name 属性，用于实现多选功能。

<input type='checkbox' name='hobbies' value='reading'>阅读
<input type='checkbox' name='hobbies' value='music'>音乐
<input type='checkbox' name='hobbies' value='sports'>运动

文件上传 (type='file')

用于选择上传文件。

<input type='file' name='file'>

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

用于接收用户输入的数字。可以通过 min 和 max 属性设置输入范围。

<input type='number' name='age' min='0' max='100'>

隐藏域 (type='hidden')

用于在表单中存储数据，但不显示给用户。

<input type='hidden' name='id' value='12345'>

按钮 (type='submit')

用于提交表单数据。

<input type='submit' value='提交'>

除了上述几种常用类型，<input> 标签还有其他一些类型，例如 email、tel、url 等。了解这些标签的类型及用法，可以帮助你更好地创建各种类型的表单，并与用户进行交互。