게으른 개발자의 끄적거림

Javascript document.form 객체 설명 및 예시

끄적잉 2023. 11. 2. 22:34
728x90

`document.form` 객체는 HTML 폼(Form) 요소에 접근하고 조작하는 데 사용되는 JavaScript의 일부 기능 중 하나입니다. 이 객체를 사용하면 웹 페이지의 폼 요소(텍스트 상자, 버튼, 라디오 버튼, 체크 박스 등)에 동적으로 데이터를 설정하거나 데이터를 수집할 수 있습니다.

 


`document.form` 객체를 사용하려면 폼 요소에 `name` 속성을 할당해야 합니다. 그런 다음 `document.form` 객체를 사용하여 해당 폼 요소에 접근할 수 있습니다.

아래는 기본적인 사용 예제입니다:

 

################################################################

html
<form name="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="button" value="Submit" onclick="submitForm()">
</form>

 


################################################################

 


javascript
function submitForm() {
  // 폼 요소에 접근
  var form = document.forms["myForm"];
  
  // 폼 요소 내의 입력 필드에 접근
  var username = form.elements["username"].value;
  var password = form.elements["password"].value;
  
  // 데이터 처리
  if (username === "user" && password === "pass") {
    alert("로그인 성공");
  } else {
    alert("로그인 실패");
  }
}

################################################################

 


위의 코드에서 `document.forms["myForm"]`는 `name` 속성이 "myForm"으로 설정된 폼에 접근합니다. 그런 다음 `form.elements["username"]`과 `form.elements["password"]`를 사용하여 해당 입력 필드에 접근하고 그 값을 가져옵니다.

`document.form` 객체를 사용하여 웹 페이지의 폼 요소에 접근하고 조작할 수 있으며, 이를 통해 사용자 입력을 처리하거나 데이터를 제출할 때 유용하게 활용할 수 있습니다.

728x90