정의 및 사용 방법

<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">
브라우저에서 실제 표시된 모습

텍스트 필드에 입력된 문자열의 초깃값을 지정합니다.

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

disabled 속성

해당 요소를 비활성시키려면 disabled 속성을 사용하세요. 비활성화된 요소는 입력이나 값을 바꾸려 해도 그 고유기능이 비활성화되어 아무런 작동도 하지 않습니다. 또한 폼 제출 시 값이 전송되지 않습니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<label for="user-email">사용자 이메일</label>
<input type="email" id="user-email" value="account@example.com" disabled>
브라우저에서 실제 표시된 모습 입력이나 값을 바꾸려 해도 아무런 작동을 하지 않습니다.

하지만, 이 속성은 value를 직접 설정하는 자바스크립트로는 여전히 변경할 수 있습니다.

readonly 속성

readonly 속성은 컨트롤을 변경 혹은 편집할 수 없게 만듭니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

주로 value 속성과 함께 사용하여 사용자에게 입력되어 있거나 저장되어 있는 컨트롤의 값을 보여주되 편집할 수 없게 할 때 사용합니다. 폼 제출 시 해당 값이 전송됩니다.

HTML 
<label for="user-email">사용자 이메일</label>
<input type="email" id="user-email" value="account@example.com" readonly>
브라우저에서 실제 표시된 모습 컨트롤을 변경 혹은 편집할 수 없게 만듭니다.

하지만, 이 속성은 value를 직접 설정하는 자바스크립트로는 여전히 변경할 수 있습니다.

maxlength 속성

maxlength 속성은 사용자가 입력할 수 있는 최대 문자 수(Maximum length)를 제한합니다. 해당 요소에 maxlength 속성이 지정되면, 사용자가 허용된 문자 수를 초과하여 입력하는 것을 방지할 수 있습니다.

  • 속성 값은 음이 아닌 0 이상의 정수 값을 가져야 합니다.
  • 잘못된 값이 지정되면, 최대 문자 수 제한이 적용되지 않습니다.
  • 최대 문자 수는 표준 문자 단위(바이트가 아닌 문자의 개수)로 계산되므로, 영문, 숫자, 한글 등 언어에 관계없이 동일하게 적용됩니다.

알아두세요!
해당 요소에 유효한 minlength 속성이 설정되어 있다면, maxlength 속성 값은 반드시 그 값보다 크거나 같아야 합니다.

HTML 
<label for="user-email">사용자 이메일</label>

<!-- maxlength="10"으로 최대 10자 입력 제한 -->
<input type="email" id="user-email" maxlength="10" placeholder="최대 10자 이내">
브라우저에서 실제 표시된 모습

minlength 속성

minlength 속성은 사용자가 입력해야 하는 최소 문자 수(Minimum length)를 지정합니다. 해당 요소에 minlength 속성이 지정되면, 사용자는 지정된 최소 문자 수 이상을 입력해야 합니다.

참고하세요!
minlength 속성은 최소로 입력해야 하는 값만을 체크합니다. 만약, 사용자가 해당 요소에 아무것도 입력하지 않으면 빈 값은 허용됩니다. 빈 값도 허용하지 않으려면 required 속성을 함께 사용하세요.

부연설명
required 속성은 해당 입력 필드를 필수로 조건에 맞게 입력해야만 양식이 제출되게 합니다.

  • 속성 값은 음이 아닌 0 이상의 정수 값을 가져야 합니다.
  • 잘못된 값이 지정되면, 입력해야 하는 최소 문자 수 지정이 적용되지 않습니다.
  • 최소 문자 수는 표준 문자 단위(바이트가 아닌 문자의 개수)로 계산되므로, 영문, 숫자, 한글 등 언어에 관계없이 동일하게 적용됩니다.

알아두세요!
해당 요소에 유효한 maxlength 속성이 설정되어 있다면, minlength 속성 값은 반드시 그 값보다 작거나 같아야 합니다.

HTML 
<form>
    <label for="email">EMAIL</label>
    
    <!-- minlength="10"으로 최소 10자 입력 요구 -->
    <input type="email" id="email" minlength="10" placeholder="최소 10자 이상 입력..." required>
    <button type="submit">제출</button>
</form>
실제 적용된 모습 실습 가이드: minlength 작동 확인
  • 오류 확인: 입력 필드에 입력이 없거나 10글자만 입력한 후, [제출] 버튼을 클릭해 보세요. 브라우저가 최소 입력 조건(10글자) 미달 오류 메시지를 표시하는 것을 확인합니다.
  • 성공 확인: 필드에 10글자 이상 입력한 후, 다시 [제출] 버튼을 클릭하면 오류 없이 폼이 제출되는 것을 확인합니다.

접근성 고려 사항

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
readonly 4 12 4 5

명세서

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

참고문헌

같이 보기