HTML DOM Input Search의 name 속성은 검색 필드(search field)의 name 특성 값을 설정하거나 반환하는 데 사용됩니다. name 속성은 폼(form) 데이터가 서버로 제출된 후 해당 데이터를 식별하는 중요한 역할을 하며, JavaScript에서도 이 속성을 통해 폼 요소를 참조하여 동적으로 조작할 수 있습니다.
문법(Syntax)
name 속성 설정하기
searchObject.name = name
여기서 name은 검색 필드에 지정할 이름을 의미합니다.
name 속성 값 가져오기
searchObject.name
위 문법을 사용하면 현재 설정된 검색 필드의 name 값을 문자열 형태로 반환받을 수 있습니다.
예제(Example)
다음 예제를 통해 Search name 속성의 실제 사용 방법을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input search name 속성</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" maxlength="5">
</form>
<p>아래 버튼을 클릭하면 위 검색 필드의 이름이 변경됩니다.</p>
<button type="button" onclick="changeName()">이름 변경</button>
<p id="Sample"></p>
<script>
function changeName() {
document.getElementById("SEARCH1").name = "SEARCH_2";
document.getElementById("Sample").innerHTML = "검색 필드의 이름이 SEARCH_2로 변경되었습니다";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
이름 변경 버튼을 클릭하면 아래와 같이 검색 필드의 name 값이 SEARCH_2로 변경되며, 그 결과가 화면에 표시됩니다.
