HTML DOM의 Input submit value 속성은 type="submit"으로 지정된 input 요소의 value 속성과 연관되어 있습니다. 이 속성은 제출(submit) 버튼의 value 속성 값을 가져오거나 새로 설정하는 데 사용됩니다.
제출 버튼의 value 속성을 변경하면 버튼에 표시되는 텍스트가 함께 바뀝니다. 기본적으로 제출 버튼에는 "Submit"이라는 텍스트가 표시되지만, value 속성을 활용하면 원하는 문구로 자유롭게 변경할 수 있습니다.
문법(Syntax)
value 속성 설정하기
submitObject.value = text;
여기서 text는 제출 버튼에 표시될 텍스트를 지정하는 데 사용됩니다.
예제(Example)
input submit value 속성의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input submit Value property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Loc"> <br><br>
<input type="submit" id="SUBMIT1">
</form>
<p>아래 버튼을 클릭하여 위 요소의 값을 변경해 보세요</p>
<button onclick="changeValue()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeValue() {
document.getElementById("SUBMIT1").value="Form_Submit";
document.getElementById("Sample").innerHTML="제출 버튼의 값이 변경되었으며, 변경된 값은 버튼에서 직접 확인할 수 있습니다";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE 버튼을 클릭한 후의 결과는 다음과 같습니다.
버튼을 클릭하면 JavaScript의 changeValue() 함수가 실행되어, 제출 버튼의 value 값이 "Form_Submit"으로 변경되고 버튼에 표시되는 텍스트도 즉시 업데이트되는 것을 확인할 수 있습니다.