HTML forms are certainly not well liked, and are very rarely considered fun. However, there are ways to make your forms look and function more concisely. Putting the labels inside your form fields can shorten up your forms, save space, and allow a little more creativity in your form design.
In a normal form, you may have your labels above or before your form fields.
<label>Last Name</label>
<input name="lastname" type="text">
Instead of taking up twice the amount of space by attaching a label, we can instead put a preset value inside the input in place of the label.
<input name="lastname" type="text" value="Last Name">
Now our label looks a lot cleaner on load. Unfortunately, since we only used a value, upon the user focusing on the field, the text inside will act as if it was a value typed in. This means the user will have to delete the value before entering their own. This certainly doesn't act like a label, and is a pretty poor user experience. How about we use some JavaScript to tell the form to empty when the user focuses?
<input name="lastname" onfocus="if (this.value=='Last Name') this.value = ''" type="text" value="Last Name">
Much nicer! Let's break down what we added.
onfocus="if (this.value=='Last Name') this.value = ''"
onfocus will run whenever the input is focused on. This means that whenever this input is focused, this will check to see if the string "Last Name" is the current value of the input. If it is (which it is by default), focusing will erase the string. We want to be specific here, because if there is a different string present, we can assume that the user has entered their information.
This is certainly a better experience for the user than what we started with, however there is one thing that could still cause problems with this input. If a user clicks on the field, making the default value disappear, and then leaves and focuses on a different field, our input will stay blank. Let's use an extreme use case to illustrate why this is a big problem:
Your user reads books by following along with their finger, so naturally when they read text on a computer they follow along with their cursor. The user visits your form with the above code and decides to read the entire form before filling it out. In reading through, he clicks on each of the inputs. Since the value doesn't come back once it is gone, your user will end up with a lot of blank input fields and no way to tell what information to enter in what box.
Try it yourself:
An answer to this is to use the opposite of onfocus, which is onblur. This runs whenever the input loses focus. Here, we'll run the opposite conditional as we did before, ensuring that if the form field is empty and loses focus, our value "label" will return to inform the user. This also lets the user simply click outside the field if they forget the label.
onblur="if (this.value=='') this.value = 'Last Name'"
Now if we add this to the same list of inputs as the previous example, clicking through all of them will not end up in any confusion, as the values will return when unfocused.
<input name="firstname" onblur="if (this.value=='') this.value = 'First Name'" onfocus="if (this.value=='First Name') this.value = ''" type="text" value="First Name">
<input name="lastname" onblur="if (this.value=='') this.value = 'Last Name'" onfocus="if (this.value=='Last Name') this.value = ''" type="text" value="Last Name">
<input name="city" onblur="if (this.value=='') this.value = 'City'" onfocus="if (this.value=='City') this.value = ''" type="text" value="City">
<input name="stateprovince" onblur="if (this.value=='') this.value = 'State/Province'" onfocus="if (this.value=='State/Province') this.value = ''" type="text" value="State/Province">
<input name="country" onblur="if (this.value=='') this.value = 'Country'" onfocus="if (this.value=='Country') this.value = ''" type="text" value="Country">
Now you have relatively smart form values that will act as labels, and will keep both your design team and your clients happy. If you'd like a more robust system than can be had from one line, check out this more elaborate example from Stefano J. Attardi.
