title: datalist options with hidden values
body: <p>I have a standard <a href="http://www.w3.org/TR/html5/forms.html#the-datalist-element" rel="nofollow">datalist</a> along these lines:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Building:
  &lt;input type=text id=building list=buildings&gt;
  &lt;datalist id=buildings&gt;
    &lt;option value="b1234"&gt;Long name&lt;/option&gt;
    &lt;option value="b372"&gt;Other long name&lt;/option&gt;
  &lt;/datalist&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My goal is to show the user only the long names, but to send the short names on form submission. (The short names are meaningless to the end user, but the long names change often and are a poor choice for information interchange.)</p>
  
  <p>How can I accomplish this? I can use <code>label</code>s but then the meaningless short names are shown and that's what I want to avoid.</p>
  
  <p>I'm looking for a standards-compliant solution that works across popular browsers and degrades gracefully in the absence of Javascript. (Perhaps only the short names are shown, or perhaps both are.)</p>