Статьи

Полезные и готовые к использованию фрагменты HTML5

Май 8, 2018

HTML очень легко писать, но при создании веб-страниц вам часто приходится выполнять одни и те же повторяющиеся задачи, такие как создание форм. В этой статье я собрал более 10 готовых к использованию фрагментов HTML-кода, чтобы ускорить кодирование внешнего интерфейса.

HTML5 стартовый шаблон

При запуске нового проекта вам нужен стартовый шаблон. Вот краткий и чистый шаблон, который послужит основой для ваших проектов HTML5.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Untitled</title>
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		
	</body>
</html>

Источник: http://snipplr.com/view/68539/plain-html5-starter-template/

Форма получения маршрутов (Google Maps)

Вот простой, но мощный код для создания формы, в которой пользователь может ввести свое местоположение, чтобы проложить маршрут к конкретному месту. Очень полезно для контактных страниц.

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
   <input type="submit" value="Get directions" />
</form>

Источник: http://css-tricks.com/snippets/html/get-directions-form-google-maps/

Base64 кодирование 1 * 1px «spacer» GIF

Я не рекомендую использовать прозрачные «проставочные» гифки, но я знаю, что даже в 2013 году многие люди все еще время от времени их используют. Если вы один из них, вам, вероятно, понравится этот кодировка Base64 в формате 1 * 1px «spacer» gif. Гораздо лучше, чем с помощью изображения.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

Источник: http://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/

Шаблон регулярного выражения для проверки электронной почты

HTML5 позволяет, помимо прочего, проверять электронную почту с использованием шаблона регулярного выражения. Вот готовое inputполе с шаблоном регулярных выражений для проверки адреса электронной почты.

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

Источник: http://blog.staffannoteberg.com/2012/03/01/html5-form-validation-with-regex/

Valid Flash Embed

Вы часто встраиваете файлы Flash в свои HTML-страницы? Если да, то вам лучше сохранить приведенный ниже код для встроенной флэш-памяти для дальнейшего использования.

<object type="application/x-shockwave-flash" 
  data="your-flash-file.swf" 
  width="0" height="0">
  <param name="movie" value="your-flash-file.swf" />
  <param name="quality" value="high"/>
</object>

Источник: http://yoast.com/articles/valid-flash-embedding/

HTML5 видео с Flash Fallback

Еще одна замечательная особенность новой спецификации HTML5 — это videoтег, который позволяет легко вставлять видеофайлы. Но, к сожалению, некоторые браузеры не могут работать со встроенным HTML5-видео. Итак, вот полный фрагмент кода с запасным вариантом для старых браузеров.

<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&image=__POSTER__.JPG&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>

Источник: http://camendesign.com/code/video_for_everybody

iPhone Call & SMS Links

С выпуском iPhone компания Apple представила быстрый способ создания ссылок для звонков и SMS. Вот фрагмент кода для хранения в вашей библиотеке.

<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>

Источник: https://developer.apple.com/library/ios/featuredarticles…

Автозаполнение с HTML5 Datalists

Используя datalistэлемент HTML5, вы можете создать список данных для автозаполнения inputполя. Супер полезно! Вот фрагмент кода для повторного использования в ваших собственных проектах.

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

Источник: http://davidwalsh.name/datalist

Раскрывающийся список Страна для веб-форм

Вот еще одна экономия времени: готовый выпадающий список со всеми странами. Из-за размера кода, пожалуйста, смотрите исходный код напрямую.

Источник: http://snipplr.com/view/4792/country-drop-down-list-for-web-forms/

Загружаемые файлы

HTML5 позволяет принудительно загружать файлы, используя downloadатрибут. Вот стандартная ссылка на загружаемый файл.

<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>

Источник: http://snipplr.com/view/4792/country-drop-down-list-for-web-forms/

Сбой IE6

В 2013 году большинство людей наконец-то обновились с ужасного Internet Explorer 6, который годами давал кошмары каждому переднему разработчику, но некоторые все еще используют его. Если вы хотите навсегда избавиться от этого доисторического браузера, вот очень забавный код для включения в ваши HTML-страницы.

Этот код приведет к краху IE6. Бам!

<style>*{position:relative}</style><table><input></table>

Источник: http://www.catswhocode.com/blog/html5-code-snippets-to-take-your-website-to-the-next-level

29
Share: