如何设置文本标签不可编辑且输入内容自动消失？登录页label问题求助

这里你要的效果其实是输入框的占位提示文本，有两种实现方式：

原生HTML方案（推荐） #

直接用<input>标签的placeholder属性，这个属性自带的提示文本本身不可编辑，用户点击输入框开始输入时会自动消失，无需额外代码：

<input type="text" placeholder="请输入你的内容">

兼容旧浏览器的JS方案 #

如果需要兼容不支持placeholder属性的老浏览器，可以通过JavaScript实现默认文本的显隐逻辑：

<input type="text" value="请输入你的内容" id="hintInput">
<script>
const input = document.getElementById('hintInput');
const defaultHint = input.value;

// 聚焦时清空默认提示
input.addEventListener('focus', () => {
  if (input.value === defaultHint) {
    input.value = '';
  }
});

// 失焦且为空时恢复默认提示
input.addEventListener('blur', () => {
  if (input.value.trim() === '') {
    input.value = defaultHint;
  }
});
</script>

区分label与登录/密码项的对应关系 #

用<label>标签的for属性，和对应<input>的id属性绑定，点击label时会自动聚焦到对应的输入框，语义清晰且交互友好：

<!-- 用户名项 -->
<label for="loginUsername">用户名</label>
<input type="text" id="loginUsername" name="username">

<!-- 密码项 -->
<label for="loginPassword">密码</label>
<input type="password" id="loginPassword" name="password">

实现密码文本隐藏 #

直接将密码输入框的type设为password，输入内容会自动转为圆点/星号隐藏：

<input type="password" id="loginPassword" placeholder="请输入密码">

隐藏label文本（保留语义） #

如果需要隐藏label的文字（比如做纯图标式登录框），不要用display: none（会丢失语义，影响屏幕阅读器），推荐用视觉隐藏的CSS类：

<label for="loginUsername" class="visually-hidden">用户名</label>
<input type="text" id="loginUsername" placeholder="用户名">

<style>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
</style>

内容的提问来源于stack exchange，提问作者TallJakub