HTML input 标签示例详解
发布时间：2025-06-20 16:36:40 作者：朝阳39 
我要评论
我要评论input 标签主要用于接收用户的输入，随 type 属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTML input 标签，感兴趣的朋友一起看看吧
input 标签主要用于接收用户的输入，随 type 属性值的不同，变换其具体功能。
通用属性
| 属性 | 属性值 | 功能 |
|---|---|---|
| name | 字符串 | 定义输入字段的名称，在表单提交时，服务器通过该名称来获取对应的值 |
| disabled | 布尔值 | 禁用输入框，使其无法被用户修改和操作，也不会被提交 |
| readonly | 布尔值 | 使输入框内容只读，无法编辑，但可以被选中和复制 |
输入框
| 属性 | 属性值 | 功能 |
|---|---|---|
| value | 字符串 | 输入框的默认值 |
| placeholder | 字符串 | 输入框内的提示文本，当用户未输入内容时显示，输入内容后消失 |
单行文本输入框 text
<input type="text" name="username" placeholder="请输入用户名" />
| 属性 | 属性值 | 功能 |
|---|---|---|
| maxlength | 数字 | 可输入的最大字符数 |
密码输入框 password
<input type="password" name="password" placeholder="请输入密码" />
数字输入框 number
可通过上下箭头调整数值
<input type="number" name="age" min="0" max="200" />
| 属性 | 属性值 | 功能 |
|---|---|---|
| min | 数字 | 最小值 |
| max | 数字 | 最大值 |
| step | 数字 | 输入值的增量或减量 |
step="2"表示输入值的增量或减量为 2，min="0"表示最小值为 0。用户只能输入 0、2、4、6 等符合步长规则的值。
电子邮件输入框 email
<input type="email" name="email" placeholder="请输入邮箱地址" />
网址输入框 url
<input type="url" name="website" placeholder="请输入网址">
搜索输入框 search
用于搜索的文本字段，一些浏览器会显示搜索图标等样式
<input type="search" name="search" placeholder="请输入搜索内容" />
按钮 submit reset button image
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<!-- 普通按钮 -->
<input type="button" value="按钮" />
<!-- 使用图像作为提交按钮 -->
<input type="image" src="submit-button.png" alt="Submit Form" />- 提交按钮，用于将表单数据发送到服务器进行处理
- 重置按钮，点击可将表单字段重置为初始值
- 普通按钮，通常与 JavaScript 一起使用来触发脚本或执行特定操作
| 属性 | 属性值 | 功能 |
|---|---|---|
| formaction | 字符串 | 用于覆盖 <form> 元素本身的 action 属性，允许在同一个表单中为不同的提交按钮指定不同的目标 URL，使表单数据可以根据不同的操作需求提交到不同的处理页面。 |
<input type="submit" formaction="URL1"> <input type="image" formaction="URL2"> <button type="submit" formaction="URL3">提交</button>
用户点击 <input type="image"> 按钮时，除了表单中的其他数据，浏览器还会自动提交两个额外的参数：x 和 y，它们分别表示用户点击图像的水平和垂直坐标。在服务器端脚本中可以获取这些坐标值。
单选 radio
<input type="radio" name="sex" value="男" checked />男
<input type="radio" name="sex" value="女" />女| 属性 | 属性值 | 功能 |
|---|---|---|
| checked | 布尔值 | 设置默认选中状态 |
多选 checkbox
<input type="checkbox" name="hobby" value="篮球" />篮球
<input checked type="checkbox" name="hobby" value="阅读" />阅读
<input checked type="checkbox" name="hobby" value="编程" />编程| 属性 | 属性值 | 功能 |
|---|---|---|
| checked | 布尔值 | 设置默认选中状态 |
文件上传 file
<input type="file" />
滑块 range
<input type="range" name="range" min="0" max="100" step="1" />
| 属性 | 属性值 | 功能 |
|---|---|---|
| step | 数字 | 滑块移动的间隔 |
| min | 数字 | 最小值 |
| max | 数字 | 最大值 |
step="5"意味着滑块每次移动的距离是 5 个单位，用户可以选择的值为 0、5、10 等
颜色选择器 color
用户可以选择颜色
<input type="color" name="color" />
日期选择器 date
<input type="date" name="birthdate" />
step="7"表示日期选择的间隔为 7 天，用户只能选择每周的同一天。
时间选择器 time
<input type="time" name="startTime" />
到此这篇关于HTML input 标签的文章就介绍到这了,更多相关html input 标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- 这篇文章主要介绍了在HTML中限制input 输入框只能输入纯数字的实现,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参2021-01-27
这篇文章主要介绍了html中input提示文字样式修改,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-30html form表单input使用disabled后提交不能获取表单值的解决方法
这篇文章主要介绍了html form表单input使用disabled后提交不能获取表单值的解决方法,需要的朋友可以参考下2018-07-18
HTML input file控件限制上传文件类型_动力节点Java学院整理
如何限制上传文件类型？这篇文章主要为大家详细介绍了HTML input file控件限制上传文件类型，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-21- 本文主要介绍了限制html文本框input只能输入数字和小数点的方法。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-27
HTML中文件上传时使用的<input type="file">元素的样式自定义
这篇文章主要介绍了HTML中文件上传时使用的<input type="file">元素的样式自定义的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-29浅谈html中input只读属性readonly和disable的区别
下面小编就为大家带来一篇浅谈html中input只读属性readonly和disable的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-14- 下面小编就为大家带来一篇浅析html input 等值改变添加监听事件。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-04-15
- 这篇文章主要介绍了详解HTML的input标签及其禁用方法,归纳了几种CSS中使用disabled属性实现禁用的方法,需要的朋友可以参考下2015-08-05
- 有时候浏览器有很多缓存，我们就执行不了某种操作，必须要清除缓存才可以运行，其实多数浏览器默认会缓存input的值，只有使用ctl+F5强制刷新的才可以清除缓存记录。如果不2014-11-11
最新评论