forms and user experience in javascript

As a lot of us probably know at this point, JavaScript makes a web page interactive, which makes for a more user-friendly experience. Since we’ve been making a lot of forms in Ruby, I was curious about how JavaScript would specifically enhance user-experience…or really what this meant for our forms. After successfully making the same form (or at least very similar ones) in Ruby a number of times, I’m pretty sure I convinced myself that I had reached the pinnacle of forms and was basically a form pro. But then I went on pinterest and amazon and was quickly brought back down to earth when I realized how much better the forms on real websites are. So I looked into a few features that I definitely did not know how to do without JavaScript.

JavaScript does a lot in the way of guiding the user and making their experience more predictable. With js the form basically does the thinking for you; you just have to do the minimum to answer its questions and then give the okay.

For instance, something I’d gotten used to that I kept forgetting wasn’t a feature in our forms yet was having the cursor automatically set itself in the first text box of a form so the user doesn’t have to click inside but can immediately start writing. So, for instance, if you’re signing into your amazon account, you’ll be taken to a page where the cursor has already placed you in the password field so you can just fill it out and then hit enter.

This is achieved with the .focus method.

document.getElementById("textboxid").focus();

You can also set a default input value for a text field that will be replaced as soon as the user starts typing.

This is done with a .value method:

An onLoad event handler can be used to clear the text area as soon as the user focuses on that field. This page is really helpful if you want to implement this feature when the page loads.

Libraries and plugins

While looking at forms, I ended up looking at what other things you can do with JavaScript that involve the user and came across a ton of cool libraries/ plugins, some more well known than others. For instance, JQuery has endless plugins that are super easy to use and that can transform your page in terms of its visuals and its user efficiency. If you’re thinking of a feature you’d like to add to your page but don’t know how to code, chances are there is already a plugin for it. You can do a ton with these. For instance, the Pickadate.js creates a calendar-esque “date selection widget” that you can customize with CSS.

There’s also Chosen which converts a select input into a dropdown that is searchable.

Basically, between JavaScript and its many libraries you can build a page that does pretty much anything you, as a user, would want it to do. Right now, about 92% of all websites use JavaScript. Facebook, Google, YouTube, Yahoo, Amazon, Twitter, and basically most any popular site you can think of all use it, which makes a lot of sense when you think about what your typical experience on those pages is like.

Anyway, these are just a very few examples of what you can do with this language; there is a ton more — especially in tandem with js libraries — but hopefully this gives a little bit of context or at least refreshes your memory about what is possible outside of the forms of pollywog ranch.