HTML5新表单元素

新表单元素

datalist

• 示例

<!-- action表示将表单提交到php文件中-->
<!-- input中的list与datalist中的id想对应-->
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
</datalist>
<input type="submit">
</form>

• 标签定义及使用说明 
  
  • 规定了input 元素可能的选项列表。
  • 用 input 元素的 list 属性来绑定 datalist元素

output

• 示例

//oninput表示计算公式
<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>

• 属性

属性	描述
for	描述计算中使用的元素与计算结果之间的关系
form	定义输入字段所属一个或多个表单
name	定义对象的唯一名称（表单提交时使用）