在HTML中，<input> 标签的 type 属性定义了输入框的类型。以下是一些常见的输入框类型及其详细代码示例：
- 文本 (text)
用于输入单行文本。
html复制代码
<input type="text" name="username" placeholder="请输入用户名"> |
- 密码 (password)
用于输入密码，输入的内容会被掩码处理。
html复制代码
<input type="password" name="password" placeholder="请输入密码"> |
- 数字 (number)
用于输入数字，通常带有上下箭头以增减数值。
html复制代码
<input type="number" name="age" min="0" max="150" placeholder="请输入年龄"> |
- 日期 (date)
用于选择日期。
html复制代码
<input type="date" name="birthday"> |
- 电子邮件 (email)
用于输入电子邮件地址，某些浏览器会进行格式验证。
html复制代码
<input type="email" name="email" placeholder="请输入电子邮件地址"> |
- 搜索 (search)
用于搜索字段，通常显示为圆角的输入框。
html复制代码
<input type="search" name="search" placeholder="搜索..."> |
- 电话 (tel)
用于输入电话号码，不进行特定格式的验证。
html复制代码
<input type="tel" name="phone" placeholder="请输入电话号码"> |
- URL (url)
用于输入URL地址，某些浏览器会进行格式验证。
html复制代码
<input type="url" name="website" placeholder="请输入网址"> |
- 单选按钮 (radio)
用于一组选项中选择一个。
html复制代码
<input type="radio" id="option1" name="option" value="option1"> |
|
<label for="option1">选项1</label><br> |
|
<input type="radio" id="option2" name="option" value="option2"> |
|
<label for="option2">选项2</label> |
- 复选框 (checkbox)
用于选择多个选项。
html复制代码
<input type="checkbox" id="fruit1" name="fruit" value="apple"> |
|
<label for="fruit1">苹果</label><br> |
|
<input type="checkbox" id="fruit2" name="fruit" value="banana"> |
|
<label for="fruit2">香蕉</label> |
- 提交按钮 (submit)
用于提交表单。
html复制代码
<input type="submit" value="提交"> |
- 重置按钮 (reset)
用于重置表单中的所有字段到初始值。
html复制代码
<input type="reset" value="重置"> |
- 隐藏字段 (hidden)
用户不可见的字段，通常用于存储不需要用户输入但需要随表单提交的数据。
html复制代码
<input type="hidden" name="token" value="some_token_value"> |
- 文件上传 (file)
用于文件上传。
html复制代码
<input type="file" name="myFile"> |
- 颜色选择器 (color)
用于选择颜色。
html复制代码
<input type="color" name="favoriteColor"> |
- 范围选择器 (range)
用于在一定范围内选择一个数值。
html复制代码
<input type="range" name="points" min="1" max="10"> |
请注意，不是所有的浏览器都支持所有类型的输入框，某些较新或不太常见的类型可能需要在较新版本的浏览器中才能正确显示和工作。在使用这些输入框类型时，最好进行跨浏览器测试以确保兼容性。