Prefilled form fields

Question

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

Try using placeholder="First Name" if you are using an HTML5 supported browser — Ryan
– Ryan, Commented Feb 17, 2012 at 2:01
To get the most out of Stack Overflow, you need to put in some effort. Your questions need to give enough context and detail to allow folks (like myself!) who'd like to help a chance to do so. In this case, please: show a snippet of the form HTML, show any Javascript that is involved, and detail the exact expected/desired behavior. Thanks! — Irongaze.com
– Irongaze.com, Commented Feb 17, 2012 at 2:02
<input type="" maxlength="25" name="lastname" tabindex="7" id="lastname" class="textfield" value="Last Name" onFocus="if (this.value == 'Last Name') {this.value = '';}"> — bobbiloo
– bobbiloo, Commented Feb 17, 2012 at 2:13

Niet the Dark Absol · Accepted Answer · 2012-02-17 02:03:35Z

1

First off it's bad practice, labels should be labels, placed before the field they are labelling. Not inside.

Name: [________]
=== NOT ===
[Name____]

Just like a form on paper.

If you must have the text in the box, use the placeholder attribute. But be aware that only the newest browsers support it.

As for solving the problem of default values being submitted, just check if the value you're about to enter in the database is the default value and, if so, block it.

answered Feb 17, 2012 at 2:03

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HellaMad Over a year ago

What's so bad about it? There are situations where one might be preferable over the other.

RobG Over a year ago

Once the user has replaced the default with a value, they no longer have a label telling them what the field is for.

GregL · Accepted Answer · 2012-02-17 02:30:28Z

0

As others have suggested, use the placeholder attribute 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.

answered Feb 17, 2012 at 2:30

GregL

38.2k8 gold badges65 silver badges68 bronze badges

1 Comment

GregL Over a year ago

Also, if accessibility is a concern at all, it would be good if you could include <label> elements as well, but then hide them with CSS.

RobG · Accepted Answer · 2012-02-17 03:21:45Z

0

In addition to what Kolnik said, you can do a simple validation for text inputs that have a default value using something like:

if ( input.value == input.defaultValue || /^\s*$/.test(input.value) ) {
    // field value isn't valid
}

to check if the value is still the default, empty or whitespace. But remember that client–side validation is completely unreliable so do the real validation on the server.

edited Feb 17, 2012 at 3:21

answered Feb 17, 2012 at 2:27

RobG

148k32 gold badges180 silver badges216 bronze badges

3 Comments

zzzzBov Over a year ago

I believe you mean /^\s*$/.test(input.value)

RobG Over a year ago

Ah yes, thanks. Unlikely that the value will be a RegExp. :-)

bobbiloo Over a year ago

Thanks everyone for the 'placeholder' tip. That's just what the doctor ordered. Just one last thing...what can I do about IE 7 or 8? (I'm afraid I know the answer;-)

Collectives™ on Stack Overflow

Prefilled form fields

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related