HTML的元素4

表单

1. fieldset 按用途组合的一组表单控制元素

<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> 

2. form 表单；

HTML 表单用于收集用户输入。
<form>元素定义 HTML 表单： 

<form>
 ...
form elements
 ...
</form>

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等

   在 HTML 5 中有一个新属性：replace。它定义表单被提交后所做的事情。
3. meter 控制在已知范围内输入度量值。
    meter标签定义度量（单位）。仅用于已知最大和最小值的度量。meter标签是 HTML 5 中的新标签。
    注释：必须定义度量的范围，既可以在 text 中，也可以在 min/max 属性中定义。
4. select 有多选值的下拉列表
    HTML5 有一些新的属性，同时不再支持一些 HTML 4.01 的属性
5. legend 图例或表的说明。
    <legend> 标签为 <fieldset>、<figure> 以及 <details> 元素定义标题。
    在 HTML 4.01 中， <legend> 仅用于 <fieldset> 元素。
    在 HTML 5 中， <legend> 标签应用于 <fieldset>、<figure> 以及 <details> 元素。 在 HTML 5 中，不支持 align 属性。请使用 CSS 代替。
6. optgroup 选项组。

optgruop元素在html4已经存在，在HTML5进行了拓展。
该元素定义选项组，使用该元素允许用户组合选项。当使用一个长的选项列表式，对相关的选项进行组合会使处理更加容易。
optgroup元素将select元素中的选项进行逻辑分类，在select元素中直接定义，不允许嵌套，既不能进行第二次分组。
optgroup元素的属性：
disabled：加载时禁用该选项组
label: 用来定义分组显示的标签名

7. label 表单控件的标题（标签）。
    <label>标签定义控件的标注。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
    注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
8. option 下拉列表中的单一选项。
    在 HTML 5 中，<option> 标签也用于新元素 <datalist> 中。
    注释：<option> 标签能够在不带任何属性的情况下使用，但是通常需要 value 属性，该属性定义了发送到服务器的数据。
    请与 <select> 或 <datalist> 标签结合使用。在其他地方，<option> 标签是无意义的。
9. datalist定义选项列表 

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

通过 <datalist> 设置预定义值的 <input> 元素：

<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>

<datalist>标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
10. input 表单中的输入字段

<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。
文本输入
<input type=“text”> 定义用于文本输入的单行输入字段：

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">

单选按钮输入
<input type=“radio”> 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一：

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

提交按钮
<input type=“submit”> 定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定：

<form action="action_page.php">
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">
</form>

11. output 输出的结果。

output元素用于不同类型的输出，例如，计算结果或者脚本的其他结果。
output元素必须写在表单内部，或者说为其添加form属性。
output元素的值一般由js来控制。<output>标签是 HTML 5 中的新标签。
12. keygen 生成密钥对

用于表单的密钥生成器字段，作用是提供一种验证用户的可靠方法。
keygen元素在跟随表单提交时会自动生成两个密钥：私密钥（储存在本地）和公密钥（发送到服务器中，用于验证客户端）
keygen的属性：
属性                  值                       说明
challenge          challenge          如果使用，则将Keygen的值设置为在提交时会给出提示
disabled          disabled               禁用Keygen字段
form                formname              定义该字段所属的一个或多个表单
keytype            rsa                     定义生成密钥的算法
name              fieldname            定义Keygen元素的唯一名称，用于在提交表单时获得字段的值。
autofocus          autofocus          使 keygen 字段在页面加载时获得焦点

加密：

<keygen name="secutity" width="300"/>

 

13. textarea 多行的文本输入区域。
14. button 按钮。
    您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。在 HTML 5 中有一个新属性：autofocus
15. progress 运行中的进度控制。<progress> 标签是 HTML 5 中的新标签。
    提示：请使用<progress>标签来显示下载的进程