Why Doesn’t My Submit Button Display the Entire Label: The Importance of Using Quotes with HTML Attributes

Several years back, there was a big push from the Web community to use a glorious advancement called XHTML. Although some will argue that XHTML movement was pointless, it at least changed the habits of developers like me who were a little loosey-goosey with standards. One of which is the use of quotes around all attributes, or lack thereof. Although the page may display fine without quotes, there are cases where the code won't work as expected.

Now if you don't enclose the attribute values with quotes, there's a fairly good chance that the page will display properly. For example, the following code displays just fine:

But what if we want the form's submit button to say "Send Info":

Well the button only says "Send"…what happened to the "Info" part? Without the quotes, the browser considers everything up to the first space as the value. The space basically indicates the end of one attribute name/value combination and the potential beginning of another. So it processes "Info" as an attribute, which ends up being invalid and ignored. In order to specify that both words should be used as the label, we need quotes:

Note that I would also recommend using quotes for the other attributes, but I'm sure you can handle that part.