폼 조작 하기

폼 탐색하기

문서 내에 있는 모든 폼은 document.forms라는 기명 컬렉션(named collection)으로 관리됩니다.

이름 접근: document.forms.myForm(<from name="myForm"> 기준)
인덱스 접근: document.forms[0](문서 내 첫 번째 폼)

예제: 폼 데이터 간단 조회

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>폼 탐색 예제</title>
</head>
<body>
  <form name="userProfile">
    <input name="nickname" value="ProCoder">
    <input name="age" type="number" value="28">
  </form>
  <script>
    const profileForm = document.forms.userProfile;
    console.log(`닉네임: ${profileForm.nickname.value}`); // "ProCoder"
    console.log(`나이: ${profileForm.elements.age.value}`); // "28"
  </script>
</body>
</html>

폼의 요소는 form.nickname처럼 단축 표기법 또는 form.elements 컬렉션을 이용하여 접근할 수 있습니다.

fieldset 활용: 구조화된 폼 관리

폼은 <fieldset> 요소를 포함할 수 있으며, 폼 내 그룹화를 지원합니다. 그리고 fieldset도 독자적인 elements 컬렉션을 제공합니다. 즉, 폼 내부에 있는 fieldset을 통해서도 하위 요소에 접근할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Fieldset 탐색</title>
</head>
<body>
  <form name="paymentForm">
    <fieldset name="cardDetails">
      <legend>카드 정보</legend>
      <input name="cardNumber" value="1234-5678-9012-3456">
    </fieldset>
  </form>
  <script>
    const form = document.forms.paymentForm;
    const cardFieldset = form.elements.cardDetails;
    console.log(`카드 번호: ${cardFieldset.elements.cardNumber.value}`); // "1234-5678-9012-3456"
    console.log(`단축 접근: ${form.cardNumber.value}`); // 동일 결과
  </script>
</body>
</html>

단축 표기법 주의점

단축표기법(from.elementName)은 편리하지만, 요소의 name 속성을 동적으로 변경하면, 컬렉션의 접근 방식에 혼란이 생길 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Name 변경 테스트</title>
</head>
<body>
  <form id="testForm">
    <input name="data" value="Initial">
  </form>
  <script>
    const form = document.getElementById('testForm');
    console.log(form.data.value); // "Initial"

    form.data.name = "newData";
    console.log(form.elements.data); // undefined
    console.log(form.elements.newData.value); // "Initial"
    console.log(form.data.value); // 여전히 "Initial" (캐시된 참조)
  </script>
</body>
</html>

역참조: element.from으로 상위 폼 접근

모든 폼 요소는 자신이 속한 폼을 element.form 프로퍼티를 통해 역참조할 수 있습니다. 이를 통해 요소와 폼 간의 양방향 참조가 가능해집니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>역참조 예제</title>
</head>
<body>
  <form name="feedback">
    <input name="comment" value="Great site!">
  </form>
  <script>
    const commentInput = document.forms.feedback.comment;
    const parentForm = commentInput.form;
    console.log(parentForm === document.forms.feedback); // true
  </script>
</body>
</html>

폼 요소 조작

입력 요소

텍스트: input.value로 읽기/쓰기
체크박스: input.checked로 상태 제어

셀렉트 요소

options: 모든 <options> 요소의 컬렉션
value: 현재 선택된 값
selectedIndex: 선택된 인덱스

예제: 단일 셀렉트 박스 조작

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>셀렉트 조작</title>
</head>
<body>
  <select id="langSelect">
    <option value="js">JavaScript</option>
    <option value="py">Python</option>
    <option value="java">Java</option>
  </select>
  <button onclick="changeLang()">Python으로 변경</button>
  <script>
    const langSelect = document.getElementById('langSelect');
    
    function changeLang() {
      langSelect.value = 'py';
      console.log(`선택된 값: ${langSelect.value}, 인덱스: ${langSelect.selectedIndex}`); // "py", 1
    }
  </script>
</body>
</html>

예제: 다중 셀렉트 박스 조작

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>다중 셀렉트</title>
</head>
<body>
  <select id="skills" multiple>
    <option value="html" selected>HTML</option>
    <option value="css">CSS</option>
    <option value="js" selected>JS</option>
  </select>
  <button onclick="logSelected()">선택된 값 보기</button>
  <script>
    const skills = document.getElementById('skills');
    
    function logSelected() {
      const selected = Array.from(skills.options)
        .filter(opt => opt.selected)
        .map(opt => opt.value);
      console.log(selected); // ["html", "js"]
    }
  </script>
</body>
</html>

Option 생성자로 동적 옵션 생성하기

JavaScript의 Option 생성자를 사용하면 동적으로 <option> 요소를 생성할 수 있습니다.

Option 생성자 문법

new Option(text, value, defaultSelected, selected);

text: 사용자에게 표시될 텍스트
value: 옵션의 값
defaultSelected: true이면 HTML 상에 selected 속성이 설정됨
selected: true이면 해당 옵션이 실제 선택 상태임

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>동적 옵션 추가</title>
</head>
<body>
  <select id="countries"></select>
  <button onclick="addCountry()">나라 추가</button>
  <script>
    const countries = document.getElementById('countries');
    
    function addCountry() {
      const newCountry = new Option("한국", "kr", false, true);
      countries.add(newCountry);
      console.log(`선택된 나라: ${countries.value}`); // "kr"
    }
  </script>
</body>
</html>

저작자표시 비영리 변경금지

'브라우저' 카테고리의 다른 글

폼 데이터 변경 이벤트 조작하기 (0)	2025.02.21
포커스와 블러 이벤트 (0)	2025.02.21
스크롤 이벤트 제어 (0)	2025.02.20
키보드 이벤트: keydown과 keyup의 활용 (0)	2025.02.20
포인터 이벤트: 통합 입력 처리 (0)	2025.02.20