caolan / forms

An easy way to create, parse and validate forms in node.js
MIT License
1.01k stars 167 forks source link

"Placeholder" attribute for text-based inputs #202

Open SheaBelsky opened 7 years ago

SheaBelsky commented 7 years ago

I noticed the textarea widget has a placeholder attribute for showing some text before any text is actually input (using the HTML placeholder input attribute). Can this functionality be extended to other text-based inputs (fields.string, fields.email, fields.password, fields.number) as well? For example:

Full_Name: fields.string({
    errorAfterField: true,
    placeholder: "Please enter your full name.",
    required: validators.required("Please enter your full name."),
    validators: [
        validators.maxlength(50)
    ]
}),

produces:

<input type="text" name="Full_Name" placeholder="Please enter your full name.">
ljharb commented 7 years ago

It can; but placeholders MUST NOT be used as replacements for labels - ie, infield labels. Placeholders, by spec (and for a11y/UX) must only be example input - there must always be a label visible the entire time one is typing into the field. "Please enter your full name:" is label text, not placeholder text.

SheaBelsky commented 7 years ago

So something like this would be better instead of what I initially described?

Full_Name: fields.string({
    errorAfterField: true,
    placeholder: "Shea Belsky",
    required: validators.required("Please enter your full name."),
    validators: [
        validators.maxlength(50)
    ]
}),

produces:

 <input type="text" name="Full_Name" placeholder="Shea Belsky">
ljharb commented 7 years ago

Yes, totally - altho I'd say "full name" doesn't really need a placeholder :-) it's more useful for things like date fields, when you'd want the placeholder to show the example syntax for dates you expect.

SheaBelsky commented 7 years ago

So, is the placeholder attribute supported by these types of inputs? I tried it out and wasn't able to emulate that functionality. Is there any other of populating the placeholder attribute server-side (e.g. without needing any client-side JavaScript)?

ljharb commented 7 years ago

It should be supported on anything that takes text input.

I'm happy to add this functionality, but first I wanted to clear up what the proper purpose of placeholders is :-)