[9일차] Do it! 자바스크립트 입문 / 09 폼과 자바스크립트

---

< 09-1 폼 요소에 접근하는 여러 가지 방법 >

- 폼(Form) : 사용자가 정보를 입력할 수 있게 만들어 놓은 웹 요소

- 폼 요소에 접근하는 방법은 id나 class 값을 이용하는 것은 같음

  => id 값은 폼 요소 하나에만 접근하고,

       class 값은 폼의 여러 요소를 가져와 배열 형태로 저장

 

- id나 class 속성이 없고 name 속성만 있어도 해당 요소에 접근 가능!

  * 단, 이 방법을 사용하려면 <form> 태그에 name 속성이 지정되어 있어야 하고,

    <form> 태그 안에 포함된 폼 요소에서 name 속성이 있어야 함

// 접근하는 방법

// 첫번째 - 각 name 값을 입력
//        ┌ <form name="ship">
document.ship.shippingName
//            └ <form> 태그에 포함된 요소 중 <input name="shippingName">



// 두번째 - 배열 형태로 접근
//        ┌ <form name="ship">
document.forms["ship"].elements["shippingName"]
//            └ <form> 태그에 포함된 요소 중 <input name="shippingName">

 

 

- 폼 배열을 사용해 폼 요소에 접근 가능

  * document 속성 중 forms 속성은 문서 안에 있는 <form> 태그를 모두 가져와 배열 형태로 반환

- 폼 배열 : <form> 태그 안 요소들에 id, class, name 속성이 없을 때 사용

- elements 속성 : <form> 태그 안에 포함된 모든 요소를 가져오는 속성

 

- <input> 태그의 checkbox 객체의 checked 속성을 통해 알 수 있음

  => true : check 된 상태

       false : check 안된 상태

(좌) check된 상태                                                                      (우) check 안된 상태

  

 

 

- 폼 밸리데이션(Form Validation) : 입력된 값이 정해진 조건에 맞는지 등을 검사하는 작업

  => 유효성 검사

 

 

 

< 09-2 폼 요소에서 입력값 검증하기 >

[ 실습 - 입력값 검증 프로그램 ]

- 1단계 : 아이디 글자 수 확인하기

  * select() : 텍스트 필드에 입력한 내용을 선택

 

- 2단계 : 비밀번호 확인하기

 

- 태그 자체에서 폼 검증하기

 

 

 

 

< 09-3 다양한 폼 요소 다루기 >

- 용도에 따라 사용하는 폼 요소가 다르며

  폼 요소마다 사용하는 속성과 함수도 조금씩 다름

 

- 선택 목록(<select>) : <option> 태그를 사용해 여러 항목을 한꺼번에 지정한 뒤

                              목록을 펼쳐 원하는 항목을 선택할 수 있는 요소

선택 목록 예제

 

- 선택 목록의 항목은 <option> 태그와 함께 사용하기 때문에 선택 목록에 접근하면

  옵션 항목은 배열 형태로 저장

- selectedIndex : 사용자가 선택한 항목의 인덱스 값 출력

  예) document.testForm.major.options.selectedIndex

 

- 라디오 버튼의 name 값은 모두 같고, checkbox name 값은 서로 다름

  => 만약 name을 매번 다르게 지정하는 게 번거롭다면 같은 이름을 넣어도 됨

       이 이름들은 name명[인덱스 값]으로 지정 가능

       예) mailing[0], mailing[1], mailing[2] 등

 

- 라디오 버튼이나 체크 박스는 checked 속성이 있음

  => 기본값 : false

       선택한 값이 있음 : true

라디오 버튼 체크 여부                                                                           체크박스 체크 여부