Explore our sites

Stack Exchange
tour help
Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote -1 down vote favorite

While code reading I came across a piece of code in JavaScript which set the placeholder attribute for an input element ($("#el").attr("placeholder", "I am Input");). I myself have always set such attributes in the HTML markup itself rather than relying on JS for this (<input id="el" type="input" placeholder="I am Input" />).

My question is which is the better way to go about it? I know that there is no performance hit if we go for JS, but code practices wise I always felt that these type of attributes should be set in HTML markup, unless it is dynamic based on some other parameters.

Couple of reasons I felt this way is, in general this leads nicely to the principal of graceful degradation when no JS is allowed. And other is, this plays nicely for when we are using shims to imitate placeholder UX in browsers which do not support it natively.

Would love to hear what you guys think about it. Any links to coding conventions/best practices also welcome.

share|improve this question
 
This should be moved to stackoverflow –  John Syrinek Jun 5 '13 at 13:54
add comment

closed as off topic by Flambino, Jeff Vanzella, svick, John Syrinek, James Khoury Jun 11 '13 at 2:23

Questions on Code Review Stack Exchange are expected to relate to code review request within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

2 Answers

up vote 2 down vote accepted

In general its better to put these things in markup (since they will then work without js, and they will also be easier to clearly see when looking through the code). However there are some cases when it may be necessary to do this in JS.

  1. If the placeholder content is dynamically generated based on user input (IE putting the current date as a placeholder value in a date field
  2. If the element itself is dynamically generated, then it will be necessary to add these attributes in JS

In all other cases, markup should be the way to go.

share|improve this answer
add comment
up vote 1 down vote

There's no question that these sorts of attributes (like placeholder & form validation) should be coded directly in the HTML, unless they have to be generated dynamically.

As you pointed out, since the functionality is available even with no JavaScript, you shouldn't deny those users the functionality they can get.

P.S. I actually don't like the browser native form error bubbles, and prefer to build those myself in JavaScript. I still have the form validation attributes (e.g. required, type & pattern) coded directly in the HTML, since it is a more semantic way of defining these things (instead of an arbitrary JS object), and is a nice fallback for when there's no JS.

share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.