HTML5 멀티미디어 태그와 입력 양식 태그

요약

멀티미디어 태그

• 음악 재생 관련 태그: audio 태그, source 태그
• 동영상 재생 관련 태그: video 태그, source 태그

입력 양식 개요

• 서버와 클라이언트
• 서버(제공자): 웹 페이지를 제공하는 대상
• 클라이언트(고객): 웹 페이지를 받는 대상
• 입력 양식: 클라이언트가 서버로 데이터를 보내는 가장 기본적인 방법
• form 태그의 action 속성: 데이터 전달 위치 지정
• form 태그의 method 속성: 데이터 전달 방법 지정
• GET방식: URL에 데이터를 넣어 전달하는 방식으로 즐겨찾기를 추가할 수 있는 장점이 있음
• POST방식: 데이터를 별도로 전달하는 방식으로 보안에 좋음

입력 양식 태그

• 입력 양식 생성 주요 태그: input, textarea, select 태그
• 입력 양식 생성 보조 태그: label, fieldset, legend, option, optgroup 태그
• input 태그의 형태를 지정할 때는 type 속성, 데이터에 이름을 붙일 때는 name 속성 사용 

연습문제

audio 태그와 video 태그에서 사용자가 조작할 수 있는 컨트롤을 보여주는 속성은 무엇인가?

① controller 속성    ② control 속성    ③ controls 속성    ④ gui 속성

source 태그에 type 속성을 입력하지 않을 경우 발생하는 문제점을 서술하시오.

type 속성은 입력하지 않으면 웹 브라우저가 음악 파일을 다운 받은 뒤에 재생 가능한 파일인지 확인하므로 트래픽이 낭비된다.

select 태그 내부에서 각각의 항목을 만들기 위해 사용되는 태그는 무엇인가?

① li 태그    ② option 태그    ③ item 태그    ④ source 태그

form 태그의 method 속성을 GET과 POST로 입력할 경우, 버튼을 클릭해 서버로 데이터를 전송한 후 웹 브라우저의 주소창에 나타나는 URL 변화를 서술하시오.

GET 방식: 주소에 데이터를 직접 입력해 전달 

POST 방식: 비밀스럽게 데이터를 전달

다음 입력 양식을 생성하시오(형태만 구성).

이메일
이름
비밀번호
비밀번호 확인

<form>
	<table>
		<tr>
			<td><label for="email">이메일</label></td>
			<td><input id="email" type="text" ></td>
		</tr>
		<tr>
			<td><label for="name">이름</label></td>
			<td><input id="name" type="text" ></td>
		</tr>
		<tr>
			<td><label for="password">비밀번호</label></td>
			<td><input id="password" type="password" ></td>
		</tr>
		<tr>
			<td><label for="confirm">비밀번호 확인</label></td>
			<td><input id="confirm" type="password" ></td>
		</tr>
		<tr>
			<td><input type="submit" value="제출" /></td>
		</tr>
	</table>
	</form>	

다음 입력 양식을 생성하시오(형태만 구성).

이름
성별	남자 여자
취미	운동 음악 개발

<form>
	<table>
		<tr>
			<td><label for="name">이름</label></td>
			<td><input id="name" type="text" ></td>
		</tr>
		<tr>
			<td>성별</td>
			<td><input id="man" type="radio" name="gender" value="m">
				<label for="man">남자</label>
				<input id="woman" type="radio" name="gender" value="w">
				<label for="woman">여자</label>
			</td>
		</tr>
		<tr>
			<td>취미</td>
			<td><input id="sports" type="checkbox" name="hobby" value="s">
				<label for="sports">운동</label>
				<input id="music" type="checkbox" name="hobby" value="m">
				<label for="music">음악</label>
				<input id="development" type="checkbox" name="hobby" value="d">
				<label for="development">개발</label>
			</td>
		</tr>
		<tr>
			<td><input type="submit" value="제출" /></td>
		</tr>
	</table>
	</form>