Using as Placeholder Attribute

How about applying the DRY Principle in a user interface?

One method is by using a single element to have multiple functions. In the case of a <label> and a placeholder attribute in a <form>, we could simply use the <label> to be the only label of a particular field—as opposed to having two.

Besides, their main functions are to tell the user what field it is and what it expects as a user input—so why not optimize it?

Regarding its accessibility, please read an 2010 article from WebAIM and a recent one from Smashing Magazine.

Here’s a quick PoC. Try focusing on a field and see the label move.
<p class="codepen" data-height="300" data-theme-id="1820" data-slug-hash="YjowRP" data-default-tab="result" data-user="BrianSahagun" data-pen-title="Using


Leave a Reply

Your email address will not be published. Required fields are marked *