html input标签的属性有哪些？input标签的用法总结（附实例）

HTML中的input标签是一个非常常用的标签，它具有多种属性，可以实现不同的功能。下面将详细介绍input标签的属性以及用法，并提供实例方便理解。

一、属性

1. type：指定输入框的类型。常用的类型有：

(1)text：文本输入框。

(2)password：密码输入框。

(3)checkbox：复选框。

(4)radio：单选框。

(5)submit：提交按钮。

(6)reset：重置按钮。

(7)button：普通按钮。

(8)file：文件上传框。

(9)hidden：隐藏域。

(10)date：日期选择框。

(11)datetime：日期时间选择框。

(12)time：时间选择框。

2. name：指定输入框的名称。

3. value：指定输入框的默认值。

4. disabled：禁用输入框。

5. readonly：只读输入框。

6. size：指定输入框的宽度。

7. maxlength：指定输入框最多允许输入的字符数。

8. checked：指定复选框或单选框是否被选中。

9. placeholder：指定输入框中的提示信息。

10. autofocus：自动获取焦点。

二、用法

1. 文本输入框

文本输入框是input标签的最基本用法，通过设置其type属性为text，可以创建一个文本输入框。

代码示例：

<label for="username">用户名：</label>
<input type="text" name="username" id="username" placeholder="请输入用户名">

效果：

用户名：（输入框）

2. 密码输入框

密码输入框是一种特殊的文本输入框，通过设置其type属性为password，可以创建一个密码输入框，用户输入的内容会被隐藏。

代码示例：

<label for="password">密码：</label>
<input type="password" name="password" id="password" placeholder="请输入密码">

效果：

密码：（输入框，输入的内容会被隐藏）

3. 单选框

单选框通过设置type属性为radio，并设置相同的name属性创建，只能够单选。

代码示例：

<label>性别：</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

效果：

性别：（单选框）男 女

4. 复选框

复选框通过设置type属性为checkbox，并设置相同的name属性创建，可以多选。

代码示例：

<label>爱好：</label>
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="sports">运动

效果：

爱好：（复选框）阅读 音乐 运动

5. 选择框

选择框使用select标签创建，可以创建一个下拉列表，用户可以从中选择一个选项。

代码示例：

<label for="province">省份：</label>
<select name="province" id="province">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
  <option value="shenzhen">深圳</option>
</select>

效果：

省份：(下拉列表) 北京 上海 广州 深圳

6. 按钮

按钮通过设置type属性为submit或button创建，submit按钮用于提交表单，button按钮用于普通的交互。

代码示例：

<input type="submit" value="提交">
<input type="button" value="取消">

效果：

提交 取消

7. 文件上传框

文件上传框通过设置type属性为file创建，用户可以选择上传的文件。

代码示例：

<label for="file">上传文件：</label>
<input type="file" name="file" id="file">

效果：

上传文件：（上传框）

8. 隐藏域

隐藏域通过设置type属性为hidden创建，用于存储表单的某些数据，用户看不到，但提交时会一并提交。

代码示例：

<input type="hidden" name="userid" value="12345">

效果：无

总结

通过以上实例可以看出，input标签非常灵活，可以创建多种不同类型的输入框。在实际开发中，我们需要根据需求选择不同的属性和类型，来创建出符合用户需求的输入框。