Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment