HTML <input type=”email”> – 올바른 이해와 사용 방법

`<input type="email">`

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

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

기본 유효성 검사

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

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

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

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

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>

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

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

TML5의 기본 기능으로 제공하는 유효성 검사 기능를 제거하려면 <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 속성은 값이 설정되지 않은 경우 컨트롤에 표시되는 텍스트를 지정합니다.
이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다.

`pattern` 속성

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

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

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

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

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

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

`required` 속성

양식을 제출하기 전에 사용자가 컨트롤의 입력 값을 지정해야 함을 나타냅니다.
이 속성은 부울 속성(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>을 사용해야 합니다. 콘텐츠에 예기치 않은 기술적 문제를 일으킬 수 있습니다.

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

브라우저 호환성

input type 속성의 email 값에 대한 브라우저 호환성과 관련 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	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)

참고문헌

MDN - <input type="email">

<input type="email">

기본 유효성 검사

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

관련 속성 사용하기

multiple 속성

유효한 형식

유효하지 않은 형식

placeholder 속성

pattern 속성

required 속성

접근성 고려사항

브라우저 호환성

명세서

참고문헌

같이 보기

`<input type="email">`

`multiple` 속성

`placeholder` 속성

`pattern` 속성

`required` 속성