HTML input标签怎么用？HTML input标签的类型与属性设置方法有哪些

HTML input标签是表单体系中用于收集用户输入信息的基础元素，通过不同的type属性设置，可以适配文本输入、密码输入、单选、多选、文件上传等多种交互场景，配合各类属性还能实现输入校验、默认值设置、提示信息展示等功能。

input标签的基础语法

input标签属于自闭合标签，不需要单独的结束标签，基础语法格式如下：

<input type="类型值" 属性名="属性值">

其中type是input标签最核心的属性，决定了输入框的交互类型，如果不设置type属性，默认类型为text，即普通文本输入框。

常见的input类型及用法

1. 文本输入类类型

这类类型用于接收用户手动输入的文本内容，包含以下几种常用类型：

• text：默认类型，用于输入普通文本，比如用户名、昵称等。
• password：密码输入框，输入的内容会被替换为圆点或者星号，避免内容被旁人看到。
• email：邮箱输入框，提交表单时会自动校验输入内容是否符合邮箱格式。
• number：数字输入框，只能输入数字，还可以通过属性设置输入范围。

对应的代码示例：

<!-- 普通文本输入框 -->
<input type="text" placeholder="请输入用户名">
<!-- 密码输入框 -->
<input type="password" placeholder="请输入密码">
<!-- 邮箱输入框 -->
<input type="email" placeholder="请输入邮箱地址">
<!-- 数字输入框，限制输入1到100之间的数字 -->
<input type="number" min="1" max="100" placeholder="请输入1-100的数字">

2. 选择类类型

这类类型不需要用户手动输入，而是通过点击选择预设的选项：

• radio：单选框，多个同name属性的radio只能选中一个，常用于性别、支付方式等互斥选项的选择。
• checkbox：复选框，可以同时选中多个，常用于兴趣爱好、协议勾选等场景。

代码示例：

<!-- 单选框，name相同实现互斥选择 -->
<p>性别：</p>
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label>

<!-- 复选框，可多选 -->
<p>兴趣爱好：</p>
<input type="checkbox" name="hobby" value="reading" id="reading">
<label for="reading">阅读</label>
<input type="checkbox" name="hobby" value="sports" id="sports">
<label for="sports">运动</label>
<input type="checkbox" name="hobby" value="music" id="music">
<label for="music">音乐</label>

3. 其他常用类型

• file：文件上传输入框，点击可以打开本地文件选择器，支持设置可上传的文件类型。
• submit：提交按钮，点击会将所在表单的数据提交到指定地址。
• button：普通按钮，需要配合JavaScript实现自定义交互逻辑。
• date：日期选择器，点击会弹出日期选择面板，方便用户选择日期。

代码示例：

<!-- 文件上传，限制只能上传图片 -->
<input type="file" accept="image/*">
<!-- 提交按钮 -->
<input type="submit" value="提交表单">
<!-- 普通按钮 -->
<input type="button" value="点击触发事件" onclick="alert('按钮被点击了')">
<!-- 日期选择器 -->
<input type="date">

input标签的核心属性设置

除了type属性之外，input标签还有很多常用属性，可以丰富输入框的功能：

综合使用这些属性的完整表单示例：

<form action="https://ipipp.com/submit" method="post">
  <p>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" placeholder="请输入6-12位用户名" required>
  </p>
  <p>
    <label for="userpwd">密码：</label>
    <input type="password" id="userpwd" name="userpwd" placeholder="请输入密码" required>
  </p>
  <p>
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age" min="18" max="60" value="18">
  </p>
  <p>
    <input type="submit" value="注册">
    <input type="reset" value="重置">
  </p>
</form>

注意事项

在使用input标签时，需要注意以下几点：

• 单选框和复选框如果需要显示文字说明，建议配合label标签使用，点击文字也可以触发选中，提升交互体验。
• 设置required属性时，只有输入框的value为空才会触发校验提示，如果设置了默认值则不会提示。
• disabled和readonly的区别在于，disabled状态的输入框值不会被提交，而readonly状态的值会被正常提交。

HTML_inputinput类型input属性表单交互修改时间：2026-07-24 12:00:37