[JavaScript] 내가 보려고 정리한 Do it 자바스크립트 기본편(6)

9장

 

🌭폼과 자바스크립트🌭

 

 

폼이란?

사용자가 정보를 입력할 수 있게 만들어 놓은 웹 요소

 

자바스크립트로 폼 요소의 내용을 가져오거나 수정하고 정해진 형식에 맞는지 확인함

 

 

🌭폼 요소에 접근하는 법

 

• id, class 값을 이용

돔의 요소에 접근하는 것과 같이 querySelector(), querySelectorAll() 함수 사용

// id
document.querySelector("#billingName")

// class
document.querySelectorAll(".input-box")[2]

 

• name 값을 이용

// 접근하는 방법

document.ship.shippingName

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

* form 태그뿐만 아니라 접근하려는 폼 요소에도 name 속성이 지정되어 있는지 확인

(id는 속성만 지정되어 있으면 사용 가능)

 

• 폼 배열을 이용

forms 속성은 문서 안의 <form> 태그를 가져와 배열 형태로 반환

document.forms  // 폼 태그들이 배열로

document.forms[0].elements[0]  // 첫 번째 폼의 첫 번째 요소에 접근

 

 

🌭폼 밸리데이션

 

입력된 값이 정해진 조건에 맞는지 검사하는 작업

(변수에 요소의 값을 가져와서 여러 함수를 작성해서 검사)

 

내가 헷갈렸던 것!

select() 함수는 드래그된 것처럼 됨

focus() 함수는 다시 입력할 수 있도록 됨

 

input 태그의 새로운 유형

<input type = "email">	이메일 주소 형식에 맞지 않으면 오류 메시지
<input type = "tel">	전화번호 형식에 맞지 않으면 오류 메시지
<input type = "url">	http:로 시작하지 않으면 오류 메시지

 

input 태그의 새로운 속성

autocomplete	자동 완성 기능 키고 끔
autofocus	마우스 커서 자동으로 표시
placeholder	필드 안에 어떤 내용을 입력해야하는지 알려줌
required	필수 입력 항목, 작성하지 않으면 오류 메시지 표시

 

 

🌭다양한 폼 요소 다루기

 

• 선택 목록(<select>)

<option> 태그를 사용해 여러 항목 지정

 

항목에 접근

document.testForm.major.options[4]

// 항목의 텍스트에 접근
document.testForm.major.options[4].innerText

 

선택한 옵션 찾기

document.testForm.major.options.selectedIndex

선택한 항목의 인덱스 = selectMenu.selectedIndex

 

 

• 라디오 버튼, 체크 상자

라디오 버튼: 한 가지 항목만 선택 가능

(같은 name을 가진 요소 여러 개)

document.testForm.subject[0]
document.testForm.subject[1]
document.testForm.subject[2]

 

체크 상자: 여러 항목 선택 가능

(모두 다른 name 값을 가짐)

document.testFrom.mailing1
document.testFrom.mailing2
document.testFrom.mailing3

 

* checked 속성

기본 값은 false이고 항목이 선택되면 true로 바뀜

document.testForm.subject[0].checked

document.testFrom.mailing1.checked

이제 뒤에 나머지 실습하고 피피티 만들고 8장 실습 안 한 거 해야디 ^_ㅠ