在HTML中，输入框主要通过<input>标签实现，通过配置不同的属性可以生成适配不同场景的输入组件，是表单开发中最基础也最常用的元素之一。
input标签基础创建方式
最基础的文本输入框只需要使用<input>标签，并将type属性设置为text即可，默认情况下type为text时可以省略该属性，但显式声明更利于代码可读性。
<!-- 基础文本输入框 --> <input type="text">
常见的文本框类型
input标签的type属性决定了输入框的类型，针对文本输入场景，常用的类型有以下几种：
- text：默认文本输入框，用于输入普通文本，如用户名、备注信息等
- password：密码输入框，输入的内容会被掩码显示为圆点或星号，避免明文泄露
- email：邮箱输入框，提交表单时会自动校验输入内容是否符合邮箱格式
- number：数字输入框，只能输入数字，部分浏览器会自带增减数值的按钮
- tel：手机号输入框，在移动端会唤起数字键盘，方便用户输入
以下是不同类型文本框的代码示例：
<!-- 密码输入框 --> <input type="password" placeholder="请输入密码"> <!-- 邮箱输入框 --> <input type="email" placeholder="请输入邮箱地址"> <!-- 数字输入框 --> <input type="number" min="0" max="100" value="10"> <!-- 手机号输入框 --> <input type="tel" placeholder="请输入手机号">
核心属性说明
除了type属性，input标签还有很多常用属性可以调整输入框的行为和展示效果，以下是高频使用的属性：
| 属性名 | 作用说明 | 示例 |
|---|---|---|
| placeholder | 输入框为空时显示的提示文本，不会作为输入值提交 | placeholder="请输入用户名" |
| name | 输入框的名称，表单提交时作为参数的键名 | name="username" |
| value | 输入框的默认值，页面加载时会直接显示在输入框中 | value="默认文本" |
| maxlength | 限制输入的最大字符数，超过后无法继续输入 | maxlength="11" |
| required | 标记为必填项，表单提交时如果为空会阻止提交并提示 | required |
| disabled | 禁用输入框，用户无法编辑，值也不会被提交 | disabled |
| readonly | 设置为只读，用户无法编辑，但值会被正常提交 | readonly |
完整表单示例
以下是一个包含多种文本框的完整表单示例，演示不同属性和类型的组合使用：
<form action="https://ipipp.com/submit" method="post">
<p>
<label>用户名：</label>
<input type="text" name="username" placeholder="请输入用户名" maxlength="20" required>
</p>
<p>
<label>密码：</label>
<input type="password" name="password" placeholder="请输入6-16位密码" minlength="6" maxlength="16" required>
</p>
<p>
<label>邮箱：</label>
<input type="email" name="email" placeholder="请输入邮箱地址" required>
</p>
<p>
<label>年龄：</label>
<input type="number" name="age" min="1" max="120" value="18">
</p>
<p>
<input type="submit" value="提交信息">
</p>
</form>注意事项
使用input标签创建输入框时，需要注意以下几点：
- 如果输入框需要被表单提交，必须设置name属性，否则提交时不会携带该输入框的值
- password类型的输入框仅做前端掩码，提交时仍然是明文传输，涉及敏感信息需要配合后端加密处理
- disabled和readonly的区别在于，disabled的输入框值不会被提交，readonly的会被正常提交
- email、number等类型的校验仅在前端生效，后端仍然需要做参数校验，避免恶意提交不符合格式的数据