form

source/index.html

@@ -923,16 +923,15 @@ <h2 class="form__title">Остались вопросы?</h2>
 
         <form class="form__form" action="https://echo.htmlacademy.ru/" method="post">
           <div class="form__container">
-            <label class="form__label">
-              <span class="visually-hidden">Телефон</span>
-              <input class="form__input form__input--phone" name="phone" type="tel" placeholder="+7(000)-000-00-00" required>
-            </label>
+            <input class="form__input form__input--phone" id="phone" name="phone" type="tel"
+            placeholder="+7(000)-000-00-00" required>
+            <label class="form__label form__label-phone" for="phone">Телефон</label>
+
           </div>
           <div class="form__container">
-            <label class="form__label">
-              <span class="visually-hidden">Email</span>
-              <input class="form__input form__input--email" name="email" type="email" placeholder="[email protected]" required>
-            </label>
+            <input class="form__input form__input--email" id="email" name="email" type="email"
+            placeholder="[email protected]" required>
+            <label class="form__label form__label-email" for="email">Email</label>
           </div>
           <button class="form__button button" type="submit">Отправить</button>
         </form>

source/js/modules/form-valid.js

@@ -6,22 +6,24 @@ const phoneError = form.querySelector('.form__error-phone');
 const NAME_VALID = /^[a-zA-Zа-яА-ЯЁё\s]+$/;
 const PHONE_VALID = /^\+\d/;
 
-
 const validateInput = (input, regex, error) => {
   const isValid = regex.test(input.value);
   error.style.display = isValid ? 'none' : 'block';
   input.classList.toggle('form__input--error', !isValid);
   return isValid;
 };
 
-
 const formValid = form.addEventListener('submit', (e) => {
   const nameValid = validateInput(nameInput, NAME_VALID, nameError);
-  const phoneValid = phoneInput.value ? validateInput(phoneInput, PHONE_VALID, phoneError) : true;
+  const phoneValid = phoneInput.value
+    ? validateInput(phoneInput, PHONE_VALID, phoneError)
+    : true;
   if (!nameValid || !phoneValid) {
     e.preventDefault();
   }
 });
 
-
 export { formValid };
+
+phoneInput.addEventListener('focus', () => phoneInput.classList.add('form__input--error'), true);
+phoneInput.addEventListener('blur', () => phoneInput.classList.remove('form__input--error'), true);

source/sass/blocks/form.scss

@@ -26,11 +26,10 @@
   @media (min-width: $desktop-width) {
     padding: 296px 31px 292px;
     background-image:
-      image-set(
-        url("../../img/form/form-desktop.webp") type("image/webp") 1x,
-        url("../../img/form/[email protected]") type("image/webp") 2x,
-        url("../../img/form/form-desktop.jpg") type("image/jpeg") 1x,
-        url("../../img/form/[email protected]") type("image/jpeg") 2x);
+      image-set(url("../../img/form/form-desktop.webp") type("image/webp") 1x,
+      url("../../img/form/[email protected]") type("image/webp") 2x,
+      url("../../img/form/form-desktop.jpg") type("image/jpeg") 1x,
+      url("../../img/form/[email protected]") type("image/jpeg") 2x);
   }
 
 
@@ -74,6 +73,10 @@
   }
 }
 
+.form__container {
+  position: relative;
+}
+
 .form p > br {
   @media (min-width: $tablet-width) {
     display: none;
@@ -104,8 +107,63 @@
   @media (min-width: $desktop-width) {
     margin: 0;
   }
+
+  &:hover {
+    border-color: $border;
+  }
+
+  &:focus {
+    border-color: $color-basic;
+    outline: none;
+
+    &::placeholder {
+      color: $color-placeholder;
+    }
+  }
+
+  &:disabled {
+    background-color: $bg-color;
+    border-color: $color-disabled;
+    pointer-events: none;
+  }
 }
 
+.form__input::placeholder {
+  display: none;
+  color: transparent;
+}
+
+.form__label {
+  position: absolute;
+  z-index: 5;
+  color: $color-basic;
+  font-size: 16px;
+  line-height: 16px;
+  opacity: 0.5;
+  top: 50%;
+  left: 50%;
+  transform: translate(-114px, -11px);
+
+  @media (min-width: $tablet-width) {
+    transform: translate(-150px, -14px);
+  }
+
+  @media (min-width: $desktop-width) {
+    transform: translate(-150px, -8px);
+  }
+}
+
+.form__input:focus + .form__label {
+  display: none;
+  color: transparent;
+}
+
+.form__input:active + .form__label {
+  display: none;
+  color: transparent;
+}
+
+
 .form__button {
   margin: 0 auto;
   width: 258px;
@@ -120,3 +178,7 @@
     width: 180px;
   }
 }
+
+.form__input--error {
+  border: 1px solid $color-error;
+}

source/sass/common/variables.scss

@@ -2,6 +2,7 @@
 $color-basic: #2d383f;
 $color-white: #ffffff;
 $color-disabled: #999999;
+$color-placeholder: #0266c1;
 
 // form color
 $color-error: #ff121f;