<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"> </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