HTML DOM Input Date name 속성이란?
HTML DOM의 Input Date name 속성은 날짜 입력 필드(input type="date")의 name 속성값을 문자열 형태로 반환합니다. 이 속성은 읽기 전용이 아니므로, 자바스크립트를 통해 새로운 문자열을 할당하여 name 값을 동적으로 변경할 수도 있습니다.
name 속성은 폼(form) 데이터가 서버로 전송될 때 해당 입력 필드를 식별하는 데 사용되는 중요한 요소입니다. 따라서 상황에 따라 이 값을 프로그래밍 방식으로 조작하면 폼 처리 로직을 유연하게 구성할 수 있습니다.
구문
Input Date name 속성의 기본 구문은 다음과 같습니다.
1. name 값 반환하기
inputDateObject.name
2. name 속성에 새로운 문자열 설정하기
inputDateObject.name = 'String'
예제
다음 예제를 통해 Input Date name 속성의 실제 동작을 확인해 보겠습니다. 이 예제에서는 버튼을 클릭하면 날짜 입력 필드의 name 값이 'Monday'에서 'Tuesday'로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Date Name</title>
</head>
<body>
<form>
Date Select: <input type="date" id="date" name="Monday">
</form>
<button onclick="changeNameValue()">Change name value</button>
<div id="divDisplay"></div>
<script>
var inputDate = document.getElementById("date");
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = 'Name of date input: '+inputDate.name;
function changeNameValue() {
if(inputDate.name == 'Monday'){
inputDate.name = 'Tuesday';
divDisplay.textContent = 'Name of date input: '+inputDate.name;
}
}
</script>
</body>
</html>코드 설명
- document.getElementById("date"): id가 'date'인 날짜 입력 요소에 접근합니다.
- inputDate.name: 현재 name 속성값('Monday')을 읽어 화면에 표시합니다.
- changeNameValue(): 버튼 클릭 시 실행되며, name 값이 'Monday'인 경우 'Tuesday'로 변경하고 결과를 갱신합니다.
출력 결과
위 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.
'Change name value' 버튼을 클릭하기 전 −
'Change Name Value' 버튼을 클릭한 후 −
버튼을 클릭하면 화면에 표시된 name 값이 'Monday'에서 'Tuesday'로 바뀌는 것을 확인할 수 있습니다. 이처럼 Input Date name 속성을 활용하면 날짜 입력 필드의 식별자를 런타임 중에 자유롭게 제어할 수 있습니다.