CHAPTER 3. HTML 멀티미디어와입력요소
웹브라우저와멀티미디어 예전방법 : HTML 안에서는 <embed> 나 <object> 태그를사용하여야했고웹브라우저에는플래시나 ActiveX 를설치 HTML5: <audio> 와 <video> 태그가추가
오디오
<audio> 요소의속성
오디오파일형식 MP3 'MPEG-1 Audio Layer-3' 의약자로 MPEG 기술의음성압축기술 Wav - 윈도우에서사용되는표준사운드포맷 Ogg - 특허권을반대하고보다좋은음질을위하여오픈소스로개발되었음.
오디오예제 <!DOCTYPE html> <html> <body> <audio src="old_pop.mp3"" autoplay controls> Your browser does not support the audio element. </audio> </body> </html>
<source> 태그사용 모든브라우저가지원하는오디오형식은아직까지없다! 호환성을높이기위하여다음과같이한다. <!DOCTYPE html> <html> <body> <audio controls autoplay > <source src="old_pop.ogg" type="audio/ogg"> <source src="old_pop.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio> </body> </html>
비디오
<video> 요소의속성
비디오예제 <video controls src="movie.ogv"> Your user agent does not support the HTML5 Video element. </video>
비디오예제 <!DOCTYPE html> <html> <body> <video width="640" height="480" controls> <source src="trailer.mp4" type='video/mp4'> <source src="trailer.ogv" type='video/ogg'> <p>your user agent does not support HTML5.</p> </video> </body> </html>
iframe
예제 <!DOCTYPE html> <html> <body> <iframe src="inner.html" width="300" height="120"></iframe> </body> </html> <html> <head> <title>inner</title> </head> <body> <h1> 이웹페이지는 iframe 방식으로표시됩니다.</h1> </body> </html>
예제 <!DOCTYPE html> <html> <body> <textarea rows="5" cols="50"> <html> <body> <h1>this is a header. <h1> </body> <html> iframe 을이용하여서 source.html 을읽어서여기에표시한다. </textarea> <br /> <br /> <iframe src="source.html" width="420" height="80"></iframe> </body> </html>
실행결과
<div> <div> 은 divide 의약자로서페이지를논리적인섹션으로분리하는데사용되는태그 <div style="border: 3px solid red"> <h2> 사자 </h2> <p> 사자는아프리카에살며...</p> </div>
예제 <!DOCTYPE html> <html> <body> <div style="border: 3px solid red;"> <h2> 사자 </h2> <p> 사자는아프리카에살며 강한다리와턱, <span style="color: red;"> 긴송곳니 </span> 를지니고있다. </p> </div> </body> </html>
예제 <!DOCTYPE html> <html> <body> <div style="height:20px; background-color:yellow"></div> <div style="height:20px; background-color:green"></div> <div style="height:20px; background-color:purple"></div> </body> </html>
HTML 입력양식 사용자가입력한내용을서버로보낼때, 사용한다.
입력양식의작동방식
<form> 요소
GET 방식과 POST 방식 GET 방식 GET 방식은 URL 주소뒤에파라미터를붙여서데이터를전달하는방식이다.
GET 방식과 POST 방식 POST 방식 POST 방식은사용자가입력한데이터를 URL 주소에붙이지않고 HTTP Request 헤더에포함시켜서전송하는방식 길이제한이없으며, 보안이유지된다. POST /test/input.jsp HTTP/1.1 Host: www.naver.com name1=value1&name2=value2...
<!DOCTYPE html> <html> <body> <form action="input.jsp" method="post"> 입력태그 이메일 : <input type="email" name="email" /><br /> URL : <input type="url" name="url" /><br /> 전화번호 :<input type="tel" name="tel" /><br /> 색상 : <input type="color" name="color" /><br /> 월 : <input type="month" name="month" /><br /> 날짜 : <input type="date" name="date" /><br /> 주 : <input type="month" name="week" /><br /> 시간 : <input type="time" name="time" /><br /> 지역시간 : <input type="datetime-local" name="localdatetime" /><br /> 숫자 : <input type="number" name="number" min="1" max="10" step="2"/><br /> 범위 : <input type="range" name="range" min="1" max="10" step="2" /><br /> <input type="submit" value=" 제출 " /> </form> </body> </html>
실행결과
<input> 형식
type 속성값
텍스트필드 <form> 이름 : <input type="text" name="name"><br> 학번 : <input type="text" name="number" size=10> </form>
<form> 패스워드 : <input type="password" name="pass"> </form> 패스워드필드
라디오버튼 <form> 성별 : <input type="radio" name="gender" value="male"> 남성 <input type="radio" name="gender" value="female"> 여성 </form>
체크박스 <form> 과일선택 : <input type="checkbox" name="fruits" value="apple" checked >Apple <input type="checkbox" name="fruits" value="grape">grape <input type="checkbox" name="fruits" value="orange">orange </form>
제출버튼과초기화버튼 <form name="input" action="getid.jsp" method="get"> 사용자아이디 : <input type="text" name="user"> <br /> <input type="submit" value=" 제출 "> <input type="reset" value=" 초기화 "> </form>
<input> 버튼 <form name="input" action="getid.jsp" method="get"> 물품가격 : <input type="text" name="user"> <br /> 수량 : <input type="text" name="user"> <br /> <input type="button" value=" 계산 " onclick="alert('10000 원입니다.')"> </form>
<button> 버튼 <button type="button" onclick="alert(' 안녕하세요?')"> 눌러보세요!</button>
이미지버튼 <form name="input" action="getid.jsp" method="get"> 아이디 : <input type="text" name="name"> <br /> <input type="image" src="submit.png" alt=" 제출버튼 "> </form>
<textarea> 요소 <form name="input" action="getfeedback.jsp" method="get"> 고객의의견 <br /> <textarea name="feedback" rows="5" cols="50"></textarea> </form>
<textarea> 요소 <form action=""> <select name="cars"> </select> </form> <option value="bmw">bmw</option> <option value="benz">benz</option> <option value="hyundai" selected> 현대자동차 </option> <option value="kia"> 기아자동차 </option>
<fieldset> 태그 <form> <fieldset> <legend> 인적사항입력 </legend> 이름 : <input type="text"><br> 전화번호 : 주소 : </fieldset> </form> <input type="text"><br> <input type="text">
<label> 태그 <form action="proc_form.jsp"> <label for="male"> 남성 </label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female"> 여성 </label> <input type="radio" name="gender" id="female" value="female"><br> <input type="submit" value=" 제출 "> </form>
파일업로드버튼 <form enctype="multipart/form-data"> <input type="file" accept="image/jpg,image/gif"> </form>
HTML 입력요소
추가된 <input> 의속성 autocomplete 자동으로입력을완성한다. autofocus 페이지가로드되면자동으로입력포커스를갖는다. placeholder 입력힌트를희미하게보여준다. readonly 읽기전용필드 required 입력양식을제출하기전에받드시채워져있어야함을나타낸다. pattern 허용하는입력의형태를정규식으로지정한다.
예제 <body> <form> date: <input type="date" /> <br /> datetime: <input type="datetime" /> <br /> datetime-local: <input type="datetime-local" /><br /> month: <input type="month" /> <br /> time: <input type="time" /> <br /> week: <input type="week" /> <br /> color: <input type="color" /> <br /> email: <input type="email" /> <br /> tel: <input type="tel" /> <br /> search: <input type="search" /> <br /> range: <input type="range" /> <br /> number: <input type="number" /> <br /> url: <input type="url" /> <br /> <input type="submit" /> </form> </body>
정규식 특정한규칙을가지고있는문자열들을표현 정규표현식은 / 과 / 내부에위치
수량한정자 이메일을검사하는정규식 /^[a-za-z0-9.!#$%& *+/=?^_`{ }~-]+@[a-za-z0-9-]+(?:\.[a-za- Z0-9-]+)*$/
이메일입력... 이메일 : <input type="email" name="email" required><br>...
숫자입력... 신발사이즈 <input type="number" min="230" max="290" step="10" value="260" name="shoesize">... 구글 오페라
range 입력... 테니스스킬 <input type="range" min="1" max="10" value="1">...
날짜입력 date 날짜입력 month 월입력 week 주입력 time 시간입력 datetime 날짜와시간을입력할수있는양식제공, 국제표준시간대 datetime-local - 날짜와시간을입력할수있는양식제공, 지역표준시간대...... 생일 <input type="date" name= dob >
색상입력...... 색상선택 : <input type="color" name="color"/> 오페라 구글
예제
HTML 소스 <!DOCTYPE html> <html> <body> <h3> 이메일전송화면 </h3> <form action="mailto:hong1234@gmail.com" method="post" enctype="text/plain"> 이름 : <input type="text" name="name" value=""><br> 이메일주소 :<input type="email" name="mail" value=""><br> 내용 :<br> <textarea name="comment" rows="5" cols="50"></textarea><br> <input type="submit" value="send" /> <input type="reset" value="reset" /> </form> </body> </html>
예제
HTML 소스 <!DOCTYPE html> <html> <body> <h3> 회원가입화면 </h3> <form action="adduser.jsp" method="post"> <p> 이름 : <input type="text" name="name"><br> 주소 : <input type="text" name="address"><br> email: <input type="email" name="email" required ><br> <input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="submit" value="send"> <input type="reset"> </p> </form> </body> </html>
이미지맵으로이벤트페이지만들기
이미지맵으로이벤트페이지만들기