HTML5表单元素

<form>
  <fieldset>
    <legend>新的表单控件</legend>
    邮箱 <input placeholder="输入合法的邮箱地址" type="email" />
    url <input placeholder="输入合法的网址" type="url" />
    search <input placeholder="输入搜索内容" type="search" />
    数字 <input placeholder="只能输入数字" type="number" />
    电话 <input placeholder="输入合法的电话" type="tel" />
    滑块 <input type="range" />
    颜色 <input placeholder="" type="color" />
    日期 <input placeholder="" type="date" />
    选择一个日期 (UTC 时间) <input placeholder="" type="datetime" />
    选择一个日期和时间 (无时区) <input placeholder="" type="datetime-local" />
    月份 <input placeholder="" type="month" />
    周 <input placeholder="" type="week" />
    时间 <input placeholder="" type="time" />
  </fieldset>
</form>

<form action="#" method="get">
  <input type="text" name="uname" pattern="^\d{4,11}" required class="uname">
  <input type="submit" name=""><br><br>
  正确格式为4到11位数字，请输入错误格式以测试
</form>
<script>
  var input = document.querySelector(".uname");
  input.oninvalid = function(){   	
    if (this.validity.patternMismatch===true) {
      this.setCustomValidity("请输入4到11位数字");
    } else {
      this.setCustomValidity("");
    }
  }
</script>

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer"></option>
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
</datalist>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100 +
  <input type="number" id="b" value="50">=
  <output name="x" for="a b"></output>
</form>