HTML（九）

1.30 表单相关的标签和属性

HTML5可以直接在表单控件中通过required,pattern 等属性来指定客户端的校验规则。

1.表单及表单控件

①label定义标签

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

实例代码:

②botton按钮

button标签用于定义一个按钮，在button标签的内部可以包含普通文本，文本格式化标签，图像等内容，这正是和input 的按钮不同之处。
< button> 控件 与 < input type=“button”> 相比，提供了更为强大的功能和更丰富的内容。
< button> 与 < /button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

2. html5新增的表单属性

   ①autofocus属性

   当为某个表单控件增加该属性后，浏览器打开该页面时该组件就会自动获取焦点。由于打开页面时只能有一个控件获的焦点，因此整个页面最多只能有一个表单控件可设置该属性。

   ②list属性

   < datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

   datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

为了保证List属性具有较好的、一致性的行为，使用datalist定义下拉菜单时，可以让每个option元素的文本与value属性值完全相同。

实例代码：

③autocomplemete属性

该属性用于设置表单是否支持自动完成功能，如果启用自动完成功能，浏览器会根据用户上次提交的数据生成列表框供用户选择，或提示自动完成。

autocomplemete = on 开启
off关闭。效果不明显

实例代码：

3. html5新增的表单元素

①meter

该标签用来表示一个已知最大值和最小值的计数仪表，比如电池的剩余电量、速度表等。

实例代码：

high number	定义度量的值位于哪个点，被界定为高的值。
low	 number	定义度量的值位于哪个点，被界定为低的值。
max	 number	定义最大值。默认值是 1。
min	 number	定义最小值。默认值是 0。

optimum number 定义什么样的度量值是最佳的值。
value number 定义度量的值。

如果该值高于 "high" 属性，则意味着值越高越好。
如果该值低于 "low" 属性的值，则意味着值越低越好。

②progress

用于表示一个进度条

max：指定进度条完成时的值
value:指定进度条当前完成的进度值

实例代码：

③客户端校验

required:该属性指定该表单控件必须填写。该属性值是required 或完全省略
 
pattern: 该属性指定该表单控件的值必须符合指定的正则表达式。该属性的值必须是一
个合法的正则表达式。

min、max、step,这三个属性只对数值类型、日期类型的<input/>元素有效，这个属性
控制该表单控件的值必须在min~max之间，并且符合步长。

4. 绘画

   ①canvas

html5新增了一个canvas元素，该元素专门用于绘制图形，但实际上，canvas本身并不绘制图形，它只是相当于一张空白画布。

如果想绘制图形必须使用javascript脚本进行绘制。

width：画布的宽度
height：画的高度

②绘制几何图形

实例代码：

③点线模式

绘制线段或边框默认总是使用实线，如果想使用点线控制，则可通过设置CanvasRenderingContext2D的setLineDash方法和lineDashOffset属性来实现
setLineDash方法需要一个类型为 sequence的值，每个double值依次控制电线的实线长度、间距.

[2,3] ：代表长为 2的实线，间距为3的间距 这种电线模式

[2,3,1]:代表长为2的实线，距离为3的间距，长为1的实线，距离为2的间距。长为3的
实战，距离为1的间距

[5,3,1,2]代表长为5的实线，距离为3的间距、长为1的实线、距离为2的间距

实例代码：

④绘制字符串

CanvasRenderingContext2D为绘制文字提供了如下两个方法：
	fillText() :填充字符串
	strokeText() 绘制字符串边框

⑤设置阴影

shadowBlur:设置阴影模糊度。该属性值是一个浮点数，该数值越大，阴影的模糊程度越大
shadowColor:设置阴影颜色
shadowOffsetX:设置阴影在X方向的偏移
shadowOffsetY:设置阴影在y方向的偏移

实例代码：

⑥使用路径

beginPath()开始路径
closePath()关闭路径
fill()或stroke()来填充路径或绘制路径边框
arc 向 Canvas的当前路径上添加一段弧
arcTo 向Canvas的当前路径上添加一段弧，定义的方式不同
bezierCurveTo()添加一段曲线
lineTo()把canvas的当前路径从当前结束点连接到x,y对应的点
moveTo()把canvas的当前路径的结束点移动到x,y对应的点
quadraticCurveTo()向canvas的当前路径上添加一段二次曲线
rect向canvas 的当前路径上添加一个矩形。

实例代码：

⑦绘制渐变