如何使输入标记旁边的标签等于占位符

<input type="text" placeholder="请输入姓名">

<div class="input-container">
  <label for="name">姓名</label>
  <input type="text" id="name">
</div>

<style>
.input-container {
  position: relative;
}

.input-container label {
  position: absolute;
  top: 0;
  left: 0;
  color: #999;
  pointer-events: none;
  transition: all 0.2s ease;
}

.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label {
  transform: translateY(-100%);
  font-size: 12px;
  color: #000;
}
</style>

<div class="input-container">
  <label for="name" id="name-label">姓名</label>
  <input type="text" id="name" onfocus="showLabel()" oninput="updateLabel()">
</div>

<script>
function showLabel() {
  document.getElementById("name-label").style.display = "block";
}

function updateLabel() {
  var input = document.getElementById("name");
  var label = document.getElementById("name-label");
  
  if (input.value === "") {
    label.style.display = "block";
  } else {
    label.style.display = "none";
  }
}
</script>