HTML <input type="email">: 이메일 입력

email 유형의 <input> 요소는 사용자가 이메일 주소를 입력하고 편집할 수 있는 컨트롤입니다. multiple 특성을 지정하면 한 번에 여러 이메일을 받을 수 있습니다.

<label for="email">Gmail 주소를 입력하세요:
  <input type="email"
         id="email"
         pattern=".+@gmail\.com"
         placeholder="example@gmail.com"
         required>
</label>

#email {
  border-style: solid;
}
#email:valid {
  border-color: green;
}
#email:invalid {
  border-color: red;
}

위 예제는 “gmail.com”으로 끝나는 이메일만 허용하고, CSS :valid와 :invalid 의사 요소를 사용해서 값이 유효하거나 유효하지 않음에 따라 email 입력 칸의 테두리 색상을 바꾸는 모습입니다.

값

<input type="email"> 요소의 value 특성은 문자열로, 이메일 주소 구문에 맞는지 검증을 거칩니다. 이메일 주소 구문 검증을 통과할 수 있는 값에는 다음과 같은 세 종류가 있습니다.

1. 빈 문자열(""). 사용자가 아직 값을 입력하지 않았거나, 값을 제거했음을 의미합니다.
2. 올바른 형식의 단일 이메일 주소. 그 이메일 주소가 실제로 존재한다는 보장은 없지만, 적어도 주소의 형식은 유효한 경우입니다. 간단하게 말하면 “username@domain”이나 “username@domain.tld” 형식의 값이 검증을 통과할 수 있습니다. 물론 이게 이메일 형식의 전부는 아니고, 아래의 유효성 검증에서 실제 주소 검증 알고리즘과 일치하는 정규표현식을 확인하세요.
3. multiple 특성을 지정한 경우에 한해, 다수의 이메일 주소를 쉼표로 구분한 목록 형태로 포함한 문자열도 검증을 통과합니다. 각각의 이메일 주소에서 선행 및 후행 공백은 검증 시 무시합니다.

추가 특성

email 유형은 모든 <input> 요소가 공유하는 특성 외에도 아래의 특성을 추가로 지원합니다.

maxlength

입력 값의 유효한 최대 문자 수(UTF-16 코드 유닛 기준)를 지정합니다. 0 이상의 정수만 지정할 수 있습니다. 유효하지 않은 값은 지정해도 최대 길이를 설정하지 않습니다.

이 값보다 긴 길이의 텍스트를 받은 경우 <input>이 제약 검증을 통과하지 못합니다. 기본 설정에서, 브라우저는 사용자가 입력하는 값의 길이를 이 특성의 값으로 제한합니다.

minlength

입력 값의 유효한 최소 문자 수(UTF-16 코드 유닛 기준)를 지정합니다. 0 이상의 정수만 지정할 수 있습니다. 유효하지 않은 값은 지정해도 최대 길이를 설정하지 않습니다.

이 값보다 짧은 길이의 텍스트를 받은 경우 <input>이 제약 검증을 통과하지 못합니다.

multiple

불리언 특성으로, 지정할 경우 여러 이메일 주소를 쉼표로 구분해서 입력할 수 있습니다. 여러 이메일 주소 받기 에제에서 자세한 사용법을 확인하세요.

일반적으로는 required 특성을 지정하면 사용자가 반드시 유효한 이메일 주소를 입력해야 <input>이 검증을 통과합니다. 하지만 multiple 특성을 지정한 경우 아무 주소도 포함하지 않은 목록(빈 문자열 또는 공백 문자만으로 이루어진 값)도 유효한 값입니다. 즉 multiple 특성을 지정하면 required 특성이 존재하더라도 값을 입력하지 않을 수 있습니다.

pattern

제약 검증을 만족하려면 입력 값이 일치해야 하는 정규표현식을 지정합니다. JavaScript RegExp가 인식할 수 있는 정규표현식이어야 합니다. 정규표현식을 컴파일할 때 u 플래그를 지정하므로 패턴은 항상 Unicode 코드 포인트의 시퀀스로 취급합니다. 정규표현식을 열고 닫는 슬래시는 생략해야 합니다.

유효하지 않은 값을 지정한 경우 무시합니다.

pattern 특성을 사용할 땐 반드시 <input> 근처의 부가 설명으로 형식에 대한 도움말을 제공하세요. <input>에 aria-describedby 특성을 추가해서 설명과 연결하면 접근성을 강화할 수 있습니다.

여기에 더해서 title 특성으로 정확한 요구사항을 설명하면 대부분의 브라우저에서 툴팁으로 보여줄 것입니다. 하지만 title 특성의 접근성 문제를 고려하면 일반 텍스트 설명 없는 title만 단독으로 사용하지는 말아야 합니다.

placeholder

사용자가 입력해야 하는 값을 간략하게 알려줄 텍스트를 지정합니다. 값이 개행 문자를 포함해서는 안됩니다. placeholder는 이 입력 칸의 설명을 제공하는 것이 아니라, 기대하는 데이터의 유형을 나타내야 합니다. 따라서 placeholder에 어울리는 값은 “이메일을 입력하세요”가 아니라 “username@example.org”입니다.

placeholder는 양식을 설명할 수 있는 다른 방법에 비해 적합하지 않으며 예상하지 못한 기술적 문제를 유발할 수 있습니다. <input>의 레이블 절을 참고하세요.

유효성 검증

email 유형의 검증에는 두 종류가 있는데, 그중 첫 번째는 값이 유효한 형식의 이메일 주소임을 검증하는 것이고 두 번째는 이메일 주소 중에서도 조건을 추가하는 겁니다.

기본 검증

email 유형을 지원하는 브라우저에서는 값이 인터넷 이메일 주소의 표준 형식에 맞는지 검사합니다. 명세를 구현하는 브라우저는 정확히 다음 정규표현식을 사용해야 합니다.

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

패턴 검증

“아무 이메일”보다 정교한 제한이 필요하면, pattern 특성에 값이 일치해야 하는 정규표현식을 지정할 수 있습니다. multiple 특성을 지정했으면 쉼표로 구분한 각각의 이메일이 모두 정규표현식과 일치해야 합니다.

패턴 검증의 예를 들기 위해 “최고건설”의 IT 지원부서 연락 양식을 개발하는 상황을 가정하겠습니다. 사용자는 자신의 이메일 주소와 문제를 요약한 메시지를 양식으로 제출해야 합니다. 보안상, 이메일은 단순히 유효한 형식일 뿐만 아니라 사내 이메일 주소여야 합니다.

email 유형을 사용하면 표준 이메일 주소 형식 검증과 pattern 특성을 함께 사용할 수 있으므로 쉽게 구현할 수 있습니다.

<form>
  <div>
    <label for="email">이메일 주소</label>
    <input
      id="email"
      type="email"
      maxlength="64"
      pattern=".+@bestcnd\.co\.kr"
      placeholder="username@bestcnd.co.kr"
      required
      title="최고건설 이메일 주소를 입력해 주세요"
    >
  </div>
  <div>
    <label for="message">요청사항</label>
    <textarea
      id="message"
      placeholder="3층 81번 자리 모니터에 불이 붙었어요."
      required
    ></textarea>
  </div>
  <button type="submit">제출</button>
</form>

form > * + * {
  margin-top: 0.5em;
}

label {
  display: block;
}

input,
textarea {
  width: 40em;
  font-size: 1rem;
}

textarea {
  height: 8em;
}

이메일 주소 입력 칸을 자세히 봐주세요. maxlength 특성은 입력 가능한 이메일 주소의 길이를 64자로 제한합니다. required 특성은 유효한 이메일 주소를 반드시 입력해야만 양식을 제출할 수 있도록 제한합니다.

적합한 값의 형식의 예시를 제공하기 위해 플레이스홀더로 “username@bestcnd.co.kr”을 지정한 것도 확인할 수 있습니다. 따라서 사용자는 이 칸에 이메일, 그중에서도 “bestcnd.co.kr”로 끝나는 회사 이메일 주소를 입력해야 한다는 힌트를 얻을 수 있습니다. 만약 이메일이 아닌 값을 입력하고 제출을 시도하면 아래 스크린샷처럼 오류 메시지가 나타납니다.

여기서 멈추더라도 유효한 이메일 주소는 기대할 수 있습니다. 하지만 더 나아가 “bestcnd.co.kr” 도메인의 이메일 주소만 받고 싶을 때 pattern을 씁니다. 위 예제에서는 간단한 정규표현식인 .+@bestcnd\.co\.kr을 지정했는데, 아무 문자 한 개 이상과 ”@”, 그 뒤의 도메인 “bestcnd.co.kr”과 일치합니다.

참고로 .+@bestcnd\.co\.kr만으로는 유효한 이메일 주소 검증과 상당한 거리가 있습니다. 예컨대 ” @beststartupever.com”(맨 앞에 공백)이나 “@@beststartupever.com”처럼 말도 안되는 주소도 이 정규표현식과 일치합니다. 하지만 브라우저가 표준 이메일 주소 검증을 사용자 지정 패턴과 함께 적용하므로, 결과적으로는 “유효한 구문의 이메일 주소면서 bestcnd.co.kr로 끝나야 함”을 검증하게 됩니다.

pattern을 사용할 때 title 특성을 함께 사용하면 더 좋습니다. 그러면 유효성 검증 오류 메시지의 일부로서 title이 나타나므로, title은 패턴이 바라는 값을 설명해야 합니다. 예를 들어 title에 “이메일 주소”처럼 일반적인 메시지를 지정하면, 형식에 맞지 않는 값을 입력했을 때 나타나는 메시지가 “요청한 형식과 일치하지 않습니다. 이메일 주소”처럼 되므로 별 도움이 안됩니다.

그래서 위 예제에서도 title에 구체적인 메시지로 “최고건설 이메일 주소를 입력해 주세요”를 지정했습니다. 덕분에 최고건설 이메일이 아닌 주소를 입력하면 아래 스크린샷과 같이 상세한 오류 메시지를 볼 수 있습니다.

예제

여러 이메일 주소 받기

multiple 특성을 추가하면 다수의 이메일 주소를 쉼표로 구분해서 받을 수 있습니다. 이메일을 하나만 입력해도, 쉼표로 구분해서 여러 개를 입력해도, 모두 유효한 상태(:valid)임을 볼 수 있습니다.

<input id="email" type="email" multiple>

input {
  border-color: red;
  border-width: 2px;
}
input:valid {
  border-color: green;
}

쉼표 앞뒤로 공백이 여러 개 있어도 괜찮습니다. 따라서 다음 목록은 모두 유효한 값입니다.

• ""
• "me@example"
• "me@example.org"
• "me@example.org,you@example.org"
• "me@example.org, you@example.org"
• "me@example.org,you@example.org, us@example.org"

명세

HTML Standard

브라우저 호환성