HTML DOM의 Input Email value 속성은 input 요소(type="email")의 value 속성값을 문자열 형태로 반환합니다. 사용자가 직접 새로운 문자열 값을 설정하는 것도 가능합니다.
구문(Syntax)
value 속성의 기본 문법은 다음과 같습니다.
- 문자열 값 반환하기
inputEmailObject.value
- value 속성에 문자열 값 설정하기
inputEmailObject.value = 'String'
예제(Example)
Input Email value 속성의 실제 동작을 확인할 수 있는 예제입니다. 버튼 클릭 시 이메일 입력 필드의 값을 설정하고, 로그인 버튼을 누르면 입력된 값을 검증한 뒤 결과를 화면에 표시합니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Email value</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-value</legend>
<label for="EmailSelect">Email Id:
<input type="email" id="EmailSelect">
<input type="button" onclick="getUserEmail('david')" value="David">
<input type="button" onclick="getUserEmail('shasha')" value="Shasha"><br>
<input type="button" onclick="login()" value="Login">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
function getUserEmail(userName) {
if(userName === 'david')
inputEmail.value = 'davidMiller@MNC.com';
else
inputEmail.value = 'shashaGreen@MNC.com';
}
function login() {
if(inputEmail.value !== '')
divDisplay.textContent = 'Successful Login. Hello '+inputEmail.value.split("@")[0];
else
divDisplay.textContent = 'Enter Email Id';
}
</script>
</body>
</html>출력(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
이메일 입력란이 비어 있는 상태에서 'Login' 버튼을 클릭한 경우 −
'David' 버튼을 클릭하여 이메일 값이 자동으로 설정된 경우 −
이메일 입력란에 값이 채워진 상태에서 'Login' 버튼을 클릭한 경우 −
