JavaScript(5)

zooyeong·2023년 3월 16일

JavaScript

7주차

목록 보기

6/7

💡폼 조작

📖form 태그 선택하기

forms 속성 사용 : 모든 form 태그를 참조하는 HTMLCollection 객체가 반환되고 이를 사용에 form 요소 노드를 선택
name 속성 사용 : form 태그의 name 속성값으로 form 요소 노드를 선택

  <form id="form1">
    <p>form1</p>
    <input type="text">
  </form>

  <form class="form2">
    <p>form2</p>
    <input type="text">
  </form>

  <form name="form3">
    <p>form3</p>
    <input type="text">
  </form>

🔽console

📖form 요소 선택하기

elements 속성 사용 : form 요소 노드의 하위 노드 중 폼 요소를 반환하고 반환된 객체를 사용해 개별 폼 요소 노드에 인덱스로 접근
name 속성 사용 : form 요소의 name 속성값으로 폼 요소 노드에 바로 접근

<form name="frm1">
  <label for="uname">이름</label>
  <input type="text" id="uname" name="uname">
  <label for="age">나이</label>
  <input type="text" id="age" name="age">
  <label for="gender">성별</label>
  <select id="gender" name="gender">
    <option value="male">male</option>
    <option value="female">female</option>
  </select>
  <button type="submit">전송</button>
</form>

🔽console

📖form 요소의 입력값 다루기

한 줄 입력 요소(or 여러 줄 입력 요소)

value 속성 참조 : 입력한 값을 가져오기

value 속성에 값 할당 : 새로운 값을 설정

체크박스 요소 or 라디오버튼 요소

checked 속성 : 체크 또는 선택 상태를 확인(선택되어있으면 true를, 아니면 false를 반환)

checked 속성에 true 할당 : 체크 또는 선택 상태를 기본으로 설정
<div>
	<input class="bab" type="checkbox" value="morn">아침
    <input class="bab" type="checkbox" value="lunc">점심
    <input class="bab" type="checkbox" value="denn">저녁
</div>
//브라우저에서 아침, 점심만 체크해둔 상태.
//↓체크박스 저녁에 해당하는 2인덱스만 false를 반환. true를 할당해서 체크 상태로 변경할 수 있다.

💬radio버튼 : 여러 radio 타입이 같은 name을 가질 때는 그 중 하나만 선택할 수 있다.
<div>
	<input type="radio" value="S" name="size">소
	<input type="radio" value="M" name="size">중
	<input type="radio" value="L" name="size">대
	<button type="button" onclick="sizeCheck()">선택한 사이즈확인</button>
</div>
<script>
  function sizeCheck(){
  	const radios = document.querySelectorAll('input[type="radio"]');
  	for(let i=0; i<radios.length; i++){
    	if(radios[i].checked == true){
      		console.log(radios[i].value);
    	}
  	}
  }
</script>

콤보박스 요소
<div>
  <select id="memory">
    <option value="4">4GB</option>
    <option value="8">8GB</option>
    <option value="16">16GB</option>
    <option value="32">32GB</option>
  </select>
</div>
//브라우저에서 8GB를 선택해 둔 상태
//↓8GB에 해당하는 1인덱스만 true를 반환

🔥연습문제-버튼을 누르면 해당 상태로 변경하기

<body>
  <div class="container">
    <div id="main">
      <p id="p1">p1 텍스트</p>
      <p id="p2">p2 텍스트</p>
    </div>
  </div>
  <button onclick="changeMain()">main 배경색 gray로 변경</button>
  <button onclick="changeP1()">p1 글자색 red로 변경</button>
  <button onclick="changeP2()">"p2 텍스트"를 "p2 글자" 로 변경</button>

  <script>
    function changeMain(){
      document.querySelector('#main').style.backgroundColor = 'gray';
    }

    function changeP1(){
      document.querySelector('#p1').style.color = 'red';
    }

    function changeP2(){
      document.querySelector('#p2').innerText = 'p2 글자';
    }
  </script>
</body>

🔽실행 결과

zooyeong

Have a good day ⌯’▾’⌯

이전 포스트

JavaScript(4)

다음 포스트

JavaScript(5)

7주차

💡폼 조작

📖form 태그 선택하기

📖form 요소 선택하기

📖form 요소의 입력값 다루기

JavaScript(4)

JavaScript(6)

0개의 댓글