14장 폼스크립트

14장 폼스크립트

이 포스팅은 "프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)"에서 발췌 요약한 것입니다.
 

- 폼의 기본에 관한 이해
- 텍스트 박스 유효성 검사와 상호작용
- 다른 폼 컨트롤 사용

자바스크립트의 원래 목적 중 하나는 폼 처리를 브라우저에서 분담하여 서버까지 왕복하는 일을 줄이는 것이었는데 웹 폼에서 일반적인 문제에 대한 네이티브 솔루션을 제공하지 못하자 개발자들은 자바스크립트로 필드의 유효성을 검사하고 표준 폼 컨트롤의 기본 동작을 확장하기 시작했다. 

14.1 폼 기본

웹 폼은 HTML에서는 <form> 요소로, 자바스크립트에서는 HTMLFormElement 타입으로 표현된다. HTMLFormElement에서는 HTMLElement를 상속하므로 다른 HTML 요소와 같은 프로퍼티를 가진다. HTMLFormElement에는 다음 프로퍼티와 메서드가 추가된다.

- acceptCharset - 서버가 처리할 수 있는 문자셋, HTML의 accept-charset 속성과 같다.

- action - 요청을 보낼 URL, HTML의 action 속성과 같다.

- elements - 폼에 있는 컨트롤 전체의 HTMLCollection이다.

- enctype - 요청의 인코딩 타입, HTML의 enctype 속성과 같다.

- length- 폼에 있는 컨트롤 개수이다.

- method - HTTP 요청 타입이며 일반적으로 "get"이나 "post"이다. HTML의 method 속성과 같다.

- name - 폼의 이름, HTML의 name 속성과 같다.

- reset() - 품 필드를 모두 기본 값으로 리셋한다.

- submit() - 폼을 전송한다.

- target - 요청을 보내고 응답을 받을 창 이름이다. HTML의 target 속성과 같다.

<form> 요소에 대한 참조를 얻는 데 가장 많이 쓰이는 방법은 id속성을 지정한 후 getElemenetById()를 이용하는 것이다. 

 var form = document.getElementById("form1");

폼은 document.forms 컬렉션을 통해서 숫자형 인덱스와 name으로도 접근할 수 있다.

var firstForm = document.forms[0];   // 페이지의 첫 번째 폼
var myForm = document.forms["form2"];   // 이름이 "form2"인 폼

폼에는 id와 name을 모두 쓸 수 있고 두 값이 같을 필요는 없다. 

14.1.1 폼 전송

전송 버튼은 <input>요소나 <button> 요소의 type 속성을 "submit"으로 지정해서 정의하고 이미지 버튼은 <input> 요소의 type 속성을 "image"로 지정해서 정의한다. 

<input type="submit" value="Submit Form">  // 범용 전송 버튼
<button type="submit">Submit Form</button>  // 커스텀 전송 버튼
<input type="image" src="graphic.gif">  // 이미지 버튼

이들 버튼 타입이 폼에 들어있으면 폼 컨트롤에 포커스가 있는 상태에서 엔터 키를 눌러도 폼이 전송된다.

14.1.2 폼 리셋

리셋 버튼은 <input>이나 <button>요소의 type 속성을 "reset"으로 지정하여 생성한다.

<input type="reset" value="Reset Form"> // 범용 리셋 버튼
<button type="reset">Reset Form</buttom>  // 커스텀 리셋 버튼

14.1.3 폼 필드

폼 요소도 네이티브 DOM 메서드로 접근할 수 있는데 폼 요소는 각 폼의 프로퍼티인 elements 컬렉션에 속한다.  elements 컬렉션은 폼에 포함된 모든 폼 필드에 대한 참조의 순서 있는 목록이며 <input>, <textarea>, <button>, <selet>, <fieldset> 요소가 이 컬렉션에 속하고, 인덱스와 name 두 가지로 접근 가능하다. 

공통 폼 필드 메서드

각 폼필드에 공통인 메서드는 focus()와 blue()이다. focus() 코드는 요소의 type속성이 hidden이거나 display 또는 visibility로 숨긴 필드일 경우 에러가 발생하므로 HTML5에서는 폼 필드에 autofocus 속성을 도입하여 이를 지원하는 브라우저에서는 자바스크립트를 쓰지 않아도 자동으로 요소에 포커스를 옮긴다. focus()의 반대로 요소에서 포커스를 제거하는 메서드는 blur()이다. 

폼 필드 공통 이벤트

- blur : 필드가 포커스를 잃을 때 발생

- change : 필드가 포커스를 잃고 <input>이나 <textarea> 요소에서는 value가 바뀔 때 <select> 요소에서는 선택된 옵션이 바뀔때 발생

- focus : 필드가 포커스를 받을 때 발생

14.2 텍스트 박스 스크립트

HTML에는 한 줄짜리 텍스트 박스인 <input> 요소와 여러 줄 텍스트 박스인 <textarea> 요소가 있다. value 속성은 텍스트 박스의 초기 값이며 maxlength 속성은 텍스트 박스에 최대 몇 글자까지 입력할 수 있는지 나타낸다.  두 텍스트 박스는 모두 콘텐츠를 value 프로퍼티에 저장한다. 따라서 다음과 같이 value 프로퍼티의 값을 통해 텍스트 박스의 값을 읽고 쓸수 있다. 

14.3 <select> 요소 스크립트

SELECT 박스는 <select> 요소와 <option> 요소로 생성한다. 

- 선택된 옵션이 없으면 SELECT 박스의 값은 빈 문자열이다.

- 선택된 옵션이 있고 해당 옵션에 value 속성이 있다면 SELECT 박스의 값은 선택된 옵션의 value 속성이다. value 속성이 빈 문자열이어도 그대로 적용된다. 

- 선택된 옵션에 value 속성이 없으면 SELECT 박스의 값은 해당 옵션의 텍스트이다. 

- 여러 옵션이 선택되었으면 SELECT 박스의 값은 선택된 첫 번째 옵션을 따르며 이전 규칙을 적용한다. 

14.4 폼 직렬화

Ajax가 등장하면서 '폼직렬화'가 주요 과제가 되었다.  자바스크립트로 폼을 직렬화 할때는 type, name, value 프로퍼티를 함께 사용한다.

- 필드 이름과 값을 URL 인코드하고 앰퍼샌드로 구분한다.

- 비활성 필드는 전송하지 않는다. 

- 체크 박스와 라디오 버튼은 체크된 것만 전송한다. 

- type이 "reset"이나 "button"으로 지정된 버튼은 전송하지 않는다.

- 다중 선택 필드는 선택된 항목을 모두 전송한다.

- 폼을 전송할 떄 전송 버튼을 클릭했다면 해당 버튼을 전송하며 그렇지 않다면 전송 버튼은 보내지 않는다. type이 "image"로 지정된 <input> 요소는 전송 버튼과 같이 취급한다. 

- <select> 요소의 값은 선택된 <option> 요소의 value 속성이다. <option> 요소에 value 속성이 없다면 해당 요소의 텍스트를 값으로 사용한다. 

serialize() 함수는 문자열을 쿼리스트링 형식으로 반환하지만 다른 직렬화 형식으로 쉽게 바꿀수 있다.

14.5 리치 텍스트 편집

웹 애플리케이션에서 가장 흔히 필요한 기능은 웹 페이지의 리치 텍스트를 편집하는 기능('위지웍WYSIWYG')으로 기본 테크닉은 페이지에 빈 HTML 파일을 포함한 iframe 을 삽입하는 것이다. 편집하려면 반드시 designMode를 "on"으로 설정해야 하며 문서를 완전히 불러온 후에만 가능하다.