Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 type="text" name="test" id="test" />
 <label for="button">
  <input type="submit" name="button" id="button" value="Send!" />
 </label>
</form>
like image 568
Denis Bobrovnikov Avatar asked Nov 23 '10 15:11

Denis Bobrovnikov


2 Answers

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.

like image 125
Stephen Watkins Avatar answered Oct 15 '22 18:10

Stephen Watkins


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.

like image 31
stevelove Avatar answered Oct 15 '22 18:10

stevelove