H4. 미디어 삽입, 웹폼

1.미디어 삽입

HTML5 이전까지는 미디어를 재생하기 위해 브라우저에 적절한 플러그인 소프트웨어가 필요했다. 이것은 비표준 형식 데이터 때문인데 이러한 비표준형식 데이터로 만들어진 비표준 미디어을 포함하는 웹페이지는 브라우저에 따라 재생되지 않는 문제점이 있었다. 그래서 HTML5에서는 플러그인 없이 미디어를 재생할 수 있도록 미디어에 속하는 오디오와 비디오에 관한 태그를 표준화하였다.

물론 플래시 애니메이션과 같은 표준화하지 않은 미디어를 재생하기 위해서는 현재도 여전히 플로그인이 필요하다. 이런경우 다음과 같은 태그가 필요하다.

<embed>, <object>

1-1. 비디오 삽입<video>

<video>태그에 의해 브라우저에는 320x240픽셀 크기의 공간이 할당되고 이곳에 비디오가 재생된다. autoplay속성에 의해 비디오는 바로 재생되며, controls속성에 의해 비디오 제어 버튼들이 함께 출력된다. <vedio></video>사이에는 브라우저가 <video>태그를 지원하지 않을 때 출력하는 텍스트를 지정한다. 

▶예시

▲코딩

▲출력 결과

▶비디오 소스는 <source>태그를 이용하여 다음과 같이 별도로 지정할 수도 있다.

▶브라우저에 따라서 특정 타입의 비디오 파일만 인식할 수 있기 때문에 개발자는 하나의 비디오를 여러 타입으로 만들어두고 브라우저가 재생가능한 타입을 선택하도록 할 수 있다.

▶<video>태그 속성

width, height : 비디오가 재생될 브라우저 공간의 폭과 높이 지정. 생략되면 원본크기

controls : 제어 버튼 출력

autoplay : 비디오 로딩 즉시 재생

loop : 반복 재생

muted : 삽입

▶<source>태그 속성

src : 비디오 파일의 URL

type : 비디오의 마임 타입

▶현재 HTML5에서 재생 가능한 비디오 타입

비디오	마임 타입	설명
MP4	video/mp4	H.264비디오와 AAC 오디오 코덱으로 인코딩된 MPEG4 파일
WebM	video/webm	VP8/VP9 비디오와 Vorbis 오디오 코덱으로 인코딩된 WebM파일
Ogg	video/ogg	Theora 비디오와 Vorbis 오디오 코덱으로 인코딩된 Ogg파일

1-2. 오디오 삽입<audio>

<audio>태그는 웹 페이지가 출력될 때 자동으로 제어버튼을 함께 출력하도록 지시하는 태그이다. 이것도 마찬가지로

<audio></audio>사이에는 브라우저가 <audio>태그를 지원하지 않을 때 출력하는 대체 텍스트를 지정한다.

controls 속성을 생략하면 브라우저 화면에는 아무것도 나타나지 않고 연주만 이루어지며, autoplay가 생략되면, 오디오가 자동으로 시작되지 않는다. 자바스크립트를 이용하면 오디오 재생을 제어할수 있다.

▶<audio>태그 속성

controls : 제어 버튼 출력

autoplay : 비디오 로딩 즉시 재생

loop : 반복 재생

▶예시

▲코딩

▲출력 결과

▶<audio>태그도 마찬가지로 <source>태그를 이용하면 mp3타입과 ogg타입 중 브라우저가 재생 가능한 타입을 선택하게 할 수있다.

▶HTML5에서 재생 가능한 오디오 타입

오디오	마임 타입	설명
MP3	audio/mpeg	mp3로 인코딩된 오디오 파일
Wav	audio/wav	wave형식으로 인코딩된 오디오 파일
Ogg	audio/ogg	Vorbis 오디오 코덱으로 인코딩된 Ogg파일

※<audio>태그의 autoplay 속성 사용시 주의사항

크롬이나 모바일 브라우저에서는 보안상의 이유로 autoplay속성은 작동하지 않는다. 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

2.웹 폼 만들기

웹 페이지를 통해 사용자 입력을 받는 폼을 웹폼 혹은 폼이라고 한다. HTML5에서는 폼을 만들기 위한 다양한 태그들을 제공하며 이 태그들을 폼 요소라고 부른다. 폼은 로그인, 등록, 검색, 예약, 쇼핑 등의 다양한 웹 서비스에서 사용자의 입력을 받기 위해 사용된다.

2-1. 간단한 로그인 폼 만들기

▲코딩

폼 요소들은 다음과 같이 <form>...</form>에 담는다. 

<form>태그에서 name, method, action속성은 기본이다.

text는 default값이므로 생략가능하고 value는 옵션이다.

 <input>은 입력창을 만드는 태그이다.

submit 값은 사용자가 폼 요소들에 입력한 내용을 모두 웹 서버로 전송한다.

▶name, method, action, enctype, target 속성

name : 폼의 이름을 지정하는 중요한 속성으로 자바스크립트에서 사용된다.

method : 폼 데이터를 웹 서버로 전송하는 형식을 지시하는 속성이다.

값	활용	특징
get	검색, 글쓰기 등등	URL뒤에 텍스트가 나옴
post	글쓰기, 수정 등등	URL뒤에 텍스트가 나오지 않음

action : 폼 데이터를 처리할 웹 서버 응용프로그램을 지정한다.

enctype : 폼 데이터를 웹 서버로 전송할 때 암호화 방식을 지정한다.

target : 웹 서버 응용프로그램으로부터 전송받은 데이터를 출력할 윈도우 이름이다.

2-2. 폼 전송 과정

①포털사이트에 접속해서 웹 브라우저에 의해 포털사이트 웹페이가 출력되고 검색어를 입력받는 폼이 나타난다.

②사용자가 입력 창에 검색어를 입력하고 검색 버튼을 누르면, 브라우저 웹 서버 응용프로그램에 보낼 다음 폼 데이터를

   만든다.

③브라우저는 웹 서버에 접속하고 웹 서버 응용프로그램의 실행을 요청하고 검색어를 전달한다.

④웹 서버에서 응용프로그램을 실행하고 결과를 브라우저에게 보낸다.

⑤브라우저는 검색 결과를 화면에 출력한다.

2-3폼 만들기

▶폼 요소의 종류

폼 요소	설명
<input type="">	한 줄 텍스트 입력 창
<input type="">	암호 입력을 위한 한줄 텍스트 입력 창
<input type="">	단순 버튼
<input type="">	웹 서버로 폼 데이터를 전송시키는 버튼
<input type="">	입력된 폼 데이터를 초기화시키는 버튼
<input type="">	이미지 버튼
<input type="">	체크박스와 라디오버튼
<select>	드롭다운 리스트를 가진 콤보박스
<input type="">	년, 월, 일, 시간 등의 시간 정보 입력 창
<input type="">	스핀 버튼과 슬라이드바로 편리한 숫자 입력 창
<input type="">	색 입력을 쉽게 하는 컬러 다이얼로그
<input type="">	이메일, URL, 전화번호, 검색키워드 등 형식 검사 기능을 가진 텍스트 입력 창
<input type="">	로컬 컴퓨터의 파일을 선택하는 폼 요소
<button type="button|reset|submit">	단순 버튼, reset, submit 버튼
<textarea>	여러 줄의 텍스트 입력 창

※폼 요소는 <form>태그 없이 사용 할 수 있는가?

폼 요소들은 <form>태그 없이 사용할 수도 있다. 이런 경우는 주로 웹 서버에 전송하지 않고 자바스크립트 코드에서 사용자의 입력을 받는 목적으로 사용한다.

▶텍스트 입력 태그 (<input type="text|password">, <textarea>)

①<input type="text" value="초기에 출력되는 문자열">

   : 주소나 이름 등 한 줄 텍스트를 입력받는 태그

※속성

type

name : 속성 이름

maxlength : 문자 개수

size : 문자 개수

value : 초기 텍스트

②<input type="password" value="">

   : 이 태그는 사용자가 입력하는 문자 대신 '*'등 다른 글자를 출력하여 다른 사람이 볼수 없게한다.

※속성

위와 같다.

③<textarea></textarea>

   : 여러 줄의 텍스트를 입력받을 때 사용한다.

※속성

cols : 열 개수

rows : 행 개수

name : 요소 이름

wrap : 자동 줄바꿈 처리 과정(OFF, HARD, SOFT 값이 있다.)

▶데이터 목록을 가진 텍스트 입력 창 (<datalist>)

검색창에 입력할 때, 추천 검색어 목록이 펼쳐지는 기능이다. 과거에는 자바스크립트로 만들었지만 HTML5에서 <datalist></datalist>태그로 만들수 있게 되었다.

아래 예시를 살펴보자

▶예시

▲코딩

<datalist>태그는 <input>태그의 list속성 값과 <datalist>의 id속성 값을 동일하게 주어 이 둘을 연결한다.

<option>태그는 데이터 항목 하나를 나타낸다.

▲출력 결과

▶텍스트/이미지 버튼 만들기 (<input>태그, <button></button>태그)

①단순 버튼

②submit 버튼

③reset 버튼

④이미지 버튼

위 이미지들은 자바스크립트 코드가 있어야 활용가능하다.

<button>태그를 이용하여 이미지를 가진 submit버튼이나 reset버튼도 만들수 있다.

※<button>태그로 버튼 만들 때 주의

<button>의 디폴트 type은 submit이다. 많은 개발자들이 여기서 많은 오류를 범하고 찾지 못해 애타는 경우가 있다. 이런 문제를 피하려면 type속성을 button으로 명확히 지정하면 된다.

▶선택형 입력

체크박스, 라디오버튼, 콤보박스 목록을 보여주고, 목록에서 사용자가 선택하는 방식의 입력요소이다. 

①체크박스만들기 <input type="checkbox">

▲코딩(예시)

<input>태그 앞에 한글들은 캡션이라고 하며 백앤드<input>태그 맨뒤 checked 속성은 초기에 선택 상태로 출력하는 기능

▲출력 결과

②라디오 버튼 만들기 <input type="radio">

라디오 버튼은 type의 값만 radio로 해주고 나머지 코딩입력은 같다. 하지만 이미지를 첨부한 라디오 버튼 출력은 다음과 같이 코딩한다.

▲코딩(예시)

▲결과 출력

③콤보박스 만들기 <select>

콤보박스는 드롭다운 목록을 보여주고 그 중 하나를 선택하는 폼 요소이다. <select>태그는 콤보박스 전체를 표현하고 <option>태그는 항목 하나를 표현한다.

▲코딩(예시)

selected속성을 사용하면 아래와 같이 선택된 상태로 출력이된다.

▲결과 출력

※<datalist>와 <select>의 차이점

<datalist>를 사용하면 옵션리스트에서 선택하거나 입력창에 직접 입력하여 항목을 선택할 수 있지만, <select>의 경우 옵션리스트에서만 선택할 수 있다.

▶<label>로 폼 요소의 캡션 만들기

텍스트창 앞에 있는 요소를 캡션이라고하는데  대부분의 폼요소는 캡션을 함께 사용하지만 따로 캡션임을 명시하지 않는다. 

<label>태그를 사용하면 캡션과 폼 요소를 한 단위로 묶어 문서를 훨씬 명료하게 표현할 수 있고, 한 단위로  다룰 수 있어 많은 장점을 가진다.

<label>을 사용하는 방법은 두가지가 있다.

①<label>로 폼 요소 둘러싸기

②<label>로 캡션을 지정하고 for속성으로 캡션과 폼 요소 연결

▶색 입력<input type="color">

▲코딩(예시)

▲출력 결과

위 버튼을 클릭하면  자신이 원하는 색으로 언제든지 바꿀수 있다.

▶시간 정보 입력

※자바스크립트로 보다 질 높은 시간 정보 폼을 구축할 수 있다.

▶스핀버튼과 슬라이드바로 편리한 숫자 입력

아래 이미지에서 tpye뒤에 주로 쓰이는 속성이 min, max, step인데 이것은 스핀버튼과 슬라이드바를 조절할 때 증감 단위 값을 각각 지정하는 것이다.

▲코딩

▲출력 결과

▶입력할 정보의 힌트 보여주기

<input>태그의 placeholder 속성은 사용자가 입력할 정버의 형식을 살짝 보여주는 속성이다.

▲코딩

▲출력 결과

▶형식을 가진 텍스트 입력

HTML5에서는 email주소, URL, 전화번호와 같이 텍스트가 특정 형식에 맞에 입력되었는지 검사하는 폼 요소들을 재공한다.

이러한 폼 요소들은 형식 검사가 수행되면서 불필요한 트래픽을 막는다.

아래 폼 요소들은 placehoholder속성과 함께 쓰는 것이 바람직하다.

①email주소 <input type="email">

②URL <input type="url">

③전화번호 입력 <input type="tel">

④검색어 입력 <input type="search">

▶폼 요소들의 그룹핑 (<fieldset>)

<fieldset>은 폼 요소들을 그룹으로 묶을 수 있으며 그룹의 제목은 <legend>태그를 사용한다.

▲코딩(예시)

▲출력 결과