개요
HTML DOM의 Input Text name 속성은 텍스트 입력 필드(<input type="text">)의 name 속성 값을 설정하거나 반환하는 데 사용됩니다. name 속성은 폼 데이터가 서버로 제출된 후 각 입력값을 식별하는 역할을 하기 때문에, 서버 측에서 폼 데이터를 처리할 때 반드시 필요한 중요한 정보입니다.
문법(Syntax)
name 속성 설정하기
textObject.name = name
여기서 name은 텍스트 필드에 지정할 이름을 나타냅니다.
name 속성 값 가져오기
var nameValue = textObject.name
이렇게 작성하면 해당 텍스트 필드에 현재 설정되어 있는 name 속성 값을 문자열로 반환받을 수 있습니다.
예제
다음 예제를 통해 Input Text의 name 속성을 동적으로 변경하는 방법을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input Text name Property</h1>
USERNAME: <input type="text" id="USR" name="user_name">
<p>아래 버튼을 클릭하면 텍스트 필드의 이름이 변경됩니다.</p>
<button onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
function changeName() {
document.getElementById("USR").name = "NEW_USER";
document.getElementById("Sample").innerHTML = "텍스트 필드의 이름이 NEW_USER로 변경되었습니다";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다. 초기 상태에서 텍스트 필드의 name 속성은 user_name으로 설정되어 있습니다.
CHANGE NAME 버튼을 클릭하면 자바스크립트 함수 changeName()이 실행되어 텍스트 필드의 name 속성이 NEW_USER로 변경되고, 그 결과가 아래와 같이 화면에 표시됩니다.
정리
Input Text의 name 속성은 클라이언트 측에서 폼 컨트롤을 식별하고, 서버로 전송되는 데이터의 키(key) 역할을 합니다. 자바스크립트를 활용하면 위 예제처럼 런타임 중에도 속성 값을 자유롭게 읽거나 수정할 수 있으므로, 동적인 폼 처리나 유효성 검사 로직을 구현할 때 유용하게 활용할 수 있습니다.