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.

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.