[J.S_DOM] 8. 폼 요소 다루기 (input, select, textarea 값 읽기/쓰기)

8.0 폼 요소란 무엇인가

8.0.1 폼 요소 기본 개념

웹 페이지에서 사용자가 정보를 입력하거나 선택할 수 있도록 만든 HTML 태그
예) 회원가입 할 때 이름을 입력하거나, 성별을 선택하거나, 비밀번호를 입력하는 칸

8.0.2 자주 쓰이는 폼 태그 종류

 

• <input> : 글자 입력, 비밀번호, 체크박스, 라디오 버튼 등 다양한 타입을 지원
• <select> : 여러 항목 중 하나를 선택하는 드롭다운 메뉴
• <textarea> : 여러 줄 글자 입력란
• <button> : 버튼 (폼 제출, 리셋, 또는 일반 버튼)

 

8.0.3 폼 요소의 역할과 중요성

폼 요소는 사용자와 웹사이트가 정보를 주고받는 통로
회원가입, 로그인, 설문조사, 댓글 작성 등 사용자 입력이 필요한 모든 곳에 사용
자바스크립트를 통해 이 폼 요소의 값을 읽거나 바꾸거나, 제출할 때 동작을 제어 가능

8.1 입력 값 읽기

웹 과 사용자의 대부분의 상호 작용하는 부분 : 입력
사용자가 입력한 값을 자바스크립트로 읽어와 처리하는 방법을 알아보자 

8.1.1 input 요소 값 읽기 (text)

개념

<input type="text">은 사용자가 글자를 입력할 수 있는 가장 기본적인 입력란
자바스크립트에서는 이 입력란에 사용자가 입력한 텍스트를 .value 속성으로 읽을 수 있음

<input type="text" id="username" placeholder="이름을 입력하세요" />

<button id="btn">확인</button>

<script>

  const input = document.getElementById('username');

  const button = document.getElementById('btn');

  button.addEventListener('click', () => {

    alert('입력한 이름: ' + input.value);

  });

설명 및 주의사항

• .value는 입력란에 현재 입력된 값을 가져옵니다.
• 입력란에 아무것도 없으면 빈 문자열("")이 반환됩니다.
• 사용자가 입력하는 도중 값을 읽으려면 input 이벤트를 활용할 수 있습니다 (8.1.6 참고).

8.1.2 input 요소 값 읽기 (checkbox, radio)

개념

<input type="checkbox">는 체크박스로, 선택 여부를 .checked 속성으로 확인
<input type="radio">는 여러 옵션 중 하나만 선택할 수 있는 라디오 버튼

<!-- 체크박스 -->

  <label><input type="checkbox" id="agree" /> 약관에 동의합니다.</label>

<button id="checkBtn">확인</button>

<script>

  const checkbox = document.getElementById('agree');

  const button = document.getElementById('checkBtn');

  button.addEventListener('click', () => {

    if (checkbox.checked) {

      alert('동의하셨습니다.');

    } else {

      alert('동의하지 않았습니다.');

    }

  });

</script>

 

<!-- 라디오버튼 -->

<label><input type="radio" name="gender" value="남자" /> 남자</label>

<label><input type="radio" name="gender" value="여자" /> 여자</label>

<button id="genderBtn">확인</button>

<script>

  const radios = document.getElementsByName('gender');

  const button = document.getElementById('genderBtn');

  button.addEventListener('click', () => {

    let selected = '';

    for (const radio of radios) {

      if (radio.checked) {

        selected = radio.value;

        break;

      }

    }

    alert('선택한 성별: ' + (selected || '없음'));

  });

</script>

설명 및 주의사항

 

• 체크박스는 .checked가 true이면 선택된 상태
• 라디오 버튼은 같은 name을 가진 여러 요소 중 checked가 true인 요소의 값을 검색
• 라디오 버튼은 반드시 한 개만 선택가능

 

8.1.2 input 요소 값 읽기 (password)

개념

<input type="password">는 비밀번호를 입력받는 입력란

화면에 입력 내용이 가려져 있음
자바스크립트에서 읽는 방법은 일반 텍스트 입력과 동일하게 .value를 사용

<input type="password" id="pwd" placeholder="비밀번호 입력" />

<button id="pwdBtn">확인</button>

<script>

  const pwdInput = document.getElementById('pwd');

  const pwdBtn = document.getElementById('pwdBtn');

  pwdBtn.addEventListener('click', () => {

    alert('입력한 비밀번호: ' + pwdInput.value);

  });

</script>

설명 및 주의사항

 

• 비밀번호는 화면에 ●●● 등의 점으로 가려서 출력
• 자바스크립트에서는 평문으로 값을 읽을 수 있음
• 실제 서비스에서는 보안에 주의(예: 암호화, HTTPS 사용 등).

 

8.1.4 select 요소 값 읽기

개념

<select> 태그는 드롭다운 형태의 선택 메뉴
사용자가 선택한 옵션의 값을 .value로 읽음

<select id="colorSelect">

  <option value="red">빨강</option>

  <option value="green">초록</option>

  <option value="blue">파랑</option>

</select>

<button id="colorBtn">확인</button>

<script>

  const select = document.getElementById('colorSelect');

  const button = document.getElementById('colorBtn');

  button.addEventListener('click', () => {

    alert('선택한 색: ' + select.value);

  });

</script>

설명 및 주의사항

 

• <option> 태그의 value가 선택된 값으로 반환

값이 없으면 옵션 안의 텍스트가 기본으로 사용

 

8.1.5 textarea 값 읽기

개념

<textarea>는 여러 줄의 긴 텍스트를 입력받는 영역
입력된 내용은 .value로 읽음

<textarea id="memo" placeholder="메모를 입력하세요"></textarea>

<button id="memoBtn">확인</button>

<script>

  const textarea = document.getElementById('memo');

  const button = document.getElementById('memoBtn');

  button.addEventListener('click', () => {

    alert('입력한 내용:\n' + textarea.value);

  });

</script>

설명 및 주의사항

• 줄바꿈과 공백 등 입력한 모든 내용이 그대로 .value에 담깁니다.

8.1.6 이벤트로 입력 값 실시간 읽기 (input, change 이벤트)

개념

input 이벤트는 사용자가 입력하는 즉시 발생,

            실시간 값 확인에 적합
change 이벤트는 입력을 완료 후 포커스를 다른 곳으로 옮길 때 발생

<input type="text" id="liveInput" placeholder="입력하세요" />

<p>입력 내용: <span id="display"></span></p>

<script>

  const input = document.getElementById('liveInput');

  const display = document.getElementById('display');

  // 실시간 반영

  input.addEventListener('input', () => {

    display.textContent = input.value;

  });

  // 변경 후 반영 (포커스 떠날 때)

  input.addEventListener('change', () => {

    console.log('입력 변경 완료:', input.value);

  });

</script>

설명 및 주의사항

 

• input 이벤트는 사용자가 키를 누를 때마다 실행
• change 이벤트는 사용자가 입력을 끝내고 입력란을 벗어날 때 실행
• 두 이벤트는 용도에 따라 적절히 선택해 사용

 

8.2 입력 값 쓰기

입력란에 자바스크립트로 값을 직접 작성 가능
사용자가 입력하지 않아도 자동으로 값을 설정하거나 초기값을 지정시 사용

즉 읽기 뿐만 아니라 기본 텍스트 설정 하는 방법을 알아보자

8.2.1 input 요소 값 쓰기 (text, password 포함)

개념

<input> 요소의 .value 속성에 문자열을 할당하면 입력란에 그 값이 표시

<label><input type="radio" name="gender" id="male" value="남자" /> 남자</label>

<label><input type="radio" name="gender" id="female" value="여자" /> 여자</label>

<button id="selectMale">남자 선택</button>

<script>

  const maleRadio = document.getElementById('male');

  const button = document.getElementById('selectMale');

  button.addEventListener('click', () => {

    maleRadio.checked = true; // 남자 라디오 버튼 선택

  });

</script>

설명 및 주의사항

 

• .value에 문자열을 대입하면 입력란에 해당 문자열이 표시
• 비밀번호 입력란도 동일하게 작동하지만 화면에는 ●●●로 표시
• 사용자가 입력한 값은 덮어쓰기 되므로 주의

 

8.2.2 checkbox, radio 요소 값 쓰기 (선택 상태 변경)

개념

체크박스나 라디오 버튼의 선택 상태는 .checked 속성에 true 또는 false를 할당하여 변경 가능

<label><input type="radio" name="gender" id="male" value="남자" /> 남자</label>

<label><input type="radio" name="gender" id="female" value="여자" /> 여자</label>

<button id="selectMale">남자 선택</button>

<script>

  const maleRadio = document.getElementById('male');

  const button = document.getElementById('selectMale');

  button.addEventListener('click', () => {

    maleRadio.checked = true; // 남자 라디오 버튼 선택

  });

</script>

설명 및 주의사항

 

• .checked에 true를 넣으면 선택된 상태로 전환
• 라디오 버튼은 같은 name을 가진 버튼 중 하나만 선택 가능
• 상태 변경은 화면에도 즉시 반영

 

8.2.3 select 요소 값 쓰기 (옵션 선택 변경)

개념

<select> 요소의 .value 속성에 옵션의 value 값을 넣으면 해당 옵션이 선택

<select id="colorSelect">

  <option value="red">빨강</option>

  <option value="green">초록</option>

  <option value="blue">파랑</option>

</select>

<button id="setGreen">초록 선택</button>

<script>

  const select = document.getElementById('colorSelect');

  const button = document.getElementById('setGreen');

  button.addEventListener('click', () => {

    select.value = 'green';  // '초록' 옵션 선택됨

  });

</script>

설명 및 주의사항

 

• .value에 존재하지 않는 값을 넣으면 선택이 해제되거나 아무 변화가 없음
• 옵션의 value 값과 정확히 일치해야 선택 가능

 

8.2. 4 textarea 값 쓰기

개념

<textarea> 요소 역시 .value에 문자열을 넣으면 내용을 설정 가능

<textarea id="memo" placeholder="메모를 입력하세요"></textarea>

<button id="fillBtn">내용 넣기</button>

<script>

  const textarea = document.getElementById('memo');

  const button = document.getElementById('fillBtn');

  button.addEventListener('click', () => {

    textarea.value = '안녕하세요!\n이곳에 메모가 표시됩니다.';

  });

</script>

설명 및 주의사항

 

• 줄바꿈 문자는 \n으로 표현할 수 있으며 그대로 표시
• 기존 내용은 덮어씌워짐