Download presentation
Presentation is loading. Please wait.
1
Chapter06 폼 HTML5 Programming
2
Contents Chapter06 1. 입력 타입 2. 폼 요소 3. 폼 속성 폼
3
입력 타입 Chapter06 input 요소 입력 양식 삽입 폼
4
입력 타입 Chapter06 form 요소 입력 양식 폼 지정 폼
5
입력 타입 Chapter06 input 요소의 type 속성에 추가된 입력 타입 폼
6
입력 타입 Chapter06 추가된 입력 타입에 따른 브라우저 지원 현황 폼
7
선 스타일 지정하기 Chapter06 선 스타일 지정하기 선을 그리는 데 있어서 선 두께, 선 끝부분 스타일, 선이 꺾이는 부분 스타일, 선 색 등은 특정 속성에 값을 지정함으로써 다양한 변화를 줄 수 있음 폼
8
email 입력 타입 email 입력 타입 입력한 이메일에 대하여 유효성을 체크해주는 역할
Chapter06 입력 타입 입력한 이메일에 대하여 유효성을 체크해주는 역할 사용자가 입력한 데이터가 이메일 형식에 맞는지를 자동으로 체크 폼
9
url 입력 타입 Chapter06 url 입력 타입 입력한 URL 주소에 대한 유효성을 체크해주는 역할 폼
10
number 입력 타입 number 입력 타입 숫자를 받기 위한 입력 타입
Chapter06 number 입력 타입 숫자를 받기 위한 입력 타입 입력 받는 숫자는 사용자가 지정한 특정 범위의 숫자만이 해당 속성 폼
11
range 입력 타입 range 입력 타입 number 입력 타입과 같이 특정 범위의 숫자를 입력 받기 위해 사용
Chapter06 range 입력 타입 number 입력 타입과 같이 특정 범위의 숫자를 입력 받기 위해 사용 범위를 표시하는 방식은 슬라이더로 나타냄 속성 폼
12
Date Pickers 입력 타입 Date Pickers 입력 타입
Chapter06 Date Pickers 입력 타입 시간, 일, 주, 월, 년 등의 선택 가능 여부에 따라 6가지의 달력 관련 입력 타입이 있음 폼
13
Date Pickers 입력 타입 date 입력 타입 month 입력 타입 week 입력 타입 time 입력 타입
Chapter06 date 입력 타입 month 입력 타입 week 입력 타입 time 입력 타입 datetime 입력 타입 datetime-local 입력 타입 폼
14
search 입력 타입 Chapter06 search 입력 타입 검색어를 입력 받기 위해 사용 폼
15
color 입력 타입 Chapter06 color 입력 타입 색상을 입력 받기 위해 사용 폼
16
프로그램 6-1 Chapter06 01: <!DOCTYPE html> 02: <html>
03: <head> 04: <meta charset="utf-8" /> 05: <title> 폼 </title> 06: </head> 07: 08: <body> 09: <form> 10: <table> 11: <tr> 12: <td> 이름 </td> 13: <td> <input type="text" name="name"> </td> 14: </tr> 15: <tr> 16: <td> 이메일 </td> 17: <td> <input type=" " name=" "> </td> 18: </tr> 19: <tr> 20: <td> 홈페이지 </td> 21: <td> <input type="url" name="homepage"> </td> 22: </tr> 23: <tr> 24: <td> 생년월일 </td> 25: <td> <input type="date" name="birthday"> </td> 26: </tr> 폼
17
프로그램 6-1 Chapter06 27: <tr> 28: <td> 대학 졸업 년도 </td>
29: <td> <input type="number" name="graduate" min="1990" max="2020"> 30: </td> 31: </tr> 32: <tr> 33: <td> 영어 평가 등급 </td> 34: <td> <input type="range" min="1" max="10" value="5"> </td> 35: </tr> 36: <tr> 37: <td> 좋아하는 색 </td> 38: <td> <input type="color" name="color"> </td> 39: </tr> 40: <tr> 41: <td> <input type="submit"> </td> 42: </tr> 43: </table> 44: </form> 45: </body> 46: </html> 폼
18
폼 요소 Chapter06 HTML5에 추가된 폼 요소 폼
19
datalist 요소 datalist 요소 텍스트 박스에 대한 옵션 리스트를 보여줌 datalist 요소 브라우저 지원 현황
Chapter06 datalist 요소 텍스트 박스에 대한 옵션 리스트를 보여줌 datalist 요소 브라우저 지원 현황 폼
20
datalist 요소 Chapter06 datalist 요소 폼
21
keygen 요소 keygen 요소 사용자들 간에 통신을 할 때 안전하게 데이터를 주고받기 위해 사용
Chapter06 keygen 요소 사용자들 간에 통신을 할 때 안전하게 데이터를 주고받기 위해 사용 데이터를 안전하게 주고받기 위해서는 송신자는 데이터를 암호화해서 보내고, 수신자는 해당 데이터를 복호화해서 확인 데이터를 전송할 때 키를 생성하는 역할을 함 keygen 요소 브라우저 지원 현황 폼
22
keygen 요소 Chapter06 keygen 요소 폼
23
output 요소 output 요소 폼 내의 다양한 값들을 출력할 때 사용
Chapter06 output 요소 폼 내의 다양한 값들을 출력할 때 사용 input 요소의 값이 변하면 onforminput 이벤트가 발생하고 output 요소의 onforminput 속성 값으로 지정한 연산식이 계산되어 결과 값이 출력됨 output 요소 브라우저 지원 현황 폼
24
output 요소 Chapter06 output 요소 폼
25
프로그램 6-2 Chapter06 01: <!DOCTYPE html> 02: <html>
03: <head> 04: <meta charset="utf-8" /> 05: <title> 폼 </title> 06: </head> 07: 08: <body> 09: <form> 10: <table> 11: <tr> 12: <td> 이름 </td> 13: <td> <input type="text" name="name"> </td> 14: </tr> 15: <tr> 16: <td> 이메일 </td> 17: <td> <input type=" " name=" "> </td> 18: </tr> 19: <tr> 20: <td> 홈페이지 </td> 21: <td> <input type="url" name="homepage"> </td> 22: </tr> 23: <tr> 24: <td> 생년월일 </td> 25: <td> <input type="date" name="birthday"> </td> 26: </tr> 27: <tr> 28: <td> 대학 졸업 년도 </td> 29: <td> <input type="number" name="graduate" min="1990" max="2020"> </td> 30: </tr> 폼
26
프로그램 6-2 Chapter06 31: <tr> 32: <td> 영어 평가 등급 </td>
33: <td> <input type="range" name="level" min="1" max="10" value="5"> 34: <output name="ret" onforminput="value=level.value"></output> 35: </td> 36: </tr> 37: <tr> 38: <td> 좋아하는 TV 프로그램 </td> 39: <td> <input type="text" name="site" list="site"> 40: <datalist id="site"> 41: <option value="무한도전"> 42: <option value="1박2일"> 43: <option value="런닝맨"> 44: </datalist> 45: </td> 46: </tr> 47: <tr> 48: <td> 좋아하는 색 </td> 49: <td> <input type="color" name="color"> </td> 50: </tr> 51: <tr> 52: <td> 53: <keygen name="key"> 54: <input type="submit"> 55: </td> 56: </tr> 57: </table> 58: </form> 59: </body> 60: </html> 폼
27
프로그램 6-2 Chapter06 폼
28
폼 속성 Chapter06 HTML5에 새로 추가된 input 요소의 속성 폼
29
placeholder 속성 placeholder 속성 입력 타입에 기본 텍스트를 지정하는 역할
Chapter06 placeholder 속성 입력 타입에 기본 텍스트를 지정하는 역할 placeholder 속성 브라우저 지원 현황 폼
30
autofocus 속성 autofocus 속성
Chapter06 autofocus 속성 웹 페이지의 로딩이 끝남과 동시에 자동으로 지정한 입력 타입에 포커스가 위치하게 하는 역할 autofocus 속성 브라우저 지원 현황 폼
31
autocomplete 속성 autocomplete 속성 지정한 입력 항목의 값을 자동 완성하는 역할
Chapter06 autocomplete 속성 지정한 입력 항목의 값을 자동 완성하는 역할 autocomplete 속성 브라우저 지원 현황 폼
32
required 속성 required 속성 필수 입력 항목을 지정하는 역할 required 속성 브라우저 지원 현황
Chapter06 required 속성 필수 입력 항목을 지정하는 역할 required 속성 브라우저 지원 현황 폼
33
pattern 속성 Chapter06 pattern 속성 정규 표현식을 지정하기만 하면 자동으로 사용자가 입력한 값에 대한 유효성 검사가 되고 값에 따라 오류 메시지가 출력 pattern 속성 브라우저 지원 현황 폼
34
프로그램 6-3 Chapter06 00: <!DOCTYPE html> 01: <html>
02: <head> 03: <meta charset="utf-8" /> 04: <title> 폼 </title> 05: </head> 06: 07: <body> 08: <form> 09: <table> 10: <tr> 11: <td> 이름 </td> 12: <td> <input type="text" name="name“ placeholder="이름을 입력하시오." autofocus required> </td> 13: </tr> 14: <tr> 15: <td> 전화번호 </td> 16: <td> <input type="text" name="phone" pattern="\d{2,3}-\d{3}-\d{4}$" placeholder="전화번호를 입력하시오." required></td> 17: </tr> 18: <tr> 19: <td> 이메일 </td> 20: <td> <input type=" " name=" " placeholder="이메일을 입력하시오." autocomplete="off" required> </td> 21: </tr> 22: <tr> 23: <td> 홈페이지 </td> 24: <td> <input type="url" name="homepage" placeholder="개인 홈페이지 주소를 입력하시오."> </td> 25: </tr> 폼
35
프로그램 6-2 Chapter06 26: <tr> 27: <td> 생년월일 </td>
28: <td> <input type="date" name="birthday" required> </td> 29: </tr> 30: <tr> 31: <td> 대학 졸업 년도 </td> 32: <td> <input type="number" name="graduate" min="1990" max="2020"> 33: </td> 34: </tr> 35: <tr> 36: <td> 영어 평가 등급 </td> 37: <td> <input type="range" name="level" min="1" max="10" value="5"> 38: <output name="ret" onforminput="value=level.value"></output> 39: </td> 40: </tr> 41: <tr> 42: <td> 좋아하는 TV 프로그램 </td> 43: <td> <input type="text" name="site" list="site" placeholder="좋아하는 TV프로그램을 입력하시오."> 44: <datalist id="site"> 45: <option value="무한도전"> 46: <option value="1박2일"> 47: <option value="런닝맨"> 48: </datalist> 49: </td> 50: </tr> 폼
36
프로그램 6-2 Chapter06 51: <tr> 52: <td> 좋아하는 색 </td>
53: <td> <input type="color" name="color"> </td> 54: </tr> 55: <tr> 56: <td> 57: <keygen name="key"> 58: <input type="submit"> 59: </td> 60: </tr> 61: </table> 62: </form> 63: </body> 64: </html> 폼
Similar presentations
