© 2013 인피니티북스 All rights reserved CHAPTER 3. HTML 멀티미디어와 입력요소
© 2013 인피니티북스 All rights reserved 웹브라우저와 멀티미디어 예전 방법 : HTML 안에서는 나 태그를 사용하여 야 했고 웹브라우저에는 플래시나 ActiveX 를 설치 HTML5: 와 태그가 추가
© 2013 인피니티북스 All rights reserved 오디오
© 2013 인피니티북스 All rights reserved 요소의 속성
© 2013 인피니티북스 All rights reserved 오디오 파일 형식 MP3 – 'MPEG-1 Audio Layer-3' 의 약자로 MPEG 기술의 음성 압축 기술 Wav - 윈도우에서 사용되는 표준 사운드 포맷 Ogg - 특허권을 반대하고 보다 좋은 음질을 위하여 오픈소스로 개발 되었음.
© 2013 인피니티북스 All rights reserved 오디오 예제 Your browser does not support the audio element.
© 2013 인피니티북스 All rights reserved 태그 사용 모든 브라우저가 지원하는 오디오 형식은 아직까지 없다 ! 호환성을 높이기 위하여 다음과 같이 한다. Your browser does not support the audio element.
© 2013 인피니티북스 All rights reserved 비디오
© 2013 인피니티북스 All rights reserved 요소의 속성
© 2013 인피니티북스 All rights reserved 비디오 예제 Your user agent does not support the HTML5 Video element.
© 2013 인피니티북스 All rights reserved 비디오 예제 Your user agent does not support HTML5.
© 2013 인피니티북스 All rights reserved iframe
© 2013 인피니티북스 All rights reserved 예제 INNER 이 웹페이지는 iframe 방식으로 표시됩니다.
© 2013 인피니티북스 All rights reserved 예제 <html> <body> <h1>This is a header. <h1> </body> <html> iframe 을 이용하여서 source.html 을 읽어서 여기에 표시한다.
© 2013 인피니티북스 All rights reserved 실행결과
© 2013 인피니티북스 All rights reserved 은 “divide“ 의 약자로서 페이지를 논리적인 섹션으로 분리하는 데 사용되는 태그 사자 사자는 아프리카에 살며...
© 2013 인피니티북스 All rights reserved 예제 사자 사자는 아프리카에 살며 강한 다리와 턱, 긴 송곳니 를 지니고 있다.
© 2013 인피니티북스 All rights reserved 예제 교재 오타 ! ; 를 추가해주세요 !
© 2013 인피니티북스 All rights reserved HTML 입력 양식 사용자가 입력한 내용을 서버로 보낼 때, 사용한다.
© 2013 인피니티북스 All rights reserved 입력 양식의 작동 방식
© 2013 인피니티북스 All rights reserved 요소
© 2013 인피니티북스 All rights reserved GET 방식과 POST 방식 GET 방식 GET 방식은 URL 주소 뒤에 파라미터를 붙여서 데이터를 전달하 는 방식이다.
© 2013 인피니티북스 All rights reserved GET 방식과 POST 방식 POST 방식 POST 방식은 사용자가 입력한 데이터를 URL 주소에 붙이지 않 고 HTTP Request 헤더에 포함시켜서 전송하는 방식 길이 제한이 없으며, 보안이 유지된다. POST /test/input.jsp HTTP/1.1 Host: name1=value1&name2=value2...
© 2013 인피니티북스 All rights reserved 입력 태그 이메일 : URL : 전화번호 : 색상 : 월 : 날짜 : 주 : 시간 : 지역 시간 : 숫자 : 범위 :
© 2013 인피니티북스 All rights reserved 실행결과
© 2013 인피니티북스 All rights reserved 형식
© 2013 인피니티북스 All rights reserved type 속성값
© 2013 인피니티북스 All rights reserved 텍스트 필드 이름 : 학번 :
© 2013 인피니티북스 All rights reserved 패스워드 필드 패스워드 :
© 2013 인피니티북스 All rights reserved 라디오 버튼 성별 : 남성 여성
© 2013 인피니티북스 All rights reserved 체크박스 과일 선택 : Apple Grape Orange
© 2013 인피니티북스 All rights reserved 제출 버튼과 초기화 버튼 사용자 아이디 :
© 2013 인피니티북스 All rights reserved 버튼 물품가격 : 수량 :
© 2013 인피니티북스 All rights reserved 버튼 눌러보세요 !
© 2013 인피니티북스 All rights reserved 이미지 버튼 아이디 :
© 2013 인피니티북스 All rights reserved 요소 고객의 의견
© 2013 인피니티북스 All rights reserved 요소 BMW Benz 현대자동차 기아자동차
© 2013 인피니티북스 All rights reserved 태그 인적사항입력 이름 : 전화번호 : 주소 :
© 2013 인피니티북스 All rights reserved 태그 남성 여성
© 2013 인피니티북스 All rights reserved 파일 업로드 버튼
© 2013 인피니티북스 All rights reserved HTML 입력 요소
© 2013 인피니티북스 All rights reserved 추가된 의 속성 autocomplete – 자동으로 입력을 완성한다. autofocus – 페이지가 로드되면 자동으로 입력 포커스를 갖는다. placeholder – 입력 힌트를 희미하게 보여준다. readonly – 읽기 전용 필드 required – 입력 양식을 제출하기 전에 받드시 채워져 있어야 함을 나 타낸다. pattern – 허용하는 입력의 형태를 정규식으로 지정한다.
© 2013 인피니티북스 All rights reserved 예제 date: datetime: datetime-local: month: time: week: color: tel: search: range: number: url:
© 2013 인피니티북스 All rights reserved 정규식 특정한 규칙을 가지고 있는 문자열들을 표현 정규 표현식은 / 과 / 내부에 위치
© 2013 인피니티북스 All rights reserved 수량한정자 이메일을 검사하는 정규식 Z0-9-]+)*$/
© 2013 인피니티북스 All rights reserved 이메일 입력... 이메일 :...
© 2013 인피니티북스 All rights reserved 숫자 입력... 신발사이즈 <input type="number" min="230" max="290" step="10" value="260" name="shoesize">... 구글 오페라
© 2013 인피니티북스 All rights reserved range 입력... 테니스 스킬...
© 2013 인피니티북스 All rights reserved 날짜 입력 date – 날짜 입력 month – 월 입력 week – 주 입력 time – 시간 입력 datetime – 날짜와 시간을 입력할 수 있는 양식 제공, 국제 표준 시간 대 datetime-local - 날짜와 시간을 입력할 수 있는 양식 제공, 지역 표준 시간대... 생일...
© 2013 인피니티북스 All rights reserved 색상 입력... 색상선택 :... 오페라 구글
© 2013 인피니티북스 All rights reserved 예제
© 2013 인피니티북스 All rights reserved HTML 소스 이메일 전송화면 이름 : 이메일 주소 : 내용 :
© 2013 인피니티북스 All rights reserved 예제
© 2013 인피니티북스 All rights reserved HTML 소스 회원 가입 화면 이름 : 주소 : Male Female
© 2013 인피니티북스 All rights reserved Q & A