HTML DOM의 Input URL name 속성은 URL 타입 입력 필드(<input type="url">)의 name 속성값을 문자열 형태로 반환합니다. 이 속성은 읽기만 가능한 것이 아니라, 새로운 문자열 값을 할당하여 name 속성을 동적으로 변경할 수도 있습니다.
폼 데이터가 서버로 전송될 때 각 입력 필드를 식별하는 역할을 하는 것이 바로 name 속성이므로, 자바스크립트에서 이를 제어할 수 있다면 폼 처리 로직을 훨씬 유연하게 구성할 수 있습니다.
문법(Syntax)
1. name 값 반환하기
inputURLObject.name
2. name 값 설정하기
inputURLObject.name = 'String'
- 반환값: 해당 URL 입력 필드의 name 속성에 저장된 문자열
- 설정값: 새롭게 지정하고자 하는 문자열
예제(Example)
아래는 Input URL name 속성의 실제 동작을 보여주는 예제입니다. 버튼을 클릭하면 입력된 URL의 소유자(name 값)를 화면에 출력합니다.
<!DOCTYPE html>
<html>
<head>
<title>Input URL name</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>URL-name</legend>
<label for="URLSelect">Employee URL:
<input type="url" id="URLSelect" value="https://www.example.com" name="Jack">
</label>
<input type="button" onclick="getName()" value="Who is the Owner? ">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputURL = document.getElementById("URLSelect");
function getName() {
if(inputURL.value === 'https://www.example.com')
divDisplay.textContent = 'Above URL belongs to '+inputURL.name;
else
divDisplay.textContent = 'Above URL belongs to no one!';
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Who is the Owner?' 버튼을 클릭하기 전 −
'Who is the Owner?' 버튼을 클릭한 후 −
URL 입력 필드의 값이 https://www.example.com일 경우, 자바스크립트가 해당 요소의 name 속성값인 'Jack'을 읽어와 화면에 표시합니다. 만약 URL 값이 다르다면 'Above URL belongs to no one!'이라는 메시지가 출력되죠.
정리
Input URL의 name 속성은 단순히 값을 읽는 것을 넘어, 런타임 중에 동적으로 변경할 수 있어 폼 유효성 검사나 조건부 데이터 처리에 유용하게 활용됩니다. 위 예제처럼 document.getElementById()로 요소를 가져온 뒤 점 표기법으로 손쉽게 접근할 수 있습니다.