CodePen

HTML

            
              <div id="log"></div>

<input type="text" id="foo" />

<select id="bar">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

<textarea id="piz"></textarea>

<label><input type="checkbox" id="yar" /> True</label>

<!-- Load jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              input[type=text],select,textarea {
  display: block;
  width: 10em;
  font-size: 1.2em;
  font-family: "sans-serif";
}

#log {
  width: 10em;
  height: 8em;
  float: left;
  background: #dee;
  margin-right: 1em;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Choose relevant input elements
var inputs = $('input,select,textarea')
  // Bind a new event to the inputs
  .bind("newInput", function(){
    // Abbreviate
    var $t = $(this);
    // Log the results
    $('#log')
    .text( $t.attr('id') +': '+ $t.val() );
  });

(function scan(){

  inputs.each(function() {
    $t = $(this);
    if ($t.attr('type') == 'checkbox')
      $t.val($t.is(':checked'));
    if ( $t.data('oldVal') !== $t.val() ) {
      $t.trigger('newInput');
      $t.data('oldVal',$t.val());
    }
  });

  setTimeout(scan,100);

})();
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................