HTML DOM Input Text value 속성 – 사용법과 예제 총정리

HTML DOM에서 Input Text 요소의 value 속성은 해당 텍스트 입력 필드의 value 속성값을 문자열 형태로 반환합니다. 뿐만 아니라, 개발자가 이 속성에 새로운 문자열을 직접 할당하여 입력 필드의 값을 동적으로 변경할 수도 있습니다.

문법(Syntax)

value 속성의 기본 문법은 다음과 같습니다.

1. 값 읽기 (문자열 반환)

inputTextObject.value

2. 값 설정 (새 문자열 할당)

inputTextObject.value = 'String'

예제(Example)

아래 예제는 Input Text value 속성을 실제로 활용하는 방법을 보여줍니다. 버튼 클릭 시 입력 필드에 이름이 자동으로 채워지고, 로그인 버튼을 누르면 입력된 값을 검증하여 환영 메시지를 출력합니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Text 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>Text-value</legend>
<label for="TextSelect">Full Name:
<input type="Text" id="TextSelect">
<input type="button" onclick="getUserText('david')" value="David">
<input type="button" onclick="getUserText('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 inputText = document.getElementById("TextSelect");
    function getUserText(userName) {
        if(userName === 'david')
            inputText.value = 'David Miller';
        else
            inputText.value = 'Shasha Green';
    }
    function login() {
        if(inputText.value !== '')
            divDisplay.textContent = 'Welcome '+inputText.value.split("@")[0];
        else
            divDisplay.textContent = 'Enter Valid Text';
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

① 입력 필드가 비어 있는 상태에서 'Login' 버튼 클릭

입력값이 없으므로 "Enter Valid Text"라는 안내 메시지가 화면에 표시됩니다.

HTML DOM Input Text value 속성 – 사용법과 예제 총정리

② 'David' 버튼 클릭 후

getUserText() 함수가 호출되어 입력 필드에 'David Miller'라는 문자열이 value 속성을 통해 자동으로 설정됩니다.

HTML DOM Input Text value 속성 – 사용법과 예제 총정리

③ 값이 입력된 상태에서 'Login' 버튼 클릭

입력 필드의 값이 존재하므로 split("@") 메서드로 첫 번째 부분을 추출한 뒤, "Welcome David Miller"와 같은 환영 메시지가 출력됩니다.

HTML DOM Input Text value 속성 – 사용법과 예제 총정리

핵심 정리

value 속성은 읽기와 쓰기가 모두 가능합니다 — 현재 입력값을 가져오거나 새 값을 설정할 수 있습니다.
반환되는 값은 항상 문자열(String) 타입입니다.
자바스크립트만으로 사용자 입력을 제어해야 하는 폼 검증, 자동 완성, UI 업데이트 등에 폭넓게 활용됩니다.