However, make that innerHTML invisible by setting the color equal to the background-color.
style="color: white; background-color: white"
Then use absolute positioning to place some text of the actual button label you want to use right over the button. I know that can be done but I'm not that good with CSS positioning. Perhaps someone can produce a working example.
Anyway, still messy but requires no javascript or any special server side code.
To answer my own question, the problem with putting text over the button is that the button won't click when the cursor is over the text. I can however position a <label> over the button and set the "for" attribute to the button's "id" attribute. That will submit the button value but you don't get any visual feed back when it's clicked so still not a perfect solution.
Comment
What about doing something like this: set both the value attribute and the innerHTML to the actual value you want to submit.
<button type="submit" name="command" value="comand123">command123</button>
However, make that innerHTML invisible by setting the color equal to the background-color.
style="color: white; background-color: white"
Then use absolute positioning to place some text of the actual button label you want to use right over the button. I know that can be done but I'm not that good with CSS positioning. Perhaps someone can produce a working example.
Anyway, still messy but requires no javascript or any special server side code.
Replies
To answer my own question, the problem with putting text over the button is that the button won't click when the cursor is over the text. I can however position a <label> over the button and set the "for" attribute to the button's "id" attribute. That will submit the button value but you don't get any visual feed back when it's clicked so still not a perfect solution.
<html>
<head>
<style type="text/css">
div.btn { position: relative }
input.btn, button { width: 100px; color: #ddeeff; background: #ddeeff }
label.btn { position: absolute; top: 2px; left: 0px; width: 100px; text-align: center }
</style>
</head>
<body>
<h3>Title</h3>
<p>This is some text</p>
<form action="" method="get">
<div class="btn"><input id="123" class="btn" type="submit" name="command" value="123"/><label for="123" class="btn">Howdy</label></div>
<br>
<div class="btn"><button id="123" type="submit" name="command" value="123">123</button><label for="123" class="btn">Howdy</label></div>
</form>
</body>
</html>