Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Placeholder" attribute for text-based inputs #202

Open
SheaBelsky opened this issue May 25, 2017 · 5 comments
Open

"Placeholder" attribute for text-based inputs #202

SheaBelsky opened this issue May 25, 2017 · 5 comments

Comments

@SheaBelsky
Copy link

SheaBelsky commented May 25, 2017

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
Copy link
Collaborator

ljharb commented May 25, 2017

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
Copy link
Author

SheaBelsky commented May 25, 2017

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
Copy link
Collaborator

ljharb commented May 25, 2017

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
Copy link
Author

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
Copy link
Collaborator

ljharb commented May 25, 2017

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 :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants