tutorial_49_example_1.html

<style>

  .form-row {
    padding: 5px;
  }
  .tag {
    font-family: Courier, monospace;
    display: inline-block;
    width: 150px;
  }
  label {
    display: inline-block;
    width: 200px;
    background-color: #eee;
    padding: 5px;
  }
  .result {
    font-family: Courier, monospace;
    display: inline-block;
    width: 200px;
    padding: 5px 5px 5px 30px;
  }
  input {
    width: 250px;
  }
</style>


<script>

    // return a function that displays the new value for an input
    function createCallback(src, dst) {
      return function(){
          $(dst).text($(src).val());
      }
    }

    $(document).ready(function() {

      // set up callbacks to display the value for each input when it changes
      var names = ['number', 'email', 'tel', 'search', 'url', 'range',
                   'color', 'datetime_local', 'date', 'time', 'week', 'month'];

      for(var i in names) {
        var src = "input[name='" + names[i] + "']";
        var dst = "#value_" + names[i];
        $(src).on('change', createCallback(src, dst));
      }

    });
</script>

<p class='form-row'>New Form INPUT Types in HTML5 :</p>

<form method='post'  action="tutorial_49_demo_1">

<div class='form-row'>
<span class='tag'>number</span>
<label for="number">Enter a Number</label>
<input type="number" name="number"
       value="<%= @params['number'] || '' %>">
<div class='result' id='value_number'></div>
</div>

<div class='form-row'>
<span class='tag'>email</span>
<label for="email">Enter an Email Address</label>
<input type="email" name="email"
       value="<%= @params['email'] || '' %>">
<span class='result' id='value_email'></span>
</div>

<div class='form-row'>
<span class='tag'>tel</span>
<label for="tel">Enter a Phone Number</label>
<input type="tel" name="tel"
       pattern='\d{3}-\d{3}\-\d{4}'
       title='Format: XXX-XXX-XXXX'
       value="<%= @params['tel'] || '' %>">
<span class='result' id='value_tel'></span>
</div>

<div class='form-row'>
<span class='tag'>url</span>
<label for="url">Enter a URL</label>
<input type="url" name="url"
       value="<%= @params['url'] || '' %>">
<span class='result' id='value_url'></span>
</div>

<div class='form-row'>
<span class='tag'>search</span>
<label for="search">Enter Search Terms</label>
<input type="search" name="search"
       value="<%= @params['search'] || '' %>">
<span class='result' id='value_search'></span>
</div>

<br>

<div class='form-row'>
<span class='tag'>date</span>
<label for="date">Select a Date</label>
<input type="date" name="date"
       value="<%= @params['date'] || '' %>">
<span class='result' id='value_date'></span>
</div>

<div class='form-row'>
<span class='tag'>time</span>
<label for="time">Enter a Time</label>
<input type="time" name="time"
       value="<%= @params['time'] || '' %>">
<span class='result' id='value_time'></span>
</div>

<div class='form-row'>
<span class='tag'>month</span>
<label for="month">Select a Month</label>
<input type="month" name="month"
       value="<%= @params['month'] || '' %>">
<span class='result' id='value_month'></span>
</div>

<div class='form-row'>
<span class='tag'>week</span>
<label for="week">Select a Week</label>
<input type="week" name="week"
       value="<%= @params['week'] || '' %>">
<span class='result' id='value_week'></span>
</div>

<div class='form-row'>
<span class='tag'>datetime-local</span>
<label for="date">Select a Date and Time</label>
<input type="datetime-local" name="datetime_local"
       value="<%= @params['datetime_local'] || '' %>">
<span class='result' id='value_datetime_local'></span>
</div>

<br>

<div class='form-row'>
<span class='tag'>range</span>
<label for="range">Select a Value</label>
<input type="range" name="range" min="0" max="100"
       value="<%= @params['range'] || '' %>">
<span class='result' id='value_range'></span>
</div>

<div class='form-row'>
<span class='tag'>color</span>
<label for="color">Select a Color</label>
<input type="color" name="color"
       value="<%= @params['color'] || '' %>">
<span class='result' id='value_color'></span>
</div>

<div class='form-row'>
<span class='tag'></span>
<label for="submit">&nbsp;</label>
<input type="submit" value="Submit Form">
</div>
</form>