HTML DOM의 Input Time name 속성은 문자열을 반환하며, 이 값은 <input type="time"> 요소의 name 속성에 해당합니다. 개발자는 이 속성을 읽어 현재 설정된 이름을 확인할 수 있을 뿐만 아니라, 자바스크립트를 통해 새로운 문자열로 동적으로 변경하는 것도 가능합니다.
문법(Syntax)
Input Time name 속성의 기본적인 사용 문법은 다음과 같습니다.
1. name 속성 값 반환하기
inputTimeObject.name
2. name 속성에 새로운 문자열 설정하기
inputTimeObject.name = 'String'
예제(Example)
다음은 Input Time name 속성을 활용한 실전 예제입니다. 이 예제에서는 병원 진료 예약 상황을 가정하여, 사용자가 시간을 선택한 후 버튼을 클릭하면 현재 name 속성 값을 확인하거나 다른 값으로 변경하는 기능을 구현했습니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Time 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>Time-name</legend>
<label for="TimeSelect">Appointment at Stephan:</label>
<input type="time" name="Stephan" id="TimeSelect" value="18:00">
<input type="button" onclick="changeMeeting()" value="Confirm">
<input type="button" onclick="changeName()" value="Book at Dorcel's">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var labelDisplay = document.getElementsByTagName("label")[0];
var divDisplay = document.getElementById("divDisplay");
var inputTime = document.getElementById("TimeSelect");
function changeMeeting() {
if(inputTime.name === 'Stephan')
divDisplay.textContent = 'Stephan Hospital is closed today';
else
divDisplay.textContent = 'Appointment at Dorcel Hospital fixed at: '+inputTime.value;
}
function changeName(){
inputTime.name = 'Dorcel';
labelDisplay.textContent = 'Appointment at '+inputTime.name+': ';
}
</script>
</body>
</html>
코드 설명
- changeMeeting() 함수: 현재 name 속성 값이 'Stephan'인지 비교하여 조건 분기를 수행합니다. name 값에 따라 서로 다른 메시지가 화면에 출력됩니다.
- changeName() 함수: name 속성 값을 'Dorcel'로 변경하고, 라벨 텍스트도 함께 갱신합니다. 이처럼 name 속성은 런타임 중에 자유롭게 수정할 수 있습니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과 화면을 확인할 수 있습니다.
'Confirm' 버튼 클릭 후
name 속성이 기본값인 'Stephan'으로 설정되어 있으므로, 해당 병원이 오늘 휴진이라는 메시지가 표시됩니다.
'Book at Dorcel's' 버튼 클릭 후
name 속성 값이 'Dorcel'로 변경되고, 라벨 텍스트도 함께 업데이트됩니다.
name 속성 변경 후 'Confirm' 버튼 클릭
name 속성이 'Dorcel'로 바뀐 상태에서 Confirm 버튼을 누르면, 선택된 시간 값과 함께 새로운 예약 안내 메시지가 출력됩니다.
정리
Input Time의 name 속성은 폼 데이터가 서버로 전송될 때 필드를 식별하는 중요한 역할을 합니다. 자바스크립트로 이 값을 동적으로 읽거나 변경하면, 하나의 입력 필드를 다양한 상황에 맞게 재활용할 수 있어 폼 처리 로직을 더욱 유연하게 구성할 수 있습니다.