Submit Form Using Label Tag

It's difficult to style submit inputs without using images or javascript.

As I know there is no way to insert HTML code right into the sumbit input value. And if I wrap submit input in a div element (for example to add multiple borders), not the whole area will be clickable.

Will a click on a label cause the submitting of the form in all browsers?

<form method="test.rb">
 <input 开发者_StackOverflow中文版type="text" name="test" id="test" />
 <label for="button">
  <input type="submit" name="button" id="button" value="Send!" />
 </label>
</form>

---

According to the W3C on associating labels:

The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button).

Thanks to @Jeremiah Isaacson for pointing that out.

---

Old Answer

Yes, this will work. I can't validate the behavior across all browsers, but here is what W3C spec has to say:

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element ... When a LABEL element receives focus, it passes the focus on to its associated control.

So, I guess by clicking the LABEL, you are essentially clicking the submit input.

Thanks to @stevelove for pointing out the feasibility of this.

---

If the issue is putting HTML code inside your button, you should use <button> which will allow you to do just that.

<button type="submit" name="button" id="button"><img src="button.png" />Send!</button>

But to answer your question about the <label>: No, that will not work. Apparently it will work, and after giving it some thought, I see no reason why it shouldn't.

---

it's difficult to style submit inputs without using images or javascript.

It's very easy to style inputs without using javascript or images.

using css - style for all submit buttons - input[type=submit] or use a class input.submit-btn applied to specific elements

you can style colour, border, background, padding, position, font weight, gradients, drop shadows..all number of effects using css...

voila sexy button -

   input[type=submit] {
        padding:4px;
        color: #fff;
        margin-top: 10px;
        background-color: #e96000;
        border: none;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6900), to(#e96000));
        background:  -moz-linear-gradient(25% 75% 90deg, #e96000, #ff6900);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }