HTML DOM Input Datetime name 속성 – 문법과 예제로 배우는 완벽 가이드

HTML DOM의 Input Datetime name 속성은 datetime 타입 입력 필드의 name 속성 값을 문자열 형태로 반환합니다. 또한 이 속성에 새로운 문자열을 할당하면, 자바스크립트만으로 name 속성 값을 동적으로 변경할 수도 있습니다.

문법(Syntax)

name 속성의 기본 문법은 다음과 같습니다.

1. 값 읽기(반환)

inputDatetimeObject.name

2. 값 설정

inputDatetimeObject.name = '문자열'

예제

다음은 Input Datetime name 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 입력 필드의 name 값이 변경되는 구조입니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Name</title>
</head>
<body>
<form>
Datetime: <input type="datetime" id="datetime" name="Mother's Birth Day" value="1983-05-13T15:32IST">
</form>
<button onclick="changeNameValue()">Change name value</button>
<div id="divDisplay"></div>
<script>
    var inputDatetime = document.getElementById("datetime");
    var divDisplay = document.getElementById("divDisplay");
    divDisplay.textContent = 'Name of datetime input: '+inputDatetime.name;
    function changeNameValue() {
       if(inputDatetime.name == "Mother's Birth Day"){
          inputDatetime.name = "Fathers's Birth Day";
          divDisplay.textContent = 'Name of datetime input: '+inputDatetime.name;
       }
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면을 확인할 수 있습니다.

'Change name value' 버튼을 클릭하기 전 −

HTML DOM Input Datetime name 속성 – 문법과 예제로 배우는 완벽 가이드

'Change Name Value' 버튼을 클릭한 후 −

HTML DOM Input Datetime name 속성 – 문법과 예제로 배우는 완벽 가이드

참고 사항

HTML5에서 도입된 type="datetime" 입력 타입은 대부분의 최신 브라우저에서 지원이 중단되었으며, 현재는 날짜와 시간을 함께 선택할 수 있는 type="datetime-local" 사용이 권장됩니다. 다만 name 속성을 읽고 설정하는 방식은 모든 입력 타입에서 동일하게 적용되므로, 위 예제의 로직은 그대로 활용할 수 있습니다.