前端开发入门之【input 标签详解】

我用最简单的方式给你讲明白 input 标签：

input 是什么？

它就像网页上的小输入框，专门用来让用户输入内容或选择选项。比如：登录时的账号密码框、勾选同意协议的复选框，都是 input 做的。

核心特点（记住这3点）

1. type 属性决定它的样子：

   • type="text" → 普通文本框（输文字）
   • type="password" → 密码框（显示***）
   • type="checkbox" → 复选框（打勾√）
   • type="radio" → 单选按钮（几个选一个）

2. 必须配 name 属性：
   后台程序要靠 name 来识别你提交的数据（比如 name="username"）。

3. 用户输入的值在 value 里：
   比如你输入"123"，value 就变成 “123”。

举个最简单的例子

<label>你的名字：</label>
<input type="text" name="username" placeholder="请输入">

运行效果： 显示一个文本框，里面灰色提示文字是"请输入"。

常见用途

• 登录框（账号+密码）
• 搜索框（百度那个搜索栏）
• 问卷调查（单选/多选）
• 文件上传（type="file"）

注意！

1. 它是个自闭标签（写成 <input> 而不是 <input></input>）
2. 默认没有外观样式，要用CSS美化（比如加边框、改颜色）