Как сделать, чтобы label пропадал, когда я пишу в input

Question

Всем доброго времени суток, можете пожалуйста сказать, что нужно сделать, чтобы пропадал label(Электронный адрес или номер телефона, пароль), когда я начинаю писать в input.

.webName{
    margin: 0;
    padding: 0;
}

body {
    background-color: #ECF6F1;  
    overflow-x: hidden;
}

.container {
    position: relative;
    display: flex;
    width: 76.5625%;
    height: 36.510416666666664vw;
    margin-left: 11.71875%;
    margin-right: 11.71875%;
    margin-top: 8.24074074074074%;
}


.logo-container {
    display: flex;
    vertical-align: middle;
    width: 46.5625vw;
    height: 6.09375vw;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 5.208333333333333vw;
    line-height: 6.379498364231189vw;
    color: #32D586;
}


.nameAndDescription {
    width: 46.5625vw;
    height: 17.1875vw;
}


.tengeInCircle {
    margin-top: 1.2%;
    width: 4.85278080697928vw;
    height: 4.85278080697928vw;
}

.webName {
    margin-left: 9px;
}

.describe-container {
    margin-top: 18px;
    font-family: 'Roboto Condensed';
    width: 83.1096196868009%;
        font-style: normal;
        font-weight: 400;
        font-size: 2.6041666666666665vw;
        line-height: 3.0729166666666665vw;
        color: #404040;
}


.offer {
    z-index: -1;
    display: flex;
    position: absolute;
    margin-left: 27.979591836734695%;
    margin-top: 11.098430813124107%;
    width: 25.78125vw;
    height: 21.745833333333334vw;
}

.registration-window {
    display: flex;
    width: 34.14965986394558%;
    height: 63.62339514978602%;
    background-color: white;
    border: 1px solid rgba(37, 210, 127, 0.94);
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
        border-radius: 0.3645833333333333vw;
        margin-left: 5.034013605442177%;
        font-family: 'Roboto Condensed';
}

.text-link-enterpreneur {
    display: flex;
    position: absolute;
    margin-top: 46.45555555555556%;
}

.enterpreneur-link {
    font-family: 'Roboto Condensed';
        font-style: normal;
        font-weight: 400;
        width: 100.197278911564625%;
        font-size: 1.0416666666666667vw;
        line-height: 1.1979166666666667vw;
        text-decoration: none;
        color: #18C974;
}

.text-links-help {
display: flex;
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
font-size: 1.0416666666666667vw;
line-height: 1.1979166666666667vw;
text-decoration: none;
color: #18C974;
position: absolute;
margin-left: 28.5%;
margin-top: 46.45555555555556%
}

.who-are-we {
color: #18C974;
padding-right: 1.0416666666666667vw;
}

.conditionals {
color: #18C974;
padding-right: 1.0416666666666667vw;
    
}



.confidentional {
color: #18C974;
padding-right: 1.0416666666666667vw;
}

.help {
color: #18C974;
}

.languages-selection {
    display: flex;
    width: 22.540816326530614%;
    height: 3.281027104136947%;
position: absolute;
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
font-size: 1.0416666666666667vw;
line-height: 1.1979166666666667vw;
color: #18C974;
margin-top: 46.45555555555556%;
margin-left: 77.41496598639456%;
}

.russian {
    color: #18C974;
    padding-right: 1.0416666666666667vw;

}

.kazakh {
        color: #18C974;
padding-right: 1.0416666666666667vw;
}

.english {
        color: #18C974;
        padding-right: 1.0416666666666667vw;

}

.all-languages {
    color: #18C974;
}

.registration-window form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#login_field {
width: 100%;
height: 100%;
}

form {
    width: 100%;

}

input, textarea {
    outline: none;
    display: block;
    border: none;
    background: none;
    font-family: 'Roboto Condensed';
    color: #000000;
    border: 1px solid #D7CBCB;
    font-size: 1.0416666666666667vw;
    width: 21.875vw;
    height: 2.65625vw;
    padding-left: 0.580833333333334vw;
    border-radius: 0.2604166666666667vw;

}

label {
    pointer-events: none;
}

#email-label:focus{
display: none;
}

textarea {
    resize: vertical;
}

#email-label {
    position: absolute;
    margin-left: 0.670833333333334vw;
    margin-top: 0.750vw;
    font-family: 'Roboto Condensed';
    font-size: 1.0416666666666667vw;
    color: #A3A3A3;
}

input::placeholder {
font-family: 'Roboto Condensed';
font-size: 1.0416666666666667vw;
color: #A3A3A3;
}

.txt_field1 {
margin-top: 5.605381165919282%;
}

.txt_field2 {
margin-top: 1vw;
}

.login_button {
width: 88.66533864541833%;
height: 13.004484304932735%;
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 700;
font-size: 1.7833333333333335vw;
line-height: 2.4479166666666665vw;
background-color: #18C974;
border: none;
color: white;
margin-top: 6.278026905829597%;
border-radius: 0.20833333333333334vw;

}


.pass {
    margin-top: 4.484304932735426%;
    font-size: 1.0416666666666667vw;
    color: #277EFF;
    text-decoration: none;
}

.pass:hover {
    text-decoration: underline;
}

.line {
width: 82.86852589641434%;
margin-top: 5.9760956175298805%;
height: 0.052083333333333336vw;
background: #CCCCCC;;
}

.signup_button {
    margin-top: 5.9840637450199203%;
    width: 74.88789237668162%;
    height: 12.780269058295964%;
}

.registration-btn {
width: 100%;
height: 100%;
background: #277EFF;
border-radius: 0.20833333333333334vw;
border: none;
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 700;
font-size: 1.5833333333333335vw;
line-height: 2.1354166666666665vw;
text-align: center;
color: #FFFFFF;
}

.login_button:hover,
.login_button:focus {
    box-shadow: 0 0.5em 0.5em -0.4em #29e088;
    background-color: #41dd92;
    transform: translateY(-0.10em);
    transition: 0.3s;
    cursor: pointer;
}

.login_button:not(:hover),
.login_button:not(:focus) {
transition: 0.3s;
}

#login_field:focus,
#login_field:valid {
outline-color:#81ddb0;
}

#pass_field:focus,
#pass_field:valid {
outline-color: #81ddb0
}

.registration-btn:hover {
box-shadow: 0 0.5em 0.5em -0.4em #277EFF;
    background-color: #458ffd;
    transform: translateY(-0.10em);
    transition: 0.3s;
    cursor: pointer;
}

.registration-btn:not(:hover) {
    transition: 0.3s;
}


.error_msg {
    font-size: 0.88125vw;
    color: red;
    position: absolute;
    margin-top: 10.5%;
    display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://kit.fontawesome.com/0436764e77.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
      rel="stylesheet"
    />
    <title>Регистрация</title>
  </head>
  <body>
    <div class="container">
      <div class="nameAndDescription">
        <div class="logo-container">
          <img class="tengeInCircle" src="images/img1.png" alt="LOGO" />
          <span class="webName">ENTERPRENEUR.KZ</span>
        </div>
        <div class="describe-container">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue
          dolor, pulvinar ut convallis.
        </div>
      </div>
      <img class="offer" src="images/img2.png" alt="OFFER" />
      <div class="registration-window" id="form">
        <!-- НАЧАЛО ФОРМЫ РЕГИСТРАЦИИ -->
        <form
          method="post"
          name="form"
          action="suck.html"
          onsubmit="return validation();"
        >
          <div class="txt_field1">
            <label for="text" id="email-label"
              >Электронный адрес или номер телефона</label
            >
            <input type="text" />
          </div>
          <!-- Конец логина -->
          <div class="txt_field2">
            <label for="password" id="password-label"></label>
            <input type="password" name="" id="passwords-input" />
          </div>

          <span class="error_msg"
            >Incorrect username or password. Please try again</span
          >
          <input
            type="submit"
            value="Вход"
            class="login_button"
            onsubmit="validation();"
          />
          <a href="#" class="pass">Забыли пароль?</a>
          <div class="line"></div>
          <div class="signup_button">
            <button class="registration-btn">Регистрация</button>
          </div>
        </form>
        <!-- Конец формы регистрации -->
      </div>
      <!-- Конец registration div -->
      <div class="text-link-enterpreneur">
        <a href="#" class="enterpreneur-link">ENTERPRENEUR © 2022</a>
      </div>
      <div class="text-links-help">
        <a href="#" class="who-are-we">Кто мы такие?</a>
        <a href="#" class="conditionals">Условия</a>
        <a href="#" class="confidentional">Конфиденциальность</a>
        <a href="#" class="help">Помощь</a>
      </div>
      <div class="languages-selection">
        <a href="" class="russian">Русский</a>
        <a href="" class="kazakh">Қазақ </a>
        <a href="" class="english">English</a>
        <a href="" class="all-languages">Все языки</a>
      </div>
    </div>
    <!-- Конец контейнера width:1470px, height:701px -->
    <script src="script.js"></script>
  </body>
</html>

Answer 1

Можно еще такой вариант

const input = document.querySelector('input');

input.addEventListener('input', function () {
  const label = document.querySelector('label');
  if (input.value > 0) {
    label.style.opacity = '0';
    label.style.transitionDuration = '.5s';
  } else {
    label.style.opacity = '1';
    label.style.transitionDuration = '.5s';
  }
})

Так будет более плавнее и эстетичнее.

.webName{
    margin: 0;
    padding: 0;
}

body {
    background-color: #ECF6F1;  
    overflow-x: hidden;
}

.container {
    position: relative;
    display: flex;
    width: 76.5625%;
    height: 36.510416666666664vw;
    margin-left: 11.71875%;
    margin-right: 11.71875%;
    margin-top: 8.24074074074074%;
}


.logo-container {
    display: flex;
    vertical-align: middle;
    width: 46.5625vw;
    height: 6.09375vw;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 5.208333333333333vw;
    line-height: 6.379498364231189vw;
    color: #32D586;
}


.nameAndDescription {
    width: 46.5625vw;
    height: 17.1875vw;
}


.tengeInCircle {
    margin-top: 1.2%;
    width: 4.85278080697928vw;
    height: 4.85278080697928vw;
}

.webName {
    margin-left: 9px;
}

.describe-container {
    margin-top: 18px;
    font-family: 'Roboto Condensed';
    width: 83.1096196868009%;
        font-style: normal;
        font-weight: 400;
        font-size: 2.6041666666666665vw;
        line-height: 3.0729166666666665vw;
        color: #404040;
}


.offer {
    z-index: -1;
    display: flex;
    position: absolute;
    margin-left: 27.979591836734695%;
    margin-top: 11.098430813124107%;
    width: 25.78125vw;
    height: 21.745833333333334vw;
}

.registration-window {
    display: flex;
    width: 34.14965986394558%;
    height: 63.62339514978602%;
    background-color: white;
    border: 1px solid rgba(37, 210, 127, 0.94);
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
        border-radius: 0.3645833333333333vw;
        margin-left: 5.034013605442177%;
        font-family: 'Roboto Condensed';
}

.text-link-enterpreneur {
    display: flex;
    position: absolute;
    margin-top: 46.45555555555556%;
}

.enterpreneur-link {
    font-family: 'Roboto Condensed';
        font-style: normal;
        font-weight: 400;
        width: 100.197278911564625%;
        font-size: 1.0416666666666667vw;
        line-height: 1.1979166666666667vw;
        text-decoration: none;
        color: #18C974;
}

.text-links-help {
display: flex;
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
font-size: 1.0416666666666667vw;
line-height: 1.1979166666666667vw;
text-decoration: none;
color: #18C974;
position: absolute;
margin-left: 28.5%;
margin-top: 46.45555555555556%
}

.who-are-we {
color: #18C974;
padding-right: 1.0416666666666667vw;
}

.conditionals {
color: #18C974;
padding-right: 1.0416666666666667vw;
    
}



.confidentional {
color: #18C974;
padding-right: 1.0416666666666667vw;
}

.help {
color: #18C974;
}

.languages-selection {
    display: flex;
    width: 22.540816326530614%;
    height: 3.281027104136947%;
position: absolute;
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
font-size: 1.0416666666666667vw;
line-height: 1.1979166666666667vw;
color: #18C974;
margin-top: 46.45555555555556%;
margin-left: 77.41496598639456%;
}

.russian {
    color: #18C974;
    padding-right: 1.0416666666666667vw;

}

.kazakh {
        color: #18C974;
padding-right: 1.0416666666666667vw;
}

.english {
        color: #18C974;
        padding-right: 1.0416666666666667vw;

}

.all-languages {
    color: #18C974;
}

.registration-window form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#login_field {
width: 100%;
height: 100%;
}

form {
    width: 100%;

}

input, textarea {
    outline: none;
    display: block;
    border: none;
    background: none;
    font-family: 'Roboto Condensed';
    color: #000000;
    border: 1px solid #D7CBCB;
    font-size: 1.0416666666666667vw;
    width: 21.875vw;
    height: 2.65625vw;
    padding-left: 0.580833333333334vw;
    border-radius: 0.2604166666666667vw;

}

label {
    pointer-events: none;
}

#email-label:focus{
display: none;
}

textarea {
    resize: vertical;
}

#email-label {
    position: absolute;
    margin-left: 0.670833333333334vw;
    margin-top: 0.750vw;
    font-family: 'Roboto Condensed';
    font-size: 1.0416666666666667vw;
    color: #A3A3A3;
}

input::placeholder {
font-family: 'Roboto Condensed';
font-size: 1.0416666666666667vw;
color: #A3A3A3;
}

.txt_field1 {
margin-top: 5.605381165919282%;
}

.txt_field2 {
margin-top: 1vw;
}

.login_button {
width: 88.66533864541833%;
height: 13.004484304932735%;
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 700;
font-size: 1.7833333333333335vw;
line-height: 2.4479166666666665vw;
background-color: #18C974;
border: none;
color: white;
margin-top: 6.278026905829597%;
border-radius: 0.20833333333333334vw;

}


.pass {
    margin-top: 4.484304932735426%;
    font-size: 1.0416666666666667vw;
    color: #277EFF;
    text-decoration: none;
}

.pass:hover {
    text-decoration: underline;
}

.line {
width: 82.86852589641434%;
margin-top: 5.9760956175298805%;
height: 0.052083333333333336vw;
background: #CCCCCC;;
}

.signup_button {
    margin-top: 5.9840637450199203%;
    width: 74.88789237668162%;
    height: 12.780269058295964%;
}

.registration-btn {
width: 100%;
height: 100%;
background: #277EFF;
border-radius: 0.20833333333333334vw;
border: none;
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 700;
font-size: 1.5833333333333335vw;
line-height: 2.1354166666666665vw;
text-align: center;
color: #FFFFFF;
}

.login_button:hover,
.login_button:focus {
    box-shadow: 0 0.5em 0.5em -0.4em #29e088;
    background-color: #41dd92;
    transform: translateY(-0.10em);
    transition: 0.3s;
    cursor: pointer;
}

.login_button:not(:hover),
.login_button:not(:focus) {
transition: 0.3s;
}

#login_field:focus,
#login_field:valid {
outline-color:#81ddb0;
}

#pass_field:focus,
#pass_field:valid {
outline-color: #81ddb0
}

.registration-btn:hover {
box-shadow: 0 0.5em 0.5em -0.4em #277EFF;
    background-color: #458ffd;
    transform: translateY(-0.10em);
    transition: 0.3s;
    cursor: pointer;
}

.registration-btn:not(:hover) {
    transition: 0.3s;
}


.error_msg {
    font-size: 0.88125vw;
    color: red;
    position: absolute;
    margin-top: 10.5%;
    display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://kit.fontawesome.com/0436764e77.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
      rel="stylesheet"
    />
    <title>Регистрация</title>
  </head>
  <body>
    <div class="container">
      <div class="nameAndDescription">
        <div class="logo-container">
          <img class="tengeInCircle" src="images/img1.png" alt="LOGO" />
          <span class="webName">ENTERPRENEUR.KZ</span>
        </div>
        <div class="describe-container">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue
          dolor, pulvinar ut convallis.
        </div>
      </div>
      <img class="offer" src="images/img2.png" alt="OFFER" />
      <div class="registration-window" id="form">
        <!-- НАЧАЛО ФОРМЫ РЕГИСТРАЦИИ -->
        <form
          method="post"
          name="form"
          action="suck.html"
          onsubmit="return validation();"
        >
          <div class="txt_field1">
            <label for="text" id="email-label"
              >Электронный адрес или номер телефона</label
            >
            <input type="text" />
          </div>
          <!-- Конец логина -->
          <div class="txt_field2">
            <label for="password" id="password-label"></label>
            <input type="password" name="" id="passwords-input" />
          </div>

          <span class="error_msg"
            >Incorrect username or password. Please try again</span
          >
          <input
            type="submit"
            value="Вход"
            class="login_button"
            onsubmit="validation();"
          />
          <a href="#" class="pass">Забыли пароль?</a>
          <div class="line"></div>
          <div class="signup_button">
            <button class="registration-btn">Регистрация</button>
          </div>
        </form>
        <!-- Конец формы регистрации -->
      </div>
      <!-- Конец registration div -->
      <div class="text-link-enterpreneur">
        <a href="#" class="enterpreneur-link">ENTERPRENEUR © 2022</a>
      </div>
      <div class="text-links-help">
        <a href="#" class="who-are-we">Кто мы такие?</a>
        <a href="#" class="conditionals">Условия</a>
        <a href="#" class="confidentional">Конфиденциальность</a>
        <a href="#" class="help">Помощь</a>
      </div>
      <div class="languages-selection">
        <a href="" class="russian">Русский</a>
        <a href="" class="kazakh">Қазақ </a>
        <a href="" class="english">English</a>
        <a href="" class="all-languages">Все языки</a>
      </div>
    </div>
    <!-- Конец контейнера width:1470px, height:701px -->
    <script src="script.js"></script>
  </body>
</html>

const input = document.querySelector('input');

input.addEventListener('input', function () {
  const label = document.querySelector('label');
  if (input.value > 0) {
    label.style.display = 'none';
  } else {
    label.style.display = 'block';
  }
})

.webName {
  margin: 0;
  padding: 0;
}

body {
  background-color: #ECF6F1;
  overflow-x: hidden;
}

.container {
  position: relative;
  display: flex;
  width: 76.5625%;
  height: 36.510416666666664vw;
  margin-left: 11.71875%;
  margin-right: 11.71875%;
  margin-top: 8.24074074074074%;
}


.logo-container {
  display: flex;
  vertical-align: middle;
  width: 46.5625vw;
  height: 6.09375vw;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-size: 5.208333333333333vw;
  line-height: 6.379498364231189vw;
  color: #32D586;
}


.nameAndDescription {
  width: 46.5625vw;
  height: 17.1875vw;
}


.tengeInCircle {
  margin-top: 1.2%;
  width: 4.85278080697928vw;
  height: 4.85278080697928vw;
}

.webName {
  margin-left: 9px;
}

.describe-container {
  margin-top: 18px;
  font-family: 'Roboto Condensed';
  width: 83.1096196868009%;
  font-style: normal;
  font-weight: 400;
  font-size: 2.6041666666666665vw;
  line-height: 3.0729166666666665vw;
  color: #404040;
}


.offer {
  z-index: -1;
  display: flex;
  position: absolute;
  margin-left: 27.979591836734695%;
  margin-top: 11.098430813124107%;
  width: 25.78125vw;
  height: 21.745833333333334vw;
}

.registration-window {
  display: flex;
  width: 34.14965986394558%;
  height: 63.62339514978602%;
  background-color: white;
  border: 1px solid rgba(37, 210, 127, 0.94);
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 0.3645833333333333vw;
  margin-left: 5.034013605442177%;
  font-family: 'Roboto Condensed';
}

.text-link-enterpreneur {
  display: flex;
  position: absolute;
  margin-top: 46.45555555555556%;
}

.enterpreneur-link {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  width: 100.197278911564625%;
  font-size: 1.0416666666666667vw;
  line-height: 1.1979166666666667vw;
  text-decoration: none;
  color: #18C974;
}

.text-links-help {
  display: flex;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-size: 1.0416666666666667vw;
  line-height: 1.1979166666666667vw;
  text-decoration: none;
  color: #18C974;
  position: absolute;
  margin-left: 28.5%;
  margin-top: 46.45555555555556%
}

.who-are-we {
  color: #18C974;
  padding-right: 1.0416666666666667vw;
}

.conditionals {
  color: #18C974;
  padding-right: 1.0416666666666667vw;

}



.confidentional {
  color: #18C974;
  padding-right: 1.0416666666666667vw;
}

.help {
  color: #18C974;
}

.languages-selection {
  display: flex;
  width: 22.540816326530614%;
  height: 3.281027104136947%;
  position: absolute;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-size: 1.0416666666666667vw;
  line-height: 1.1979166666666667vw;
  color: #18C974;
  margin-top: 46.45555555555556%;
  margin-left: 77.41496598639456%;
}

.russian {
  color: #18C974;
  padding-right: 1.0416666666666667vw;

}

.kazakh {
  color: #18C974;
  padding-right: 1.0416666666666667vw;
}

.english {
  color: #18C974;
  padding-right: 1.0416666666666667vw;

}

.all-languages {
  color: #18C974;
}

.registration-window form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#login_field {
  width: 100%;
  height: 100%;
}

form {
  width: 100%;

}

input,
textarea {
  outline: none;
  display: block;
  border: none;
  background: none;
  font-family: 'Roboto Condensed';
  color: #000000;
  border: 1px solid #D7CBCB;
  font-size: 1.0416666666666667vw;
  width: 21.875vw;
  height: 2.65625vw;
  padding-left: 0.580833333333334vw;
  border-radius: 0.2604166666666667vw;

}

label {
  pointer-events: none;
}

#email-label:focus {
  display: none;
}

textarea {
  resize: vertical;
}

#email-label {
  position: absolute;
  margin-left: 0.670833333333334vw;
  margin-top: 0.750vw;
  font-family: 'Roboto Condensed';
  font-size: 1.0416666666666667vw;
  color: #A3A3A3;
}

input::placeholder {
  font-family: 'Roboto Condensed';
  font-size: 1.0416666666666667vw;
  color: #A3A3A3;
}

.txt_field1 {
  margin-top: 5.605381165919282%;
}

.txt_field2 {
  margin-top: 1vw;
}

.login_button {
  width: 88.66533864541833%;
  height: 13.004484304932735%;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-size: 1.7833333333333335vw;
  line-height: 2.4479166666666665vw;
  background-color: #18C974;
  border: none;
  color: white;
  margin-top: 6.278026905829597%;
  border-radius: 0.20833333333333334vw;

}


.pass {
  margin-top: 4.484304932735426%;
  font-size: 1.0416666666666667vw;
  color: #277EFF;
  text-decoration: none;
}

.pass:hover {
  text-decoration: underline;
}

.line {
  width: 82.86852589641434%;
  margin-top: 5.9760956175298805%;
  height: 0.052083333333333336vw;
  background: #CCCCCC;
  ;
}

.signup_button {
  margin-top: 5.9840637450199203%;
  width: 74.88789237668162%;
  height: 12.780269058295964%;
}

.registration-btn {
  width: 100%;
  height: 100%;
  background: #277EFF;
  border-radius: 0.20833333333333334vw;
  border: none;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-size: 1.5833333333333335vw;
  line-height: 2.1354166666666665vw;
  text-align: center;
  color: #FFFFFF;
}

.login_button:hover,
.login_button:focus {
  box-shadow: 0 0.5em 0.5em -0.4em #29e088;
  background-color: #41dd92;
  transform: translateY(-0.10em);
  transition: 0.3s;
  cursor: pointer;
}

.login_button:not(:hover),
.login_button:not(:focus) {
  transition: 0.3s;
}

#login_field:focus,
#login_field:valid {
  outline-color: #81ddb0;
}

#pass_field:focus,
#pass_field:valid {
  outline-color: #81ddb0
}

.registration-btn:hover {
  box-shadow: 0 0.5em 0.5em -0.4em #277EFF;
  background-color: #458ffd;
  transform: translateY(-0.10em);
  transition: 0.3s;
  cursor: pointer;
}

.registration-btn:not(:hover) {
  transition: 0.3s;
}


.error_msg {
  font-size: 0.88125vw;
  color: red;
  position: absolute;
  margin-top: 10.5%;
  display: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://kit.fontawesome.com/0436764e77.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
    rel="stylesheet" />
  <title>Регистрация</title>
</head>

<body>
  <div class="container">
    <div class="nameAndDescription">
      <div class="logo-container">
        <img class="tengeInCircle" src="images/img1.png" alt="LOGO" />
        <span class="webName">ENTERPRENEUR.KZ</span>
      </div>
      <div class="describe-container">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue
        dolor, pulvinar ut convallis.
      </div>
    </div>
    <img class="offer" src="images/img2.png" alt="OFFER" />
    <div class="registration-window" id="form">
      <!-- НАЧАЛО ФОРМЫ РЕГИСТРАЦИИ -->
      <form method="post" name="form" action="suck.html" onsubmit="return validation();">
        <div class="txt_field1">
          <label for="text" id="email-label">Электронный адрес или номер телефона</label>
          <input class="input" type="text" />
        </div>
        <!-- Конец логина -->
        <div class="txt_field2">
          <label for="password" id="password-label"></label>
          <input type="password" name="" id="passwords-input" />
        </div>

        <span class="error_msg">Incorrect username or password. Please try again</span>
        <input type="submit" value="Вход" class="login_button" onsubmit="validation();" />
        <a href="#" class="pass">Забыли пароль?</a>
        <div class="line"></div>
        <div class="signup_button">
          <button class="registration-btn">Регистрация</button>
        </div>
      </form>
      <!-- Конец формы регистрации -->
    </div>
    <!-- Конец registration div -->
    <div class="text-link-enterpreneur">
      <a href="#" class="enterpreneur-link">ENTERPRENEUR © 2022</a>
    </div>
    <div class="text-links-help">
      <a href="#" class="who-are-we">Кто мы такие?</a>
      <a href="#" class="conditionals">Условия</a>
      <a href="#" class="confidentional">Конфиденциальность</a>
      <a href="#" class="help">Помощь</a>
    </div>
    <div class="languages-selection">
      <a href="" class="russian">Русский</a>
      <a href="" class="kazakh">Қазақ </a>
      <a href="" class="english">English</a>
      <a href="" class="all-languages">Все языки</a>
    </div>
  </div>
  <!-- Конец контейнера width:1470px, height:701px -->
  <script src="index.js"></script>
</body>

</html>

Answer 2

<!-- html -->
<label id="label1">another element,for example label</label>
<input  type="text" onfocus="name_of_funk('label1')"

/* - - - - JS - - - - */

function name_of_funk(id_hide) {
document.getElementById(id_hide).style.display = "none"
}

Вот работа этой функции на вашей задаче :

function funk(id_label) {
document.getElementById(id_label).style.display = "none";
}

<h2>Ваш пример</h2>
<label id="label1">~ some label ~</label><br>
<input type="text" onfocus="funk('label1')"></input>

Answer 3

А давайте обойдемся чистым CSS? Нужно только поместить ваш label после input.

.webName {
  margin: 0;
  padding: 0;
}

body {
  background-color: #ECF6F1;
  overflow-x: hidden;
}

.container {
  position: relative;
  display: flex;
  width: 76.5625%;
  height: 36.510416666666664vw;
  margin-left: 11.71875%;
  margin-right: 11.71875%;
  margin-top: 8.24074074074074%;
}

.logo-container {
  display: flex;
  vertical-align: middle;
  width: 46.5625vw;
  height: 6.09375vw;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-size: 5.208333333333333vw;
  line-height: 6.379498364231189vw;
  color: #32D586;
}

.nameAndDescription {
  width: 46.5625vw;
  height: 17.1875vw;
}

.tengeInCircle {
  margin-top: 1.2%;
  width: 4.85278080697928vw;
  height: 4.85278080697928vw;
}

.webName {
  margin-left: 9px;
}

.describe-container {
  margin-top: 18px;
  font-family: 'Roboto Condensed';
  width: 83.1096196868009%;
  font-style: normal;
  font-weight: 400;
  font-size: 2.6041666666666665vw;
  line-height: 3.0729166666666665vw;
  color: #404040;
}

.offer {
  z-index: -1;
  display: flex;
  position: absolute;
  margin-left: 27.979591836734695%;
  margin-top: 11.098430813124107%;
  width: 25.78125vw;
  height: 21.745833333333334vw;
}

.registration-window {
  display: flex;
  width: 34.14965986394558%;
  height: 63.62339514978602%;
  background-color: white;
  border: 1px solid rgba(37, 210, 127, 0.94);
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 0.3645833333333333vw;
  margin-left: 5.034013605442177%;
  font-family: 'Roboto Condensed';
}

.text-link-enterpreneur {
  display: flex;
  position: absolute;
  margin-top: 46.45555555555556%;
}

.enterpreneur-link {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  width: 100.197278911564625%;
  font-size: 1.0416666666666667vw;
  line-height: 1.1979166666666667vw;
  text-decoration: none;
  color: #18C974;
}

.text-links-help {
  display: flex;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-size: 1.0416666666666667vw;
  line-height: 1.1979166666666667vw;
  text-decoration: none;
  color: #18C974;
  position: absolute;
  margin-left: 28.5%;
  margin-top: 46.45555555555556%
}

.who-are-we {
  color: #18C974;
  padding-right: 1.0416666666666667vw;
}

.conditionals {
  color: #18C974;
  padding-right: 1.0416666666666667vw;
}

.confidentional {
  color: #18C974;
  padding-right: 1.0416666666666667vw;
}

.help {
  color: #18C974;
}

.languages-selection {
  display: flex;
  width: 22.540816326530614%;
  height: 3.281027104136947%;
  position: absolute;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-size: 1.0416666666666667vw;
  line-height: 1.1979166666666667vw;
  color: #18C974;
  margin-top: 46.45555555555556%;
  margin-left: 77.41496598639456%;
}

.russian {
  color: #18C974;
  padding-right: 1.0416666666666667vw;
}

.kazakh {
  color: #18C974;
  padding-right: 1.0416666666666667vw;
}

.english {
  color: #18C974;
  padding-right: 1.0416666666666667vw;
}

.all-languages {
  color: #18C974;
}

.registration-window form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#login_field {
  width: 100%;
  height: 100%;
}

form {
  width: 100%;
}

input,
textarea {
  outline: none;
  display: block;
  border: none;
  background: none;
  font-family: 'Roboto Condensed';
  color: #000000;
  border: 1px solid #D7CBCB;
  font-size: 1.0416666666666667vw;
  width: 21.875vw;
  height: 2.65625vw;
  padding-left: 0.580833333333334vw;
  border-radius: 0.2604166666666667vw;
}

label {
  pointer-events: none;
}

textarea {
  resize: vertical;
}

input + label {
  position: absolute;
  margin-left: 0.670833333333334vw;
  font-family: 'Roboto Condensed';
  font-size: 1.0416666666666667vw;
  color: #A3A3A3;
  top: 0.750vw; /* margin-bottom заменено на это */
}
/* Добавлени эти стили */
input:focus + label,
input:required:valid + label
{
  display: none;
}

input::placeholder {
  font-family: 'Roboto Condensed';
  font-size: 1.0416666666666667vw;
  color: #A3A3A3;
}

.txt_field1 {
  margin-top: 5.605381165919282%;
  position: relative; /* Добавлено это */
}

.txt_field2 {
  margin-top: 1vw;
  position: relative; /* Добавлено это */
}

.login_button {
  width: 88.66533864541833%;
  height: 13.004484304932735%;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-size: 1.7833333333333335vw;
  line-height: 2.4479166666666665vw;
  background-color: #18C974;
  border: none;
  color: white;
  margin-top: 6.278026905829597%;
  border-radius: 0.20833333333333334vw;
}

.pass {
  margin-top: 4.484304932735426%;
  font-size: 1.0416666666666667vw;
  color: #277EFF;
  text-decoration: none;
}

.pass:hover {
  text-decoration: underline;
}

.line {
  width: 82.86852589641434%;
  margin-top: 5.9760956175298805%;
  height: 0.052083333333333336vw;
  background: #CCCCCC;
}

.signup_button {
  margin-top: 5.9840637450199203%;
  width: 74.88789237668162%;
  height: 12.780269058295964%;
}

.registration-btn {
  width: 100%;
  height: 100%;
  background: #277EFF;
  border-radius: 0.20833333333333334vw;
  border: none;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-size: 1.5833333333333335vw;
  line-height: 2.1354166666666665vw;
  text-align: center;
  color: #FFFFFF;
}

.login_button:hover,
.login_button:focus {
  box-shadow: 0 0.5em 0.5em -0.4em #29e088;
  background-color: #41dd92;
  transform: translateY(-0.10em);
  transition: 0.3s;
  cursor: pointer;
}

.login_button:not(:hover),
.login_button:not(:focus) {
  transition: 0.3s;
}

#login_field:focus,
#login_field:valid {
  outline-color: #81ddb0;
}

#pass_field:focus,
#pass_field:valid {
  outline-color: #81ddb0
}

.registration-btn:hover {
  box-shadow: 0 0.5em 0.5em -0.4em #277EFF;
  background-color: #458ffd;
  transform: translateY(-0.10em);
  transition: 0.3s;
  cursor: pointer;
}

.registration-btn:not(:hover) {
  transition: 0.3s;
}

.error_msg {
  font-size: 0.88125vw;
  color: red;
  position: absolute;
  margin-top: 10.5%;
  display: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://kit.fontawesome.com/0436764e77.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styles.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet" />
  <title>Регистрация</title>
</head>

<body>
  <div class="container">
    <div class="nameAndDescription">
      <div class="logo-container">
        <img class="tengeInCircle" src="images/img1.png" alt="LOGO" />
        <span class="webName">ENTERPRENEUR.KZ</span>
      </div>
      <div class="describe-container">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue dolor, pulvinar ut convallis.
      </div>
    </div>
    <img class="offer" src="images/img2.png" alt="OFFER" />
    <div class="registration-window" id="form">
      <!-- НАЧАЛО ФОРМЫ РЕГИСТРАЦИИ -->
      <form method="post" name="form" action="suck.html" onsubmit="return validation();">
        <div class="txt_field1">
          <input type="text" required />
          <label for="text" id="email-label">Электронный адрес или номер телефона</label>
        </div>
        <!-- Конец логина -->
        <div class="txt_field2">
          <input type="password" name="" id="passwords-input" required />
          <label for="password" id="password-label">Пароль</label>
        </div>

        <span class="error_msg">Incorrect username or password. Please try again</span
          >
          <input
            type="submit"
            value="Вход"
            class="login_button"
            onsubmit="validation();"
          />
          <a href="#" class="pass">Забыли пароль?</a>
          <div class="line"></div>
          <div class="signup_button">
            <button class="registration-btn">Регистрация</button>
          </div>
        </form>
        <!-- Конец формы регистрации -->
      </div>
      <!-- Конец registration div -->
      <div class="text-link-enterpreneur">
        <a href="#" class="enterpreneur-link">ENTERPRENEUR © 2022</a>
      </div>
      <div class="text-links-help">
        <a href="#" class="who-are-we">Кто мы такие?</a>
        <a href="#" class="conditionals">Условия</a>
        <a href="#" class="confidentional">Конфиденциальность</a>
        <a href="#" class="help">Помощь</a>
      </div>
      <div class="languages-selection">
        <a href="" class="russian">Русский</a>
        <a href="" class="kazakh">Қазақ </a>
        <a href="" class="english">English</a>
        <a href="" class="all-languages">Все языки</a>
      </div>
    </div>
    <!-- Конец контейнера width:1470px, height:701px -->
    <script src="script.js"></script>
  </body>
</html>

БЛОГ НА HUSL

Как сделать, чтобы label пропадал, когда я пишу в input

Ответы (3 шт):