10 Most Useful HTML Snippets

When creating webpages, it is very simple to write HTML, but you must often do the same repetitive tasks, such as generating forms.

So to make that part easier I have gathered 10 ready to use HTML snippets in this article to streamline your front-end coding.

1. Post Data to an Iframe

No programming language or JavaScript is required. In this case, you should ensure the target attribute on the form is the same as the name attribute on the iframe. There is no reloading of the outer page. In spite of the fact that most browsers reload an iframe when the page loading spinner appears in the tab, this is not true.

<form action="iframe.php" target="my_iframe" method="post">
   <label for="text">Name:</label>
   <input type="text" name="full_name">
   <label for="text">Email:</label>
   <input type="text" name="email">
   <input type="submit" value="post">
</form>
<iframe name="my_iframe" src="iframe.php"></iframe>

2. Crash IE6

The majority of people have upgraded to Internet Explorer 11 from the horrible Internet Explorer 6, which caused nightmares for all front-end developers for decades. However, some people still use Internet Explorer 6. Here is a very funny code you can use in your HTML pages if you want to get rid of this prehistoric browser.

This code will crash Internet Explorer 6. Boom!

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

3. Restrict Uploads To Specific Mime Types

An attribute called accept has been introduced with HTML5. This element is used for restricting file upload to mime types specified on the input type="file" element. Uploads that contain comma-separated lists of mime types will be accepted via the accept attribute. Images are only accepted in the snippet below.

<input type="file" name="media_empty" accept="image/gif,image/jpeg,image/jpg,image/png">

4. Turn Off Autocomplete for Input:

A one-time and unique text input would make use of this. It's helpful for things like CAPTCHA inputs, one-time use codes, or turning off the browser's default auto-suggest/auto-complete when you have your own built-in functionality.

<input name="q" type="text" autocomplete="off"/>

5. Get Directions Form (Google Maps):

saddr = a blank field to enter the START address
daddr = an address hard-coded at the end

A pop-up window with directions appears when you enter an address and press the button. If you don't enter an address, a map of the END address will open.

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

6.iPhone Call & SMS Links:

Apple's iPhone introduces the ability to create call links and text links quickly. The following code snippet can be stored in your snippet library

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

7. Load JavaScript Asynchronously:

HTML5 supports asynchronous loading of JavaScript files. The async attribute should be added to your script tags

Here is an example of asynchronously loading a JavaScript file. Consequently, the browser will load both HTML and JavaScript files simultaneously.

<script src="//cdn-5ce4a003f911c80f50818892.closte.com/script.js" async></script>

8. Define Viewport for Responsive Websites:

Setting the viewport is essential when creating a responsive website. Your document's head section should contain the following HTML code

Using this HTML snippet, the layout will be rendered in a 1*1 aspect ratio on all screens and removing the pinch-to-zoom functionality from mobile devices such as iPhones.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

9. Regexp Pattern For Email Validation:

HTML5 allows, among other things, regular expressions to be used to validate emails. Here is a regexp pattern ready to use for validating an email address.

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

10. Downloadable Files:

With HTML5, you can force the download of files. Here's an example of a downloadable file.

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

I hope you find these snippets useful do let me know your thoughts in the comments section

You can now extend your support by buying me a Coffee.😊👇

Thanks for Reading 😊