HTML DOM의 Legend 객체는 HTML 문서 내의 <legend> 요소를 나타냅니다. <legend> 요소는 주로 <fieldset> 태그와 함께 사용되어 폼 그룹에 제목(캡션)을 붙이는 역할을 합니다.
문법(Syntax)
<legend> 요소를 다루는 기본 문법은 다음과 같습니다.
<legend> 요소 생성하기
var legendObject = document.createElement("LEGEND")속성(Properties)
Legend 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| form | 해당 legend 요소를 감싸고 있는 상위 폼(form)의 참조를 반환합니다. |
예제
다음은 form 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 legend가 속한 폼의 id 값을 화면에 출력합니다.
<!DOCTYPE html>
<html>
<head>
<title>Legend form</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 id="Mid-Term">
<fieldset>
<legend id="legendForm">Legend-form</legend>
<label for="WeekSelect">시험 주간:
<input type="week" value="2019-W36">
</label>
<input type="button" onclick="showExamination()" value="이번 주 시험은 무엇인가요?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var legendForm = document.getElementById("legendForm");
function showExamination() {
divDisplay.textContent = 'Examinations: '+legendForm.form.id;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'이번 주 시험은 무엇인가요?' 버튼을 클릭하기 전 화면입니다.
'이번 주 시험은 무엇인가요?' 버튼을 클릭한 후 화면입니다.
버튼을 클릭하면 legendForm.form.id를 통해 legend 요소가 포함된 폼의 id인 "Mid-Term"이 출력되는 것을 확인할 수 있습니다. 이처럼 Legend 객체의 form 속성은 특정 legend가 어떤 폼에 속해 있는지 동적으로 확인해야 할 때 유용하게 활용됩니다.