HTML5 : AUDIO, VIDEO, INPUT, SELECT

 

---

1. AUDIO

1) 플레이어 컨트롤러 넣고, 자동재생

<audio src="CANON.mp3" controls="controls" autoplay="autoplay"></audio>

 

2) 플레이어 지원타입 여러개 넣기

<audio controls="controls">
        <source src="CANON.mp3" type="audio/mp3" />
        <source src="CANON.ogg" type="audio/ogg" />
</audio>

 

---

2. VIDEO

1) Type

<video controls="controls">
	<source src="canon.mp4" type="video/mp4" />
	<source src="canon.webm" type="video/webm" />
</video>

 

2) Poster, Size

<video poster="http://placehold.it/640x360" width="640" height="360" controls="controls">
	<source src="canon.mp4" type="video/mp4" />
	<source src="canon.webm" type="video/webm" />
</video>

 

---

3. INPUT

1) 기본 input type

<form>
    <input type="text" /><br />
    <input type="button" /><br />
    <input type="checkbox" /><br />
    <input type="file" /><br />
    <input type="hidden" /><br />
    <input type="image" /><br />
    <input type="password" /><br />
    <input type="radio" /><br />
    <input type="reset" /><br />
    <input type="submit" />
</form>

 

2) html5 추가 input type

<form>
    <input type="color" /><br />
    <input type="date" /><br />
    <input type="datetime" /><br />
    <input type="datetime-local" /><br />
    <input type="email" /><br />
    <input type="month" /><br />
    <input type="number" /><br />
    <input type="range" /><br />
    <input type="search" /><br />
    <input type="tel" /><br />
    <input type="time" /><br />
    <input type="url" /><br />
    <input type="week" />
</form>

 

3) textarea 

<form>
    <textarea></textarea>
</form>

name : 텍스트 영역 필드의 이름 지정
rows : 텍스트 영역 필드의 행 수를 지정
cols : 텍스트 영역 필드의 가로 크기를 지정

 

 

---

4. SELECT

<select>
	<option>김밥</option>
	<option>떡볶이</option>
	<option>순대</option>
	<option>오뎅</option>
</select>

<select>
	<optgroup label="HTML5">
		<option>Multimedia Tag</option>
		<option>Connectivity</option>
		<option>Device Access</option>
	</optgroup>
	<optgroup label="CSS3">
		<option>Animation</option>
		<option>3D Transform</option>
	</optgroup>
</select>