前端必知必会-html中input的type设置
文章目录
- HTML type的设置
- 输入类型文本
- 输入类型密码
- 输入类型提交
- 输入类型重置
- 输入类型单选按钮
- 输入类型复选框
- 输入类型按钮
- 输入类型颜色
- 输入类型日期
- 输入类型 Datetime-local
- 输入类型电子邮件
- 输入类型图像
- 输入类型 文件
- 输入类型 隐藏
- 输入类型 月份
- 输入类型 数字
- 输入类型范围
- 输入类型搜索
- 输入类型 Tel
- 输入类型 Time
- 输入类型 Url
- 输入类型 Week
- 总结
HTML type的设置
提示：type 属性的默认值为“text”。
输入类型文本
定义单行文本输入字段：
示例
输入类型密码
定义密码字段：
示例
密码字段中的字符被屏蔽（显示为星号或圆圈）。
输入类型提交
定义用于将表单数据提交给表单处理程序的按钮。
表单处理程序通常是一个带有用于处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定：
示例
如果省略提交按钮的 value 属性，按钮将获得默认文本：
示例
输入类型重置
定义一个重置按钮，该按钮将重置所有表单值，使其恢复为默认值：
示例
如果您更改输入值，然后单击“重置”按钮，表单数据将重置为默认值。
输入类型单选按钮
定义单选按钮。
单选按钮让用户只能从有限数量的选项中选择一个：
示例
选择您最喜欢的 Web 语言：
输入类型复选框
定义复选框。
复选框让用户可以从有限数量的选项中选择零个或多个选项。
示例
输入类型按钮
定义一个按钮：
示例
上面的 HTML 代码将在浏览器中显示如下浏览器：
输入类型颜色
用于应包含颜色的输入字段。
根据浏览器支持，颜色选择器可以显示在输入字段中。
示例
输入类型日期
用于应包含日期的输入字段。
根据浏览器支持，日期选择器可以显示在输入字段中。
示例
您还可以使用 min 和 max 属性为日期添加限制：
示例
输入类型 Datetime-local
指定日期和时间输入字段，不带时区。
根据浏览器支持情况，日期选择器可以显示在输入字段中。
示例
输入类型电子邮件
用于应包含电子邮件地址的输入字段。
根据浏览器支持情况，电子邮件地址可以在提交时自动验证。
某些智能手机可以识别电子邮件类型，并在键盘上添加“.com”以匹配电子邮件输入。
示例
输入类型图像
将图像定义为提交按钮。
图像的路径在 src 属性中指定。
示例
输入类型 文件
定义文件选择字段和文件上传的“浏览”按钮。
示例
输入类型 隐藏
定义隐藏输入字段（用户不可见）。
隐藏字段允许 Web 开发人员在提交表单时包含用户无法看到或修改的数据。
隐藏字段通常存储在提交表单时需要更新的数据库记录。
注意：虽然该值不会在页面内容中显示给用户，但可以使用任何浏览器的开发人员工具或“查看源代码”功能看到（并可以编辑）。不要使用隐藏输入作为安全措施！
示例
输入类型 月份
允许用户选择月份和年份。
根据浏览器支持，日期选择器可以显示在输入字段中。
示例
输入类型 数字
定义数字输入字段。
您还可以设置对可接受数字的限制。
以下示例显示一个数字输入字段，您可以在其中输入 1 到 5 之间的值：
示例
输入限制
以下是一些常见输入限制的列表：
| 属性 | 描述 |
|---|---|
| checked | 指定在页面加载时应预先选择输入字段（对于 type=“checkbox” 或 type=“radio”） |
| disabled | 指定应禁用输入字段 |
| max | 指定输入字段的最大值 |
| maxlength | 指定输入字段的最大字符数 |
| min | 指定输入字段的最小值 |
| pattern | 指定用于检查输入值的正则表达式 |
| readonly | 指定输入字段是只读的（不能更改） |
| required | 指定输入字段是必填的（必须填写） |
| size | 指定输入的宽度（以字符为单位） field |
| step | 指定输入字段的合法数字间隔 |
| value | 指定输入字段的默认值 |
以下示例显示一个数字输入字段，您可以在其中输入从 0 到 100 的值，步长为 10。默认值为 30:
示例
输入类型范围
定义用于输入其确切值不重要的数字的控件（如滑块控件）。默认范围是 0 到 100。但是，您可以使用 min、max 和 step 属性设置接受数字的限制：
示例
输入类型搜索
用于搜索字段（搜索字段的行为类似于常规文本字段）。
示例
输入类型 Tel
用于应包含电话号码的输入字段。
示例
输入类型 Time
允许用户选择时间（无时区）。
根据浏览器支持，时间选择器可以显示在输入字段中。
示例
输入类型 Url
用于应包含 URL 地址的输入字段。
根据浏览器支持，url 字段可以在提交时自动验证。
某些智能手机可以识别 url 类型，并在键盘上添加“.com”以匹配 url 输入。
示例
输入类型 Week
允许用户选择周和年。
根据浏览器支持，日期选择器可以显示在输入字段中。
示例
总结
本文介绍了的html中input的type设置，如有问题欢迎私信和评论