[Javascript] Do it! 자바스크립트 입문 - 폼과 자바스크립트

공부단 8일차 입니다.

 

폼 요소에 접근하는 방법

id 혹은 class 값을 사용해 폼 요소에 접근하기

document.querySelector("#idValue")
document.querySelector(".classValue")

 

name 값을 사용해 폼 요소에 접근하기

// form의 name값은 ship
// ex) <input type="text" id="shippingName" class="input-box" name="shippingName">


// 방법 1
document.ship.shippingName

// 방법 2
document.forms["ship"].elements["shippingName"]

// 해당 필드의 값을 알아내려면
document.ship.shippingName.value

 

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

document의 속성 중 forms 속성은 문서 안에 있는 <form> 태그를 모두 가져와 배열 형태로 반환합니다. 이 방법은 id나 class, name속성이 없을 때 사용합니다.

// 현재 문서의 첫 번째 폼의 첫 번째 요소의 값
document.forms[0].elements[0].value

 

select 태그 접근하기

document.FormName명.selectName명.options[idx값] // HTMLOptionsCollection 배열형태로 반환
document.FormName명.selectName명.options[idx값].innerText // 항목의 내용 표시
document.FormName명.selectName명.options[idx값].value // 옵션 값 서버로 전달

 

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

document.FormName명.radioTypeName명 // RadioNodeList로 반환
document.FormName명.checkboxName명 // checkbox접근

 

라디오 버튼 요소나 체크 상자 요소에는 checked 속성이 있는데 기본 값은 false입니다.

 

폼 밸리데이션

폼의 값이 입력되었는지, 입력된 값이 정해진 조건에 맞는지 등을 검사하는 작업입니다.

 

select() 함수와 focus() 함수의 차이점

select()는 사용자가 기존에 입력한 값을 선택하고, focus()는 기존에 값이 지워진 자리에 새로운 값을 입력하도록 텍스트 필드에 커서를 가져다 놓는 차이점이 있습니다.

 

<input> 태그의 새로운 속성

속성	설명
autocomplete	자동 완성 기능을 켜고 끄는 속성
autofocus	해당 필드에 마우스 커서를 자동으로 표시
placeholder	필드 안에 힌트가 표시되어 사용자에게 어떤 내용을 입력해야 하는지 알려줍니다.
required	필수 입력 항목으로 지정합니다. 필드의 값이 작성되지 않으면 오류 메시지를 표시합니다.