Excerpt – HTML Forms & Interactive Elements: Or How to Poke a Zombie in the Eye

While you won’t need a deep understanding of HTML in order to stop the zombie hordes with this book, you will need to know at least the basics of how an HTML tag works, understand attributes, and be familiar with the most used tags. If you’re feeling like you’ve arrived at the zombie fight with a toothpick instead of a baseball bat, I recommend A Beginner’s Guide to Learning HTML (and Smacking Zombies Upside the Web Development). If you’re ready to swing that bat and use it in new and interesting ways (like poking zombies in the eye), then let’s get to it.

Anchoring Zombies

The anchor tag (AKA the a tag or link tag) is one of the most basic interactive tags. You click or tap on it, and you go to a new place. While you might already have a good idea about how the tag works, there are a few nuances and options that can come in handy as we battle zombies.

Typically, you link to another web page, but you can also link to an e-mail address or a phone number, and you can initiate an sms text message.

E-mail

In the href attribute, place “mailto:” and then the e-mail address. When a user clicks/taps on this link, the default e-mail client will open up with the e-mail address in the To: field. For example:

Every e-mail you send <a href="mailto:zombiekilla@undead.institute">kills the zombies a little more</a>.

But you can also add CC and BCC and default subjects and content. The user can, of course, change these once they’re opened in an email program, but it can be helpful to give a user a template to work with and it can be helpful for you to know the context of the person’s message.

These are added in name/value pairs just like url variables. A ? separates the URL (in this case the mailto:) and the first name/value pair. Subsequent name/value pairings are separated from each other with an &. Any character that doesn’t work in URLs must be replaced. For instance the space character that would be between words in the subject and body is replaced with %20 which should show up as a space almost anywhere except in the URL itself.

<a href="mailto:info@undead.institute
?cc=zombie-cindy@example.com
&bcc=zombie-bob@example.com
&subject=The%20Apocalypse%20is%20Now!
&body=I%20wants%20to%20talk%20about%20the%20Apocalypse...">
Wanna Talk about the Apocalypse?</a>

Phone

A telehone link has a similar format to the e-mail link. It just uses “tel:” and a hyphen-delimited phone number. For example:

Just call <a href="tel:800-555-5555">1-800-ZMB-FREE</a> for the best deal in town. Free zombies.

When you tap on a telephone link on a mobile device, it usually opens the phone app and initiates a call.

Night of the Living Tip:

To use a country code in the link, put a + before the code, and then a dash and the rest of the number.

SMS

You can also initiate an sms text session from a web page.

<a href="sms:877-555-5555">Text me.</a> I’ve been lonely since the apocalypse wiped out 90 percent of people on Earth.

Partial Zombies/Document Fragments

These are links within a page. You’ll often see these with Frequently Asked Questions (FAQs), where you have a question at the top that you click on, and you’re taken down further in the page to where the answer is. To do this, you’ll need an element with an id and a link to that element, which will take you to that section of the page. The link to that element puts the id name with a # before it into the href attribute (The # notation is similar to how you’d address an id from CSS)

<h2>Zombie Killing Questions</h2>
<ul>
<li>
<a href="#maximizekillsanswer">How do I kill the most zombies?</a>
</li>
*** More questions left out ***
</ul>
<div id="maximizekillsanswer">
<p><b>Answer:</b> Properly coded websites.</p>
</div>

An anchor link doesn’t have to be all by itself, it’s a relative link and you can link to a part of a different page by adding the #id-name to the end of a url e.g. https://example.zombie/#the-manitoba-horde

Targeting Zombies

Sometimes when you’re in the midst of buying your zombie weapons on whatever e-commerce store survived the apocalypse and you have a question about shipping options, you don’t want to lose the cart you’ve spent six hours meticulously curating. In those instances, you want a link to open in a new window (or a new tab, depending on the user’s settings). For this, you use the target attribute, and set it to “_blank”. (There are other values for target, but the majority of them are either deprecated/no longer used or only apply in very narrow circumstances.)

<a href="shippingdeets.html" target="_blank">Post Apocalyptic Shipping Methods</a>

Night of the Living Tip:

Use target=”_blank” very, very sparingly. You should really only use it to prevent users from losing their place in a site or when they need to reference material while looking at the current page. It can annoy users if every link opens in a new tab. They’ll have thirty-seven tabs open just for your site. Plus it short-circuits the back button so that they can’t go back (they’re in a new window/tab with no history, so there’s nothing to go back to in this window/tab.).

Want to keep reading? Pick up HTML Forms & Interactive Elements: Or How to Poke a Zombie in the Eye