Multiple submit buttons but no JavaScript
My first step was to reverse the order of the submit buttons in the markup. Because even though it is not explicitly defined in the HTML spec every browser uses the first submit button that appears in the markup as the default button. So my markup looked something like this:
<input type="submit" value="c" ...
<input type="submit" value="b" ...
<input type="submit" value="a" ...
So if you simply hit the enter key the browser will use submit button C.
Now, of course I do not want to show the buttons to the user in reverse order. Therefore I have to arrange them in right order with a bit of CSS. The most obvious solution here is the use of float: right. But there are cases when floats can break your design. In my case, for example, I had to center the submit buttons horizontally. Assume the following markup:
<div class="outer">
<div class="inner">
<input type="submit" ...
<input type="submit" ...
<input type="submit" ...
</div>
</div>
You might think, well, why not just simply set text-align to center on div.outer? Well, this can work as long as you know the exact width of the inner div. Or in other words: the width of the inner div has to be the sum of the width of each submit button.
But what if both the width and the amount of submit buttons can vary? In this case there's no way to know the width of the inner div beforehand. Actually I found a solution with display: inline-block. However, this worked on FF/Safari only. And not on IE, as usual ;-)
Fortunately I stumbled across another CSS property: direction. And this one did the trick:
<div class="outer">
<input type="submit" value="c" ...
<input type="submit" value="b" ...
<input type="submit" value="a" ...
</div>
div.outer {
text-align: center;
direction: rtl;
}
Voila. A centered row of buttons with the rightmost submit button C as the default button.
Your Comment
Don't be shy. Please feel free to add your comment.