Transcript PowerPoint Template

www.kyobobook.co.kr
웹 표준을 위한 HTML5 & CSS3 & javascrpt & JQuery
05장. HTML5 폼 태그
교보문고
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
• 폼 양식을 만드는 <form> 태그
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
• 한 줄 입력 받는 입력상자
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
• 암호를 입력받기 위한 암호 입력 상자
• 양식을 설명하는 label 태그
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
• 여러 줄 입력할 수 있는 글상자
<textarea rows="12" cols="70" name="content">
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
• 여러 줄 입력할 수 있는 글상자
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
• 체크 박스
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
• 체크 박스
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
• 배타적 선택을 하는 라디오 버튼
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
• 배타적 선택을 하는 라디오 버튼
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
• 목록 상자
콤보 상자 : size에 값을 지정하지 않거나 1을 지정하면 콤보 상자가
만들어집니다.
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
• 목록 상자
리스트 박스 : size 속성을 추가하여 여기에 2이상의 값을 지정하면
리스트 박스가 만들어집니다.
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
• 명령을 지시하는 버튼
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
• 전송과 취소 버튼
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 01 입력 양식으로 사용자와의 대화하자!
• 파일 업로드 버튼
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 02 HTML5 입력 양식
• HTML5에 추가된 input 태그의 type 속성
• 이메일 입력 양식
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 02 HTML5 입력 양식
• 홈페이지 주소 입력 양식
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 02 HTML5 입력 양식
• 전화번호 입력 양식
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 02 HTML5 입력 양식
• 검색 입력 양식
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 02 HTML5 입력 양식
• 숫자 입력 양식
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 02 HTML5 입력 양식
• 범위 입력 양식
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 02 HTML5 입력 양식
• 날짜 입력 양식
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 02 HTML5 입력 양식
• 색상 입력 양식
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 03 HTML5 새로운 속성
• 힌트를 위한 placeholder 속성
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 03 HTML5 새로운 속성
• 자동 포커싱을 위한 autofocus 속성
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 03 HTML5 새로운 속성
• 필수 입력을 위한 required 속성
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 03 HTML5 새로운 속성
• 정규 표현식에 대한 유효성 검사를 위한 pattern 속성
www.kyobobook.co.kr
05장. HTML5 폼 태그
SECTION 04 회원 가입 페이지 만들기
www.kyobobook.co.kr