当“必填”被删除时，输入表单浮动标签不起作用

Question

我需要这方面的帮助。它似乎工作不正常，我无法真正找到错误，因为我几个月前才开始编码

     <div class="form">
        <form class="box" action="#">
          <div class="input-container">
            <input type="text" id="vname" name="vname" required placeholder=" ">
            <label for="vname">Vorname*</label>
          </div>

          <div class="input-container">
            <input type="text" id="zname" name="zname" required placeholder=" ">
            <label for="zname">Nachname*</label>
          </div>

          <div class="input-container">
            <input type="tel" id="phone" name="phone" placeholder=" ">
            <label class="-placeholder" for="phone">Telefon</label>
          </div>

          <input class="button" type="submit" name="button" id="send" value="senden">

        </form>
      </div>

在我想要在我的网站上显示的内容的 HTML 片段上方

.form {
  display: grid;
}

.input-container {
  position: relative;
  margin-bottom: 1.5rem;
}

.input-container label {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  font-size: 1.1rem;
  transition: all 0.5s ease-in-out;
}

.input-container input {
  border-bottom: 1px solid #555;
  background: var(--background);
  width: 45vw;
  padding: 0.5rem 0 0.2rem 0;
  font-size: 1rem;
  color: var(--text-color);
  text-align: left;
  margin: 0.5rem;
}

.input-container input:focus~label,
.input-container input:valid~label{
  top: -0.8rem;
  font-size: 0.8rem;
}

input:focus {
  border-radius: 1rem;
  background-color: var(--shadowbox);
  transition: all 0.2s ease-in;
}

.input-container input:active{
  border-radius: 1rem;
  background-color: var(--shadowbox)

}

大家好，我这里有一个问题。尝试了很多东西，但似乎没有什么能正常工作。当我在“电话”输入上删除“必需”时，浮动不再起作用。另外，当输入电子邮件地址时，它只会在输入正确的地址时保持不变，这还不错，但看起来不太好。我刚刚开始学习网络开发，但我找不到正确的方法来完成它。

提前谢谢

Answer 1

问题在于，一方面您希望确保可以发送表格，因此您希望不再需要它，另一方面，您希望保留视觉效果。一种方法是保留它

required

但在表单提交之前将

required

设置为 false：

onclick="document.getElementById('phone').required = false;"

参见：

.form {
  display: grid;
}

.input-container {
  position: relative;
  margin-bottom: 1.5rem;
}

.input-container label {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  font-size: 1.1rem;
  transition: all 0.5s ease-in-out;
}

.input-container input {
  border-bottom: 1px solid #555;
  background: var(--background);
  width: 45vw;
  padding: 0.5rem 0 0.2rem 0;
  font-size: 1rem;
  color: var(--text-color);
  text-align: left;
  margin: 0.5rem;
}

.input-container input:focus~label,
.input-container input:valid~label{
  top: -0.8rem;
  font-size: 0.8rem;
}

input:focus {
  border-radius: 1rem;
  background-color: var(--shadowbox);
  transition: all 0.2s ease-in;
}

.input-container input:active{
  border-radius: 1rem;
  background-color: var(--shadowbox)

}

<div class="form">
        <form class="box" action="#">
          <div class="input-container">
            <input type="text" id="vname" name="vname" required placeholder=" ">
            <label for="vname">Vorname*</label>
          </div>

          <div class="input-container">
            <input type="text" id="zname" name="zname" required placeholder=" ">
            <label for="zname">Nachname*</label>
          </div>

          <div class="input-container">
            <input type="tel" id="phone" name="phone" required placeholder=" ">
            <label class="-placeholder" for="phone">Telefon</label>
          </div>

          <input onclick="document.getElementById('phone').required = false;" class="button" type="submit" name="button" id="send" value="senden">

        </form>
      </div>

另一个解决方案是删除

required

属性并编写自己的动画，从以下规则开始：

input:not([required])::placeholder {
  color: black;
  opacity: 1; /* Firefox */
}