자바스크립트 9강(폼과 자바스크립트)

 1. 폼 요소에 접근하는 여러가지 방법

- id 값은 폼 요소 1개에 접근하여 사용

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

document.querySelector("#billingName").value;

- class 값은 여러 요소를 한번에 가져와 배열 형태로 저장하고 사용

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

document.querySelectorAll(".input-box").value;

2. 폼 검증 하기

<input> 태그 유형으로 폼 검증

<input type="email"> : 이메일 주소 필드, 이메일 주소 형식에 맞지 않으면 오류 메세지 표시

<input type="tel"> : 전화번호 필드, 숫자가 아닌 값이 입력되면 오류 메세지 표시

<input type="url"> : 사이트 주소 필드, http: 로 시작하지 않으면 오류 메세지 표시

3. <input> 태그의 속성

autocomplete : 자동 완성 기능을 켜고 끄는 속성

autofocus : 해당 필드에 마우스 커서를 자동으로 표시

placeholder :  필드 안에 힌트가 표시되고 사용자에게 어떤 내용을 입력해야 하는지 알려줌.

required : 필수 입력 항목으로 지정. 필드가 작성되지 않으면 오류 메시지 표시