<!DOCTYPE html>
<html>
<style>
form {margin-left: 40px;}
fieldset {width:550px; background-color:#eeeeee; border-radius:10px}
label {width:175px; float:left; text-align:right; padding-right:10px}
span {vertical-align:top}
#sub {width:175px; text-align:center; color:white; background-color:black; border-radius:5px}
</style>
<body bgcolor=lightyellow>
<h1>HTML5 Input Fields and Attributes</h1>
<h3>(Also using CSS for layout)</h3>
<form name=frm1 onsubmit=display_entry() action="https://storm.cis.fordham.edu/~sultan/cgi-bin/util/formProc.cgi">
<fieldset>
<legend><b>HTML5 Input Fields</b></legend>
<label>Enter your ssn</label>
<input type=text name=ssn required placeholder=999-99-9999 pattern='\d\d\d-\d\d-\d\d\d\d' autofocus>
<span>format 999-99-9999</span>
<br><br>
<label>Enter a number</label>
<input type=number name=num min=-100 max=100 required >
<br><br>
<label>Slide a number </label>
<span>0</span>
<input type=range name=range id=range min=0 max=100 value=50 required onInput=show_value(this)>
<span>100</span>
<b><span id=range_value></span></b>
<br><br>
<label>Enter a date</label>
<input type=date name=date required>
<br><br>
<label>Enter time</label>
<input type=time name=time required> <span> hh:mm AM/PM</span>
<br><br>
<label>Enter date & time</label>
<input type=datetime-local name=dt required>
<br><br>
<label>Enter one or more URLs</label>
<input type=url name=url placeholder='http://....' required autocomplete multiple> <span> must start with http://</span>
<br><br>
<label>Enter one or more email(s)</label>
<input type=email name=email placeholder='x@x.com' required autocomplete multiple> <span> comma separated</span>
<br><br>
<label>Enter phone number(s) </label>
<input type=tel name=phone required autocomplete multiple>
<br><br>
<label>Choose a fruit or enter new</label>
<input type=text name=fruit list=fruits required>
<datalist id="fruits">
<option>Apple</option>
<option>Orange</option>
<option>Strawberry</option>
<option>Banana</option>
</datalist>
<br><br>
<label>Choose a color</label>
<input type=color name=color value=#00ff00>
<br><br>
<input id=sub type=submit value='Try It'>
<input type=hidden name=_email value="ssultan3@fordham.edu">
<input type=hidden name=_file value="/home/staff/sultan/public_html/web5030/demo/data/formProc.data">
</form>
<script>
//===============================================================================
range_obj = document.getElementById("range");
show_value(range_obj);
function show_value(obj)
{
document.getElementById("range_value").innerText=obj.value;
}
function display_entry()
{
alert(document.frm1.ssn.name +' = '+ document.frm1.ssn.value + '\n' +
document.frm1.num.name +' = '+ document.frm1.num.value + '\n' +
document.frm1.range.name +' = '+ document.frm1.range.value + '\n' +
document.frm1.date.name +' = '+ document.frm1.date.value + '\n' +
document.frm1.time.name +' = '+ document.frm1.time.value + '\n' +
document.frm1.dt.name +' = '+ document.frm1.dt.value + '\n' +
document.frm1.url.name +' = '+ document.frm1.url.value + '\n' +
document.frm1.email.name +' = '+ document.frm1.email.value + '\n' +
document.frm1.phone.name +' = '+ document.frm1.phone.value + '\n' +
document.frm1.fruit.name +' = '+ document.frm1.fruit.value + '\n' +
document.frm1.color.name +' = '+ document.frm1.color.value + '\n' +
'')
// return false;
}
//===============================================================================
</script>
</body>
</html>