HTML5 & API 입문 (3 차 ) 발표자 : 김선영. 3 차 발표 내용 1.06. 폼 요소 2.07. 드래그 & 드롭 API.

Presentation on theme: "HTML5 & API 입문 (3 차 ) 발표자 : 김선영. 3 차 발표 내용 1.06. 폼 요소 2.07. 드래그 & 드롭 API."— Presentation transcript:

1 HTML5 & API 입문 (3 차 ) 발표자 : 김선영

2 3 차 발표 내용 1.06. 폼 요소 2.07. 드래그 & 드롭 API

3 06. 폼 요소 6.1 Form? 6.2 Form 작성하기 6.3 HTML5 에서 달라진 점 6.4 input 요소와 속성 6.5 그 밖의 새로운 요소 6.6 입력 값 검증 6.7 자동완성 기능 제어 6.8 폼 요소의 이벤트 6.9 브라우저 별 form 보기 예

4 06. 폼 요소 6.1 Form? - 자료의 입력이나 선택 등 웹 페이지에서 사용자와의 interaction 을 가능하게 해주는 UI 기술. 사용자가 입력한 정보를 서버로 보내어 처리. - 예 ) 로그인, 회원가입, 피자주문 화면 등 Customer name : Telephone :. Submit order

5 06. 폼 요소 6.2 Form 작성하기 1) User Interface 작성 (form design) 2) 서버 프로그램 구현 (php, jsp, servlet 등 ) 3) UI 와 서버가 통신하도록 구성 <form method=‘POST’ enctype=‘application/x-www-form-urlencoded’ action=‘https://pizza.example.com/order.jsp’> Customer name : Order

6 06. 폼 요소 6.3 HTML5 에서 달라진 점 - input 요소에 여러 가지 타입이 추가 : search, tel, url, email, date, time, number, range, color - file 요소 기능 강화 : 여러 개 파일 선택 가능, 선택할 수 있는 파일 종류 지정, 파일 데이 터에 Javascript 를 이용한 접근 가능 - 새로운 요소와 속성의 추가 : output, keygen, progress, meter 요소 placeholder, autofocus 속성 등 - 입력 값 검증을 위한 다양한 속성 및 API 추가 : required, pattern, maxLength, min, max 등. - 자동 완성 기능의 제어 : autocomplete 속성, datalist, option 요소

7 06. 폼 요소 6.4 input 요소와 속성 - input 요소의 다양한 type 과 속성표 참고 : HTML5_API 입문 _3 차 _ 첨부 \input 속성표.xlsHTML5_API 입문 _3 차 _ 첨부 \input 속성표.xls - 추가된 type search, tel, url, email, date, number, range, color 등 - 기능의 강화 file, submit, image - 추가된 속성 : 입력 값 검증, 자동완성 기능을 위한 속성 등

8 06. 폼 요소 6.4 input 요소와 속성 - 추가된 type search : 검색 키워드 입력을 위한 텍스트 입력 필드 브라우저에 따라 모양이 달라지는 효과 사파리의 경우 최근 검색어 보여주는 기능 제공 tel : 전화번호 입력을 위한 텍스트 입력 필드 브라우저에 따라 모양이 달라지는 효과 스마트폰 브라우저에서는 전화번호 입력을 위한 특별한 UI 가 표시되기도 함.

9 06. 폼 요소 6.4 input 요소와 속성 - 추가된 type url : URL 입력을 위한 텍스트 입력 필드 정확한 URL 형식의 문자열을 입력해야 함. email : 이메일 주소 입력을 위한 텍스트 입력 필드 정확한 이메일 주소 형식의 문자열을 입력해야 함. multiple 속성 지정 시 쉼표로 구분하여 여러 개의 이메일 주소 입력 가능

10 06. 폼 요소 6.4 input 요소와 속성 - 추가된 type date, time, datetime, month, week, datetime-local : 날짜와 시간 입력을 위한 필드 오페라 10 에서는 날짜 입력을 위한 달력 제공 min, max, step 속성으로 값의 범위 및 간격 지정

11 06. 폼 요소 6.4 input 요소와 속성 - 추가된 type number : 숫자 입력을 위한 필드 min, max, step 속성 이용 가능 range : 일정 범위의 숫자 입력을 위한 필드 min, max, step 속성 이용 가능 color : 색 선택 필드, ‘#000000’ 형식의 문자열 입력 색 선택 대화상자 제공될 것으로 예상됨.

12 06. 폼 요소 6.4 input 요소와 속성 - 기능의 강화 file : 파일 여러 개 선택 가능해짐.(multiple 속성 ) 선택할 수 있는 파일의 종류를 지정할 수 있음. 파일 데이터에 JS 를 통한 접근 가능 예제 6.4 참고 예제 6.4 참고

13 06. 폼 요소 6.4 input 요소와 속성 - 기능의 강화 submit, image ( 폼 송신 버튼 ) : 폼 전송 버튼 formmethod/formaction/formenctype 속성을 이용하여 form 요소의 method/action/enctype 속성 지정 가능 <input type=‘submit’ formmethod=‘GET’ formaction=‘/top’ formnovalidate value=‘ 돌아가기 ’ />

14 06. 폼 요소 6.5 그 밖의 새로운 요소 - output : 직접 입력할 수 없는 값으로 폼 송신 시 같이 전송됨. 예제 6.7 예제 6.7 + = - keygen : 공개키 암호 방식의 키 쌍을 생성하기 위한 폼 요소 예제 6.8 예제 6.8

15 06. 폼 요소 6.5 그 밖의 새로운 요소 - progress : 작업이 진행 중임을 나타내는 시각 요소 예제 6.10 예제 6.10 0 / 0 완료... function updateProgress(value, max) { var p = document.getElementById("progressBar"); //progress 요소의 속성값을 변경 p.max = max, p.value = value; //progress 요소 내의 표시를 변경 p.getElementByClassName("progressValue")[0].textContent = value; p.getElementByClassName("progressMax")[0].textContent = max; }

16 06. 폼 요소 6.5 그 밖의 새로운 요소 - meter : 일정 범위 안의 비율이나 수치를 시각적으로 표현하기 위한 요소 min( 최소값 ), max( 최대값 ), value( 현재 값 ), low( 값이 낮음 ), high( 값 이 높음 ), optimum( 최적 값 ) 예제 6.12 예제 6.12 <meter id='disk-usage' title=' 기가바이트 ' max='1500' min='0' value='460' low='150' high='1350'> 1500 GB 중 460 GB 사용 중 주의 ) 속성 값 지정 시 다음 의 조건을 만족해야 한다. min <= value <= max min <= low <= max min <= high <= max min <= optimum <= max

17 06. 폼 요소 6.6 입력 값 검증 1) 속성 이용 required : 필수 입력 pattern : 입력 값의 패턴을 정규 표현식 이용하여 지정 maxLength : 최대 입력 가능한 문자 수 지정 min, max : 숫자 or 날짜 형식의 필드에서 최대 / 최소값 step : 숫자 or 날짜 형식의 필드에서 값의 간격 → 위의 속성을 이용하면 폼 전송 시 입력 값의 검증이 자 동으로 이루어짐.

18 06. 폼 요소 6.6 입력 값 검증 2) Javascript API 이용 boolean willValidate : 입력 값 검증을 수행할지 말지 반환 ValidityState validity : 검증 상태 값을 확인 boolean checkValidity : 입력 값 검증을 명시적으로 실행 void setCustomValidity(DOMString err) : 직접 작성한 입력 값 검증에 통과하지 못할 경우의 에러 메시지 설정. 브라우저 고유의 방법으로 표시함. 예제 6.13 예제 6.13

19 06. 폼 요소 6.7 자동완성 기능 제어 - 명시적으로 on/off - 입력 값 후보 목록을 직접 작성 가능함. email : fruit :

20 06. 폼 요소 6.8 폼 요소의 이벤트 - 기존의 이벤트 (input, change) - 같은 폼 안의 모든 요소에 전파하는 forminput, formchange 이벤트 추가. <form onforminput='sendButton.disabled = message.value.lenght <= 0 || message.value.length > 140;'> 140 자 이내로 입력해 주십시오. 남음 : 140 문자 전송

21 06. 폼 요소 6.9 브라우저 별 form 보기 예 - form2.htmlform2.html

22 07. 드래그 & 드롭 API 7.1 DND API 개요 7.2 DND API 이용 방법 7.3 다른 애플리케이션에서의 DND 7.4 DND 관련 이벤트 목록 7.5 DataTransfer 의 속성과 메소드 7.6 DND API 예제

23 07. 드래그 & 드롭 API 7.1 DND API 개요 - HTML4.01 : mouse 이벤트를 이용하여 DND 구현 → 스크립트 처리가 복잡, 이벤트 증식 현상, CPU 부하로 인한 오작동 빈번 - HTML5 : DND API 제공 → File API 와 함께 사용하여 DND 로 파일 업로드 기능 구현 가능.

24 07. 드래그 & 드롭 API 7.2 DND API 이용 방법 1) 드래그 대상을 지정 : 드래그 대상이 웹 애플리케이션의 요소라면 draggable 속성 지정 - draggable=‘true’ 드래그 가능 - draggable=‘false’ 드래그 불가능 - draggable( 값 없음 ) 만 가능 2) 드래그 시작 이벤트 처리 (dragstart) : 드래그 대상을 event 의 DataTransfer 객체에 담음. 3) 드롭 대상 요소의 이벤트 처리 (dragenter, dragover, drop) : 기본값 상태에서는 드롭을 받아들이지 않음. - dragenter, dragover : 드롭을 받아들이도록 기본값 취소 - drop : event 의 DataTransfer 객체로부터 드래그 데이터를 얻음. 예제 7.2 예제 7.2

25 07. 드래그 & 드롭 API 7.3 다른 애플리케이션에서의 DND - DataTransfer : 드래그 & 드롭으로 데이터를 주고받을 때 이용. - 드래그 대상은 외부 애플리케이션 데이터이므로 drop 요소와 drop 관 련 이벤트 핸들러만 작성. - event.dataTransfer.getData(type) : 드롭 시 데이터 가져옴. - type : 임의의 문자열, 미리 정의된 타입 문자열, MIME 문자열 이용 가능 - 미리 정의된 타입 문자열 Text : 단순 문자열로 MIME 타입 text/plain 과 같음. URL : URL 문자열. MIME 타입 text/uri-list 와 같음. Files : 브라우저 외의 애플리케이션으로부터 드래그한 파일. - 예제 7.4 OpenOffice.org Calc( 스프레드시트 ) 에서 테이블 가져오기 예제 7.4

26 07. 드래그 & 드롭 API 7.4 DND 관련 이벤트 목록 이벤트이벤트 발생하는 곳설명 dragstart 드래그 대상 요소드래그가 시작되었음 drag 드래그 대상 요소드래그 중 dragend 드래그 대상 요소드래그 종료 dragenter 드래그 중 마우스 커서가 위치한 요소드래그 조작이 요소 안의 범위에 들어옴. dragover 드래그 중 마우스 커서가 위치한 요소드래그 조작이 요소 안의 범위에 통과 중 dragleave 드래그 중 마우스 커서가 위치한 요소드래그 조작이 요소 안의 범위에 벗어남. drop 드롭 요소드롭되었음

27 07. 드래그 & 드롭 API 7.5 DataTransfer 의 속성과 메소드 - 드래그 & 드롭되는 데이터를 담는 객체 - 드래그 이벤트의 dataTransfer 속성으로 객 체 얻음. event.dataTransfer - DataTransfer 의 속성과 메소드 참고DataTransfer 의 속성과 메소드 참고

28 07. 드래그 & 드롭 API 7.6 DND API 예제 - Drag and drop 샘플 #1 http://html5demos.com/drag - Drag and drop 샘플 #2 http://html5demos.com/drag-anything - Drag and drop 샘플 #3 ( 소스 ) 소스 http://slides.html5rocks.com/#slide13 - Drag and drop 샘플 #4 /07_DND_ex/img_drag_ex.html