HTML DOM의 Input Submit name 속성은 폼의 제출(submit) 버튼에 대한 name 속성 값을 설정하거나 반환하는 데 사용됩니다. 이 name 속성은 폼 데이터가 서버로 전송된 후 해당 데이터를 식별하는 중요한 역할을 하므로, 서버 측에서 어떤 버튼이 폼을 제출했는지 구분할 때 유용합니다.
문법(Syntax)
name 속성의 기본 문법은 다음과 같습니다.
name 속성 설정하기
submitObject.name = name
여기서 name은 제출 버튼에 지정할 이름을 의미합니다.
예제(Example)
다음 예제를 통해 Submit name 속성이 실제로 어떻게 동작하는지 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input submit name 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" name="BTN1">
</form>
<p>아래 버튼을 클릭하면 위 제출 버튼의 이름이 변경됩니다.</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
function changeName() {
document.getElementById("SUBMIT1").name ="SUB_BTN" ;
document.getElementById("Sample").innerHTML = "Submit Button name is now SUB_BTN";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
초기 상태에서 제출 버튼의 name 값은 BTN1로 설정되어 있습니다.
이후 CHANGE NAME 버튼을 클릭하면 자바스크립트 함수가 실행되어 제출 버튼의 name 속성이 SUB_BTN으로 변경되며, 그 결과가 아래 문단에 표시됩니다.
정리
HTML DOM의 Input Submit name 속성은 JavaScript를 통해 동적으로 제출 버튼의 이름을 읽거나 변경할 수 있게 해주는 기능입니다. 특히 하나의 폼에 여러 개의 제출 버튼이 있고, 각 버튼마다 서버에서 다른 처리를 수행해야 하는 경우 name 속성을 활용하면 어떤 버튼이 클릭되었는지 명확하게 판별할 수 있다는 점에서 실무적으로 매우 유용합니다.