Learn HTML & CSS폼 유효성 검사
폼은 사람들에게서 입력을 받는데, 사람들은 필드를 빈칸으로 남겨두거나 이메일을 잘못 입력하거나 숫자가 들어가야 할 곳에 글자를 넣기도 합니다. 그런 데이터가 손질 없이 그대로 여러분의 코드에 도달하게 두어서는 안 됩니다. 무언가가 제출되기 전에 브라우저가 그중 많은 부분을 대신 검사해줄 수 있지만, 그러려면 각 필드가 어떤 값을 기대하는지 미리 설명해줘야 합니다. 그 설명은 다름 아닌 HTML 안에 바로 적어 넣는 것이고, 이번 장에서는 그것을 어떻게 작성하는지 다룹니다.
필수 필드와 입력 타입
가장 적은 노력으로 추가할 수 있는 두 가지 검사는, 필드를 반드시 채워야 한다고 지정하는 것과 그 안에 어떤 종류의 값이 들어가야 하는지 지정하는 것입니다.
input에 **required**라는 단어를 추가하면, 그 필드에 무언가 값이 채워지기 전까지 브라우저가 폼 제출을 막아줍니다. 이를 위해 코드를 따로 작성할 필요가 없습니다. 이 속성 자체가 바로 지시문입니다.
<input type="text" name="full_name" required>나머지 절반은 type 속성입니다. 이 속성은 값이 어떤 형태여야 하는지 브라우저에 알려주고, 브라우저는 그것을 대신 검사해줍니다. type="email"을 사용하면 브라우저가 값이 이메일 주소처럼 생겼는지 확인합니다. type="number"를 사용하면 숫자만 받아들입니다. 날짜용 타입도 있고, 웹 주소용 타입도 있고, 그 외에도 여러 가지가 있습니다.
병원 접수 서류를 떠올려 보세요. 어떤 칸에는 "필수 기입"이라고 표시되어 있고, 날짜 칸에는 이미 일, 월, 년을 적어 넣을 작은 칸이 나뉘어 있습니다. 종이가 아무것도 적기 전부터 어디에 무엇을 써야 하는지 미리 알려주는 것입니다.
두 속성을 함께 사용한 작은 가입 폼을 살펴보겠습니다.
<form>
<label>
Email address
<input type="email" name="email" required>
</label>
<label>
Website
<input type="url" name="website">
</label>
<button>Sign up</button>
</form>이메일 필드는 반드시 채워야 하고 이메일처럼 보여야 합니다. 웹사이트 필드는 선택 사항이지만, 무언가 입력한다면 웹 주소처럼 보여야 합니다. 버튼을 누르는 순간 브라우저가 두 조건을 모두 검사합니다.
required를 붙이면 브라우저가 빈칸을 통과시켜주지 않습니다. type을 email이나 number처럼 지정하면 값이 올바른 형태인지 검사해줍니다. 필드에 맞는 타입을 고르면 검사는 공짜로 따라옵니다. 제약 속성
"채워졌는지"와 "타입이 맞는지"를 넘어서, 종종 한계값도 필요합니다. 최소 이만큼 길이여야 한다거나, 숫자가 저 값보다 크지 않아야 한다거나, 정해진 형식의 코드여야 한다는 식으로요. 몇 가지 속성이 이를 다룹니다.
필드가 받아들일 값에 한계를 정할 수 있습니다. 시작하기 좋은 두 가지는 이렇습니다.
<input type="text" name="username" maxlength="20">
<input type="number" name="quantity" min="1" max="10">maxlength="20"은 필드에 스무 글자가 채워지면 더 이상 입력을 받지 않습니다. min과 max는 허용되는 최소, 최대 숫자를 정합니다. 브라우저가 이 범위를 지키도록 강제하므로, 여러분이 직접 검사할 필요가 없습니다.
가장 많은 혼란을 줄여주는 규칙은 이것입니다. pattern은 값의 일부가 아니라 값 전체와 일치해야 합니다.
<input
type="text"
name="product_code"
pattern="[A-Z]{2}-[0-9]{3}"
title="Two letters, a hyphen, three digits, e.g. AB-123"
required
>maxlength는 입력할 수 있는 글자 수를 제한하고, min과 max는 숫자의 범위를 정합니다. 브라우저가 자동으로 이 범위 안에 사람들을 붙잡아 두므로, 여러분이 따로 검사할 일이 크게 줄어듭니다. 브라우저 기본 유효성 피드백
규칙을 선언하는 것은 이야기의 절반에 불과합니다. 나머지 절반은 값이 규칙을 어겼을 때 사람들이 실제로 무엇을 보게 되는가입니다.
누군가 제출 버튼을 눌렀을 때 필드에 문제가 있으면, 브라우저는 제출을 막고 문제가 있는 첫 번째 필드 옆에 작은 메시지를 보여준 뒤 그 필드로 커서를 옮겨줍니다. 이 메시지를 여러분이 직접 만들 필요는 없습니다. 브라우저가 방문자의 언어로 알아서 작성해서 자동으로 보여줍니다.
그래서 required가 붙은 이메일 필드를 비워두면 "이 입력란을 작성하세요"와 비슷한 메시지가 나타나고, 고치기 전까지 폼은 전송되지 않습니다.
여전히 JavaScript가 필요한 경우
브라우저 기본 검증은 필드 하나를 자기 자신의 규칙에 비추어 검사합니다. 실제로 필요한 많은 검사는 그런 형태에 맞지 않고, 그럴 때 JavaScript가 등장합니다.
브라우저가 스스로 검사할 수 없는 것들이 있습니다. 비밀번호 두 필드가 서로 같은지, 아이디를 이미 다른 사람이 쓰고 있는지, 할인 코드가 실제로 유효한지 같은 것들입니다. 이런 것들은 필드 하나의 형태에 관한 문제가 아니므로 그에 맞는 속성이 없고, 이런 검사는 JavaScript로 처리해야 합니다.
이는 HTML의 약점이 아닙니다. 내장 검사가 흔한 경우를 코드 한 줄 없이 처리해주고, JavaScript가 나머지를 맡는 것입니다.