세미 프로와 같은 애니메이션 양식 ✨

레이블 대신 자리 표시자를 사용하는 양식을 본 적이 있습니까? 공포.

자리 표시자는 쓰기를 시작한 후에 사라지지만 예를 들어 Chrome에서 미리 채워진 경우에도 사라집니다. 이것은 Google이 주소 입력에 실제로 귀하의 주소를 입력했는지 확인할 수 없음을 의미합니다. 매우 나쁜 사용자 경험(UX).

이 문서는 양식의 프론트 엔드에 관한 것입니다. 저는 게시물 및 자바스크립트 유효성 검사에 대한 전문가가 아닙니다.

Head straight to the fancy stuff .

의미론

세미 프로처럼 양식에 애니메이션을 적용하는 것은 양식을 잘 설정하는 것으로 시작됩니다.

<form class="form">
  <div class="form__input-container form__input-container--text">
    <input type="text" class="form__input form__input--text" id="firstname" name="firstname" placeholder=" " />
    <label class="form__label form__label--text" for="firstname">First name: </label>
  </div>
  [...]
</form>

저는 클래스에 BEM 구문을 사용합니다. 이렇게 하면 입력과 같은 유사한 요소의 스타일을 지정하기가 정말 쉽지만 명확성을 위해 이 기사에서는 요소 이름만 사용하겠습니다.

입력과 레이블을 div에 넣었습니다. 이렇게 하면 나중에 스타일을 지정하기가 훨씬 쉬워집니다. 입력 요소에 name 속성을 추가했는데, 이것이 없으면 입력은 쓸모가 없으며 데이터를 보내지 않습니다. 레이블의 for 속성을 사용하여 입력의 ID 속성에 연결했습니다. 이제 레이블을 클릭하면 입력에 집중할 수 있습니다. 형제 선택자로 스타일을 지정할 수 있도록 입력 뒤에 레이블을 추가했습니다. :)

유사 수업!

양식 요소에는 많은 pseudo classes 사용이 가능하며 :valid , :checked 등과 같은 것으로 입력 상태를 확인할 수 있습니다.

input:checked + label::after {
  left: 0.3rem;    
}

확인된 입력의 형제인 레이블의::after 의사 요소를 선택합니다.

한 번에 여러 의사 클래스를 추가할 수 있습니다.

input:placeholder-shown:not(:focus) + label { 
  position: static;
  padding: 10px 20px;
  font-size: 1rem;
}

:placeholder-shown 의사 클래스는 아직 실험적이므로 기능이 아닌 향상을 위해서만 사용해야 합니다. 놀라운 개선 사항입니다. 작동하려면 입력 요소에 자리 표시자 속성을 넣어야 하지만 비어 있을 수 있습니다!

:not 의사 클래스를 사용하면 입력이 :focus ED, CRAZY 시작 유형 항목이 아니지만 매우 재미있는지 확인할 수 있습니다.

CSS로 유효성 검사

일부 유형의 입력 요소(예: type="email" )에는 자체 내장 유효성 검사가 있습니다. 입력에 패턴 속성을 추가하여 CSS로 유효성을 검사할 수도 있습니다.
입력을 마치기도 전에 유효성 검사가 이미 시작되었다는 사실이 항상 저를 괴롭혔습니다. 나는 :placeholder-shown가 잘 지원되지 않는다는 것을 인정했기 때문에 이것은 미래의 일이지만, 입력을 채우고 더 이상 그것에 집중하지 않은 후에만 오류와 유효성 검사를 표시하는 방법을 찾았습니다.

input:not(:placeholder-shown):not(:focus):invalid {
  border-bottom: red 2px solid;
}

input:not(:placeholder-shown):not(:focus):valid {
  border-bottom: green 2px solid;
}

사용자 정의 라디오 버튼 애니메이션

나는 항상 사용자 정의 라디오 버튼을 만들고 브라우저의 표준 라디오 버튼을 애니메이션으로 만드는 것은 여전히 ​​불가능하기 때문에 ::before 및 ::after 를 사용하여 만듭니다.

input[type="radio"] + label {
  position: relative;
  display: block;
  padding-left: 30px;
  border-radius: 1rem 0 0 1rem; // t
  overflow: hidden;
}

// we're actually creating our own radio button styles
input[type="radio"] + label::before,
input[type="radio"] + label::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
}
input[type="radio"] + label::before {
  // this makes up the border around the input
  width: 1rem;
  height: 1rem;
  border: 1px solid black;
  border-radius: 50%;
}
input[type="radio"] + label::after {
  // this makes up the dot to indicate if it's selected or not
  width: 0.5rem;
  height: 0.5rem;
  background: black;
  border-radius: 50%;
  top: 50%;
  left: -10px;
  // because the label has a `overflow: hidden` style the dot will be invisible at -10px
  transform: translateY(-50%);
  transition: left 0.4s;
}
input[type="radio"] {
  opacity: 0;
  width: 0;
  height: 0;
  padding: 0;
}
input[type="radio"]:checked + label::after {
  left: 0.3rem; // this makes the dot visible again, only when the input is checked.
}

포커스 상태 편집

실제로 모든 브라우저의 표준 포커스 상태는 웹사이트 스타일에 적합하지 않을 수 있다는 것을 알고 있습니다. 그러나 그것을 모두 제거하기 전에 키보드에 의존하는 사용자에 대해 생각해보십시오! 일종의 포커스 스타일을 추가하는 것은 정말 쉽고(점이나 파란색이 필요하지 않음) 키보드를 사용하는 장애인뿐만 아니라 많은 개발자도 있습니다!

주의 의사 클래스로 더 많은 작업을 수행할 수 있습니다. 이것은 빙산의 일각일 뿐입니다. 예를 들어 입력이 :disabled 인지 확인할 수 있습니다.
Css/HTML 유효성 검사는 JavaScript 유효성 검사의 대안이 **아닙니다*. 스크립트를 사용하여 복잡한 검사를 수행하는 것이 입력 패턴 속성에 작성하는 것보다 훨씬 쉽습니다.*

멋진 형태