HTML5 input types

by Igor Cuckovic

HTML

<p>The list of HTML5 input types (+ sample for each, as created by D3.JS):</p>
 
  <ul id="input-types"></ul>
 
    <p>Plus a lone 'input type=range' one:</p>

CSS

circle {
  stroke: #fff;
  stroke-width: 1.5px;
}
 
body, p {
  font: 12px sans-serif;
}
 
text {
  font: 10px sans-serif;
}

JavaScript

var input_types = [
  'color',
  'date',
  'datetime',
  'datetime-local',
  'email',
  'month',
  'number',
  'range',
  'search',
  'tel',
  'time',
  'url',
  'week'
];
 
// create the UL list of types, id-ing each <LI> so we can then d3.select those later for the real test
var ul = d3.select("ul#input-types") // this one exists, and is to be parent of...
    .selectAll('li')       // ... these, which don't exist yet, but will once ...
      .data(input_types)     // ... data[] is used to determine how many there must be ...
      .enter()                 // ... and we pick the set of 'not-yet-existing' elements corresponding
        .append('li');     // ... to one(1) data[i] item each
 
  ul.attr('id', function(d) {
      return 'inp-item-' + d;
    })
    .append('p')
      .text(function(d) {
        return 'type="' + d + '"';
      });
  ul.append('input')
    .attr('type', String);      // implicit   function(d, i) { return ''+d; }
 
/*
    <input type="range" name="lone-ranger" min="0" max="1000" value="0" onchange="... show value ..." style="width: 800px;">
 
    first 4 lines have same effect as these (in this context, as data[] isn't used anywhere, really):
 
      d3.select('body')
        .append('input')
          .attr('type', 'range')
*/
d3.select('body')
  .data(['range'])
    .append('input')
      .attr('type', String)      // implicit   function(d, i) { return ''+d; }
      .attr('name', 'lone-ranger')
      .attr('value', 400)
      .attr('min', 0)
      .attr('max', 1000)
      .attr('style', 'width: 800px;')
      .on('change', function(d, i) {
        // 'this' is the node itself
        var pa = d3.select(this.parentNode);
        var ranger_value = +this.value; // identical to    +d3.select(this).node().value
 
        // only create node when it's not there yet:
        var pn = pa.selectAll('p#display-value')
            /*
          .data([ranger_value])   // when you don't use data(), you can't .enter().append() !
         ...