HTML DOM 입력 이메일(Input Email) type 속성 완벽 가이드

HTML DOM의 Input Email type 속성은 이메일 유형(<input type="email">) 입력 필드의 type 값을 가져오거나 설정하는 데 사용됩니다. 자바스크립트를 통해 해당 입력 요소가 어떤 유형인지 동적으로 확인하거나, 다른 유형으로 변경할 수 있습니다.

구문(Syntax)

type 속성의 기본 구문은 다음과 같습니다.

1. type 값 반환하기

inputEmailObject.type

2. type 값 설정하기

inputEmailObject.type = stringValue

설정 가능한 문자열 값(String Values)

위 구문에서 stringValue에 지정할 수 있는 주요 값은 다음과 같습니다.

stringValue	설명
email	입력 유형이 이메일(email)임을 정의합니다.
datetime-local	입력 유형이 날짜 및 시간(datetime-local)임을 정의합니다.
radio	입력 유형이 라디오 버튼(radio)임을 정의합니다.
tel	입력 유형이 전화번호(tel)임을 정의하며, 모바일 환경에서는 숫자 키패드가 표시됩니다.

예제(Example)

다음은 Input Email type 속성을 활용한 실습 예제입니다. 버튼을 클릭하면 해당 입력 필드의 type 값을 대문자로 변환하여 레이블에 표시합니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Email type</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-type</legend>
<label for="EmailSelect"></label>
<input type="email" id="EmailSelect" >
<input type="button" onclick="getTypeOfInput()" value="What to enter?">
</fieldset>
</form>
<script>
    var labelSelect = document.querySelector("label");
    var inputEmail = document.getElementById("EmailSelect");
    function getTypeOfInput() {
        labelSelect.innerHTML = inputEmail.type.toUpperCase()+' ID: ';
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

'What to enter?' 버튼을 클릭하기 전 화면입니다.

HTML DOM 입력 이메일(Input Email) type 속성 완벽 가이드

'What to enter?' 버튼을 클릭한 후에는 입력 필드의 type 값인 EMAIL이 레이블에 표시됩니다.

HTML DOM 입력 이메일(Input Email) type 속성 완벽 가이드

이처럼 type 속성을 활용하면 런타임 중에 입력 요소의 유형을 손쉽게 확인하거나 변경할 수 있어, 동적인 폼 처리에 매우 유용합니다.