使用input标签通过type属性创建不同输入框，如text、password、email等，并结合placeholder、required、name等属性提升功能与体验，配合label标签增强可访问性。
在HTML中，创建输入框主要使用 input 标签，通过设置不同的 type 属性来定义输入框的类型。最常见的文本输入框包括单行文本框、密码框、邮箱、数字等。下面详细介绍文本类输入框的常用类型与重要属性。
常见的文本输入框类型（type 属性）
input 的 type 属性决定了输入框的功能和限制。以下是常用的文本相关类型：
• text：标准单行文本输入框，用于输入普通文本。• password：密码输入框，输入内容以圆点或星号隐藏。
• email：邮箱输入框，浏览器会自动验证格式是否符合邮箱规则。
• number：只能输入数字，支持上下箭头调节数值。
• tel：电话号码输入框，不强制验证，但移动端会调出数字键盘。
• search：搜索框，部分浏览器会在输入框右侧显示清除按钮。
示例代码：
<input type="text" placeholder="请输入用户名"><br><input type="password" placeholder="请输入密码"><br><input type="email" placeholder="请输入邮箱"><br><input type="number" min="1" max="100"><br><input type="tel" placeholder="请输入电话号码"><br><input type="search" placeholder="搜索...">
input 标签的重要属性
除了 type，还有多个常用属性可以增强输入框的功能和用户体验：
立即学习“前端免费学习笔记（深入）”；
• placeholder：输入框内的提示文字，用户开始输入后自动消失。
• value：设置输入框的默认值。
• name：指定输入框名称，表单提交时用于标识数据字段。
• id：为输入框设置唯一标识，常用于关联 label 标签或 CSS/JS 操作。
• required：标记为必填项，提交表单时若为空会提示用户。
• disabled：禁用输入框，用户无法点击或输入。
• readonly：只读模式，用户不能修改内容，但可以提交。
• maxlength：限制最大输入字符数。
• autofocus：页面加载时自动获得焦点。
• autocomplete：控制是否启用自动填充，可设为 "on" 或 "off"。
示例：
<input type="text" name="username" id="user" placeholder="请输入姓名" value="张三" required maxlength="20" autofocus autocomplete="off">
结合 label 提高可访问性
使用 label 标签关联输入框，能提升用户体验和可访问性。点击 label 时，对应的输入框会自动获得焦点。
<label for="email">邮箱地址：</label><br><input type="email" id="email" name="email" placeholder="example@domain.com">
注意：for 属性值应与 input 的 id 一致。
基本上就这些。掌握这些基础类型和属性，就能在网页中灵活创建各种输入框。
