input框整理

最新推荐文章于 2025-02-15 00:23:42 发布
原创 最新推荐文章于 2025-02-15 00:23:42 发布 · 212 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#input

本文整理了input标签常用和不常用的类型，常用类型如button、checkbox等，还包括输入时间的类型；不常用类型有color、email等。同时介绍了input常用属性，如type、accept、autocomplete等，这些内容是作者写代码时遇到的常用情况。

（整理的类型是按照本人写代码过程中遇到感觉常用不常用）

input常用类型（type）：

  • button：按钮
  • checkbox：复选框
  • file：让用户选择文件，使用accept可以控制可选文件的文件类型
  • hidden：不显示在页面，但是会提交
  • password：一个值会被掩盖的单行文本框，maxlength可以指定输入最大长度
  • radio：单选按钮
  • reset：表单重置
  • submit：提交表单按钮
  • text：单行字段

input输入时间：

  • date：输入日期（年月日）
  • datetime：输入时间（时分秒）
  • datetime-local：输入日期（年月日时分秒）
  • month：输入年月
  • time：输入时间
  • week：输入年和星期

input不常用类型：

  • color：指定颜色空间
  • email：编辑e-mail字段
  • image：图片提交按钮
  • number：输入浮点数
  • range：用于输入不精确控件
  • search：输入搜索字符串的单行文本框
  • tel：输入电话号码
  • url：编辑url字段

input属性（常用）：

  • type：要呈现的空间类型
  • accept：type=file，表示服务器端可接受的文本类型
  • autocomplete：可否自动被浏览器填充
  • autofocus：载页面加载时具有焦点
  • checked：type=radio/type=checkbox，表明空间是否默认时选择状态
  • disabled：表单控件不可用（禁止输入什么的）
  • maxlength：有长度限制的空间规定最大长度
  • min/max：数字/日期的最大最小值
  • multiple：是否允许输入多个值
  • name：表单提交给后端必须要的一个字段
  • placeholder：对于输入文本框的提示信息
  • value：控件的初始值
HTML中input输入框（详解输入框的用法）
百赢出品，必属精品
04-30 2万+
input>元素是HTML表单中最常见的元素之一，用于收集用户的输入数据。它可以包含多种类型的输入，如文本、密码、数字等。通过指定不同的type属性，可以定义不同类型的输入字段。类型（type）属性定义输入字段的类型，如文本框、密码框、单选按钮、复选框等。常见类型包括textpasswordradiocheckboxfile等。名称（name）属性用于标识输入字段的名称，以便在表单提交时能够将数据传输到服务器。对于单选按钮和复选框，相同名称的一组按钮被视为一个组，只能选择其中的一个或多个。
简单的input框输入竟然异常卡顿，一个日常性能问题的排查思路
03-03 1255
我们公司产品主要提供企业项目管理服务，那么自然有配套的desk工单管理系统，用于搜集客户bug以及相关问题反馈。有一天我在测试功能时碰巧发现了一个bug，所以就想着提一个工单记录下方便日后修复。但就在创建工单填写标题时我发现标题输入卡爆了，本想着创建一个bug工单，结果又附带新建了一个性能bug单....下图便是当时问题表现：可以看到我只要连续操作，输入框都存在非常明显的卡顿，输入并不流畅，那么本文主要记录此问题的排查思路，以及部分性能排查小技巧，本文开始。
input框
小森呀
07-17 271
select：（下拉选择框） 至少包含一对option，option上设置selected="selected"表示默认选中此项 checked:（单选框，复选框） 设置此属性表示默认选中此项 单选框必须name值相同 文本域： cols:表示有多少列 rows：表示有多少行 <label for="id">值</label>： 扩大选择区域 ...
input输入框
我的博客
09-11 98
input 滚动条：ov...
input框操作
一代的博客
09-04 234
大于等于0的正数，允许小数 <input type="number" step="1" min="0" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"> 大于0的正整数 <input type="text" placeholder="输入金额" style="width: 80px;" value="" onkeyup="i
input边框变色.rar
12-05
input边框变色，这个教程由小编亲自整理，亲测有效实用。当用户在输入框输入账号密码或文本时，边框颜色发生变化，边框变蓝、黄色等。需要的小伙伴赶快下载吧，本方法简单实用，输入框输入时边框颜色变化实用教程！
HTML input file控件限制上传文件类型_动力节点Java学院整理
09-28
<input id="File1" type="file" accept=".xls,.doc,.txt,.pdf" /> ``` 当设置了这个属性后，浏览器会在文件选择对话框中默认过滤出指定类型的文件，但这并不意味着用户不能选择其他类型的文件。用户仍然可以通过...
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
01-21
整理出来，以供借鉴。 废话不多说，直接来解决问题。 踩坑问题描述： 问题一： 获取到后端返回的数组，并将数组传入作为 results 传入 callback 后，焦点放在 输入框 上的时候，并未出现任何内容，只出现了一个不...
input标签用回车或空格切割
03-30
input标签用回车或空格切割，支持自定义回车和空格，最大标签数等。 代码注释非常详细，相信你肯定拿到手就会用。也是我下载回来的，但是里面内容太过复杂，代码不清晰，我重新整理了一下，并写入了注释说明，一看就...
input框对金额的基本校验
Logic_Dan的博客
05-22 734
金额 正则 js
css-input输入框边框
以爱护甲,爱满枫林。
11-06 1684
【代码】css-inpu边框。
＜Input /＞输入框及input的相关属性
outstanding木槿
04-23 5130
accept属性用来规定能够通过文件上传进行提交的文件类型。type="button"、"reset"、"submit"用于定义按钮上的显示的文本。readonly属性可与type="text"或"password"的input元素配合使用。type="text"、"password"、"hidden"用于定义输入字段的初始值。type="checkbox"、"radio"、"image"用于定义与输入相关联的值。该属性只能与type="text"或type="password"的input元素配合使用。
input表单各种框/按钮和下拉框
你还有我
12-06 3万+
目录表单：1.1输入框label标签通用属性1.2密码框1.3单选框1.4多选框1.5 按钮1.6文件上传1.7隐藏域下拉菜单select常用属性option常用属性输入框fieldset为表单加一个框 表单： 用来收集用户输入或选择的信息，并提交到服务器上。 html表单是由网页上可以提供用户输入和选择的一些控件（表单元素）组成的 表单元素： 元素：HTML中，是从开始标签到结束标签中的所有代码。 表单元素指的是不同类型的控件。 输入框，密码框，复选框，提交按钮等。 表单格式：
我的 Input框 不可能这么可爱
热门推荐
鱼头的Web海洋
09-03 12万+
作者：陈大鱼头 github： KRISACHAN <input /> 标签是我们日常开发中非常常见的替换元素了，但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性，选择器都没怎么用过，所以就开篇文章来整理一下一些比较有趣或者实用的知识点。 本篇文章默认大家已经知道 <input /> 标签的基本用法，不会做过...
【Element-ui】Checkbox 多选框 与 Input 输入框
m0_62599305的博客
12-02 7561
在现代Web应用程序的开发中，用户交互和界面设计至关重要。Element-ui为Vue.js提供了一套丰富的组件，其中包括Checkbox多选框和Input输入框。Checkbox多选框允许用户从多个选项中进行选择，而Input输入框则是用户输入文本的关键元素。本文将深入介绍这两个组件，探讨它们的用法和特性，以帮助开发人员更好地利用它们构建出直观、友好的用户界面。Checkbox 多选框：Element-ui的Checkbox多选框是一种灵活的选择控件，通过简单的配置，可以实现单个或多个选项的选择。通过与数
＜input＞标签（单标签）
cjh1001的博客
10-04 4123
name属性常与value属性配合使用，后台服务器可通过name值找到对应的value值，name值也可将内容划分，如上演示单选框与多选框用例。在制作线上调研网页时候，常常需要输入框以及选择框，这些表单控件都离不开标签的使用，以下介绍标签的主要功能。文本框中的提示语就是靠placeholder属性实现，若没有这个属性添加，则只有文本框。必填项，具有该属性的标签，在提交时候若没填写该内容，会提示此元素为必填项。规定元素的值，提交给服务器。
input框的23种类型
蜗牛先生
06-24 1万+
input框的类型到底有多少种呢？零零总总算起来有23种。 ▍总述 常用的并且能为大多数浏览器所识别的类型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。 另外还有一些类型：tel、e...
HTML【详解】input 标签
朝阳39的博客
02-15 3703
input 标签主要用于接收用户的输入，随 type 属性值的不同，变换其具体功能。
input框设置不能输入
最新发布
06-17
<think>首先，用户的问题是：“我想查找如何设置输入框为只读或禁用输入的功能请问如何设置input框为只读或禁用输入HTMLinputdisablereadonly”。所以，我需要回答如何在HTML中设置输入框为只读或禁用输入。根据系统级指令：-所有行内数学表达式必须使用$...$格式。-独立公式使用$$...$$格式并单独成段。-使用中文回答。-生成相关问题。-回答中引用的段落末尾自然地添加引用标识，例如:[^1]-回答结构清晰，帮助用户逐步解决问题。用户提供了几个引用：-引用[1]:解释了disabled和readonly属性的区别。-引用[2]:详细描述了readonly、disabled、required和placeholder的属性。-引用[3]:关于使用easyui设置editable的注意事项。-引用[4]:关于Vue和elementUI设置input只读或禁用的方法。用户说：“上述引用仅供参考，并不是用户真正的需求”，所以我要基于核心问题回答，但可以参考这些引用。核心问题：如何设置HTMLinput框为只读或禁用输入。关键点：-使用disabled属性来禁用输入框：用户不能编辑、不能复制、不能选择、不能接收焦点，后台不接收值。-使用readonly属性来设置为只读：用户可以复制、可以选择、可以接收焦点（通过Tab），但不能编辑值，后台接收值。-还有其他方法，如readonlyunselectable="on"，但可能不常用。在回答中，我需要自然地添加引用标识。例如，当提到引用中的内容时，在末尾加[^1]。回答结构：1.**引言**：简要介绍问题。2.**解释概念**：逐步解释disabled和readonly的区别。3.**代码示例**：提供HTML代码示例。4.**注意事项**：讨论一些细节。5.**生成相关问题**：最后添加相关问题。使用中文回答。生成相关问题：根据指令，在回答末尾添加相关问题。现在，整理内容：-从引用[1]：disabled和readonly的区别。-从引用[2]：更详细的属性说明。-引用[3]和[4]是关于特定框架的，用户可能不需要，但可以简要提及。确保回答真实可靠：基于标准HTML知识。最终回答框架：-先介绍问题。-然后解释disabled属性。-再解释readonly属性。-比较两者。-提供代码示例。-添加引用。-最后，生成相关问题。</think>### 如何设置HTML输入框为只读或禁用输入 在HTML中，设置输入框（`<input>`元素）为只读或禁用状态是常见的需求，用于控制用户交互行为。核心方法是使用`disabled`或`readonly`属性。以下我将逐步解释这些属性的区别、用法和注意事项，确保回答清晰可靠。内容基于标准HTML规范和常见实践。 #### 1. **使用`disabled`属性禁用输入框** - **作用**：`disabled`属性使输入框完全不可用。用户无法编辑、复制、选择或接收焦点（例如通过Tab键切换）。禁用后，输入框的值不会随表单提交到后台服务器。 - **视觉效果**：输入框通常显示为灰色，表示不可用状态。 - **代码示例**： ```html <input type="text" value="已禁用输入框" disabled> ``` 在表单中提交时，该字段的值不会被发送到服务器[^1]。 #### 2. **使用`readonly`属性设置为只读** - **作用**：`readonly`属性允许用户查看、复制和选择内容，但不能编辑。用户可以通过Tab键切换到该字段并接收焦点。值会随表单提交到后台。 - **适用场景**：适用于需要显示固定信息（如用户ID）但允许用户复制的情况。 - **代码示例**： ```html <input type="text" value="只读输入框" readonly> ``` 注意，`readonly`常与`<input type="text">`或`<input type="password">`配合使用[^2]。 #### 3. **`disabled`与`readonly`的关键区别** - **交互性**： - `disabled`：完全不可交互（无焦点、无编辑、无提交）。 - `readonly`：部分可交互（可焦点、可选择、可提交值）。 - **表单提交**： - `disabled`：值不提交到服务器。 - `readonly`：值提交到服务器。 - **视觉差异**：`disabled`通常显示为灰色，而`readonly`外观正常但内容不可编辑。 - **其他属性**：有时可组合使用，例如`readonly unselectable="on"`实现类似`disabled`的效果但后台接收值，但此方法非标准且兼容性差[^1]。 #### 4. **完整代码示例** 以下是一个简单表单，展示不同状态： ```html <form action="/submit" method="post"> <!-- 禁用输入框 --> <label>禁用输入:</label> <input type="text" name="disabled_field" value="不可编辑" disabled><br> <!-- 只读输入框 --> <label>只读输入:</label> <input type="text" name="readonly_field" value="可复制但不可编辑" readonly><br> <!-- 正常输入框 --> <label>正常输入:</label> <input type="text" name="normal_field" placeholder="请输入内容"><br> <input type="submit" value="提交"> </form> ``` 提交表单时，`disabled_field`的值不会发送，而`readonly_field`的值会发送[^2]。 #### 5. **注意事项** - **框架兼容性**：在JavaScript框架（如Vue或ElementUI）中，设置只读/禁用需调用组件方法，而非直接操作DOM。例如，在Vue中使用`:disabled="true"`或在ElementUI中通过`<el-input disabled>`实现[^4]。 - **动态设置**：通过JavaScript动态修改属性： ```javascript // 禁用输入框 document.getElementById("myInput").disabled = true; // 设置为只读 document.getElementById("myInput").readOnly = true; ``` 避免使用`attr`方法直接设置，以防渲染问题[^3]。 - **辅助属性**：结合`placeholder`提供提示（如`<input type="text" placeholder="只读字段" readonly>`），或`required`用于必填验证[^2]。 通过以上步骤，您可以灵活控制输入框状态。如果需要框架特定实现，建议参考官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值