05_form_ 폼요소 가져와서 적용하기

1.텍스트 필드에 입력한 값 가져오기

자바스크립트에서 value 프로퍼티를 사용하면 폼 요소중 텍스트 필드나 이메일 필드에서 

사용자가 입력한 값을 가져올 수 있다.

요소.value

<fieldset>
    <legend>주문 정보</legend>
    <ul>
        <li>
            <label class="field" for="order-name">이름 : </label>
            <input type="text" class="input-box" id="order-name" name="order-name">
        </li>
        <li>
            <label class="field" for="order-tel">연락처 : </label>
            <input type="text" class="input-box" id="order-tel" name="order-tel">	
        </li>
        <li>
            <label class="field" for="order-addr">주소 : </label>
            <input type="text" class="input-box" id="order-addr" name="order-addr">
        </li>
    </ul>
</fieldset>

콘솔 창에 다음과 같이 입력

document.querySelector("#order-name").value

--> 이름 필드에 입력한  콘솔창에 출력된다.

 

2.name 속성값을 사용해 폼 요소에 접근하기

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

 

간단한예시

'상품'항목에 내용을 입력한 후 자바스크립트를 사용해 입력한 내용을 가져오는 소스를 '콘솔'창에 작성하시오

  <fieldset>
    <legend>상품 정보</legend>
    <ul>
        <li>
            <label class="field" for="product">상품 : </label>
            <input type="text" class="input-box" id="product" name="product">
        </li>
        <li>
            <label class="field" for="prod-num">갯수 : </label>
            <input type="number" class="input-box"  id="prod-num" name="prod-num" value="1"
            min="1">
        </li>
    </ul>
</fieldset>

 

document.order.product.value   ==> document.form의 name.input의 name.value

--> name 속성을 이용해도 폼요소의 값을 가져올수있다.

상품에 '무선마우스'를 입력한 후 콘솔창에 입력한다.

document.querySelector("#product").value

---> 콘솔창에 '무선마우스'가 출력됨

3. 폼 배열을 사용해 폼 요소에 접근하기

폼요소에 id,class,name속성도 없다면 이런경우에는 폼 배열을 사용할 수 있다.

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

 <form>
      <div id="login_input">
        <input type="text" autofocus placeholder="아이디">
        <input type="password" placeholder="비밀번호">
      </div>
      <div id="login_bttn">
        <button type="submit" class="order">로그인</button>
      </div>
</form>

콘솔창에 

document.forms 를 입력

콘솔 창에 HTMLCollection이라고 표시된다.

 

폼에 접근한 후 그 안에 있는 요소들은 elements 속성을 사용하면 된다.

간단한예시

'아이디'필드에 접근하려면 '아이디'필드 폼에서 첫번째 요소이므로 다음과 같이 작성한다.

document.forms[0].elements[0]

 

4.선택 목록과 항목에 접근하기

<select>태그를 사용한 목록을 '선택목록' 이라고한다.

선택목록은 <option>태그를 사용해서 여러 개의 항목을 한꺼번에 지저한 후 목록을 펼처서 원하는 항목을 선택할 수 있다.

<form name="testForm">
    <fieldset>
        <legend>신청인</legend>
        <ul>
            <li>       	
                <label class="reg" for="userName">이름</label>
                <input type="text" id="userName" name="userName" maxlength="50">               
            </li>
            <li>
                <label class="reg" for="class">학과</label>
                <select name="major" id="major">
                    <option>---- 학과 선택 ----</option>
                    <option value="archi">건축공학과</option>
                    <option value="mechanic">기계공학과</option>
                    <option value="indust">산업공학과</option>
                    <option value="elec">전기전자공학과</option>
                    <option value="computer">컴퓨터공학과</option>
                    <option value="chemical">화학공학과</option>
                </select>
            </li>
        </ul>				
    </fieldset>
    ....
  </form>

document.querySelector("#major")

여러개의 항목이 보인다.(콘솔창에 입력)

이 항목에 접근하려면 options프로퍼티 이용

document.querySelector("#major").options

HTMLOptionsCollection(7)이라고 나타난다.

length 속성에는 옵션 항목의 개수

selectedIndex는 사용자가 선택한 인덱스값이 저장된다.

사용자가 무엇을 선택했는지 알수있다.

 

이제 알림창으로 선택된 항목 표시해볼까요?.
(재미있는 javascirpt ~~)

//1.전체 id를 변수로 두자
//2. 사용자가 선택한 '산업공학과' -> 사용자가 선택을 하려면, ...
	#major option을 선택하겠찌 --> 변수로 두자.
    
const selectMenu = document.querySelector("#major");
function displaySelect(){
	/* 아래처럼 한줄로 끝내도 되고.
		let selected = selectMenu.options[selectMenu.selectedIndex].innerText;
	*/
	
	/* 아래처럼 index를 추가해주니 이해가 쉽다.*/
	let index = selectMenu.selectedIndex;
	console.log(index);
	let selected = selectMenu.options[index].innerText;
	alert(`${selected}선택하셨습니다.`)
}
selectMenu.onchange = displaySelect;

5.라디오버튼에 접근하기

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

체크박스 - 여러개를 선택할 수 있다.

 

<form name = "testForm">....
  <fieldset>
    <legend>신청 과목</legend>
    <p>이 달에 신청할 과목을 선택하세요.</p>
	<div id="subject_form">
    <label><input type="radio" id="a" name="subject" value="speaking">회화</label>
    <label><input type="radio" id="b" name="subject" value="grammar">문법</label>
    <label><input type="radio" id="c" name="subject" value="writing">작문</label>       
	</div>
  </fieldset>
</form>

1.라디오버튼은 여러가지 항목이 있어도 '신청과목'이라는 하나의 덩어리 이므로 name속성을 이용해 접근해보자

콘솔창에 입력

document.testForm.subject     //document. form의 name. input의 name

라디오버튼은 사용자가 선택한 속성이 'value'에 저장된다.

 

6.체크박스에 접근하기

체크박스는 라디오 버튼과 달리 여러개의 항목을 선택할 수 있지만, '메일링'이라는 하나의 주제로 
묶을 수 있으므로 각 항목의 name값을 똑같이 만들어야 한다.

접근하는것은 라디오 버튼과 같다.

document.testForm.mailing     // document. form의 name. input의 name

<form name="testForm">....
   <fieldset>
    <legend>메일링</legend>
    <p>메일로 받고 싶은 뉴스 주제를 선택해 주세요</p>
    <label><input type="checkbox" id="new" name="mailing" value="news">해외 단신</label>
    <label><input type="checkbox" id="dialog" name="mailing" value="dialog">5분 회화</label>
    <label><input type="checkbox" id="pops" name="mailing" value="pops">모닝팝스</label>
   </fieldset>

// 체크박스 중 첫번째 박스의 내용을 가져오려면 ??

document.testForm.mailing[0].value     //news 출력

checked속성을 사용해서 선택한 항목에 접근하기.

라디오버튼이나 체크박스에는 checked속성이 있다.

checked속성은 선택하거나, 선택하지 않거나 두가지 값을 가지므로 논리형 값으로 표현된다.

--> 사용자가 라디오버튼이나 체크박스 중에서 어떤항목을 선택했는지 알고 싶으면 각 항목 중에서

  checked속성이 있는것을 찾으면 된다.

// '회화'를 선택한 상태에서 콘솔창에서 name=subject인 요소 중에서 선택된 것을 찾는 소스를 입력해보자.
document.querySelector("input [ name = 'subject' ] : checked"]
---> 작문이 선택된다.

위와같은 방법으로 사용자가 선택한 여러개의 체크박스도 선택할 수 있다.

document.querySelectorAll("input [name = 'mailing'] : checked")