建立表单（form元素)

form元素可以指定下面的内容:
(1)表单的布局。
(2)指定处理表单的服务嘴程序URI地址，该服务端程序应该可以处理“名称值”对
(3)数据传送到服务器的方式。(4)表单数据的字符编码。
(5)除了包含表单控件外，form元素也可以包含其他的文本元素，如段落、列表等，form元素的属性很多，下面几个比较重要，且较常使用:

其中action属性用于设定处理表单数据程序URI的地址，如http:/ocalhost/test.asp。
属性method用来定义数据传送到服务器的方式。有4种主要的方式:
当method- "GET"时，将输入数据加在action指定的地址后面传送到服务器，即将输入数据按照HTTP传输协议中的GET传输方式传送到服务器。
当method "POST"时，则将输入数据按照HTTP传输协议中的POST传输方式传送到服务器。
当method "PUT"时，则将输入数据按照HTTP传输协议中的PUT传输方式传送到服务器。
当method "DELETE"时，则将输入数据按照HTTP传输协议中的DELETE传输方式传送到服务器。
属性name用于设定表单的名称。
属性target用来指定输入数据结果显示在哪个窗口，某些情况下需要与frame元素配合使用。
属性enetype用来设置表单数据的内容类型。
属性acept-charset 用来设置服务器端可以处理的字特编码，这个属性的值是个字符编码列表，使用空自或者退号分割，目的是揭承国览器限制用户输入的数据，以免不能被服务器处理的数据被输入。如果不定义该属性，该属性的默认值是UNKNOWN,表示不会限制用户的输入。
autocomplete属性规定所有表单控件是香应镇相有自动完成功能。当设置autocomplete="on"时表示执行自动完成功能，当设置autocomplete="off"时表示不执行自动完成功能。在HTML5规定该属性之前，大部分测览器都提供输入文本框的自动完成功能，即使HTML4没有定义autocomplete属性。但autocomplete属性现在不但用于form元素定义表单的输入文本框，而且还适用于很多其他元素。
novalidate 属性规定在提交表单时不再进行有效性验证。
注意，对于button和input 元素，可以定义属性formnovalidate重写form的novalidate属性。
onreset 和onsubmit是两个全局属性，是主要针对reset 按钮和submit按钮来说的，分别设定了在按下相应按钮之后要执行的程序。

form表单中input元素的属性及其功能描述：

input属性	属性值	功能描述
accept	audio/* video/* image/* MIME_type	规定通过文件上传来提交的文件的类型。 (只针对type="file")
align	left right top middle bottom	HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")
alt	left right top middle bottom	定义图像输入的替代文本。 (只针对type="image")
autocomplete(new)	on off	autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
autofocus(new)	autofocus	属性规定当页面加载时 <input> 元素应该自动获得焦点。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
disabled	disabled	disabled 属性规定应该禁用的 <input> 元素。
form(new)	form_id	form 属性规定 <input> 元素所属的一个或多个表单。
formaction(new)	URL	属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
formenctype(new)	application/x-www-form-urlencoded multipart/form-data text/plain	属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
formmethod(new)	get post	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
formnovalidate(new)	formnovalidate	formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formtarget(new)	_blank _self _parent _top framename	规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
height](new)	pixels	规定 <input>元素的高度。(只针对type="image")
list(new)	datalist_id	属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
max(new)	number date	属性规定 <input> 元素的最大值。
maxlength	number	属性规定 <input> 元素中允许的最大字符数。
min(new)	number date	属性规定 <input>元素的最小值。
multiple(new)	multiple	属性规定允许用户输入到 <input> 元素的多个值。
nam	text	name 属性规定 <input> 元素的名称。
pattern(new)	regexp	pattern 属性规定用于验证 <input> 元素的值的正则表达式。
placeholder	text	placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。
readonly	readonly	readonly 属性规定输入字段是只读的。
required(new)	required	属性规定必需在提交表单之前填写输入字段。
size	number	size 属性规定以字符数计的 <input> 元素的可见宽度。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
step(new)	number	step 属性规定 <input> 元素的合法数字间隔。
type	button checkbox color(new) date(new) datetime(new) datetime-local(new) email(new) file hidden image month(new) number(new) password radio range(new) reset search(new) submit tel(new) text time(new) url(new) week(new)	type 属性规定要显示的 <input> 元素的类型。
value	text	指定 <input> 元素 value 的值。
width(new)	pixels	width 属性规定 <input> 元素的宽度。 (只针对type="image")

创建组合控件和列表框控件

组合框控件和列表框控件使用selet元素和option元素共同来完成，它们必须配合使用才能完成一个组合框控件或列表框控件的功能: select元素用来指定一个表单的类型，且需要option 元素为该表单提供数值项。基本语法格式如下:

<select name="select" size="size" multiple= "multiple">
  <option selected="selected">Item 1</option>
  <option selected="selected">Item 2</option>       
  <optionselected="selected">Item 3</option>
  <option selected="se lected">Item 4</option>
</select>

当select元素不包含属性size 和属性multiple时，表单类型显示为菜单(组合框),如果使用了属性size和属性mutiple中的任意个，则表单类型显示为列表框。

select元素

select元素用来创建列表框，它包含下面的属性:

name属性用来为该控件定义一个名称标识。
size属性，如果select元素被呈现为列表框，这个属数量。如果可选项多于这个数量，就会出现垂直滚动条。如果没有定义这个属性，select元素就被呈现为菜单。
multiple属性，当设定时，这个逻辑值允许同时选择多个项。而在没有设定时，select元素只允许选择单个选项。典型地，可视用户浏览器以列表框渲染多选元素，而以下拉框渲染单选元素。

select元素建立一个可被用户选择的选项列表，每个select元素必须包含至少一个选项，一个选项通过一个option元素来指定。

option 元素

option元素的使用类似于label 元素，但它可以有一个 slected 属性，当该属性的值被设置为selected 时，表示该项被选中。
option元素的value 属性定义控件的初始值，如果定义该属性，初始值就是option元素的内容。

<select name="select" size="size" multiple= "multiple">
  <option selected="selected">Item 1</option>
  <option selected="selected">Item 2</option>       
  <optionselected="selected">Item 3</option>
  <option selected="se lected">Item 4</option>
</select>

成组选项

使用optgroup元素，可以将select 元素中的选项进行逻辑分组。optgroup元素必须在select元素中直接指定，不允许嵌套，这意味着不能进行二级分组。使用该元素的label 属性可以定义分组显示的标签名，但是标签名不能被当作选择项。
例如下面的代码，演示了如何在组合框和列表框中分组选项:

<select>
  <optgroup label=" 大洋">
    <option>太平洋</option>
    <option>大西洋</option>
    <option>印度洋</option>
    <option>北冰洋</option>
  </optgroup>
  <optgroup label=" 大海"> .
    <option>东海</option>
    <option>黄海</option>
    <option>南海</option>
  </optgroup>
</select>

创建多行文本框（textarea元素）

基本语法格式如下：

<textarea name="xxx" cols="n" rows="n" wrap="off|hard|soft">
...
</textarea>

textarea元素属性及其功能描述：

属性	属性值	功能描述
name	字符串	定义控件名称
rows	字符数字	定义控制可视化文本行数
cols	字符数字	定义可视字符的宽度
wrap	off soft hard	定义是否自动换行 soft表示自动软换行 hard表示自动硬换行

输入框的选项列表

datalist元素定义输入框的选项列表，列表是通过datalist内的option元素创建的。如需要把datalist绑定到输入框，则用输入框的list 属性引用datalist 的id，例如：

<input type="url" list="url_list" name="link">
<datalist id="url_list">
  <option label="A" value="http://www.a.com">
  <option label="B" value="http://www.b.com">
  <option label="C" value="http://www.c.com">
</datalist>

密钥对生成器

keygen元素的作用是提供一种验证用户的可靠方法。keygen元素是密钥对生成器，当提交表单时，会生成两个键，一个是私钥，一个是公钥。
私钥(private key)存储于客户端，公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书。

<form action="myform.asp" method= "get">
  用户名: <input type="text" name="user_ name"><br>
  加密: <keygen name= "security">
  <input type="submit">
</form>

输出结果控件

output元素用于不同类型的输出，如计算结果或脚本输出。
output的属性及其功能描述：

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

例：

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

运行进度条控件

progress元素定义运行中的进度，例如下面代码，如果浏览器不能呈现该元素，就显示元素内部内容：

<progress max="100" value="80">
   <span id="objprogress">80</span>%
</progress>

等级标量控件

meter元素用来表示范围已知且可度量的等级标量或分数值，定义如下：。

<meter value="90" max="100" min="0" low="40" high="80" optimum="100"></meter>

meter的属性及其功能描述：

属性	值	描述
form	form_id	规定 <meter> 元素所属的一个或多个表单。
high	number	规定被视作高的值的范围。
low	number	规定被视作低的值的范围。
max	number	规定范围的最大值。
min	number	规定范围的最小值。
optimum	number	规定度量的优化值。
value	number	必需。规定度量的当前值。

为表单添加结构(fieldset元素和legend元素）

fieldset元素和legend元素一般是配合使用。fieldset 元素可以包含其他的表单控件，在这些表单控件周围画一一个方框，而legend元素可以显示-一个标志标签说明被包含的这些表单控件。这两个元素配合，也就是将一些表单控件分组，从而可以更有效地显示信息。基本语法格式如下:

<fieldset>
  <legend>表单集说明标签</legend>
  ...其他表单控件元素...
</fieldset>

显示结果如下：

并且，一个表单内可以使用多个fieldset元素(包含legend元素)来定义表单集。也可以单独使用fieldset元素，即在表单控件周围画一一个方框，而不显示标志标签。

HTML建立表单