HTML5 - [3] 폼, 드래그 앤 드롭, 텍스트 편집

HTML5 - [3] 폼, 드래깅 텍스트 편집

(1) HTML5에서 추가된 폼 요소

HTML5에서 추가된 폼 요소

요소	설명
datalist	input 요소의 list 속성과 함께 사용하여 입력 옵션 리스트를 생성
keygen	안전한 데이터 송수신을 위한 암호 키(비밀키, 공개키)를 생성
output	폼 내의 연산 결과를 출력
progress	어떠한 작업의 완료 진행 상황을 표시
meter	일정 범위 안의 측정 값이나 분포 비율 등을 나타낼 때 사용

(2) HTML5에서 추가된 폼 속성

HTML5에서 추가된 폼 속성

속성	설명
autocomplete	input 요소의 자동 완성 상태를 지정
novalidate	폼 제출시 입력 양식 데이터의 유효성을 검사하지 않도록 지정

(3) HTML5에서 추가된 input 요소의 입력 타입

HTML5에서 추가된 input 요소의 입력 타입

입력 타입	설명
tel, search	전화번호와 검색어 입력
url, email	절대경로의 URL 주소 입력과 이메일 주소 입력 (유효성 검사)
number, range	지정된 특정 범위의 숫자만 입력 (range → 슬라이더 형태)
color	색상 입력
date, month, week, time, datetime, datetime-local	날짜와 시간 입력

(4) HTML5에서 추가된 input 요소의 속성

HTML5에서 추가된 input 요소의 속성

속성	설명
required	필수 입력 항목을 지정
minlength	입력 항목의 최소 입력 길이를 지정
placeholder	입력 타입에 기본 텍스트(미리 참조할 문자열)를 지정
multiple	하나 이상의 값을 지정할 수 있도록 지정
min, max, step	요소에 허용된 범위의 최소값, 최대값과 유효 입력 간격을 지정
list	미리 정의된 선택 항목을 갖고 있는 요소를 구분
pattern	입력 값에 대한 유효성 검사를 위한 정규 표현식 지정
autofocus	자동으로 지정한 입력 타입에 포커스를 위치시킴
autocomplete	지정한 입력 항목의 값을 자동으로 완성
form	해당 input 요소를 특정 form 요소와 연결시키기 위한 것

(5) 드래그 앤 드롭

드래그 속성 부여 → draggable ="true | false"

이벤트

이벤트

이벤트	설명
dragstart	드래그를 시작할 때 발생
drag	드래그 중에 계속 발생
dragend	드래그를 종료했을 때 발생
dragenter	드래그 요소가 다른 요소 범위 안에 들어올 때 발생
dragleave	드래그 요소가 요소를 벗어날 때 발생
dragover	드래그 요소가 다른 요소 위에서 드래그하고 있을 때 또는 드롭 직전에 발생
drop	드롭하였을 때 발생

dataTransfer 객체의 주요 속성과 메서드

dataTransfer 객체의 주요 속성과 메서드

구분	종류	설명
메서드	setData(format, data)	드래그를 시작할 때 데이터 보관 format의 종류: text, url
	getData(format)	드롭할 때 보관된 데이터를 가져옴
	setDrawImage(element, x,y)	드래그 도중에 표시할 사용자 이미지를 지정
	clearData([format])	드래그 앤 드롭 도중에 특정 형식의 데이터 삭제
포인터 관련 속성	effectAllowed	드래그하는 동안 허용할 효과를 지정 (none, copy, link, move, copyMove, copyLink, linkMove, all, uninitialized)
	dropEffect	드래그가 끝날 때 어떤 효과를 사용할지 지정 (none, copy, link, move)

(6) 텍스트 편집

문서의 특정 요소에 대한 편집 속성 부여 → contenteditable = “true” | “false”

문서 전체에 대한 편집 속성 부여 → document.designMode = “on” | “off”

텍스트 편집 메서드

텍스트 편집 메서드

execCommand(commandId, showUI, value)
commandId 값	bold, createLink, delete, formatBlock, forwardDelete, insertImage, insertHTML, insertLineBreak, insertOrderedList, insertUnorderedList, insertParagraph, insertText, italic, redo, selectAll, subscript, superscript, undo, unlink, unselected

글을 입력후 선택을 한 다음 적용하세요 ~~

1. 폼에서 텍스트 박스에 대한 옵션 리스트를 보여주는 (datalist )요소는 텍스트 박스가 포커스를 받으면 하

단에 미리 입력한 목록 값을 표시해 주며, input 요소의 (list )속성에 (datalist )의 id를 동일하게 지정해주

어야 한다.

2. 폼에서 사용자들 간의 통신에서 안전하게 데이터를 주고 받기 위해 사용되는 것이 (keygen ) 요소이며, 생

성되는 키 쌍은 (private key )와 ( public key)이다.

3. 폼에서 (output ) 요소는 자바스크립트의 도움 없이도 폼 내의 계산 결과를 출력할 때 사용할 수 있다.

4. 폼에서 이메일에 대한 유효성을 체크해주는 입력 타입은 (email )이고 검색어를 입력 받기 위해 사용하

는 입력 타입은 (search )이다.

5. 폼에서 사용자로부터 지정된 특정 범위의 숫자 데이터를 입력 받기 위해 (number ) 타입이 사용되고 (range )

는 특정 범위의 숫자 데이터를 슬라이더 형태로 입력 받기 위한 타입이다.

6. 드래그 앤 드롭에서 특정 요소를 다른 곳으로 이동시키기 위해 사용할 수 있는 속성은 (draggable )이며 데

이터는 (data transter )객체를 통해서 전달된다.

7. 드래그 앤 드룹에서 dataTransfer 객체의 (setData ) 메서드를 사용하면 데이터를 보관하고 (getData )메서

드를 사용해야 전달된 데이터를 객체에서 꺼내오게 된다.

8. 다음 폼 속성 중에서 반드시 입력해야 할 항목을 지정할 때 사용하는 속성은?

① placeholder 속성 ② required 속성 ③ pattern 속성 ④ autofocus 속성

9. 다음 폼 속성 중에서 사용자가 하나 이상의 값을 지정할 수 있는지를 지정하는 속성은?

① list 속성 ② step 속성 ③ multiple 속성 ④ placeholder 속성

10. 드래그되는 도중에 표시될 사용자 이미지를 지정하기 위한 dataTransfer 객체의 메서드는?

① setDragImage ② addElement ③ dropEffect ④ effectAllowed

Document on jsbin.com