In the web design industry there are many different rulebooks you can follow. Most notably the World Wide Web Consortium is renowned for creating these standard rules of the road. Web browsers do not always conform to these standards, thus you have many of the hacks seen today(such as Internet Explorer).

In this guide I’d like to focus solely on building input forms for the web. There are plenty of semantic rules to cover for both beginners and experienced web developers. To gain some further insight into the discussion check out this W3C FAQ on the topic of our ‘semantic web’. It goes into a lot of detail and behaves as the perfect starting point.

iPhone wireframe featured image shot

Why Build with Semantics?

The idea behind a properly-coded web form is to adhere to standards which make it easier on web browsers and users together. The WWW is truly an Internet of data and information – this is the purpose of websites. To portray information in a specific way.

Well when dealing with forms you’re looking to extract data and possibly save it in your database. Semantic forms deal with the concept of data-driven web forms and how you can secure this information. The goal is ultimately to provide a similar experience between all web users on all Operating Systems worldwide. It’s quite an undertaking and has admittedly come very far in just a few short years.

regular interior design showcase housing

You have to understand that semantics are not something you can visually notice right away. It’s all about how you construct data on the page to present to visitors, along with how you manage user interaction. Many of the same ideas have been converging which lead to an openly transparent data model for the Internet. It’s a beautiful idea and would certainly affect our perceptions of how to build a standard HTML-based website.

Using Proper Inputs

Some different layers of HTML input elements are more purposeful than others. When you need to take in a short amount of text from a user – such as a username, last name, street address – the best way is with a typical input text field.

There are even newer input types which were released with the HTML5 specs. Address isn’t exactly one of the key components, although it does play a large role in the user data scheme. I have compiled a small list below containing some of the newer HTML5 form input types.

  • search – specialized search field
  • tel – single-line field for numerical phone number input
  • url – specifies a single-line field for a web address
  • email – another single-line input for the user’s e-mail address
  • color – enhanced HTML5 input for picking a color set

These are just a few examples of the most notable changes. This article on Opera’s dev blog goes into a whole lot more detail regarding the new form elements. There’s a lot to understand even without the new HTML5 standards. But these regulations only make web development easier and more streamlined than ever before.

Dynamic HTML5 Form Attributes

There are a couple new attributes introduced in web forms for HTML5. One such example is the placeholder attribute which you can setup on any standard input text field. It behaves as a default label when there is no text entered in the field.

artist illustrator work desk macbook

So as your form originally loads you can set the placeholder text to display what the user should enter in each field (eg. name, e-mail address). This doesn’t work so well on password fields since the placeholder text comes out looking like small circles. But this heavily-supported feature is perfect for saving room in your layout by removing unnecessary labels. And best of all the placeholder text will auto-clear itself when the user clicks to focus!

Another attribute tabindex is very important in properly-coded web forms. Semantics dictate that you should set a tabindex on each of the required fields in your page. Start with 1 and work upwards until you have reached the submit button. This is crucial for users relying solely on keyboard input, as they can tab between the many fields of data with ease.

Adobe Photoshop toolbar work station

You can read a bit more about this attribute from Sitepoint’s reference guide. Their online articles provide a lot of detail for web developers to get moving with properly-coded input fields. And this attribute is actually supported in HTML4 which makes it compatible with plenty of older web browsers – yes even IE 6!

Reduce jQuery Calls

It can seem really unique to implement custom JavaScript functionality within your web forms. These behave exceptionally well in modern browsers and even many mobile smartphones as well. Very flashy effects to entice your visitors… but without proper fallback methods these scripts can leave your page unmanageable in certain scenarios.

organic HTML JavaScript diagram chart

Users are simply looking to fill out your form in the most simple way imaginable. They often aren’t looking for popup dialogs or hidden label attributes, although these can be helpful. It’s best to provide a fallback method with CSS if you do anything dynamically. But at that point why not just move all labeling to a standard HTML/CSS format?

I recommend sticking solely to browser-based HTML5 effects if possible. This new specification along with CSS3 are heavily supported in mostly all modern web browsers. And they also have a lot of potential to grow in the next couple of years.

Fieldsets and Legends

These are two older element tags which have made their way into the modern drafts of HTML5. Although I don’t run into these elements nearly as often, they can play a large role in your web forms.

Tokyo, Japan lights at twilight

Fieldset data is perfect for breaking up larger forms with 8+ different inputs. Legend tags are merely labels which identify the entire fieldset – such as purchase info and shipping info in a standard shopping cart. As you are working with these large-scale HTML forms having the fieldsets in place can make data a lot easier to manage.

Not only from a semantic level, but also from a user’s perspective. As your visitors are scrolling through each area of your form it becomes a whole lot easier to identify datasets. This was the original intention of fieldsets all along – it just so happens we’ve only recently achieved a level of complex form data management where they have become truly useful again.

Related Links

Conclusion

The whole purpose of building towards a semantic web is to consolidate information under one standard. If all web developers could follow the same rules, it would make constructing webpages that much easier. It is this type of data model which separates HTML/CSS from full programming classes such as Ruby on Rails or Cocoa.

Have you worked closely with the semantic web or do you have any thoughts on building semantic web forms? We would love to read your comments in the post discussion area below. This battle for a singularity in web design is constantly raging – and yet we have clearly made some dramatic improvements over a relatively small time period. Who knows what the next 2-3 years could hold for the design industry!

Posted by Jake Rocheleau

Jake is a writer & digital designer/illustrator. He writes about all things web and creative. Check out his website for work samples and follow his latest updates on Twitter @jakerocheleau.

Leave a reply

Your email address will not be published. Required fields are marked *