HTML에서 이메일 입력 필드는 <input type="email">을 사용하여 만들 수 있습니다. 이 입력 유형을 사용하면 사용자가 폼에 이메일 주소를 손쉽게 입력할 수 있습니다.
브라우저의 자동 유효성 검사
type="email"의 가장 큰 장점은 브라우저가 자동으로 이메일 형식을 검증한다는 점입니다. 예를 들어, 사용자가 이메일 주소를 입력할 때 @(골뱅이)나 마침표(.)를 빠뜨리면 폼이 제출되지 않으며, "올바른 이메일 주소를 입력하세요"와 같은 오류 메시지가 화면에 표시됩니다. 덕분에 서버 측 검증 전에 기본적인 형식 오류를 클라이언트 단에서 걸러낼 수 있습니다.
여러 개의 이메일 주소 입력 허용하기
사용자가 두 개 이상의 이메일 주소를 입력할 수 있도록 하려면 multiple 불리언(Boolean) 속성을 추가하면 됩니다. 이 속성이 지정된 입력 필드에서는 쉼표(,)로 구분하여 여러 이메일 주소를 입력할 수 있습니다.
<input type = "email" name = "email" multiple>
참고: input type="email"은 Internet Explorer 9 이하 버전에서는 지원되지 않습니다. 해당 브라우저에서는 일반 텍스트 입력 필드처럼 동작하며 유효성 검사도 수행되지 않습니다.
예제 코드
다음 코드를 실행하면 HTML에서 이메일 입력 유형을 사용하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML input email</title> </head> <body> <form action = "" method = "get"> Details:<br><br> Student Name<br><input type = "name" name = "sname"><br> Student E-mail<br><input type = "email" name = "email"><br> <input type = "submit" value = "Submit"> </form> </body> </html>
함께 사용하면 좋은 속성
- required: 이메일 입력을 필수 항목으로 지정하여, 값이 비어 있으면 폼 제출이 차단됩니다.
- placeholder: 입력 필드에 "example@domain.com"처럼 안내 문구를 표시할 수 있습니다.
- pattern: 정규식을 지정하여 더 엄격한 형식 검증을 적용할 수 있습니다.