HTML DOM의 Textarea name 속성은 HTML 문서에서 텍스트 영역(<textarea>) 요소의 name 속성값을 반환하거나 수정하는 데 사용됩니다. name 속성은 폼(form) 데이터를 서버로 전송할 때 각 입력 요소를 식별하는 역할을 하므로, 자바스크립트를 통해 이 값을 읽거나 변경하는 것은 동적인 폼 처리에 매우 유용합니다.
구문
name 속성의 기본 사용 구문은 다음과 같습니다.
1. name 값 반환하기
object.name
2. name 값 설정하기
object.name = "text"
반환 시에는 현재 지정된 name 속성의 문자열 값이 그대로 돌아오며, 설정 시에는 새로운 문자열을 할당하여 name 속성을 변경할 수 있습니다.
예제
다음 예제는 버튼을 클릭했을 때 textarea 요소의 name 속성값을 화면에 표시하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightseagreen;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
.show {
font-size: 1.5rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Textarea name Property Demo</h1>
<textarea rows="5" cols='20' name="I'm name attribute of textarea element">
Hi! I'm a textarea element with some dummy text.
</textarea>
<button onclick="set()" class="btn">Show Name Attribute Value</button>
<div class='show'></div>
<script>
function set() {
document.querySelector('.show').innerHTML = document.querySelector("textarea").name;
}
</script>
</body>
</html>
출력 결과
페이지가 로드되면 위와 같이 텍스트 영역과 버튼이 함께 표시됩니다.
이제 "Show Name Attribute Value(name 속성값 표시)" 버튼을 클릭해 보세요.
버튼을 클릭하면 자바스크립트의 querySelector() 메서드로 textarea 요소를 선택한 뒤, 해당 요소의 name 속성값을 가져와 화면에 출력합니다. 이처럼 name 속성은 스크립트에서 특정 폼 요소를 참조하거나 서버로 전송되는 데이터의 키(key)를 정의할 때 활용됩니다.