title: html5 - using formatted placeholder for scientific inputs
body: <p>I was Creating an WebApp which requires to take Percentages of various Chemicals like (HCl[<code>Hydrochloric acid</code>], NaOH<code>[Sodium Hydroxide</code>] etc) as Input from User.</p>
  
  <p>So Here is what I'm Doing to do that in <code>HTML</code>:</p>
  
  <pre><code>&lt;input type='text' value='' name='hcl' placeholder='Enter HCl%' /&gt;
  </code></pre>
  
  <p>and this works fine in most of  the cases, But Now My Client have an requirement of Entering Percentage of Chemicals like H<sub>2</sub>SO<sub>4</sub>, SiO<sub>2</sub> etc. </p>
  
  <p>So Here is what I've Used for that:</p>
  
  <pre><code>&lt;input type='text' placeholder='H&lt;sub&gt;2&lt;/sub&gt;O' /&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/j1zvrtzo/" rel="noreferrer">Fiddle</a></p>
  
  <p>But with No Success.</p>
  
  <hr />
  
  <p>So Now I have a question:</p>
  
  <p><strong>How can we Format <code>placeholders</code> of <code>html input</code> to show Formatted Text like the one mentioned here?</strong></p>
  
  <p><hr />
  I know the <strong>possible solution</strong> to this scenario is:</p>
  
  <p>Use <code>label</code> outside of <code>&lt;input&gt;</code> which will have that formatted text inside it like:</p>
  
  <pre><code>&lt;label for='h2o'&gt;Enter H&lt;sub&gt;2&lt;/sub&gt;O% :&lt;/label&gt;&lt;input id='h2o' type='text' /&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/j1zvrtzo/1/" rel="noreferrer">Fiddle</a> and also I'm using this approach right now; </p>
  
  <hr />
  
  <p>But Still I'm curious in knowing can it be done with placeholders too?</p>
  
  <p>Using CSS or CSS3?</p>
  
  <p>If not Then using JS?</p>
  
  <p>Any suggestions are welcome. </p>
  
  <p>Hope Experts will help me with this. Thanks in advance :)!</p>