5.HTML5常用表单元素一览表

1.<form>元素

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
表单元素(form element)，又称为表单控件(form control)。
.
</form> 

2.<label>元素

当用户点击 <label> 元素内的文本时，浏览器就会自动将焦点转到和此元素相关的表单控件上。

<label> 元素的 for 属性应当与相关元素的 id 属性相同。

<label for="绑定的表单控件id">绑定的表单控件的文字描述</label>

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

3.<input>元素

注意：<input> 元素的 type 属性的值默认为 text，换句话说，就是当没有 type 属性的时候，则 type 属性的值为 text。

4.<textarea>元素

<textarea name="表单控件的名称" rows="10" cols="30">表单控件的默认值或最终输入值</textarea>

5.<button>元素

<button type="button" name="表单控件的名称" value="表单控件的值">Click Me!</button>

推荐使用 <button> 元素替代 <input> 元素中的相关功能。

注意：<button> 元素的 type 属性的值默认为 submit，换句话说，就是当没有 type 属性的时候，则 type 属性的值为 submit。

//按钮类型
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
//等同于
<input type="button" onclick="alert('Hello World!')" value="Click Me!">

//重置按钮类型
<button type="reset">重置</button>
//等同于
<input type="reset" value="重置">

//提交按钮类型(都会触发submit事件)
<button type="submit">Submit</button>
//等同于
<input type="submit" value="Submit">

//图片按钮类型

//注意：不会触发submit事件
<button type="button"><img src="graphic.gif"></button>

//注意：会触发submit事件
<input type="image" src="graphic.gif">

6.<select>元素、<option>元素、<optgroup>元素

<select> 元素的下拉菜单是供用户选择的，用户只能选择其中的选项不能自己添加。

如果 <option> 不含 value 属性，则 value 值默认为 <option> 的元素内容。

默认第一个 <option> 会被选择，可通过 selected 属性更改为其它 <option>。

<select name="表单控件的名称"></select>
<option value="表单控件的值" label="辅助用户选择时的文字" selected="是否此选项默认被选择"></option>
<optgroup label="辅助用户选择时的文字"></optgroup>

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

7.<datalist>元素

<datalist> 元素不仅可以供用户选择，用户还可以自己输入，而且 <datalist> 还可以达到模糊匹配的效果。

<form action="action_page.php">
  <input list="browsers">
  <datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
  </datalist> 
</form>

7.<fieldset>元素和<legend>元素

<fieldset> 元素组合表单中的相关数据，<legend> 元素为 <fieldset> 元素定义标题。

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form> 

8.<progress>元素

<progress value="当前值" max="最大值"></progress>

<section>
 <h2>Task Progress</h2>
 <p>Progress: <progress id=p max=100><span>0</span>%</progress></p>
 <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
 </script>
</section>