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的区别:
- readonly :颜色不变,不能修改,但可以通过Tab键选中赋值文本,可点击但没有效果。
- disabled :颜色改变,只读,不能点击和使用。
二、隐藏<input>标签(表单隐藏域)
隐藏域在页面中是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,浏览者单击提交按钮发送表单数据的时候,隐藏域的信息也会被一起发送到服务器,以利于被处理表单的程序所使用。
<form action="#">
<h4>标签不可见</h4>
<input type="text" value="可见">
<input type="hidden" value="不可见">
<input type="text" value="不可见" hidden>
</from>
展示效果如下:
不管是让type=“hidden” 还是在写一个 hidden 都能实现标签不可见效果。