JavaScript: select all checkboxes in a form

Tweet

A common feature in many web site is the possibility of checking a series of checkboxes in just one go. For example, when managing emails in a web site, we can allow the user to select a bunch of messages and move them all together.
How can we create such a toggle all button?
We are going to use a simple JavaScript function. Follow me and see how...

JavaScript: avoid double submit in forms

Tweet

When working with complex forms, a developer's nightmare is the double submit of data. There are many users that double click on links, buttons etc, as if the browser was just like their desktop. If a user submit the form data twice, it could be that we will gather information twice, creating redundant records in our database.
There's a simple solution to that, and today I will show you how to do it with a little JavaScript function.
Follow me...

CSS: input text inside table cell without overflow

Tweet

If you ever worked with forms and tables together (and I believe you have at least once in your web developing career), you surely have found that input boxes width can be difficult to manage.
Presume you have a table and inside a <td> you have an input text box which should have a 100% width. The input box should stay inside the <td> and fill all the available space. However that doesn't happen, and the input box overflows the available space. Why?

Explanation

The reason is because you have set borders and paddings. Let me show you an example: your input box has a width set to 100%, a border of 1px each side and a padding of 2px each side. That means, the input box width will be:

100% + 2*(2px+1px) = 100% + 6px

Those extra 6 pixels are your trouble, and the input box will overflow by those 6px.

CSS: how to create a stylish search input box

Tweet

The search capability in modern web sites is an established feature. Visitors should always have the possibility to look for text or else, and search a whole site for specific things.
A search form can stay anywhere, however, it seems that the best way is to insert the feature on every page, possibly in the top right corner. If we browse all major web sites, we will notice that the search box is always there, ready to be used when needed.

In the following post, we will create a search form and style it a bit. The resulting box will be:

Search Box

Note that the above is an image, so please do not try to use it.
Ok! Now let's try to build it. We are going to use plain HTML and CSS.

CSS: style your form elements

Tweet

When talking about how to style an HTML element, it is always difficult to meet everyone's tastes.
Keep that in mind when reading the following post, because we are going to show how to style form elements with CSS, considering two possible extreme situation: with a white background and with a black background.

We are going to work on the input, text area, select and button elements. We are going to use CSS and specifically the following properties:
1) background color;
2) font family, size and color;
3) text alignment;
4) width and height;
5) padding;
6) border radius;
7) border;

Let's see what we can do.

HTML: HTML5 new input types

Tweet

HTML5 introduced some new input types with better control and validation. When the features will be completely supported by all main browsers, creating forms will surely be easier and faster.
The new types are:

• email;
• url;
• number;
• range;
• dates;
• color.

As you can see they are quite interesting. Let's take a tour and see how they work.

HTML & ASP: form methods, get or post?

Tweet

"In forms, should I use 'get' or 'post' when defining the method?"

This was a question a friend of mine asked me a few weeks ago. I thought he was joking, and I tried to find a humorous answer in the back of my mind. Finding none (as I'm a serious guy!), I answered with the usual backup phrase: "It depends". That gave me enough time to think, search my brain database for a technical explanation, and then provide a complete and reasonable answer to his question.
The problem was that the first word which came to my mind was 'idempotent'. I ended up answering his question, without using the word 'idempotent'. And believe me, my friend was happy enough with my answer. The debate went on and we talked about the different way of using the submitted data with ASP.

My friend is not really new to programming in HTML or ASP, but confessed that he has always been confused by the two form methods. That gave me the idea to write the following post.

ASP: how to create effective date fields for forms

Tweet

Today we are going to create a date field for a form. The goal is to make it beautiful to see, easy to use and with validation. We are going to use ASP and just a touch of CSS.
The form element will look like:

Day 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Month 01 02 03 04 05 06 07 08 09 10 11 12 Year 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011

In the example above, I have inserted all the options manually, but as I will show you, we are going to make the values of the three option controls automatic. - Note that if you are reading this post via your RSS reader you might not see the above example in the way it was meant.

Ok. Let's start with the code.

VBScript & ASP: loops!

Tweet

Everybody uses looping functions with VBScript, however do we know how many possible variant there are? How many statements? Ok, now close your eyes and count them. How many statements can you remember?

The looping statements are used to repeat a block of code for a predetermined number of times. There are 4 statements to do so:
1) For ... Next - the code is run a number of times;
2) For Each ... Next - the code is run for each item in a collection;
3) Do ... Loop - the code is run until a condition is met;
4) While ... Wend - the same as Do ... Loop.

jQuery Tools: The missing UI library for the web

Tweet

Today I would like to share a incredibly rich site, where jQuery is used to create useful and ready made tools. The place is:

jQuery: 9 plugins for forms

Tweet


When handling forms in a web site or application, jQuery can make things easier. Here I've gathered some very helpful plug-ins you might use when needed. Please let me know your thoughts!