HTML DOM Input Week name 속성이란?
HTML DOM에서 Input Week 요소의 name 속성은 해당 주(week) 입력 필드에 정의된 name 속성값을 문자열 형태로 반환합니다. 또한, 이 속성을 통해 개발자가 직접 새로운 문자열 값을 설정하는 것도 가능합니다.
name 속성은 폼 데이터를 서버로 전송할 때 각 입력 필드를 식별하는 중요한 역할을 하며, JavaScript로 동적으로 읽거나 수정할 수 있어 폼 처리 로직을 유연하게 구성할 수 있습니다.
문법(Syntax)
name 속성의 기본 문법은 다음과 같습니다.
1. 값 반환하기
inputWeekObject.name
2. 새로운 값 설정하기
inputWeekObject.name = 'String'
실전 예제
아래 예제는 Input Week의 name 속성을 활용하는 방법을 보여줍니다. 버튼을 클릭하면 선택된 주가 특정 값과 일치할 때 해당 입력 필드의 name 속성값을 화면에 출력합니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Week 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>Week-name</legend>
<label for="WeekSelect">Today :
<input type="week" id="WeekSelect" value="2019-W52" name="Sunburn Goa">
</label>
<input type="button" onclick="getnameimum()" value="Which music event falls in this week?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputWeek = document.getElementById("WeekSelect");
function getnameimum() {
if(inputWeek.value === '2019-W52')
divDisplay.textContent = 'Music Event: '+inputWeek.name;
else
divDisplay.textContent = 'No Music Event';
}
</script>
</body>
</html>코드 설명
- <input type="week">: 사용자가 연도와 주를 선택할 수 있는 week 타입의 입력 필드를 생성합니다.
- value="2019-W52": 입력 필드의 초기값으로 2019년 52번째 주를 지정합니다.
- name="Sunburn Goa": 해당 입력 필드의 이름을 'Sunburn Goa'로 설정합니다.
- getnameimum() 함수: 버튼 클릭 시 실행되며, 입력 필드의 값이 '2019-W52'인 경우 name 속성값을 포함한 음악 이벤트 정보를 출력하고, 그렇지 않으면 'No Music Event'를 표시합니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Which music event falls in this week?' 버튼을 클릭하기 전 화면:
'Which music event falls in this week?' 버튼을 클릭한 후 화면:
버튼을 클릭하면 입력 필드의 값이 '2019-W52'와 일치하므로, name 속성에 저장된 'Music Event: Sunburn Goa'라는 문자열이 div 영역에 출력됩니다.
정리
HTML DOM의 Input Week name 속성은 주 입력 필드의 이름을 조회하거나 변경할 수 있는 편리한 인터페이스입니다. 폼 제출 시 데이터 식별뿐만 아니라, 조건에 따라 동적으로 값을 참조해야 하는 상황에서도 유용하게 활용할 수 있습니다.