How do you have rounded-edge HTML form text input boxes?

And exactly what site were you visiting that you saw these sexy curves in the input box? :-)

Nevermind. Let's just make sure that we're talking about the same thing here, because I think you're just asking me a question about applying some CSS (cascading style sheets) styling to a standard HTML form with a text input box. Right?

So, for example, if you go to the Google home page, you see a big box where you can type in your search query. It's square, and it's rudimentary. Works for Google and its approach to minimal, uncluttered design, but, yeah, something a bit more rounded does add a bit of pizazz to things.

The basic of an HTML form can be summarized easily enough:

This type of basic HTML form produces something like this:

Yeah, boring is the word for it. Now we can wrap it in a box by adding a "div" tag, but let's actually figure out what the site you visited was doing to get the input box itself to have rounded edges.

Turns out what you're asking about is one of a number of super-cool additions to HTML forms that come courtesy of the new HTML 5 standard. In fact, simply replacing "text" with "search" magically transforms that input box to be exactly what you want:

Tip: if you don't see it, it's because your Web browser isn't HTML5 compatible. Get a newer one, it should be different! :-)

Easy enough, isn't it?

Now it turns out that upon reading the HTML 5 input element spec that there's a bunch of neat stuff you can do, like automatically have page focus jump to that input box (as Amazon does with its search box) by adding autofocus, and you can even now have text that appears in the box, just to vanish as soon as someone starts typing, by using the attribute placeholder="text".

Let's see "placeholder" in action. Source code first:

And the resultant input box, all tricked out:

What do ya think?

HTML5 now also includes a bunch of other specific data types, though how the browser handles those specific types is still up for grabs. If nothing else, I'm sure it helps with filling out forms automatically. The most useful? type="email", type="url", and type="number".

Actually, HTML5 has some very cool tricks for entering numbers, including the ability to have a slider (that's type="range" if you want to Google it), but type="number" is my favorite. Here's a simple example:

and the result:

Tell me that's not darn cool!

Armed with those you should be able to quickly and easily spiff up your HTML forms on your site. Now, it won't work with every single Web browser out there, but by definition, it'll all default to reasonable behaviors anyway, so there's really no reason not to do it. Now excuse me while I check the forms on my site to see if they're updated for HTML5...

• Boxes around words or sentences with CSS?
• How do I implement add rel=author for Google serps?
• How can I attractively embed mp3 audio files on my Web pages?
• How can I embed search results on my own page?
• How do you have rounded-edge HTML form text input boxes?