input标签值不可变、隐藏标签

• 一、值不可变
• • 方法1:readonly
  • 方法2:disabled
  • readonly 和 disabled的区别：
• 二、隐藏\标签(表单隐藏域)

一、值不可变

在写前端页面时，有时候我们需要让<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 都能实现标签不可见效果。