Formularze
DATALIST
<input list="list1">
<datalist id="list1">
<option value="wartość1">
<option value="wartość2">
</datalist>
<input list="list2">
<datalist id="list2">
<option value="wartość1" label="skrót1">
<option value="wartość2" label="skrót2">
</datalist>
<input list="list3">
<datalist id="list3">
<select>
<option value="wartość1" label="skrót1">
<option value="wartość2" label="skrót2">
</select>
</datalist>
PROGRESS
Proszę czekać...
<progress>Proszę czekać...</progress>
Ukończono: 50%
<progress value="0.5">Ukończono: 50%</progress>
Ukończono: 50%
<progress value="50" max="100">Ukończono: 50%</progress>
METER
0.5
<meter value="0.5">0.5</meter>
50 (0...100)
<meter value="50" min="0" max="100">50 (0...100)</meter>
0.5
<meter value="0.5" low="0.2" high="0.8">0.5</meter>
50 (0...100)
<meter value="50" min="0" max="100" low="20" high="80" optimum="60">50 (0...100)</meter>
50 (0...100)
<meter value="10" min="0" max="100" low="20" high="80">10 (0...100)</meter>
90 (0...100)
<meter value="90" min="0" max="100" low="20" high="80">90 (0...100)</meter>
Elementy osadzone
VIDEO
Pobierz plik
<video width="192" height="240" controls>
<source src="plik.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<a href="plik.mp4">Pobierz plik</a>
</video>
Pobierz plik
<video width="192" height="240" controls>
<source src="plik.ogv" type='video/ogg; codecs="theora, vorbis"'>
<a href="plik.ogv">Pobierz plik</a>
</video>
Pobierz plik w formacie: MP4 , OGV
Play/Pause
Mute/Unmute
<fieldset>
<video id="controls" poster="obrazek.jpg" width="192" height="240">
<source src="plik.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="plik.ogv" type='video/ogg; codecs="theora, vorbis"'>
Pobierz plik w formacie: <a href="plik.mp4">MP4</a>, <a href="plik.ogv">OGV</a>
</video>
<menu>
<button type="button" onclick="document.getElementById('controls')[document.getElementById('controls').paused || document.getElementById('controls').ended ? 'play' : 'pause']()">Play/Pause</button>
<button type="button" onclick="document.getElementById('controls').muted = !document.getElementById('controls').muted">Mute/Unmute</button>
<input type="range" min="0.0" max="1.0" step="0.1" value="1.0" onchange="document.getElementById('controls').volume = this.value">
</menu>
</fieldset>
Pobierz plik w formacie: MP3 , OGG
<video poster="obrazek.jpg" width="200" height="150" controls>
<source src="plik.mp3" type='audio/mpeg'>
<source src="plik.ogg" type='audio/ogg'>
Pobierz plik w formacie: <a href="plik.mp3">MP3</a>, <a href="plik.ogg">OGG</a>
</video>
AUDIO
Pobierz plik
<audio controls>
<source src="plik.mp3" type='audio/mpeg'>
<a href="plik.mp3">Pobierz plik</a>
</audio>
Pobierz plik
<audio controls>
<source src="plik.ogg" type='audio/ogg'>
<a href="plik.ogg">Pobierz plik</a>
</audio>
Pobierz plik w formacie: MP3 , OGG
<audio controls>
<source src="plik.mp3" type='audio/mpeg'>
<source src="plik.ogg" type='audio/ogg'>
Pobierz plik w formacie: <a href="plik.mp3">MP3</a>, <a href="plik.ogg">OGG</a>
</audio>
Pobierz plik w formacie: MP4 , OGV
<audio controls>
<source src="plik.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="plik.ogv" type='video/ogg; codecs="theora, vorbis"'>
Pobierz plik w formacie: <a href="plik.mp4">MP4</a>, <a href="plik.ogv">OGV</a>
</audio>
TRACK
Pobierz plik w formacie: MP4 , OGV ; pobierz napisy
<style>
::cue {
background: rgba(0, 128, 255, 0.8);
color: white;
}
::cue(b) {
color: red;
}
::cue(i) {
color: lime;
}
::cue(u) {
color: aqua;
}
::cue(#druga-linia ) {
font-weight: bold;
color: red;
}
::cue(v[voice="echo "]) {
color: yellow;
font-weight: italic;
}
</style>
[...]
<video width="192" height="240" controls>
<source src="plik.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="plik.ogv" type='video/ogg; codecs="theora, vorbis"'>
<track src="plik.vtt" default>
Pobierz plik w formacie: <a href="plik.mp4">MP4</a>, <a href="plik.ogv">OGV</a>; <a href="plik.vtt">pobierz napisy</a>
</video>
plik.vtt
WEBVTT
00:00:00.500 --> 00:00:03.000
<b>HTML5</b> pozwala dodawać własne <i>napisy</i> do <u>filmów</u>
druga-linia
00:00:03.000 --> 00:00:04.500 align:start vertical:rl
<ZAZÓŁĆ GĘŚLĄ JAŹŃ>
<v echo ><zażółć gęślą jaźń>
00:00:04.000 --> 00:00:04.500
KONIEC