SOURCE

function result(){
  a1=document.getElementById("a").value;
  b1=document.getElementById("b").value;
  document.getElementById("c").value=Number(a1)+Number(b1);
}

email:<input type="email" name="user_email" />
<br />
url:   <input type="url" list="user_list" name="user_url" />
<datalist id="user_list">
  <option label="baidu" value="http://www.baidu.com" />
  <option label="Google" value="http://www.google.com" />
  <option label="jsrun" value="http://jsrun.net/new" />  
</datalist>
<br />
number:<input type="number" name="user_number" min="1" max="10" step="3" value="6"/>
<br />
range:<input type="range" name="user_range" min="1" max="10" />
<br />
date:<input type="date" name="user_date" />
<br />
search:<input type="search" name="user_search" />
<br />
<form action="">
  <input type="text" id="a"/>+
  <input type="text" id="b"/>=
<output  id="c" onforminput="result()"></output>
</form>
<br />
<input type="submit" />