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.

Background

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

<p style=font-style:italic;>This paragraph displays in italics</p>
<a href=http://www.google.com/>Visit Google.com</a>
<form method=post name=form action=myform.php>
<input type=submit name=submit value=Submit />
</form>

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

<form method=post name=form action=myform.php>
<input type=submit name=submit value=Send Info />
</form>

If you run the code, you'll note that the button only says "Send". So what happened to the "Info" part? Without the quotes, browsers consider everything up to the first space as the attribute value. The space basically indicates the end of one attribute name/value pair and the beginning of another. So the browser attempts to process the "Info" part as an attribute which ends up being invalid and is ignored.

Solution

To specify that both words should be used, we need quotes:

<form method=post name=form action=myform.php>
<input type=submit name=submit value="Send Info" />
</form>