ラベルインプット 簡単だ

最も簡単なUIコンポネントだろう。わかりやすい。

<script> 
    goog.require('goog.ui.LabelInput');
    goog.require('goog.dom');
</script>


<form> 
    <input id=i name=i label='Search, add, or invite 1'> 
    <div id=d></div> 
    <script> 
      var $ = goog.dom.getElement;
 
      var li1 = new goog.ui.LabelInput;
      li1.decorate($('i'));
 
      var li2 = new goog.ui.LabelInput('Search, add, or invite 2');
      var el = li2.render($('d'));
      li2.getElement().name = 'dynamic';
    </script> 
    <button type="button">Faux Submit</button> 
</form> 

input要素のlabel属性はHTMLで定義されてない。勝手に付けている。スクリプトが走るとこれは消費されて消えて、おそらくtype属性が付くのだろう。