title: What does a `#` attribute do in HTML?
body: <p>I am writing a handler to do something to some element when a user clicks on a different element.  </p>
  
  <p>At first I had the following (This is using Angular2 but I suspect the only different is how the <code>onclick</code> event is handled):</p>
  
  <pre><code>        &lt;span&gt;
              &lt;input type="text" id="bioName"&gt;
          &lt;/span&gt;
          &lt;span class="icon-pencil" (click)="editField(bioName);"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>...but this didn't work.  I then found an example that identified the input field differently, and this did work for me.  It was as follows:</p>
  
  <pre><code>        &lt;span&gt;
              &lt;input type="text" #bioName&gt;
          &lt;/span&gt;
          &lt;span class="icon-pencil" (click)="editField(bioName);"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Unfortunately I can't find anything that explains this.  Searching for "hash" and "pound" with HTML and Javascript yield too many results that have nothing to do with this in the subject area.</p>
  
  <p>So what does <code>#</code> do in this case?  Can <code>id</code> not be used to obtain a reference to the DOM element when setting up an event handler?  What is this called so I can google it and read the appropriate documentation?</p>