Question

I’m currently working on a website that works without any javascript. I’m going to add in oohs and aaahs once I have all of the functionality I want using strictly html/css and form elements for input.

There is one little snag I’m hitting.

So, I have a typical form using an input button to submit a POST. When the post is performed, the html returned has div I’m trying to make look identical (except for text color) to the input that was originally there. I’m doing this because I don’t want the button to do anything. It essentially becomes an indicator that the intended action was performed.

I want all of the aspects (except color) to be the same. But I’m noticing that there are different rendering rules for input than there are for div tags. I’m able to mess with padding/width/height/etc to get the div to look pretty much the same as the input tag it is replacing, but I’ve got a feeling this is going to be buggy across browsers and would prefer to just use an input that literally does nothing.

I ready up on the input tag, and it looks like leaving the value of the action attribute, or not including it at all (per the html5 spec) will reference the current page – but I don’t want this extra request being fired to the server.

So, that being said, my question is – is there any (preferably clean) way to make an input tag do nothing but sit there and look pretty?

Answer 1

Sounds to me like you need a disabled button

<input type="submit" disabled="disabled" value="foo">
<button type="submit" disabled="disabled">foo</button>