HTML is super easy
to write, but when creating webpages, you often need to do the same repetitive
tasks, such as creating forms. In this article, I have compiled 10+ ready-to-use
HTML snippets to speed up your frontend coding.
HTML5 Starter
Template
When starting a new
project, you need a starter template. Here is a concise and clean template to
serve as a basis for your HTML5 projects.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<!--[if lt IE 9]>
<![endif]-->
</head>
<body>
</body>
</html>
Get Directions Form
(Google Maps)
Here is a simple
yet powerful code to create a form where the user can enter his location to get
directions to a specific place. Very useful for contact pages.
<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>
Base64 Encode of a
1*1px “spacer” GIF
I don’t recommend
using transparent “spacer” gifs, but I know that even in 2013, many people are
still using them from time to time. If you’re one of them, you’ll probably
enjoy this Base64 encode of a 1*1px “spacer” gif. Way better than using an
image.
<imgsrc="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
Regexp Pattern for
Email Validation
HTML5 allows, among other things,
validating emails using a regular expression pattern. Here is a ready to use input field with the regexp pattern to validate an email address.
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
Valid Flash Embed
Are you often
embedding Flash files into your html pages? If yes, you’d better save the valid
flash embed code below for future use.
<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>
HTML5 Video with
Flash Fallback
Another great feature of the new
HTML5 specification is definitely the video tag which allows you to easily embed video files. But unfortunately,
some browsers can’t deal with embedded HTML5 video. So, here is a complete code
snippet with a flash fallback for older browsers.
<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>
iPhone Call &
SMS Links
With the release of
the iPhone, Apple introduced a quick way to create call and SMS links. Here is
a code snippet to keep in your library.
<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>
Autocompletion with
HTML5 Datalists
Using the datalist element, HTML5 allows you to create a list of data to autocomplete an input field. Super useful! Here is a code snippet to re-use in your own
projects.
<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>
Source: http://davidwalsh.name/datalist
Country Drop-down
List for Web Forms
Here’s another time
saver: A ready-to-use dropdown list with all countries. Due to the size of the
code, please see the source directly.
Downloadable Files
HTML5 allows you to force download of
files using the download attribute. Here is a standard link to
a downloadable file.
<!-- will download as
"expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf"download="expenses.pdf">Download Your Expense Report</a>
Crash IE6
In 2013, most
people have finally upgraded from the horrible Internet Explorer 6 which gave
nightmares to every front-end developer for years, but some people are still
using it. If you want to get rid of this prehistoric browser for good, here is
a very funny code to include in your HTML pages.
This code will
crash IE Bam!
<style>*{position:relative}</style><table><input></table>
No comments:
Post a Comment