[Javascript] Form

Form

• 은 사용자에게 정보를 입력할 수 있는 공간, 방법을 제공하고 입력된 정보를 서버로 전송하는 형식이자 도구
• 사용자가 입력하는 데이터의 종류, 내용이 올바르게 입력할 수 있도록 UI를 잘 구성하고 유효한 입력값만 전송되도록 자바스ㅡ립트로 제어할 수 있어야

관련 하위 요소

• 사용자 정보 입력을 위한 여러 폼 요소들의 상위 요소
• type속성에 따라 다양한 모양으로 표현되는 기본 입력 요소
  • 기본적으로 20개 이상의 type이 존재
• 드롭다운 목록을 정의하는 폼 요소 : select의 내부 선택지 역할 하는 폼 요소
• : 마우스 클릭이 가능한 버튼 요소 (이벤트 트리거 역할)
• : 관련 데이터 간 그룹을 만들기 위해 영역으로 표현하는 요소 - : fieldset의 타이틀 표현 요소
• : 입력 요소에 대한 라벨 정의

에서 사용하는 이벤트 트리거

• onfocus : 입력 포커스 얻을 때 발생
• onblur : 입력 포커스 잃을 때 발생
• onchange : 폼 요소의 값이 변경되었을때 발생
• oninput : 입력 요소에 값을 입력할 때 발생
• onsearch : 사용 시 입력 후 Enter키 누른 경우 발생
• onselect : 폼 요소의 텍스트가 마우스 드래그 등으로 선택되었을 때 발생
• oninvalid : 폼 요소의 입력값이 유효하지 않을 때 발생
• onreset : 초기화 버튼 클릭 시 발생
• onsubmit : 전송 버튼 클릭 시 발생

입력 제어 속성

• required : 필수 입력 또는 선택 사항으로 강제
• readonly: 읽기 전용
• disabled: 비활성 입력 요소

<input type="text" /> 내부에서 이전엔 required='required', disalbed='disabled' 같이 
속성과 속성값을 동어 반복으로 표현한 경우가 있었는데 이것은 이전 HTML버전인 XHTML의 형식이 남아있기 때문
XHTML은 HTML에 XML문법을 도입해 엄격한 형식으로 웹 문서 오류를 줄이고 확장성, 유연성을 향상시키기
위해 HTML4.01에 적용된 과도기적 사양 
HTML5가 만들어지면서 위와같이 쓰지 않아도 되게 됨, 사용해도 무방

XML : eXtensible Markup Language
-> 데이터 교환 표준으로 데이터 저장, 전송을 위해 디자인된 언어

XML 문법
- 열기 태그가 있으면 반드시 닫기 태그가 있을 것
- 요소명과 속성명은 소문자여야 할 것
- 속성 값은 반드시 ""로 묶을 것 

• pattern : 전화번호, 우편번호 등 입력 타입 형식이 정해진 입력값의 패턴을 강제 (정규표현식 사용)

<input type="text" pattern="[0-9]{5}" /> // 우편번호 5자리 입력 받을 시 사용하는 경우

입력 요소 이벤트

• 이벤트 트리거를 통해 발생한 이벤트 감지 시 원하는 동작을 시킬 수 있음

var slider = document.querySelector('input[name="range"]')
var rangeValue = document.querySelector('input[name="rangeValue"]')
var img = document.querySelector('img')
rangeValue.value = slider.value; 

slider.oninput = function() {
	rangeValue.value = this.value;
	img.styles.transform = `rotate(${this.value}deg)`
}

<form action="server.html" onsubmit="validateForm(event)">
...
</form>

function validateForm(e){
	e.preventDefault() // form의 기본 기능을 수행 치 못하게 함
}