<input type="email">

<input> 태그의 type="email"은 한 줄 이메일 주소 입력 필드를 나타냅니다.
이 필드는 기본 한 줄 텍스트 필드 유형인 type="text"와 매우 유사하지만, 이메일 주소를 입력한다는 의미를 명시적으로 제공한다는 점에서 차이가 있습니다.

텍스트 입력처럼 보이지만,
동적인 가상 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 @ 문자 및 . 문자와 같은 이메일 주소 입력에 도움이 되는 키패드를 지원합니다.

HTML 
<label for="user-email">사용자 이메일</label>
<input type="email" id="user-email">
브라우저에서 실제 표시된 모습

기본 유효성 검사

<input type="email">은 <form> 태그 내에서 사용하면 기본적으로 브라우저에서 유효성 검사가 진행됩니다.
이는 HTML5의 기본 기능으로, 사용자가 올바른 형식의 이메일 주소를 입력했는지 자동으로 확인해 줍니다.

HTML 
<form>
    <label for="user-email">사용자 이메일</label>
    <input type="email" id="user-email">
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 유효성 검사가 진행되는지 실제로 테스트 해보세요!

HTML5의 <input type="email"> 속성은 이메일 주소의 유효성을 검사하는데 기본적인 형식을 확인하지만, 매우 정밀하거나 모든 가능한 이메일 형식을 완벽하게 검사하지는 않습니다. 브라우저에 따라 차이가 있기는 하지만 기본적인 유효성 검사에서는 @ 기호와 도메인을 포함하는지 확인합니다. 하지만, 입력 필드에 값을 입력하지 않아도 유효성 검사를 통과할 수도 있습니다.

유효성 검사를 더 엄격히 하려면 <input type="email">에 이메일 형식 검사를 정밀하게 설정하는 pattern 속성과, 값을 필수로 입력하게 설정하는 required 속성을 추가하는 것입니다.

일러두기
아래에서 다루는 이메일 형식 검사는 단순 샘플 예제입니다. 정확성과 확장성 면에서 제한이 있을 수 있으므로, 정확성이나 확장성을 보장하거나 보증할 수 없습니다. 따라서, 예제를 신뢰하기 전에 스스로의 판단에 따라 오류, 버그, 취약점이 없는지 신중하게 테스트하고 검토해야 합니다.

HTML 
<form>
    <label for="user-email">사용자 이메일</label>
    <input type="email" id="user-email" required pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$">
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 유효성 검사가 진행되는지 실제로 테스트 해보세요!

이렇게 하면 이메일 입력 필드에 대해 좀 더 정밀한 유효성 검사를 수행할 수 있습니다.

기본 유효성 검사 내장 기능 제거하기

HTML5의 기본 기능으로 제공하는 유효성 검사 기능를 제거하려면 <form> 태그 내에 novalidate 속성을 추가하는 것입니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<form novalidate>
    <label for="user-email">사용자 이메일</label>
    <input type="email" id="user-email">
    <button type="submit">제출</button>
</form>

이렇게 하면 기본으로 내장되어 있는 유효성 검사 기능을 제거할 수 있습니다.

브라우저에서 실제 표시된 모습 유효성 검사가 진행되는지 실제로 테스트 해보세요!

관련 속성 사용하기

<input type="email">의 관련된 속성에 대해 알아보겠습니다.

multiple 속성

multiple 속성을 추가하면 여러 개의 이메일 주소를 입력하도록 허용한다는 의미입니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

이렇게 하면 사용자는 하나의 이메일 주소를 입력하거나 쉼표(,)로 구분된 여러 개의 이메일 주소를 입력했을 때 입력이 유효한 것으로 간주됩니다.

HTML 
<form>
    <label for="user-email">사용자 이메일</label>
    <input type="email" id="user-email" multiple>
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습
유효한 형식

다음의 문자열 형식들은 유효합니다.

  • 빈 문자열("")
  • "account@example"
  • "account@example.com"
  • "account@example.com,your@example.com"
  • "account@example.com, your@example.com"
  • "account@example.com,your@example.com, our@example.com"
유효하지 않은 형식

다음의 문자열 형식들은 유효하지 않습니다.

  • ","
  • "account"
  • "account@example.com your@example.com"

placeholder 속성

placeholder 속성은 값이 설정되지 않은 경우 텍스트 입력 컨트롤에 표시되는 텍스트를 지정합니다. 이것을 '플레이스홀더 텍스트'라고 합니다.
이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다. 사용자가 텍스트를 입력하기 시작하면 플레이스홀더 텍스트가 텍스트 입력 필드에서 사라집니다.

HTML 
<label for="user-email">사용자 이메일</label>
<input type="email" id="user-email" placeholder="account@example.com">
브라우저에서 실제 표시된 모습

컨트롤의 텍스트 값을 검사할 때 제약 조건 유효성 검사를 통과하기 위해 입력 값이 일치해야 하는 정규 표현식(regular expression)을 지정합니다.

이메일 주소 형식은 일정한 형식이 존재합니다. 예를 들어 account@example.com와 같은 형식을 말합니다.

이메일 주소는 로컬 부분, @ 기호, 도메인이라는 세 가지 고유한 부분으로 이루어집니다.
account@example.com에서 로컬 부분은 account이고, @ 기호는 @이며, 도메인은 example.com입니다.

이러한 형식을 정규 표현식(regular expression)으로 지정할 수 있습니다. 정규 표현식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다.

이메일 형식을 정규식 표현으로 지정한 예
HTML 
<input type="email" pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$">

이렇게 pattern 속성으로 지정한 정규 표현식(regular expression) 패턴과 일치하면 유효성 검사를 통과하고, 그렇지 않으면 유효성 검사를 통과하지 못하게 됩니다.

정규 표현식에 대한 가이드는 MDN - 정규 표현식을 참조하세요.

양식을 제출하기 전에 사용자가 컨트롤의 입력 값을 지정해야 함을 나타냅니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<form>
    <label for="user-email">사용자 이메일</label>
    <input type="email" id="user-email" required>
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습

이 밖에도 사용할 수 있는 관련 속성들이 다양하게 있습니다.
HTML <input> 태그의 여러 가지 속성들을 참조하세요!

접근성 고려사항

placeholder 속성이 해당 컨트롤의 레이블(이름표)을 대신할 수 없습니다.

컨트롤의 레이블(이름표)은 <label> 요소를 사용해야 합니다.
<label>의 텍스트는 시각적으로나 프그램적으로 해당 컨트롤과 연결됩니다. 시각장애인을 위한 스크린 리더는 기본적으로 placeholder 속성의 텍스트를 읽지 않지만, <label>의 텍스트는 읽어줍니다.

또한, <label> 요소는 포인팅 장치 사용자의 사용자 경험을 개선합니다. 사용자가 <label>을 클릭, 터치 또는 탭하면 포커스가 레이블의 연결된 해당 컨트롤로 이동합니다.

자세한 사항은 <input> 태그의 접근성 고려사항을 참조하세요.

HTML 컨트롤의 레이블(이름표)는 placeholder가 <label>를 대신할 수 없습니다. 
<input type="email" placeholder="사용자 이메일">
브라우저에서 실제 표시된 모습
HTML 
<label for="user-email">사용자 이메일</label>
<input type="email" id="user-email" placeholder="account@example.com">
브라우저에서 실제 표시된 모습

브라우저 호환성

input type 속성의 email 값에 대한 브라우저 호환성과 관련 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="email"> 5 12 1 5
multiple 2 12 3.6 4
placeholder 3 12 4 4
pattern 4 12 4 5
required 4 12 4 5

명세서

input type 속성의 email 값에 대한 명세서 사양
명세서 사양
<input type="email"> HTML Standard
#email-state-(type=email)

참고문헌

같이 보기