HTML DOM Input URL form 속성 완벽 가이드

HTML DOM Input URL form 속성이란?

HTML DOM에서 Input URL 요소의 form 속성은 해당 URL 입력 필드(<input type="url">)를 감싸고 있는 폼(form) 객체에 대한 참조를 반환합니다. 이 속성을 사용하면 별도의 탐색 과정 없이 자바스크립트만으로 입력 필드가 소속된 폼의 정보(id, name 등)에 바로 접근할 수 있습니다.

단, 이 속성은 읽기 전용(read-only)이며, URL 입력 필드가 어떤 폼에도 속해 있지 않은 경우에는 null을 반환합니다.

구문(Syntax)

form 속성의 기본 사용 구문은 다음과 같습니다.

폼 객체에 대한 참조를 반환:

inputURLObject.form

예제(Example)

아래 예제는 Input URL form 속성의 실제 동작을 보여줍니다. 사용자가 URL을 입력한 뒤 버튼을 클릭하면, 해당 입력 필드가 속한 폼의 id 값이 화면에 출력됩니다.

<!DOCTYPE html>
<html>
<head>
<title>Input URL 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="Larry Page">
<fieldset>
<legend>URL-form</legend>
<label for="URLSelect">URL :
<input type="URL" id="URLSelect" size="25">
</label>
<input type="button" onclick="getform()" value="공동 창업자 확인">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputURL = document.getElementById("URLSelect");
    function getform() {
        if(inputURL.value !== '')
            divDisplay.textContent = '공동 창업자: '+inputURL.form.id;
        else
            divDisplay.textContent = '유효한 URL을 입력해 주세요';
    }
</script>
</body>
</html>

코드 설명

<form id="Larry Page"> 내부에 type="url" 입력 필드와 버튼을 배치합니다.
버튼을 클릭하면 onclick 이벤트에 의해 getform() 함수가 실행됩니다.
입력값이 비어 있지 않으면 inputURL.form.id를 통해 폼의 id("Larry Page")를 가져와 화면에 표시합니다.
입력값이 비어 있으면 '유효한 URL을 입력해 주세요'라는 안내 문구를 대신 출력합니다.

실행 결과(Output)

위 코드를 브라우저에서 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'공동 창업자 확인' 버튼을 클릭하기 전 −

HTML DOM Input URL form 속성 완벽 가이드 – 구문과 예제 총정리

'공동 창업자 확인' 버튼을 클릭한 후 −

HTML DOM Input URL form 속성 완벽 가이드 – 구문과 예제 총정리

정리

form 속성은 URL 입력 필드가 속한 폼 객체의 참조를 반환합니다.
읽기 전용 속성이며, 폼에 속하지 않으면 null을 반환합니다.
폼을 직접 제출하지 않고도 폼 정보를 확인해야 하는 경우에 유용하게 활용됩니다.