input值不可变、隐藏input(表单隐藏域)

一、值不可变

在写前端页面时,有时候我们需要让<input>标签只能看,但不能更改,就行银行卡号之类的。
那么这个时候就需要让标签的值不可变了,让标签值不可变的方法有两种(readonly,disabled)。

方法1:readonly

<form action="#">
    <h4>方式一:readonly</h4>
    <input type="text" value="值可变"><hr>
    <input type="text" value="readonly 值不可变" readonly><hr>
    <input type="text" value="readonly1 值不可变" readonly="true"><hr>
    <input type="button" value="readonly2 值不可变" readonly="readonly">
</form> 

展示效果如下:
在这里插入图片描述
由图中效果可见,写有 readonly 的 input 输入框值不可变,但颜色并没有发生改变,还是默认样式。

readonly
readonly=“true”
readonly=“readonly”
三中不同的写法,效果其实一样

方法2:disabled

<form action="#">
    <h4>方式二:disabled</h4>
    <input type="text" value="值可变"><hr>
    <input type="text" value="disabled 值不可变" disabled><hr>
    <input type="text" value="disabled1 值不可变" disabled="true"><hr>
    <input type="button" value="disabled2 值不可变" disabled="disabled">
</form>

展示效果如下:
在这里插入图片描述
如图中所展示的,写有disabled的<input>输入框值不可变的同时,颜色样式发生了改变。

readonly 和 disabled的区别:

  1. readonly :颜色不变,不能修改,但可以通过Tab键选中赋值文本,可点击但没有效果。
  2. disabled :颜色改变,只读,不能点击和使用。

二、隐藏<input>标签(表单隐藏域)

隐藏域在页面中是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,浏览者单击提交按钮发送表单数据的时候,隐藏域的信息也会被一起发送到服务器,以利于被处理表单的程序所使用。

<form action="#">
	<h4>标签不可见</h4>
    <input type="text" value="可见">
    <input type="hidden" value="不可见">
    <input type="text" value="不可见" hidden>
</from>

展示效果如下:
在这里插入图片描述
不管是让type=“hidden” 还是在写一个 hidden 都能实现标签不可见效果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值