HTML DOM의 Input Email 객체는 HTML에서 type="email"로 지정된 <input> 요소를 나타냅니다. 이 객체를 활용하면 자바스크립트를 통해 이메일 입력 필드를 동적으로 생성하고 제어할 수 있습니다.
문법(Syntax)
다음은 기본적인 사용 문법입니다.
type이 email인 <input> 요소 생성하기
var emailObject = document.createElement("input");
emailObject.type = "email";주요 속성(Attributes)
emailObject에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| autocomplete | 'ON'으로 설정하면 이전에 입력한 텍스트를 기반으로 자동 완성 제안을 제공합니다. |
| autofocus | true로 설정하면 페이지가 처음 로드될 때 해당 이메일 필드에 자동으로 포커스가 맞춰집니다. |
| defaultValue | 이메일 필드의 기본값을 설정하거나 반환합니다. |
| disabled | 이메일 필드의 비활성화/활성화 여부를 정의합니다. |
| form | 해당 이메일 필드를 포함하는 상위 폼(form)의 참조를 반환합니다. |
| maxLength | 이메일 필드의 maxLength 속성 값을 설정하거나 반환합니다. |
| multiple | 이메일 필드가 여러 개의 이메일 주소를 허용할지 여부를 설정하거나 반환합니다. |
| name | 이메일 필드의 name 속성 값을 정의합니다. |
| pattern | 이메일 필드의 pattern 속성 값(정규식 패턴)을 설정하거나 반환합니다. |
| placeholder | 사용자에게 입력 형식을 힌트로 보여주는 문자열을 설정하거나 반환합니다. |
| readOnly | 이메일 필드의 내용을 수정할 수 있는지 여부를 정의합니다. |
| required | 폼 제출 시 해당 이메일 필드의 입력이 필수인지 여부를 정의합니다. |
| size | 이메일 필드의 size 속성 값(입력 칸의 너비)을 정의합니다. |
| type | 이메일 필드의 폼 요소 유형을 반환합니다. |
| value | 이메일 필드의 value 속성 값을 정의합니다. |
예제
다음은 Input Email multiple 속성을 활용한 예제입니다. 버튼 클릭 한 번으로 하나의 입력 필드에서 여러 이메일 주소를 받도록 설정할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Email multiple</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Email-multiple</legend>
<label for="EmailSelect">Employee Email :
<input type="email" id="EmailSelect" placeholder="jkl@qwerty.com">
</label>
<input type="button" onclick="changeToMultiple()" value="Enable Multiple Emails">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
divDisplay.textContent = 'Multiple Emails Allowed: '+inputEmail.multiple;
function changeToMultiple() {
inputEmail.multiple = true;
divDisplay.textContent = 'Multiple Emails Allowed: '+inputEmail.multiple;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
'Enable Multiple Emails' 버튼을 클릭하기 전 — multiple 속성이 false로 표시됩니다.
'Enable Multiple Emails' 버튼을 클릭한 후 — multiple 속성이 true로 변경되어 여러 이메일 주소 입력이 가능해집니다.
