HTML5 양식 유효성 검사 및 부동 입력 레이블 이해

게시 됨: 2016-05-16

양식 유효성 검사를 구현하는 것은 악의적인 사용자가 양식 필드에 횡설수설한 텍스트를 입력하는 것을 방지하는 데 중요한 역할을 합니다. 또한 경험이 없는 사용자가 양식에 잘못된 정보를 잘못 입력하는 것을 제한합니다.

물론 안전하지 않은 방식으로 사용자로부터 잘못된 데이터를 수집하고 싶지는 않을 것입니다. 따라서 양식에 대한 유효성 검사 규칙을 정의하는 것이 필수적입니다.

수년 동안 우리는 클라이언트 측에서 양식 유효성 검사를 구현하기 위해 복잡하고 TL;DR(즉, 너무 길거나 읽지 않음) JavaScript 코드를 사용해 왔습니다. 고맙게도 "HTML5 양식 유효성 검사"가 출시되면서 이제 최소한의 JavaScript로 양식에 유효성 검사를 추가할 수 있습니다.

최신 HTML 버전 릴리스는 여러 가지 이점을 제공하지만 가장 중요한 것은 복잡한 JS(JavaScript의 약어) 유효성 검사 코드를 작성할 필요 없이 양식 유효성을 검사하는 데 필수적인 많은 새로운 입력 필드와 속성이 함께 제공된다는 것입니다.

그러나 사용자는 양식을 작성할 때 쉽게 좌절감을 느낄 수 있으며, 특히 입력한 데이터가 잘못되었다는 것을 알게 되면 좌절감을 더 크게 느낄 수 있습니다. 그러나 HTML5 덕분에 부동 입력 레이블을 추가하면 사용자가 양식을 작성할 때 양식 데이터의 유효성을 동시에 확인할 수 있습니다. 이렇게 하면 사용자는 입력 필드에 실수가 있는지 즉시 알 수 있습니다.

예를 들어, 아래는 플로팅 레이블 패턴이 양식에 적용될 때 작동하는 방식을 보여주는 Matt Smith가 Dribble에 게시한 이미지입니다.

How the floating label pattern works

이 게시물은 HTML5 양식에 유효성 검사를 추가할 때 부동 입력 레이블을 구현하는 방법을 다룹니다.

하지만 시작하기 전에

대부분의 사람들은 먼저 HTML5 양식의 유효성을 검사하는 프로세스를 알고 싶어할 것입니다. 결국 HTML5 양식에 대한 유효성 검사 코드를 작성한 경험이 있는 것은 아닙니다. 또한 HTML5에 새로 도입된 입력 필드와 속성에 대한 지식이 없을 수도 있습니다.

HTML5 양식 유효성 검사에 대한 자세한 개요

양식 유효성 검사를 계획할 때는 먼저 서버 측 유효성 검사부터 시작하는 것이 좋습니다. 그리고 당신이 훌륭한 웹 디자이너라면 클라이언트 측 유효성 검사를 추가하여 사용자가 양식을 올바른 데이터로 채우고 있는지 여부에 관계없이 즉각적인 피드백을 받을 수 있도록 돕습니다. 예를 들어 사용자가 이메일 주소 필드에 데이터를 입력할 때 즉각적인 피드백을 제공하면 입력한 이메일 주소가 유효하다는 것을 알 수 있습니다.

훌륭한 HTML5 기능 중 하나는 스크립트에 의존하지 않고 클라이언트 측 유효성 검사를 구현하는 데 도움이 된다는 것입니다. 오히려 양식 요소에서 "검증 속성"을 사용하여 이러한 작업을 수행할 수 있습니다. 가장 중요한 것은 입력 필드에 "필수" 속성을 추가하기만 하면 나머지는 브라우저에서 처리된다는 것입니다.

다음은 입력 필드에 유효성 검사를 추가하기 위한 필수 속성의 사용을 설명하는 예입니다.

[php]
이름: <input type="text" name="yourname" 필수>
[/php]

위의 코드 줄은 이름 INPUT 필드가 필수 필드로 간주되어야 함을 브라우저에 알립니다(즉, 공백으로 둘 수 없음).

INPUT field cannot be left blank

보시다시피 'Your Name' 입력 필드에 해당하는 텍스트 상자에 빨간색 마커가 표시됩니다. 그러나 이름 입력 필드에 일부 텍스트가 입력되자마자 마커는 입력된 값이 유효함을 나타내는 체크 표시로 바뀝니다.

<input type="text"> (예: 텍스트 입력 유형) 외에도 HTML5는 이제 search, email, tel, datetime 등과 같은 몇 가지 새로운 입력 옵션을 지원합니다. 간단히 말해서 HTML5를 사용하여 아래 코드 줄을 작성할 수 있습니다. :

[php]
<입력 유형="텍스트" 이름="이메일">
[/php]

다음과 같이

[php]
<입력 유형="이메일" 이름="이메일">
[/php]

데스크탑 브라우저는 표준 텍스트 필드처럼 위의 코드를 렌더링합니다.

한 가지 더 중요한 사실은 다음과 같습니다. 내용이 없어도 CodePen 데모에서 required 또는 input type="email"과 같은 속성을 입력하려고 하면 여전히 오류가 발생합니다. 유효한 이메일 주소 없이 '제출' 버튼 클릭 시 메시지:

Error message

위에서 논의한 예에서 브라우저는 기본적으로 오류 메시지를 표시하는 것을 볼 수 있습니다. 그러나 입력 값에 고유한(즉, 사용자 정의) 유효성 검사 규칙을 적용하려면 어떻게 해야 합니까? 여기에서 Regex 패턴이 유용합니다.

RegEx 패턴 이해하기

abc@a와 같은 이메일 주소를 입력할 때 패턴을 본 적이 있을 것입니다. 말할 필요도 없이 사용자가 실제 전자 메일 주소를 입력하기를 원할 것입니다. 또한 데이터와 일치하는 패턴을 직접 선택하여 입력한 값의 유효성을 검사하는 데 도움이 됩니다. 예를 들어 이메일이 끝에 3자 이상을 포함하는 패턴과 일치하는지 확인할 수 있습니다. 이렇게 하려면 "패턴 속성"과 정규식(RegEx)을 사용해야 합니다.

RegEx는 기본적으로 텍스트를 구문 분석하거나 조작하는 데 사용되는 언어입니다. 대부분의 경우 정규식은 더 나은 텍스트 데이터 형성을 위해 복잡한 작업(예: 검색 및 바꾸기)을 수행하는 데 사용됩니다. 오늘날 거의 모든 프로그래밍 및 스크립팅 언어에서 정규식을 사용할 수 있습니다. RegEx는 다음과 같이 패턴 속성을 사용하여 입력 유형에 적용하여 양식 필드에 입력된 데이터의 유효성을 검사하는 데 사용할 수 있습니다.

[php]
<input id="phone" placeholder="111-111-1111" title="전화번호 패턴을 전달할 텍스트" required pattern="[0-9]{3}-[0-9]{3}-[ 0-9]{4}">
[/php]

또한 유효성 검사 오류가 발생하면 유효성 검사 오류와 함께 제목 속성을 결정하여 "잘못된 형식!"이라는 메시지가 표시되도록 선택할 수 있습니다. 아래 주어진 코드 줄을 사용하여 :

[php]
<input type="email" placeholder="이메일" 필수 패턴="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A- Za-z]{2,}$" title="여기에 유효한 이메일 주소를 입력하세요.">
[/php]

모든 입력에 대해 터무니없는 패턴을 작성할 필요가 없음을 명심하십시오. 대신, 많은 경우에 필요한 속성을 특정 데이터 유형에 할당하기만 하면 됩니다. 예를 들어 8보다 큰 숫자는 다음과 같습니다.

[php]
<입력 유형="숫자" 최소="8" 필요>
[/php]

또한 모든 브라우저가 사용 가능한 모든 유효성 검사 속성을 지원하는 것은 아닙니다. 예를 들어 Firefox 브라우저는 "minlength" 패턴과 호환되지 않습니다.

HTML5 양식 유효성 검사 사용의 이점

HTML5 양식 유효성 검사를 구현하는 가장 큰 이점은 즉각적인 피드백입니다. 대부분 사용자가 양식의 일부 필드를 채우는 동안 일종의 표시가 강조 표시되어 입력한 값이 유효한지 여부를 알려줍니다.

Indication will be highlighted while users fill out some field

이제 텍스트 상자에 무언가를 입력하면 테두리 색상이 다음과 같이 녹색으로 변경됩니다.

The border color changes to green

그러나 보시다시피 이 접근 방식에는 단점이 있습니다. '이름' 필드에 유효하지 않은(또는 불완전한) 값을 추가하는 경우에도 사용자는 값이 정확하다는 표시를 받습니다. 아마도 코드에 :invalid:not(:empty) 를 추가하는 것에 대해 생각할 수 있습니다. 불행히도 이러한 논리는 일반적으로 양식 요소를 비어 있는 것으로 간주하기 때문에 브라우저에서 작동하지 않습니다.

무엇을 해야 할지 궁금하세요?

다음과 같이 코드에 ":placeholder-shown"이라는 새로운 의사 선택기를 추가할 수 있습니다.

[php]
<형태>
<라벨>
<span>이름</span>
<input type="text" pattern=".{4,}" placeholder=" " required title="최소 4자 이상을 입력하세요.">
</레이블>

<button>제출</button>

</form>
[/php]

그러나 대부분의 브라우저는 자리 표시자 표시를 지원하지 않는 것 같으므로 입력 필드가 비어 있거나 없을 때 클래스를 토글하는 스크립트를 작성하는 것이 좋습니다. 다음은 동일한 JavaScript 코드입니다.

[php]
$('입력:비어 있음, 텍스트 영역:비어 있음').addClass('비어 있음');

$('입력').keyup(함수() {

if ($(this).val().trim() !== ”) {

$(this).removeClass('빈');

} 또 다른 {

$(this).addClass('빈');

}

});
[/php]

참고 : 위의 HTML 마크업에서 자리 표시자 요소를 제거하는 것을 잊지 마십시오.

이제 위의 코드 조각을 HTML5 마크업과 함께 실행하면 출력이 다음과 같이 표시됩니다.

Code snippet along with HTML5 markup

보시다시피 텍스트 상자의 색상은 필드에 적용된 유효성 검사가 충족되지 않을 때까지 빨간색으로 유지됩니다. 제출을 클릭하면 불완전한 이름을 입력할 때 오류 메시지가 표시됩니다.

그러나 사용자가 전체(3자 이상)를 입력하는 즉시 텍스트 상자 테두리의 색상이 녹색으로 변경됩니다.

The color of the text box border changes to green.

HTML5에서 부동 입력 레이블을 어떻게 추가할 수 있습니까?

이제 HTML5 양식의 유효성을 검사할 때 부동 입력 레이블을 추가하는 접근 방식에 대해 논의해 보겠습니다. 이렇게 하면 양식의 모양과 느낌을 향상시키는 데 도움이 됩니다. 다음은 HTML 마크업입니다.

float 레이블 패턴을 구현하려면 HTML 마크업의 <input> 요소 바로 아래에 태그를 푸시해야 합니다.

[php]
<형태>
<라벨>
<input type="text" pattern=".{4,}" required title="문자는 4자 이상이어야 합니다.">
<span>귀하의 이름</span>
</레이블>
<라벨>
<입력 유형="이메일" 필수 패턴="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{ 2,}$" title="올바른 이메일을 입력하세요.">
<span>귀하의 이메일</span>
</레이블>
<button>제출</button>

</form>
[/php]

CSS는 다음과 같이 보일 것입니다:

[css]
라벨 {
위치: 상대;
디스플레이: 인라인 블록;
}
레이블 범위 {
위치: 절대;
왼쪽: 20px;
상단: -2em;
글꼴 크기: .75em;
커서: 텍스트;
색상: #f27853;
전환: 모든 150ms 용이성;
}
입력 {
테두리: 1px 솔리드 #f2f2f2;
개요: 없음;
}
입력:초점 {
테두리 색상: #d9d9d9;
}
입력:유효한 {
테두리 색상: #42d142;
}
입력:잘못된 {
테두리 색상: #ff8e7a;
}
입력.빈 {
테두리 색상: #d9d9d9;
}
input.empty + 스팬 {
상단: 50%;
변환: translateY(-50%);
글꼴 크기: 1em;
배경: 없음;
색상: #cccccc;
}
신체 {
디스플레이: 플렉스;
최소 높이: 100vh;
배경: #f1f1f1;
글꼴 패밀리: '라토', 산세리프체;
글꼴 크기: 150%;
}
형태 {
여백: 자동;
}

입력, 버튼 {
패딩: 15px 20px;
테두리 반경: 1px;
테두리: 2px 솔리드 #bdbdbd;
}

버튼 {
테두리 색상: #363636;
배경: #363636;
색상: #FFFFFF;
}
[/css]

마지막으로 JavaScript 코드를 작성합니다.

[암호]
$('입력:비어 있음, 텍스트 영역:비어 있음').addClass('비어 있음');
$('입력').keyup(함수() {
if ($(this).val().trim() !== ”) {
$(this).removeClass('빈');
} 또 다른 {
$(this).addClass('빈');
}
});
[/암호]

산출:

Output

HTML5에서 부동 입력 레이블을 사용할 때 다음과 같은 여러 효과를 구현할 수 있습니다.

  • HTML5 양식의 유효성을 검사하는 동안 페이드 인/아웃 효과가 있는 아이콘을 추가합니다.
  • 입력한 데이터가 잘못된 경우 입력을 흔듭니다.
  • 올바르게 채워지면 입력 색상을 흐리게 만듭니다.
고려해야 할 사항

HTML5 양식에 대한 유효성 검사를 구현하는 작업을 할 때 다음 사항에 익숙해야 합니다.

  1. 브라우저 지원 : HTML5 양식은 최신 브라우저와 IE10+에서 완벽하게 작동합니다. IE 버전 9 및 이전 버전은 양식 스타일 지정을 억제하는 유효성 검사 의사 선택기를 지원하지 않지만 여전히 올바르게 작동합니다.
  2. 주의 사항: HTML5 양식에 유효성 검사를 적용할 때 수행할 수 없는 한 가지는 유효성 검사 메시지의 스타일을 지정하는 것입니다. 그 이유는 이러한 기능이 브라우저에서 비활성화되어 있기 때문입니다.

마지막 단어

양식에 유효성 검사를 구현하는 것은 사이트에 보안 계층을 추가하는 데 중요합니다. 이는 악의적인 사용자가 양식 필드의 값으로 악의적인 텍스트를 추가하는 것을 방지하기 때문입니다. 게다가 사용자가 양식의 검증된 입력 필드에 일부 입력을 입력할 때 즉각적인 피드백을 제공하면 사용자 경험을 향상시키는 데 도움이 됩니다. 결국, 그들은 양식을 작성하는 데 실수를 저질렀음을 인식하는 데 시간을 할애할 필요가 없습니다. 그러나 JavaScript만 사용하여 양식을 검증하는 것은 어려울 수 있습니다. 여기에서 HTML5 양식 유효성 검사가 도움이 됩니다.

HTML5를 사용하여 양식에 유효성 검사를 적용할 때 복잡한 JS 코드의 긴 줄을 작성할 필요가 없습니다. 대신 최소한의 JavaScript 코딩으로 양식 유효성 검사 규칙을 구현할 수 있습니다. 가장 중요한 것은 양식을 멋지게 보이게 하고 사용자가 양식 제출을 수행하도록 권장하는 부동 입력 레이블과 같은 HTML5 양식 유효성 검사에서 많은 새로운 기능을 사용할 수 있다는 것입니다.