HTML Submit-button: Different value / button-text?

Question

I'd like to create an HTML form submit button with the value 'add tag', however, the web page is in Swedish, so I'd like to have a different button text.

That is, I want to have a button like

enter image description here

but I want to have my code like

if (request.getParameter(cmd).equals("add tag"))
 tags.addTag( /*...*/ );

Is this possible? If so, how?

• greg0ire: I think the value should not matter. You should simply check for the presence of "add_tag" in your POST data
• ijw: I read this as "I want the text of the input not to be relevant to my server side processing" so that when you have several translations for a form you don't get one of several text values posted. It matters when your form has several submit buttons and you want to do if(request.getParameter("submit-type").equals("add-tag") ... to see which one was pressed.

Answer 1

It's possible using the button element.

<button name="name" value="value" type="submit">Sök</button>

From the W3C page on button:

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content.

• ristonj: Just a note, this doesn't work as advertised on IE6/7. This article may correct the problem, but you'll have problems if you're using asp.net or another framework that disallows HTML on postback: allinthehead.com/retro/330/…
• TheSatinKnight: you could also just use the name property which provides output in POST

Answer 2

Following the @greg0ire suggestion in comments:

<input type="submit" name="add_tag" value="Lägg till tag" />

In your server side, you'll do something like:

if (request.getParameter("add_tag") != null)
 tags.addTag( /*...*/ );

(Since I don't know that language (java?), there may be syntax errors.)

I would prefer the <button> solution, but it doesn't work as expected on IE < 9.

Answer 3

There are plenty of answers here explaining what you could do (I use the different field name one) but the simple (and as-yet unstated) answer to your question is 'no' - you can't have a different text and value using just HTML.

Answer 4

I don't know if I got you right, but, as I understand, you could use an additional hidden field with the value "add tag" and let the button have the desired text.

• ijw: Not helpful with multiple buttons on the same form, which I think is the OP's problem.
• Darren: Cannot see any evidence from his question that there are multiple buttons on the same form.

Answer 5

If you handle "adding tag" via JScript:

<form ...>
<button onclick="...">any text you want</button>
</form>

Or above if handle via page reload

• ijw: Yay, JS required for every single form, regardless of simplicity. Welcome to ASP.NET.
• James Billingham: As an ASP.Net developer, I can confirm this. :P Assuming you're still living in the days of webforms anyway. ASP.Net MVC is a lot better. No viewstates, globally wrapping forms, etc.

Answer 6

The horrible (but effective) hack I wound up using for something like this:

<style>
 .addtag {
 position: relative;
 }
 .addtag span {
 position: absolute;
 left: 2px;
 pointer-events none;
 }
 .addtag input {
 color: transparent;
 width: 6em;
 }
</style>
<span class=addtag>
 <span>Lagg till Tag</span>
 <input type=submit value=add_tag name=action>
 </span>

It means that the text visible "on" the button is distinct from the invisible text that's in the button for dom purposes. It requires manually aligning the sizes, and might break tools that expect semantic html (or eye-candy around button pushes). But it works.