How To Create Super Easy to Use Forms
If we make our users to fill out a form, we should make it as simple as possible for them. If not we might end up with entries like ‘asdf’ and ‘aaaaa’ … not exactly what you’re looking for. Here is a tutorial that will show you how to quickly create a form that formats your form inputs the way you want them, while keeping it easy for the user.
First off, here is an example of what we will be making. When you type in the boxes it automatically formats your text to how it should appear. If you try and type an illegal character it won’t let you. Making things super simple for the user.
Getting Started
We will be using a jQuery plugin for this one, so if you don’t have jQuery you will have to get it. You can download it from jQuery’s website. The plugin we will be using is called meioMask, you can download a compressed version or the full version from their website. Once we have all these we can begin.
Creating the Form
First thing is first we need to create the form and import jQuery and the meioMask plugin.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <html> <head> <!-- Import Jquery and meioMask plugin --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript" src="jquery.meio.mask.min.js" charset="utf-8" ></script> <!-- Basic Form Styling, this is not required for form to work, just to make it look pretty --> <style type="text/css" media="screen"> body{ font-family: Arial, "MS Trebuchet", sans-serif; } form{ background-color: #efefef; padding:10px; width:150px; border:1px solid gray; } </style> </head> <body> <!-- Layout text input with labels --> <form action="#" method="post" accept-charset="utf-8"> <!-- The plugin usses the 'alt' tag on the input tag to identify which input gets which mask --> <p><label for="cc">Credit Card</label><br /><input type="text" name="cc" value="" id="cc" alt="cc" /></p> <p><label for="phone">Phone #</label><br /><input type="text" name="phone" value="" id="phone" alt="phone" /></p> <p><label for="price">Amount $</label><br /><input type="text" name="price" value="" id="price" alt="price" /></p> <p><input type="submit" value="Submit"></p> </form> </body> </html> |
Be sure to add ‘alt’ attributes to your input tags. meioMask uses these to specify which type of mask to use. You can create your own alt tags or use meioMask’s presets. For this example I will be using one original tag (price), one preset(cc) and one that overwrites a preset (price).
Adding The jQuery
Now comes the magic. We’ll setup the masks and assign them to the text inputs when the document is ready.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script type="text/javascript" charset="utf-8"> $(document).ready(function() { //Setup for new masks and for masks that overwrite older ones. $.mask.masks = $.extend($.mask.masks,{ //We use the '9' because that stands for [0-9], 6 = [0-6], 2 = [0-2]..etc phone:{ mask : '(999) 999-9999' }, //The type reverse simple reverses the order of the mask so text is entered //from right to left instead. price:{ mask : '99.999,999,999,999', type : 'reverse', defaultValue: '000' } //We are not doing the Credit Card text input because we are leaving it to //the presets (9999 9999 9999 9999). }); //Assign these masks to all text input $('input:text').setMask(); }); </script> |
You’ll notice that we are only using the number 9 in all of our masks. This simply means, any number from 0 to 9. meioMask has a bunch of default rules in place for both alpha and numeric characters. You might have also noticed we didn’t write a mask for for the credit card text input. Because we used “cc” as it’s alt tag we are using meioMask default mask for cc which is 9999 9999 9999 9999. Just a note, you can change your masks by using the syntax $.mask.masks.phone = {mask:’(999) 999-9999′} if you want to only change one mask at a time. The method I used is prefered for several mask changes.
Putting it All Together
That’s it. Pretty simple huh. Here is the finished code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript" src="jquery.meio.mask.min.js" charset="utf-8" ></script> <style type="text/css" media="screen"> body{ font-family: Arial, "MS Trebuchet", sans-serif; } form{ background-color: #efefef; padding:10px; width:150px; border:1px solid gray; } </style> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $.mask.masks = $.extend($.mask.masks,{ phone:{ mask : '(999) 999-9999' }, price:{ mask : '99.999,999,999,999', type : 'reverse', defaultValue: '000' } }); $('input:text').setMask(); }); </script> </head> <body> <form action="#" method="post" accept-charset="utf-8"> <p><label for="cc">Credit Card</label><br /><input type="text" name="cc" value="" id="cc" alt="cc" /></p> <p><label for="phone">Phone #</label><br /><input type="text" name="phone" value="" id="phone" alt="phone" /></p> <p><label for="price">Amount $</label><br /><input type="text" name="price" value="" id="price" alt="price" /></p> <p><input type="submit" value="Submit"></p> </form> </body> </html> |
Be sure to check out the rest of the documentation at meioMask’s website. This was just meant to be a brief overview of what it can do. meioMask is far more powerful than what I have used here. Also you should still validate any code that comes through your text input. This is suppose to make your forms easier to use, but I wouldn’t consider them bullet proof validation. Happy Coding!
Thanks for the article but your code blocks are impossible to read with that color scheme. How about just black on white?
Hi!
The masked input field works only in ‘overwrite’ mode. Is there a possibility to make it works in ‘insert’ mode as well?
Thanks