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ę czkeać... <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>

INPUT


typ

<input type="tel">

<input type="search">

<input type="url">

<input type="email">

<input type="datetime">

<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 multiple list="list4">
<datalist id="list4">
	<option value="wartość1">
	<option value="wartość2">
</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>