약 2 주 전에 웹 사이트를 시작했는데 색인 페이지 하단에있는 문의 양식을 통해받은 문의 건수에 놀랐습니다.

UX 디자이너로서 저는 항상 저와 제 고객의 전환율을 향상시킬 수있는 패턴과 표준을 찾고 있습니다. Matt D Smith의 플로팅 라벨 패턴을 처음 보았을 때 제 웹 사이트에서 테스트하고 싶다는 것을 알았습니다.

문제는 제 웹 사이트가 베타 버전을 출시하는 데 거의 3 년이 걸렸다는 것입니다. (왜냐하면 항상 개인적인 것보다는해야 할 일이 더 중요하기 때문입니다. 물건 🙈), 그리고 2 주가 지난 후, 내 사서함은 그 어느 때보 다 더 많은 이메일을 받았으며, 그것이 패턴 때문이라고 생각하지 않지만 그 뒤에있는 코드를 보여주는 게시물을 만들기로 결정했습니다. 펜은 다음과 같습니다.

약간의 배경 :

플로팅 라벨은 2013 년에 탄생했습니다. Matt D Smith는이 장면에서 처음으로 라벨을 소개했으며 그 이후로 지금까지 가장 많이 논의 된 디자인 패턴 중 하나가되었습니다.

진정하게 공정하기 위해 지지자와 비방 자 모두 플로팅 라벨 사용에 대한 타당한 주장을 드러냈다고 생각합니다. 이 문제에 대한 Chris Coyier의 의견, 가장 비평가 중 한 명인 Brad Frost의 장단점 및 이에 대한 Matt Smith의 답변입니다. 그들은 모두 자신의 가정에 대해 좋은 점을 지적 했으므로 모든 이론적 인 내용은 그대로두고 실용적인 측면에 초점을 맞출 것입니다. 자세히 살펴 보겠습니다!

내 접근 방식은 어떻게 구축 되었습니까?

저는이 펜을 만들기 위해 두 가지 멋진 CSS 기능에 의존했습니다. 형제 선택기와 의사 클래스입니다. 이러한 과소 평가되었지만 강력한 기술의 조합이 다음과 같은 결과를 낳았습니다.

플로팅 라벨 패턴에 대한 가장 일반적인 우려 중 하나는 자리 표시자가 라벨이된다는 것입니다. 그것은 엄청난 사용성 실수입니다. 여기서 비결은 라벨이 대체되지 않습니다 : 시각적으로 숨겨져 있습니다 (화면 판독기에서 여전히 읽을 수있는 opacity : 0; 사용). 입력에 무언가를 입력 할 때까지 : 자리 표시자가 사라지면 레이블이 표시됩니다. CSS 만 사용하면 어떻게 가능할까요? : valid 의사 클래스 덕분입니다.

: valid 의사 클래스는 입력에 적어도 하나의 문자가 있고 자리 표시자가있는 경우 만 레이블 (입력 필드의 형제)이 표시되도록합니다. 사라졌다. 형제 선택자를 사용하여 그렇게합니다 (고양이를 사용하는 CSS 선택자를 설명하는이 게시물에서 쉽고 재미있는 방법으로 학습).

고려할 사항은 한 가지 뿐이며 입력 콘텐츠의 유효성을 검사하는 것입니다. : valid 의사 클래스는 입력 내부에 콘텐츠가 있는지 확인하는 데 사용되지만 어떤 콘텐츠가 있는지 확인하는 것은 도움이되지 않습니다. 예를 들어 사용자가 입력 한 것은 유효한 이메일입니다. 따라서 : valid 의사 클래스는 프런트 엔드 유효성 검사 라이브러리 (제 경우에는 Parsley이지만 원하는 것을 자유롭게 사용할 수 있음)의 도움을 받아 사용해야합니다. 사용자가 잘못된 콘텐츠를 입력했습니다.

그게 다야! 50 줄 미만의 코드로 웹 사이트에서 가장 확장 된 디자인 패턴 중 하나를 구현하고 여기에 표시된대로 연락처 양식 변환을 높일 수 있습니다. 종속성이없고 브라우저 간 호환이 가능하며 Javascript를 사용할 필요가 없으며 WCAG를 완전히 준수합니다. 원하는 곳에서 스 니펫을 포크하고 사용하는 것을 잊지 마세요. 원하는 경우이 게시물을 공유하고, 더 많은 팁을 보려면 저를 따르세요. & amp; 트릭, 어떻게 진행되는지 알려주세요!