» » HTML5-сніппети для удосконалення вашого сайту

HTML5-сніппети для удосконалення вашого сайту
HTML5 є новою - і до того ж найцікавішою - версією Hyper Text Markup Language (мова гіпертекстової розмітки). У нашій сьогоднішній статті ми хочемо запропонувати вам декілька неймовірних HTML5-сніппетів для удосконалення вашого сайту.
HTML5-сніппети для удосконалення вашого сайту


Типи введення Url і email
У HTML5 були представлені нові типи введення, серед яких сьогодні хотілося б виділити Url і email. Вони дозволяють вам вписувати семантично коректніший код, і полегшують процес заповнення форм на мобільних пристроях, оскільки відображують спеціальні кнопки (типу @ і .com), залежно від типу введення.

Давайте розглянемо атрибут url у дії:

<input type="url" value="">


А також атрибут email. Також зверніть увагу на атрибут pattern, оскільки ми розповімо про нього пізніше.

<input type="email" pattern="[^ @]*@[^ @]*" value="">


Паттерни регулярних виразів для валідації форми
До появи HTML5, коли ви використовували на сторінках сайту форми, вам потрібно було використовувати javascript для реалізації зовнішньої валідації. Тепер, з появою HTML5 і атрибуту pattern, ви можете використовувати паттерни регулярних виразів для валідації даних, введених у форму.

Наступний сніппет призначений для валідації введеної email-адреси:

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />


Цей призначений для сильних гасел:

<input title="at least eight symbols containing at least one number, one lower, and one upper letter" type="text" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />


А цей для валідації телефонних номерів:

<input type="text" required pattern="(\+?\d[- .]*){7,13}" title="international, national or local phone number"/>


Контекстне меню на HTML5
Контекстні меню на HTML5 дозволяють вам додавати елементи в меню, яке з'являється при натисненні правою кнопкою миші по сторінці. На момент написання цієї статті елемент contextmenu був сумісний лише з Firefox, тому давайте сподіватися, що незабаром всі браузери підтримуватимуть цей елемент.

<section contextmenu="mymenu"> 
<p>Yes, this section right here</p>
</section>

<menu type="context" id="mymenu">
  <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
  <menu label="Social Networks">
  <menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;">   </menuitem>
  </menu>
</menu>


HTML5 video із запасним варіантом на Flash
Одна з найбільших переваг HTML5 полягає в тому, що ви можете відтворювати відео-файли без необхідності використовувати Flash. Проте, оскільки старі браузери не підтримують відео на HTML5, вам доведеться піклуватися про запасну версію на Flash. Наступний приклад покаже вам, як можна вбудовувати відео формату mp4 і ogv в HTML5-сторінки, а також надати запасний варіант на Flash для старих браузерів.

<video width="640" height="360" controls>
	<source src="__VIDEO__.MP4"  type="video/mp4" />
	<source src="__VIDEO__.OGV"  type="video/ogg" />
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
		     title="No video playback capabilities, please download the video below" />
	</object>
</video>


Авто-заповнення за допомогою HTML5 datalist
За допомогою елементу datalist, HTML5 дозволяє вам створювати списки даних для автоматичного заповнення полів введення. Дуже зручна функція!

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>


Приховуємо елементи за допомогою HTML5
HTML5 представила нам ще один атрибут під назвою hidden, який дозволяє вам приховувати певні елементи, неначебто ви робили це за допомогою CSS-параметру display: none.

<p hidden>You can't see this text</p>


Елемент з автоматичним переходом курсору
Атрибут autofocus дозволяє вам примусово виставити курсор на конкретному елементі. Це дуже зручно для сторінок з пошуком на зразок головної сторінки google.com.

<input autofocus="autofocus" />


Попереднє завантаження на HTML5
Недавно в інтернеті виходила ціла стаття, присвячена попередньому отриманню даних за допомогою HTML5. По суті, це проста техніка отримання і завантаження ресурсів, які спочатку не були включені в сторінку.

Нижче приведений приклад показує нам процес попереднього завантаження зображення:

<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">


Відтворення аудіо-файлів за допомогою HTML5
HTML5 може відтворювати відео, як ми вже розповідали вище, а також може програвати і аудіо в популярному форматі mp3! Як приклад, хочемо привести вам невеликий, але дуже функціональний аудіо-плеєр.

<audio id="player" src="sound.mp3"></audio>
<div>
	<button onclick="document.getElementById('player').play()">Play</button>
	<button onclick="document.getElementById('player').pause()">Pause</button>
	<button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
	<button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>


2192 05.02.14



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру