HTML DOM Input DatetimeLocal name 속성 – 개념부터 예제까지 한 번에 정리

HTML DOM에서 Input DatetimeLocal의 name 속성은 datetime-local 타입 입력 요소의 name 속성 값을 문자열 형태로 반환합니다. 반대로, 이 속성에 새로운 문자열을 할당하여 name 값을 변경하는 것도 가능합니다.

name 속성은 폼(form) 데이터를 서버로 전송할 때 각 입력 필드를 식별하는 중요한 역할을 하므로, 자바스크립트로 동적으로 읽거나 수정해야 하는 경우가 종종 있습니다.

문법(Syntax)

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

1. name 값 반환하기

inputDatetimeLocalObject.name

2. name 값 설정하기

inputDatetimeLocalObject.name = '문자열'

예제(Example)

아래 예제는 Input DatetimeLocal의 name 속성을 실제로 활용하는 방법을 보여줍니다. 버튼을 클릭하면 입력 요소의 name 값을 읽어와 화면에 출력합니다.

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal 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>Datetime-Local-name</legend>
<label for="datetimeLocalSelect">오늘 날짜 :
<input type="datetime-local" id="datetimeLocalSelect" value="2019-05-23T12:45" name="Rupenzel">
</label>
<input type="button" onclick="getnameimum()" value="이 생년월일은 누구의 것일까요?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
    function getnameimum() {
        if(inputDatetimeLocal.value === '2019-05-23T12:45')
            divDisplay.textContent = '위 생년월일의 주인은 ' + inputDatetimeLocal.name + ' 입니다.';
        else
            divDisplay.textContent = '위 생년월일에 해당하는 사람은 없습니다!';
    }
</script>
</body>
</html>

실행 결과(Output)

'이 생년월일은 누구의 것일까요?' 버튼을 클릭하기 전의 화면입니다.

HTML DOM Input DatetimeLocal name 속성 – 개념부터 예제까지 한 번에 정리

버튼을 클릭한 후의 화면입니다. 입력 요소의 name 속성 값인 'Rupenzel'이 결과로 표시되는 것을 확인할 수 있습니다.

HTML DOM Input DatetimeLocal name 속성 – 개념부터 예제까지 한 번에 정리

정리

읽기: element.name으로 현재 name 속성 값을 문자열로 가져올 수 있습니다.
쓰기: element.name = '새로운값'으로 name 속성을 동적으로 변경할 수 있습니다.
name 속성은 폼 제출 시 서버가 데이터를 구분하는 키(key)로 사용되므로, 동적으로 변경할 때는 기존 폼 처리 로직에 영향을 주지 않는지 주의해야 합니다.
datetime-local 입력 요소는 Chrome, Edge, Firefox, Opera 등 대부분의 최신 브라우저에서 지원됩니다.