Input标签

最新推荐文章于 2025-02-15 00:23:42 发布
最新推荐文章于 2025-02-15 00:23:42 发布
阅读量210 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 第一个项目 文章标签： MVC
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44540140/article/details/90631923
本文以input标签为例创建form表单，介绍其常用功能与使用方法。包括获取焦点（autofocus属性）、隐藏密码（type=password）、可查看式密码框（js修改type属性）、最大输入长度（maxlength属性）、隐藏域（type=hidden）、输入提示（placeholder属性）和只读（readonly属性）等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

开发工具与关键技术：VS    JS
作者：宋永烨
撰写时间：2019/5/21

form表单的组件中,使用频率最高的,就是input标签了,input标签有很多的事件与属性,本为会使用最为常用的几种作为一个实例来创建一个from表单,以演示其特有的功能与使用方法
以下为本文效果图
在这里插入图片描述 在这里插入图片描述在这里插入图片描述
功能一 获取焦点
input标签的autofocus属性 ,在页面加载以后,焦点会聚集在含有此属性的标签上,
使用方法: 直接在input标签中添加该属性即可
功能二 隐藏密码
input标签的type属性在选择不同的属性值时,会有不同的效果,最常用的就是text即文本框,而如果使用password属性,即可实现隐藏密码的效果
拓展一 可查看式密码框
input标签的type属性的text值的文本框与password值的密码框的样式基本一样,除了密码遮盖效果以外,所以可以听过js代码,选中密码框,通过js修改type的属性值为text与按钮的文字为”隐藏密码”,再此点击返回最初的样式与文字即可
以下为具体代码
Html部分
一个input标签与一个按钮,与键盘弹起事件绑定的方法是本人上一篇文献的内容
功能三:最大输入长度
maxlength此属性的值为整形且值为正整数(否则无效),输入的值即为本文本框(包括所有输入框)的最长输入字段,应用方向:譬如身份证的长度是固定的,电话号的长度是固定的等等
在这里插入图片描述
Js部分 (以下代码皆在页面加载完成后加载)
给按钮添加一个点击事件,点击事件中有两个判断, 以下判断皆使用三目运算
判断一
id为Z_input的input标签(密码框)的type属性的值 等于 字符串 password 吗?
如果等于,将id为Z_input的标签的type属性的值修改为text
如果不等于,将id为Z_input的标签的type属性的值修改为password
在这里插入图片描述
判断二
Id为button的标签的text属性的值(文本值,不包含子元素的标签)是否等于“查看密码”
如果等于,将Id为button的标签的text属性的值修改为 “隐藏密码”
如果不等于,将Id为button的标签的text属性的值修改为 “查看密码”
功能四 隐藏域
常用于隐藏某个表的ID,当页面需要修改数据时,就需要使用到ID,而ID一般不会给用户看到,说以会使用隐藏的属性隐藏这个文本框,但其实再修改的数据回填时,他是获取了数据的,只是看不到而已,比如上文就有一个隐藏的文本框
使用方法:使用方法较为简便,将input的type属性值修改为hidden即可
功能五 输入提示
有时候不想使用label标签或页面布局的位置不够又或者仅为了使用户更为清楚的分辨该文本框需要输入的信息的内容应该是什么的时候 就可以使用到placeholder这个属性.
这个属性可以再input标签的文本框显示一段文本,并在你输入内容时消失
使用方法:再input标签中添加此属性并赋值, placeholder属性的值就是提示文本的内容
功能六 只读
当你的某些文本框需要显示数据给用户看但又不想让用户修改此文本框的数据时,就可以使用input标签的readonly属性
此属性多用于信息的展示,比如修车的维修单号,你可以看,但不能改
使用方法:再input标签中直接添加readonly属性
总结:
本文是一篇实用性文章,希望可已帮助到看此文章的每一个人

如何改变<input type=”text" >输入框内的值
菜鸟史
12-25 8009
请输入第一个数 type="text" id="first">   请输入第二个数 type="text" id="second">   计算结果 type="text" id="get_result">   -->   type="button" value="+" id="add" onclick="check(
input标签属性详解大全
_吉尔伽美什
05-09 7万+
我们先来了解一下input标签的几个基本控制属性。 name属性：元素的名称，也就是name的值代表当前input元素的名字； value属性：元素的默认值 1）当input type=“text”、“password”、"hidden"时，定义输入字段的初始值； 2）当input type=“button”、“reset”、"submit"时，定义按钮上的显示的文本； 3）当input typ...
input标签的value属性详解
WinstonLau的博客
03-13 6万+
value 属性的用法是由 input 标签的 type 属性的值决定的 当 type 的取值为 button、reset、submit 中的其中一个时，此时 value 属性的值表示的是按钮上显示的文本 当 type 的取值为 text、password、hidden 中的其中一个时，此时 value 属性的值表示的是输入框中显示的初始值 当 type 的取值为 checkbox、radio、...
动态更改input标签的type属性(如password改为text)
nrain01的专栏
12-25 2696
&lt;HTML&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;script&gt; function removeSubmitFocus(){ document.all('pass').outerHTML="&lt;input
jquery如何根据id获取标签内的值,以及如何通过id赋值，各种标签赋值取值汇总
荒的博客
07-30 8794
input标签可以用$("#id").val(); span标签可以用$("#id").text(); 赋值：在text后边的括号里加上值就好 //1， 纯js获取数据 var a = document.getElementById("id1").innerText; //2， jqeury获取数据 var a = $("#id1").html(); var b = $("#id1").text(); alert(a + "1234"); alert(b + "5678"); //3，.
如何自动聚焦到表单的某个input标签（autofocus）
WinstonLau的博客
03-13 9146
我们可以让表单显示出来的时候即聚焦于某个 input 元素，这样用户就能直接在其中输入数据而不必先动手选择它 要实现这种效果，我们需要用到 input 标签的 autofocus 属性 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&a
input标签
m0_57149894的博客
05-26 9442
我们先来了解一下input标签的几个基本控制属性。 name属性：元素的名称，也就是name的值代表当前input元素的名字； value属性：元素的默认值 1）当input type=“text”、“password”、"hidden"时，定义输入字段的初始值； 2）当input type=“button”、“reset”、"submit"时，定义按钮上的显示的文本； 3）当input type=“checkbox”、“radio”、"image"时，定义与输入相关联的值； 注意：input type=
HTML【详解】input 标签
朝阳39的博客
02-15 3361
input 标签主要用于接收用户的输入，随 type 属性值的不同，变换其具体功能。
input标签的type属性汇总
热门推荐
夏天的博客
04-20 10万+
1.单行输入框< input type=“text”/> 单行文本输入框常用来输入简短的信息，如用户名、账号等，常用的属性有name、value、 maxlength。 2.密码输入框< input type=" password"/> 密码输入框用来输入密码，其内容将以圆点的形式显示。 3.单选按钮< input type=" radio"/> 单选按钮用于单项选择，如选择性别、是否操作等。需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“
input标签介绍
m0_61696809的博客
02-21 6731
inputtype="password"name="password"placeholder="请输入密码"/>标签用于创建可交互的表单控件，例如文本输入框、复选框、单选按钮等。元素有许多不同的属性，它们可以控制输入框的类型、默认值、是否必填、输入框的大小等等。元素，用户可以在表单中输入文本、数字、日期、时间、文件等不同类型的数据。：创建重置按钮，用于将表单的值重置为默认值。
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
10-22
标题中提到的“jQuery ajax请求返回list数据动态生成input标签, 并把list数据赋值到input标签”涉及到多个知识点。首先，我们来探讨jQuery和ajax请求的基础概念，然后详细了解如何使用ajax请求从服务器获取数据，并...
使用jQuery给input标签设置默认值
10-22
本文将详细介绍如何使用jQuery给input标签设置默认值，并通过实例来讲解其具体操作。 ### jQuery基础 在开始使用jQuery之前，我们先了解一些基础知识点。jQuery是一个快速、小巧且功能丰富的JavaScript库。它通过...
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
12-30
在公司的开发过程中，遇到了一个问题：如何处理 form 表单提交了多个 name 属性值相同的 input 标签？源码如下（源码是在 form 表单之中的）： <!--{loop $address $index $one}--> <input type=...
如何用input标签和jquery实现多图片的上传和回显功能
10-18
// 给input标签绑定change事件 $input.on("change", function() { // 获取选择图片的个数 var files = this.files; var length = files.length; console.log("选择了" + length + "张图片"); // 回显 for ...
React中实现虚拟列表的性能优化方案.doc
08-14
React中实现虚拟列表的性能优化方案.doc
编译原理与编译器设计-词法分析语法分析中间代码生成-基于C语言的Tiny编译器实现-北京理工大学2016年编译原理课程实验项目包含词法分析模块语法分析模块和中间代码生成模块使用Ti.zip
08-14
jdk1.8编译原理与编译器设计_词法分析语法分析中间代码生成_基于C语言的Tiny编译器实现_北京理工大学2016年编译原理课程实验项目包含词法分析模块语法分析模块和中间代码生成模块使用Ti.zip
【C/C++编程】深入解析void类型及其指针的应用规则与注意事项：函数声明、指针操作及编程规范了文档的主要内容
最新发布
08-14
内容概要：本文详细解析了C/C++语言中`void`类型及其指针的应用。首先解释了`void`的含义，指出它表示“无类型”，主要用于限定函数返回值或参数类型，以及作为通用指针类型。接着阐述了`void`类型的使用规则，包括：函数无返回值时声明为`void`类型；函数无参数时声明参数为`void`；谨慎使用`void`指针，避免对其进行算术运算；当函数参数可以是任意类型指针时，声明参数为`void*`；`void`不能代表具体变量。最后强调了良好的编程习惯，如指针初始化为NULL的重要性。 适合人群：C/C++语言初学者，尤其是对`void`类型及`void`指针存在疑惑的开发者。 使用场景及目标：帮助读者理解`void`类型及其指针的基本概念、正确使用方法，避免因误解而产生的编程错误，培养良好的编程习惯，提高代码质量。 其他说明：本文不仅介绍了`void`类型的基础知识，还深入探讨了其背后的编程哲学，有助于读者从更深层次理解C/C++语言的设计思想。文中提及的一些细节，如不同编译器对`void*`指针运算的支持差异，提醒读者在实际开发中要注意代码的可移植性。此外，关于指针初始化为NULL的建议，体现了编程实践中对健壮性和安全性的追求。
基于双二阶广义积分器的软件锁相环仿真模型及其在电力电子系统中的应用 自适应滤波器
08-14
基于双二阶广义积分器（DSOG I）的软件锁相环（SPLL）仿真模型，并探讨了其在不对称工况下的性能表现。文中首先解释了DSOG I-SPLL的工作原理，即通过数字滤波器的形式实现对三相电压的频率和相位无静差跟踪。接着，通过仿真实验对比了DSOG I-SPLL与传统SRF PLL在不对称工况下的性能，结果显示DSOG I-SPLL具有更快的相位锁定速度和更高的稳定性。此外，文章还比较了SOG I与SRF PLL的特点，并强调了自适应滤波器设计在实现无静差跟踪中的关键作用。最后，作者指出这些技术为并网逆变器、微电网、三相VSR等应用提供了更为高效、稳定的解决方案。 适合人群：从事电力电子系统设计的研究人员和技术人员，尤其是关注锁相技术和电力系统稳定性的专业人士。 使用场景及目标：①用于评估不同锁相技术在不对称工况下的性能；②指导并网逆变器、微电网、三相VSR等设备的设计与优化；③提高电力系统的稳定性和效率。 其他说明：本文不仅提供了理论分析，还通过具体的仿真实验数据支持论点，有助于深入理解和实际应用。
c语言指针的核心操作和常用用法
08-14
本资源给出了c语言指针的基本操作以及他的用法。指针是c语言中非常重要的知识同时又是c语言中相对难懂的点，指针其实是一个特殊的变量，他的值是另一个变量的内存地址，指针的用法之一是可以用指针来修改变量的值；指针可以指向数据的首地址，从而操作数组；指针充当函数的形参，传递变量的地址，可以实现对外部变量的修改。
input标签 换行
05-28
### 在HTML中实现input标签换行的方法 在HTML中，`<input>`标签本质上是一个单行输入控件，无法直接支持多行文本输入或换行。然而，可以通过以下方法间接实现类似换行的效果： #### 方法一：使用`<textarea>`替代`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值