HTML DOM Input Password name 속성 완벽 정리

HTML DOM의 Input Password name 속성은 비밀번호 입력 필드(input type="password")의 name 속성 값을 설정하거나 반환하는 데 사용됩니다. name 속성은 폼 데이터가 서버로 제출된 후 해당 데이터를 식별하는 중요한 역할을 하며, JavaScript에서도 이 속성을 활용해 폼 요소를 참조하고 이후 조작할 수 있습니다.

문법(Syntax)

name 속성을 설정하는 기본 문법은 다음과 같습니다.

passwordObject.name = name

여기서 name은 비밀번호 필드에 지정할 이름을 의미합니다.

예제

비밀번호 필드의 name 속성을 실제로 다루는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input Password name Property</h1>
Password: <input type="password" id="PASS" name="passW">
<p>아래 버튼을 클릭하면 비밀번호 필드의 이름이 변경됩니다</p>
<button onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
    function changeName() {
        document.getElementById("PASS").name ="NEW_PASS" ;
        document.getElementById("Sample").innerHTML = "Password field name is now NEW_PASS";
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM Input Password name 속성 완벽 정리 – 문법과 예제

CHANGE NAME 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.

HTML DOM Input Password name 속성 완벽 정리 – 문법과 예제

예제 상세 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

1. 비밀번호 입력 필드 생성

먼저 id가 "PASS"이고, name 속성 값이 "passW"로 설정된 비밀번호 입력 필드를 생성했습니다.

Password: <input type="password" id="PASS" maxLength=”5”>

2. CHANGE NAME 버튼 생성

그다음, 사용자가 클릭하면 changeName() 함수를 실행하는 CHANGE NAME 버튼을 만들었습니다.

<button type="button" onclick="changeName()">CHANGE NAME</button>

3. changeName() 함수 동작

changeName() 함수는 getElementById() 메서드를 사용해 비밀번호 타입의 입력 필드를 가져온 뒤, 해당 요소의 name 속성을 "NEW_PASS"로 변경합니다. 이어서 innerHTML 속성을 활용해 id가 "Sample"인 단락에 변경 완료 메시지를 표시하여 사용자에게 변화를 시각적으로 알려줍니다.

function changeName() {
    document.getElementById("PASS").name ="NEW_PASS" ;
    document.getElementById("Sample").innerHTML = "Password field name is now NEW_PASS";
}