Kurs HTML - Przykłady HTML5

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>

low, high, optimum

0.2 <meter value="0.2" low="0.4" high="0.6" optimum="0.2">0.2</meter>

0.5 <meter value="0.5" low="0.4" high="0.6" optimum="0.2">0.5</meter>

0.8 <meter value="0.8" low="0.4" high="0.6" optimum="0.2">0.8</meter>

0.2 <meter value="0.2" low="0.4" high="0.6" optimum="0.5">0.2</meter>

0.5 <meter value="0.5" low="0.4" high="0.6" optimum="0.5">0.5</meter>

0.8 <meter value="0.8" low="0.4" high="0.6" optimum="0.5">0.8</meter>

0.2 <meter value="0.2" low="0.4" high="0.6" optimum="0.8">0.2</meter>

0.5 <meter value="0.5" low="0.4" high="0.6" optimum="0.8">0.5</meter>

0.8 <meter value="0.8" low="0.4" high="0.6" optimum="0.8">0.8</meter>

INPUT

typ

<input type="tel">

<input type="search">

<input type="url">

<input type="email">

<input type="date">

<input type="month">

<input type="week">

<input type="time">

<input type="datetime-local">

<input type="number">

<input type="range">

<input type="color">

atrybuty

<input type="search" placeholder="Szukaj...">

<input type="text" required>

<input type="number" min="0" max="100" step="10">

<input type="text" pattern="^[0-9]{2}-[0-9]{3}$">

<input type="email" multiple list="list4">
<datalist id="list4">
	<option value="kowalski@example.com">
	<option value="nowak@example.com">
</datalist>

<fieldset disabled>
<input type="text">
</fieldset>

Elementy interaktywne

DETAILS, SUMMARY

Nagłówek panelu - kliknij, aby zobaczyć więcej...

Lorem ipsum dolor sit amet consectetuer et aliquam mus urna pede. Nam convallis metus aliquam sociis eu nec Curabitur gravida ipsum condimentum. Sed cursus sapien Aenean urna Sed diam volutpat urna auctor sapien. Auctor sociis diam In sem tellus tincidunt In risus ornare nibh. Condimentum sit In augue sit ultrices nibh iaculis sem Sed nec. In interdum a eget sit porta tempus lacinia Vestibulum Nam.

<details>
	<summary>Nagłówek panelu - kliknij, aby zobaczyć więcej...</summary>
	Lorem ipsum dolor sit amet consectetuer et aliquam mus urna pede...
</details>

Elementy osadzone

VIDEO

<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>

<video width="192" height="240" controls>
	<source src="plik.ogv" type='video/ogg; codecs="theora, vorbis"'>
	<a href="plik.ogv">Pobierz plik</a>
</video>

<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>

<video poster="obrazek.jpg" width="160" height="90" 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

<audio controls>
	<source src="plik.mp3" type='audio/mpeg'>
	<a href="plik.mp3">Pobierz plik</a>
</audio>

<audio controls>
	<source src="plik.ogg" type='audio/ogg'>
	<a href="plik.ogg">Pobierz plik</a>
</audio>

<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>

<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

<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
&lt;ZAZÓŁĆ GĘŚLĄ JAŹŃ&gt;
<v echo>&lt;zażółć gęślą jaźń&gt;

00:00:04.000 --> 00:00:04.500
KONIEC