Do it : JS -9. 폼과 자바스크립트

폼 요소에 접근하는 여러 방법

-웹 사이트의 폼 요소에는 텍스트 필드, 라디오 버튼, 체크 상자 (누를 수 있는 요소), 선택 목록(여러 항목 중 원하는 것을 선택) 등이 있다.

-자바스크립트로 제어하려면 먼저 요소에 접근해야 함 = 폼 요소에 접근

 

id값이나 class값 사용해 폼 요소 접근

-querySelector()함수, querySelectorAll()함수 사용해서 id값이나 class값 접근

-id값은 폼 요소 1개에 접근, class값은 폼 요소 여러개에 접근 > 배열로 저장

-텍스트 필드의 값 가져오려면 .value 붙인다

document.querySelector("#billingName").value

"한라산"

 

name값 사용해 폼 요소 접근

-name 속성 : 자바스크립트에서 폼 요소를 구별하고 접근할 수 있도록 > HTML 초기부터 사용하던 방법

-다른 사람이 작성한 폼 소스에 name 속성만 있으면 이 방법 이용한다

-이 방법 사용하려면,

<form>태그에 name 속성이 지정되어있어야 함,

<form>태그 안에 포함된 폼 요소에도 name 속성 있어야 한다

-name값은 주로 id값과 같에 지정

 

-[이름: ] 항목의 텍스트 필드에 접근하는 소스 콘솔창

document.ship. shippingName

    ||

document.forms["ship"].elements["shippingName"]

결과

<input type="text" class="input-box" id="shippingName" name="shipppingName">

 

-이름에 아무 이름이나 쓰고 입력값 출력 소스 콘솔창

document.ship.shippingName.value

"도레미"

 

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

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

-문서에 <form>태그 안 폼 요소가 많으면 접근 어려움 > 실무에서는 잘 사용X

-id, class, name 속성 없을 때 사용

-콘솔창에 입력 : form 요소 한개여서 이렇게 나온다

document.forms

▶HTMLCollection [form]

 

-<form>태그 안에 포함된 요소에 접근하려면 elements속성 사용 : 해당 폼 안에 있는 폼 요소 모두 가져옴

-forms[0] : forms 배열의 첫 번째 요소

-HTMLFormControlsCollection 배열 형태

document.forms[0].elements

▼HTMLFormControlsCollection(3) [input, input, button.order]

   0: input

   1: input

   2: button.order

 

-웹 브라우저에서 아이디(첫번째 텍스트 필드) 입력하고 콘솔창

document.forms[0].elements[0].value

"sigcho"

 

 

배송정보 자동입력 프로그램  - 주문 정보 내용 가져오기

-'주문 정보' 폼 요소에 입력 내용을 복사해 '배송 정보' 폼 요소에 입력

 

1. 어느 항목을 어느 항목으로 복사할지 알고 있기 (id값)

-체크 상자를 누르면 복사한다

 

2. js 파일에 소스 작성

   체크 상자를 눌렀는지 확인한다

-체크 상자를 가져와 check 변수에 저장 (체크 상자 id="shippingInfo")

-check 객체에 click이벤트 발생했을 때, 처리할 함수 정의

 

3. check 객체의 checked 속성은 체크 상자가 체크되면 값이 true가 된다.

   이때 주문 정보의 내용을 배송 정보로 가져온다  if문 사용

 

4. 체크가 안됐으면= true가 아닐 경우, 사용자가 직접 입력하도록 폼 요소 비워둔다  else문 사용

 

---

폼 요소에서 입력값 검증

-입력한 글자 수 확인

-두 개 필드의 내용이 서로 같은지 확인

-폼 밸리데이션(Form Validation, 입력값 검증)

 

입력값 검증 프로그램 - 아이디 글자 수 확인

-글자 수 확인 하는 자바스크립트 소스

 

1. [아이디] 필드에 접근한다

-변수에 저장한다

var userId = document.querySelector("#user-id");

 

2. [아이디] 필드에 내용 입력하면 바로 입력한 글자 수 확인

-userId 요소에서 change 이벤트 발생 > checkId()함수 실행

-checkId()함수 선언

-change 이벤트 = 필드에 입력을 마치고 그 필드 빠져나올 때 발생하는 이벤트

-userId 필드 내용의 길이가 4 미만 이거나 15 초과일 때 실행하는 조건 if문

-select()함수 : 텍스트 필드에 입력한 내용을 선택한다 | 내장함수

 

입력값 검증 프로그램 - 비밀번호 확인

-[비밀번호] 필드에 입력한 글자 수가 8자리 이상인지 확인한다

-[비밀번호 확인] 필드에 입력한 값이 [비밀번호] 필드 값과 같은지 확인한다

 

1. [비밀번호]필드와 [비밀번호 확인]필드 요소 가져와 변수 저장

var pw1 = document.querySelector("#user-pw1");

var pw2 = document.querySelector("#user-pw2");

 

2. pw1 요소에 change 이벤트 발생하면 checkPw()함수 실행

pw1.change = checkPw;

 

3. checkPw()함수 작성 (checkId()함수 다음에)

 

태그 자체에서 폼 검증

-HTML5에서 type 속성 값 사용해서 필드 값 체크 가능

-<input> 새로운 유형

<input type="email">	이메일 주소 필드 | 주소 형식 틀리면 오류 메시지
<input type="tel">	전화번호 필드 | 전화번호 숫자 아니면 오류 메시지
<input type="url">	사이트 주소 필드 | http: 로 시작하지 않으면 오류 메시지

-<input> 새로운 속성

autocomplete	자동 완성 켜고 끈다
autofocus	마우스 커서 자동 표시
placeholder	힌트 표시 | 필드 누르면 힌트 사라짐
required	필수 입력 항목 | 작성 안하면 오류 메시지  | 다음 단계로 못 넘어감

 

 

---

다양한 폼 요소 다루기

-자바스크립트에서 용도에 따라 사용하는 폼 요소 다름

-폼 요소마다 사용하는 속성, 함수 다름

-자바스크립트 사용하면 > 사용자가 폼에서 어떤 항목을 선택했는지 알 수 있음

 

선택 목록 및 옵션 항목에 접근

-선택 목록<select>은 <option>태그 사용해 여러 항목 한꺼번에 지정 > 목록을 펼쳐 원하는 항목을 선택

name="major"인 선택 목록<select>가 있다

<form>태그의 name값이 "testForm"이다

-선택 목록에 접근하기

document.testForm.major

▶<select name="major" onchange="displaySelect()">...</select>

 

-옵션항목은 배열로 저장된다.

-옵션 항목에 접근하려면 options 속성 사용, 복수형 주의!!

document.testForm.major.options

▶HTMLOptionCollection(7) [option, option, option, option, option, option, option, selectedIndex: 0]

-HTMLOptionCollection(7) = 7개의 option이 있고 배열 형식이다

-selectedIndex: 사용자가 선택한 옵션의 인덱스 값이 저장된다

 

-콘솔창, 다섯번째 옵션에 접근 : 인덱스 사용

document.testForm.major.options[4]

 

-화면에 표시하는 내용에 접근 : innerText 속성 사용

document.testForm.major.options[4].innerText

"전기전자공학과"

 

-서버로 넘겨주는 값 : .value

document.testForm.major.options[4].value

"elec"

 

 

사용자가 선택한 옵션 항목 찾아내기

-selectedIndex 속성 값을 살펴보면 어떤 옵션 선택했는지 알 수 있음

document.testForm.major.options.selectedIndex

3

 

-선택하면 어떤 항목 선택했는지 알려주는 알림창 뜸

HTML 파일에서  <select>태그에 change이벤트 발생했을 때 displaySelect()함수 실행

<select name="major" onchange="displaySelect()">

</select>

 

-displaySelect()함수

 선택 목록 가져와 selectedMenu로 저장

 선택한 옵션의 innerText를 가져와 selectedText에 저장

 selectedText 내용을 알림창에 표시

 

라디오 버튼과 체크 상자에 접근

-라디오 버튼 : 하나 항목만 선택 | name="subject" 같다

-체크 박스 : 여러 항목 선택 | name="mailing1", "mailing2", "mailing3" 다르다

 

-라디오 버튼의 name값을 이용해 접근

 RadioNodeList 노드리스트로 저장

 선택한 버튼이 value 값에 저장된다

document.testForm.subject

▶RadioNodeList(3) [input, input, input, value: ""]

 

-id="mailing1" 체크 상자에 접근

document.testForm.mailing1

<input type="checkbox" name="mailing1" value="news">

 

checked 속성 기본값은 false

-라디오 버튼 중 선택되면 true라고 표시된다

document.testForm.subject[1].checked

true

 

-체크 박스 중 (여러개)선택되면 true

document.testForm.mailing1.checked

true