# angular.widget.HTML

Work in Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

## Description

The most common widgets you will use will be in the form of the standard HTML set. These widgets are bound using the `name` attribute to an expression. In addition they can have `ng:validate`, `ng:required`, `ng:format`, `ng:change` attribute to further control their behavior.

## Usage

### In HTML Template Binding

    <HTML></HTML>

## Example

      <table style="font-size:.9em;">
        <tr>
          <th>Name</th>
          <th>Format</th>
          <th>HTML</th>
          <th>UI</th>
          <th ng:non-bindable>{{input#}}</th>
        </tr>
        <tr>
          <th>text</th>
          <td>String</td>
          <td><tt>&lt;input type="text" name="input1"&gt;</tt></td>
          <td><input type="text" name="input1" size="4"></td>
          <td><tt>{{input1|json}}</tt></td>
        </tr>
        <tr>
          <th>textarea</th>
          <td>String</td>
          <td><tt>&lt;textarea name="input2"&gt;&lt;/textarea&gt;</tt></td>
          <td><textarea name="input2" cols='6'></textarea></td>
          <td><tt>{{input2|json}}</tt></td>
        </tr>
        <tr>
          <th>radio</th>
          <td>String</td>
          <td><tt>
            &lt;input type="radio" name="input3" value="A"&gt;<br>
            &lt;input type="radio" name="input3" value="B"&gt;
          </tt></td>
          <td>
            <input type="radio" name="input3" value="A">
            <input type="radio" name="input3" value="B">
          </td>
          <td><tt>{{input3|json}}</tt></td>
        </tr>
        <tr>
          <th>checkbox</th>
          <td>Boolean</td>
          <td><tt>&lt;input type="checkbox" name="input4" value="checked"&gt;</tt></td>
          <td><input type="checkbox" name="input4" value="checked"></td>
          <td><tt>{{input4|json}}</tt></td>
        </tr>
        <tr>
          <th>pulldown</th>
          <td>String</td>
          <td><tt>
            &lt;select name="input5"&gt;<br>
            &nbsp;&nbsp;&lt;option value="c"&gt;C&lt;/option&gt;<br>
            &nbsp;&nbsp;&lt;option value="d"&gt;D&lt;/option&gt;<br>
            &lt;/select&gt;<br>
          </tt></td>
          <td>
            <select name="input5">
              <option value="c">C</option>
              <option value="d">D</option>
            </select>
          </td>
          <td><tt>{{input5|json}}</tt></td>
        </tr>
        <tr>
          <th>multiselect</th>
          <td>Array</td>
          <td><tt>
            &lt;select name="input6" multiple size="4"&gt;<br>
            &nbsp;&nbsp;&lt;option value="e"&gt;E&lt;/option&gt;<br>
            &nbsp;&nbsp;&lt;option value="f"&gt;F&lt;/option&gt;<br>
            &lt;/select&gt;<br>
          </tt></td>
          <td>
            <select name="input6" multiple size="4">
              <option value="e">E</option>
              <option value="f">F</option>
            </select>
          </td>
          <td><tt>{{input6|json}}</tt></td>
        </tr>
      </table>

      it('should exercise text', function(){
       input('input1').enter('Carlos');
       expect(binding('input1')).toEqual('"Carlos"');
      });
      it('should exercise textarea', function(){
       input('input2').enter('Carlos');
       expect(binding('input2')).toEqual('"Carlos"');
      });
      it('should exercise radio', function(){
       expect(binding('input3')).toEqual('null');
       input('input3').select('A');
       expect(binding('input3')).toEqual('"A"');
       input('input3').select('B');
       expect(binding('input3')).toEqual('"B"');
      });
      it('should exercise checkbox', function(){
       expect(binding('input4')).toEqual('false');
       input('input4').check();
       expect(binding('input4')).toEqual('true');
      });
      it('should exercise pulldown', function(){
       expect(binding('input5')).toEqual('"c"');
       select('input5').option('d');
       expect(binding('input5')).toEqual('"d"');
      });
      it('should exercise multiselect', function(){
       expect(binding('input6')).toEqual('[]');
       select('input6').options('e');
       expect(binding('input6')).toEqual('["e"]');
       select('input6').options('e', 'f');
       expect(binding('input6')).toEqual('["e","f"]');
      });