<audio> 태그
<audio src="old_pop.mp3" autoplay controls >
audio 삽입 태그
Your browser does not support the audio element.
</audio>
old_pop.mp3 : 오디오 소스 파일 경로(url)
autoplay : 자동재생된다.
controls : 화면에 제어기를 보일 것
audio 요소의 속성
-autoplay : 이 속성이 존재하면 음악을 자동으로 재생한다.
-controls : 이 속성이 존재하면 브라우저가 오디오 재생을 제어하는 제어기를 표시한다.
-loop : 이 속성이 존재하면 브라우저가 오디오를 반복하여 재생한다.
-preload : 사용자가 사용할 생각이 없더라도 오디오를 미리 다운로드 한다.
-src : 재생할 오디오가 존재하는 URL 을 지정한다.
-volume : 오디오의 재생 볼륨을 설정한다. (0.0 부터 1.0 까지 )
서로 다른 오디오 형식에 대한 호환성 source 사용하기
모든 브라우저가 지원하는 오디오 형식이 없기때문에 호환성을 높이기 위해.
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay>
<source src="old_pop.ogg" type="audio/ogg"> --> 위에서부터 파일형식을
<source src="old_pop.mp3" type="audio/mp3"> 차례대로 검사한다.
<source src="old_pop.wav" type=audio/wav">
</audio>
</body>
</html>
<video > 태그
<video src="movie.mp4" autoplay controls >
</video>
<video> </video> 비디오 삽입 태그
"movie.mp4" : 비디오 소스 파일 경로 ( URL)
autoplay : 자동재생
control : 화면에 제어기를 보일것
<video></video> 요소의 속성
autoplay : 이 속성이 존재하면 비디오를 자동으로 재생한다.
controls : 이 속성이 존재하면 브라우저가 비디오 재생을 제어하는 컨트롤을 표시한다.
loop : 이 속성이 존재하면 브라우저가 비디오를 반복하여 재생한다.
poster : 비디오를 다운로드 하는 중일 때 표시하는 이미지이다.
preload : 사용자가 사용할 생각이 없더라도 전체 오디오를 다운로드 한다.
muted : 재생할 오디오 출력을 중지한다.
src : 재생할 오디오가 존재하는 URL 을 지정한다.
width, height : 비디오 재생기의 너비와 높이를 나타낸다.
<video> 예제
<!DOCTYPE html>
<html>
<body>
<video width="640" height="480" controls> 위에서부터 파일 형식을 차례로
<source src="trailer.mp4" type="video/mp4"> 검사한다.
<source src="trailer.ogg" type="videp/ogg" >
<p> Your user agent does not support HTML5. </p>
</video>
</body>
</html>
Html 입력양식
: html 문서는 방식에 따라 서버에서 사용자에게 일방적으로 보여주는 방식과 사용자가 서버에 데이터를 보내는 두 가지 방식으로 분류할 수 있음
: 입력양식(form) 을 이용하여 서버로 데이터를 전달한다.
* 출처 : 수업시간자료
입력 양식의 작동 방식
<form>
<form action="input.jsp" method="post">
<input type="text" name="input" >
<input type="submit">
</form>
form : 입력양식은 항상 <form> 으로 시작한다.
action="input.jsp" 입력을 처리하는 서버스크립트의 주소를 적어준다.
method="post" : 입력 데이터가 서버로 보내지는 방법을 기술한다. get과post 방식이 있다.
get 방식과 post 방식의 차이
-get 방식 : URL 주소 뒤에 파라미터를 붙여서 데이터를 전달하는 방식이다.
ex)
<form action="aaa.jsp" method="get">
이름 : <input type="text' name="name" > <br>
학번 : <input type= "text" name="number" size="10" >
<input type="submit" value="전송" >
</form>
</body>
데이터를 보내는 방식
-post (보완 o )
사용자가 입력한 데이터를 URL 조소에 붙이지 않고 HTTP Request 헤더에 포함시켜 전송하는 방식.
-get
주소뒤에 데이터가 보인다. (보완 x )
예시 )
http://localhost/Webpro/1027/get.jsp?name=%EC%9D%B4%EC%88%98%EC%A0%95&id=coral&pass=1234
입력태그의 종류 :
<input > 형식
<input type="button" value="놀러오세요" name="button1" >
type 속성은 입력필드의 종류 결정
value 속성은 : 버튼에 나타나는 텍스트
name 속성은 서버로 전달되는 이름이다. ( 매우 중요하다 )
타입뒤에 들어갈 수 있는 것
* 주의 radio 버튼은 동그랗게 생겨서 선택할 수 있는 기능 o 여자 o 남자 이렇게.
checkbox는 동그라미 대신 네모로 선택가능하게 만듬
<form>
과일선택 :
<input type="checkbox" name="fruits" value="apple" checked > Apple
<input type="checkbox" name="fruits" value="apple" > Grape
</form>
* input 타입은 인라인 요소이다.
ex) 이미지 버튼
<form name="input action="get_id.jsp" method="get">
아이디:
<input type="text" name="name" > <br>
<input type="image" src="submit.jpg" alt="제출버튼">
</form>
hidden
<input type="hidden" name="" value="">
사용자가 직접 입력하는 데이터는 아니지만 클라이언트 컴퓨터가 서버 컴퓨터로 특정한 데이터를 전송하고 싶은 경우 많이 사용
화면에는 아무것도 나타나지 않고 사용자가 "제출"버튼을 누를 때 서버로 name 과 value 가 전송
<button alert('안녕하세요?')>눌러보세요!</button>
submit 기능을 수행한다.
<textarea></testarea>
여러줄을 입력할 때
고객의의견 <br>
<textarea name="feedback" rows="5" cols="50"></textarea>
<select></select>
콤보박스
<form action="">
<select name="cars">
<option value="bmw">BMW</option>
<option value="benz">Benz</option>
<option value="hyundai">현대자동차</option>
</select>
<form>
fieldset
입력요소들을 그룹핑하는 데 사용되는 태그
그룹의 경계에 선을 그려준다.
<legend> 를 사용하면 그룹에 제목을 붙일 수 있다.
<form>
<fieldset>
<legend>인적사항입력</legend>
이름 : <input type="text"> <br>
전화번호 : <input type="text"> <br>
주소 : <input type="text"> <br>
</fieldset>
</form>
<label></label>
<label> 태그는 사용자 인터페이스(ui) 요소의 라벨(label) 을 정의할 때 사용한다.
<label> 요소는 for 속성을 사용하여 다른 요소와 결합할 수 있으며, 이때 <label> 요소의 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 한다. 또한 <label> 요소를 결합하고자 하는 요소 내부에 위치시키면 for 속성을 사용하지 않더라도 해당 요소와 결합 시킬 수 있습니다.
이러한 <label>요소는 브라우저에 의해 일반적인 텍스트로 랜더링이 되지만, 사용자가 마우스로 해당 텍스트를 클릭할 경우 <label> 요소와 연결된 요소를 곧바로 선택할 수 있어 사용자의 편의성을 높일 수 있습니다.
<form action="proc_form.jsp">
<label for="male">남성</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="radio">여성</label>
<input type="radio" name="gender" id="female" value="female"><br>
<input type="submit" value="제출">
</form>
내가 이해한 바 : 남성이라는 글자랑(label태그) 밑에 input type="radio" 이거랑 두개를 연결해준것.
html 입력요소
* 추가된 input 의 속성
autocomplete - 자동으로 입력을 완성한다.
autofocus - 페이지가 로드되면 자동으로 입력포커스를 갖는다.
placeholder - 입력 힌트를 희미하게 보여준다.
readonly - 읽기 전용 필드
required - 입력 양식을 제출하기 전에 반드시 채워져 있어야 한다. ( 입력해야 전송됨)
pattern - 허용하는 입력의 형태를 정규식으로 지정한다.
예시 )
1)이메일 : <input type="email" name="email" required><br>
2)전화번호 입력
<form>
전화번호 : <input type="tel" name="tel" required
pattern="[0-9]{3}-[0-9]{3,4}-[0-9]{4}"
title="010-1234-1234"><br>
<input type="submit" value="send">
</form>
</form>
3) 숫자입력
신발사이즈
<input type="number" min="230" max="290" step ="10" value="260" name="sho">
4) 색상입력
<input type="color" name="color">
5) 날짜입력
date, month, week, time , datetime(날짜와 시간을 입력할수있는 양식제공 국제표준시간대 vs datetime-local 지역 표준 시간대 )
6) range 입력
테니스스킬<input type="range" min="1" max="10" value="1" >
value 는 초기값....///?
댓글
댓글 쓰기