박시은

(❁´◡`❁)

2 분 소요


▶ 폼 요소 값 가져오기

웹 문서의 폼 요소에는 사용자가 내용을 입력하는 텍스트 필드뿐이 아니라 라디오 버튼이나 체크 박스와 같이 클릭하는 요소가 있다. 이렇게 다양한 요소에 접근하는 방법에 대해 알아보자.


▷ id, class 속성 값 사용하기

앞 포스팅에서 다룬 것처럼 id나 class 를 사용하여 폼 요소에 접근할 수 있다.

// html
<div class="main-title">
  <h1 class="text">안녕하세요!</h1>
  <h1 class="text">행복한 하루 보내세요🥰</h1>
</div>

// js
document.querySelector(".main-title");


▷ value 프로퍼티 사용하기

value 프로퍼티를 사용하면 텍스트 필드나 이메일 필드에서 사용자가 입력한 내용을 가져올 수 있다.

// html
<form class="display-container">
  <input type="text" class="input-box" />
</form>

// console
document.querySelector(".input-box").value;


▷ name 속성 사용하기

폼 요소에 class, id, name 속성이 없고 name 속성만 있으면 name 식별자를 이용해 접근할 수 있다.

<form name="order">
  <fieldset>
    <legend>상품정보</legend>
    <ul>
      <li>
        <label class="field" for="product">
          상품 :{" "}
        </label>
        <input type="text" class="input-box" name="product" />
      </li>
    </ul>
  </fieldset>
</form>

// console
document.order.product.value; // form의 name: order , input의 name : product


▷ 폼 배열 사용하기

폼 요소에 class, id, name 속성이 없으면 폼 배열을 사용하여 접근할 수 있다.

// html
<form id="login_input">
  <input type="text" autofocus placeholder="아이디를 입력하세요" />
  <input type="password" placeholder="비밀번호를 입력하세요" />
</form>

// console
document.forms; // 모든 form을 가져온다.
document.forms[0].elements; // 첫 번째 form에 있는 폼 요소를 모두 가져온다.


폼에 접근한 후 elements 속성을 사용하여 폼 요소들을 가져올 수 있다.

// console
document.forms[0].elements;


아이디 필드에 접근하려면 아이디 필드가 폼에서 첫 번째 요소이므로 아래와 같이 작성해야 한다.

// console
document.forms[0].elements[0];



▶ 선택 목록에 접근하기

▷ 선택 목록에 접근하기

사용자가 어떤 항목을 선택했는지에 따라 다르게 동작하게 하려면 사용자가 선택한 항목을 알아내야한다.

// html
      <label for="major">학과를 선택하세요</label>
      <select id="major">
        <option>---- 학과 선택 ----</option>
        <option>컴퓨터공학과</option>
        <option>산업경영공학과</option>
        <option>미디어소프트웨어학과</option>
        <option>기계공학과</option>
      </select>


options 프로퍼티를 사용하여 사용자가 선택한 목록을 알아낼 수 있다.

// console
document.querySelector("#major").options;

  • selectedIndex에 컴퓨터공학과에 해당하는 인덱스 1이 들어 있는 것을 확인할 수 있다.


▷ 알림창에 선택 목록 표시하기

선택 목록에서 항목을 선택하면 해당 내용을 알림 창에 표시해 보자!

  • 선택 메뉴에서 몇 번째 항목을 선택했는지는 selectedIndex 값을 확인하면 되고, 선택한 항목의 내용을 가져올 때는 innerText 프로퍼티를 사용하면 된다.

  • 선택 목록에 함수를 연결할 때는 onclick이 아닌 innerText 프로퍼티를 사용한다.


// js
const selectMajor = document.querySelector("#major");

function displaySelect() {
  let selectedMajorText =
    selectMajor.options[selectMajor.selectedIndex].innerText;
  alert(`${selectedMajorText}를 선택하셨습니다.`);
}
selectMajor.onchange = displaySelect;



▶ 라디오 버튼과 체크박스에 접근하기

라디오 버튼은 여러 항목 중에서 하나만 선택할 수 있다.

// html
<form name="majorForm">
  <fieldset>
    <legend>학과 선택</legend>
    <label>
      <input type="radio" name="major" value="ce" />
      컴퓨터공학과
    </label>
    <label>
      <input type="radio" name="major" value="ie" />
      산업경영공학과
    </label>
    <label>
      <input type="radio" name="major" value="ms" />
      미디어소프트웨어학과
    </label>
    <label>
      <input type="radio" name="major" value="me" />
      기계공학과
    </label>
  </fieldset>
</form>


체크 박스는 한 개의 항목만 선택할 수 있다.

<form name="majorForm">
  <fieldset>
    <legend>학과 선택</legend>
    <label>
      <input type="checkbox" name="major" value="ce" />
      컴퓨터공학과
    </label>
    <label>
      <input type="checkbox" name="major" value="ie" />
      산업경영공학과
    </label>
    <label>
      <input type="checkbox" name="major" value="ms" />
      미디어소프트웨어학과
    </label>
    <label>
      <input type="checkbox" name="major" value="me" />
      기계공학과
    </label>
  </fieldset>
</form>


라디오 버튼과 체크 박스에 접근해보자

// console
document.majorForm.major;


체크 박스 중 첫 번째 박스의 내용을 가져오려면 아래와 같이 작성하면 된다.

// console
document.majorForm.major[0].value;



▶ checked 속성을 사용해 접근하기

  • 라디오 버튼이나 체크박스에는 checked 속성이 있다.
  • checked 속성은 선택하거나 선택하지 않거나 두 가지 값을 가지므로 논리형 값으로 표현한다. (항목 선택시 true, 미선택시 false)

어떤 항목을 선택했는지 알고 싶으면 checked 속성이 있는 것을 찾아야 한다.

// console
document.querySelector("input[name='major']:checked");


단, 체크박스는 2개 이상 선택할 수 있으므로 querySelectorAll() 함수를 사용해야 한다.

// console
document.querySelectorAll("input[name='major']:checked");

NodeList 형태로 선택한 항목들이 저장된다.



📎참조

Doit! 모던 자바스크립트 프로그래밍의 정석

댓글남기기

참고