Nothing stops zombies better than HTML5 forms and interactive elements (not even a shotgun or a harsh talking to from their mother). These HTML5 tags are engaging, helpful and don’t require complicated coding. In short they’re like a bazooka to a shotgun, taking down zombies with ease.

HTML5 Forms & Interactive Elements

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.

InteractiveHTML

Preface

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.

Anchoring Zombies

You may feel like a zombie when filling out a form, but getting your information into a website and getting info from a user are important parts of a website’s zombie-fighting immune system.

Undead Forms

Another important attribute on the form tag is the method attribute, which determines the http method (also called the http “verb”) that is used to send the form data to the server. The methods available to the form element are get and post. Get puts all the form data into the URL as name and value pair variables.

Contagion Methods

Inside the form, you have a variety of elements that are used to collect information.

Apocalyptic Form Fields

As I said before, the input tag handles most of the different types of fields a form uses. The type attribute determines what type of content will be allowed or what type of interaction will be used.

The Input Horde

Beyond the jack-of-all trades that is the input field, there are a few other types of content we can request in our forms.

The Zombie Fields

There are several other important tags within forms, even if they don't actually take input. The most important of these is label . You can sometimes figure out what a form field is asking for from the context or placeholder content. But, in general, adding a label will help both users and search engines to find content more easily. Labels can be paired with inputs and other form elements in two ways. One way is by placing the input or other field inside the label. For example:

Accessibilitizing Zombie Forms

These attributes can be used with form fields.

Apocalyptic Attributes

Undead Summary Details

Grab your favorite pre-apocalyptic snack, fire up the old computer (or device of your choice), and start tippety-typing those zombies into oblivion. It’s time to see what zombie kickin' knowledge you’ve learned.

A Poke in the Eye

That wraps up our discussion of interactive HTML elements, but there’s still a lot to learn about web development. If you’d like to keep learning and beating the snot out of zombies, check out: Beginner Usability: A Novice’s Guide to Zombie Proofing Your Website , Beginner CSS: Like Putting Lipstick on a Zombie , Intermediate CSS: Zombie in a Cocktail Dress or Responsive Design: An Undead Introduction to Mobile Web Development .

Until next time...

Join the Undead Institute Facebook group and get answers. https://www.facebook.com/groups/490540551375786/

HTML5 Forms & Interactive Elements

InteractiveHTML

Community Questions