So I’ve inherited this form with prefilled form fields like “First Name”, “Phone” or “Zip Code” so users will know what to do with the fields. But if anyone just hits the button, the form is passing “First Name”, “Phone” or “Zip Code” into the database. The onFocus in the doesn’t appear to be working. Any ideas?
<input type="" maxlength="25" name="firstname" tabindex="6" id="firstname" class="textfield" value="First Name" onFocus="if (this.value == 'First Name') {this.value = '';}">
Thanks in advance,
-Bob
As others have suggested, use the
placeholderattribute to set the ‘label’ of the field. In addition, if you are already using jQuery to simplify your Javascript, you can use a plugin like this one which will add support for the placeholder attribute for non-HTML compliant browsers.These plugins typically also take care of the crucial step of removing the placeholder text from your fields just prior to the form being submitted to the server, which should send blank values to the server, rather than the placeholder text.