HTML5/number-state

From HTML5 Chinese Interest Group Wiki
Jump to: navigation, search
数字状态

input元素的type属性为数字状态,则应用本节中的规则。

input元素表示一行将当前元素的设置为一个表示的数字的字符串。

如果当前元素是可变的,用户代理应该允许用户修改其所表示的数字,该数字通过对其应用解析浮点数值的规则获得。用户代理禁止用户将其设为非空且非有效地浮点数的字符串。如果用户代理提供了一个用于选择数字的用户界面,则其必须被设为一个表示用户所选择的用户所选择的浮点数的最佳表现形式。用户代理应该允许用户将其设为空字符串。

如果标记了value属性,且其值不为空,则其值必须是一个有效地浮点数

值处理算法如下:如果其不是一个有效地浮点数,则设其为空字符串。

如果标记了min属性,则其值必须是一个有效地浮点数。如果标记了max属性,则其值必须是一个有效地浮点数

步长因子是1。默认步长为1(如果min属性不是一个非整数,则只允许整数。)。

若元素出现步长不匹配,则用户代理可能会将当前元素的四舍五入到最近的不会使该元素出现步长不匹配的最近的数值。如果存在两个这样的数值,我们鼓励用户代理选择距离正无穷更近的值。

将字符串转换为数值的算法如下:如果对input应用解析浮点数值的规则出现错误,则返回一个错误;否则,返回处理结果的数值。

将数值换为字符串转的算法如下:返回一个input表示的有效地浮点数

范围状态

input元素的type属性为范围状态,则应用本节中的规则。

input元素表示一行将当前元素的设置为一个表示的数字的字符串,但其准确的值并不重要,需要用户代理提供一个简单的界面,之后它们为数字状态工作。

注:在该状态下,包括用户输入在内,其范围和步长约束强制生效,且不能将其值设为空字符串。

如果当前元素是可变的,用户代理应该允许用户修改其所表示的数字,该数字通过对其应用解析浮点数值的规则获得。用户代理禁止用户将其设为非有效地浮点数的字符串。如果用户代理提供了一个用于选择数字的用户界面,则其必须被设为一个用户所选择的浮点数的最佳表现形式。用户代理禁止用户将其设为空字符串。

如果标记了value属性,则其值必须是一个有效地浮点数

值处理算法如下:如果其不是一个有效地浮点数,则设其为表示默认值有效地浮点数

如果标记了min属性,则其值必须是一个有效地浮点数默认最小值为0。如果标记了max属性,则其值必须是一个有效地浮点数默认最大值为100。

如果最大值不小于最小值默认值最小值加上最小值最大值之间差的一半,否则默认值最小值

若元素出现下溢,则用户代理必须将当前元素的设为最小值所表示的有效地浮点数

若元素出现溢出,如果最大值不小于最小值,则用户代理必须将当前元素的最大值所表示的有效地浮点数

步长因子是1。默认步长为1(如果min属性不是一个非整数,则只允许整数。)。

若元素出现步长不匹配,则用户代理必须将当前元素的四舍五入到最近的不会使该元素出现步长不匹配的最近的数值,且如果最大值不小于最小值,则该数值大于等于最小值且小于等于最大值。如果存在两个满足这些约束的数值,则用户代理必须使用距离正无穷更新的值。

举例说明,对于标记<input type="range" min=0 max=100 step=20 value=50>,范围控件中初始化的值为60。

将字符串转换为数值的算法如下:如果对input应用解析浮点数值的规则出现错误,则返回一个错误;否则,返回处理结果的数值。

将数值换为字符串转的算法如下:返回一个input表示的有效地浮点数

下面是一个通过list属性使用自动完成列表的范围空间的例子。这将用于在控件的全部范围中非常重要的几个值,如预设的亮度水平或典型的速度限制。标记片段如下:

<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
<datalist id="powers">
 <option value="0">
 <option value="-30">
 <option value="30">
 <option value="+50">
</datalist>

……应用的样式表如下:

input { height: 75px; width: 49px; background: #D5CCBB; color: black; }

渲染可能如下:

File:Http://www.w3.org/TR/2011/WD-html5-20110525/sample-range.png

注意用户代理如何通过样式表指定的高度和宽度属性的比例确定控件的方向。颜色从样式表定义。刻度从标记定义。特别的,step属性在刻度标记的位置不起作用,用户代理决定只是用编码人员指定的完成值,并且之后在两端加入超出的刻度。

同样还要注意到无效值+50被完全忽略了。

另一个例子,由下列标记片段组成:

<input name=x type=range min=100 max=700 step=9.09090909 value=509.090909>

用户代理可以通过各种方式显示该控件,例如:

File:Http://www.w3.org/TR/2011/WD-html5-20110525/sample-range-2a.png

或者例如:

File:Http://www.w3.org/TR/2011/WD-html5-20110525/sample-range-2b.png

用户代理可以根据样式表所给出的尺寸决定通过哪种方式进行显示。这将允许在宽度不同的情况下为刻度保留相同的意义。

颜色状态

input元素的type属性为颜色状态,则应用本节中的规则。

input元素表示一行将当前元素的设置为一个表示简单颜色的字符串。

注:在该状态下,总是提供一个取色器,且不能将其值设为空字符串。

如果当前元素是可变的,用户代理应该允许用户修改其所表示的颜色,该颜色通过对其应用解析简单颜色的规则获得。用户代理禁止用户将其设为非有效小写简单颜色的字符串。如果用户代理提供了一个用于选择颜色的用户界面,则其必须被设为一个对用户的选择使用序列号简单颜色的值的规则处理的结果。用户代理禁止用户将其设为空字符串。

如果标记了value属性,且其值不为空,则其值必须是一个有效地简单颜色

值处理算法如下:如果其是一个有效地简单颜色,则设其为将该元素的转换为ASCII小写形式的结果;否则,设其为字符串“#000000”。

复选框状态

input元素的type属性为复选框状态,则应用本节中的规则。

input元素表示一个二态控件,该控件表示当前元素的选中状态。如果当前元素的选中状态为真,则控件表示一个阳性选择,如果其为假,则表示一个阴性选择。如果当前元素的indeterminate IDL属性被设为真,则控件的选择应该被隐藏,就像控件处于第三个——不确定——状态。

注:即使元素的indeterminate IDL属性被设为真,该控件也不是一个真正的三态控件。indeterminate IDL属性只是给出第三个状态的外观。

如果当前元素是可变的,则:预点击激活步骤由将元素的选中状态设置为与其相反的值(如,如果其值为假则设为真,如果其值为真则设为假)和将元素的indeterminate IDL属性设为假组成。取消激活步骤由将选中状态和元素的indeterminate IDL属性还原为预点击激活步骤执行之前的值。激活行为是在该元素上冒泡激活一个简单事件,其名为change。

约束验证:如果当前元素为必填项且其选中状态为假,则该元素出现漏填

此区块中不是标准描述,实现要求在下面给出。

input . indeterminate [ = value ]

若设置,则重载复选框控件的表现形式,使其当前值不可见。

单选按钮状态

input元素的type属性为单选按钮状态,则应用本节中的规则。

input元素表示一个控件,该控件与其他input元素结合使用时,形成一个单选按钮组,组中仅能有一个控件的选中状态为真。如果元素的选中状态为真,则该控件是组中被选中的一个,如果为假,则表示组中的一个没有被选择的控件。

单选按钮组包含一个input元素a,且包含所有满足下列全部条件的其他input元素b

一个文档禁止包含那些其单选按钮组仅包含该元素的input元素。

在发生下列情况后,如果某元素的选中状态为真,则与该元素在同一个单选按钮组内的所有其他元素的选中状态必须被设为假。

  • 元素的选中状态被设为真(无论出于何种原因)。
  • 设置、修改或删除了元素的name属性。
  • 修改了元素的所属表单

如果当前元素是可变的,则:预点击激活步骤由将元素的选中状态设置为真组成。取消激活步骤由将选中状态设为假组成。激活行为是在该元素上冒泡激活一个简单事件,其名为change。

约束验证:如果当前单选按钮组内的某个元素为必填项单选按钮组内所有input元素的选中状态均为假,则该元素出现漏填

注:如果在向文档插入一个单选按钮组时,其内不存在被选中的单选按钮,则它们都将在界面中被初始化为未选中状态,指定某时刻其中的某个单选按钮被选中(通过用户或脚本)。
文件上传状态

input元素的type属性为单选按钮状态,则应用本节中的规则。

input元素表示一个选中文件的列表,其中的每个文件包含一个文件名、一个文件类型和一个文件主体(文件内容)。

文件名可以包含部分路径,例如用户选择了整个目录结构的情况。路径的各个部分应该使用U+005C反响斜线字符(\)与其他部分分隔。

如果当前元素是可变的,则用户代理应该允许用户改变列表中的文件,例如增加或移除文件。文件可以来自于文件系统或在运行中创建,例如从连接到用户驱动的摄像头拍摄图片。

约束验证:如果当前元素为必填项选中文件列表为空,则该元素出现漏填

如果没有设置multiple属性,则选中文件列表禁止超过一个文件。

可以通过标记accept属性来向用户代理指定将要接受的文件类型。

如果标记了accept属性,则该属性必须包含一组逗号分隔的标记,其中的每个标记都必须ASCII不区分大小写地匹配下列各项之一:

  • 字符串“audio/*”
    • 接受声音文件。
  • 字符串“video/*”
    • 接受视频文件。
  • 字符串“image/*”
    • 接受图像文件。
  • 一个没有参数的有效MIME类型
    • 接受指定类型的文件。

这些标记禁止ASCII不区分大小写地与其他标记相匹配(例如不允许重复)。为了从该属性中获得标记的列表,用户代理必须将该属性按逗号分隔

用户代理可以利用该属性的值显示一个叫通用文件选择器更恰当的用户界面。例如,若给出的值为“imgae/*”,则用户代理可以让用户选择使用本地摄像头拍照或从相册中选择图片;若给出的值为“audio/*”,则用户代理可以让用户选择通过耳机麦克风录制音频文件。

用户代理应该阻止用户选择那些不被这些标记中的一个(或多个)所允许的文件。

由于历史原因,value IDL属性在文件名前附加“C:\fakepath\”字符串。某些传统用户代理实际上包含全部路径(这是一个安全漏洞)。这些问题所造成的结果是,以向后兼容的方式从value IDL属性获取文件名是不平凡的。下列方法通过一个恰当兼容的机制提取文件名:

function extractFilename(path) {
  var x;
  x = path.lastIndexOf('\\');
  if (x >= 0) // 基于Windows的路径
    return path.substr(x+1);
  x = path.lastIndexOf('/');
  if (x >= 0) // 基于Unix的路径
    return path.substr(x+1);
  return path; // 仅包含文件名
}

该方法可以如此使用:

<p><input type=file name=image onchange="updateFilename(this.value)"></p>
<p>你选择的文件的名称为:<span id="filename">(none)</span></p>
<script>
 function updateFilename(path) {
   var name = extractFilename(path);
   document.getElementById('filename').textContent = name;
 }
</script>
提交按钮状态

input元素的type属性为提交按钮状态,则应用本节中的规则。

input元素表示一个按钮,当激活按钮时提交表单。如果元素拥有一个value属性,则按钮的标签必须为该属性的值;否则,其必须为一个实现时定义的意为“提交”或类似意义的字符串。该元素是一个按钮,具体地是一个提交按钮

如果当前元素是可变的,则用户代理应该允许用户激活该元素。

如果当前元素拥有一个所属表单,则该元素的激活行为是从该input元素提交所属表单;否则,不进行操作。

formactionformenctypeformmethodformnovalidateformtarget属性为表单提交的属性

注:formnovalidate属性可以用于使提交按钮不触发约束验证。
图片按钮状态

input元素的type属性为图片按钮状态,则应用本节中的规则。

input元素表示一个允许用户选择一个坐标并提交表单的图片,或替代图片的允许用户提交表单的按钮。该元素是一个按钮,具体地是一个提交按钮

图片通过src属性给出。src属性必须存在,且必须包含一个引用到非交互式的、可能是动画的、既非页面也非脚本的图片资源的可能被空格包围的有效的非空URL

若发生下列任意事件,如果并非用户代理不支持图片、用户代理禁用了对图片的支持、用户代理仅按需读取元素或src属性的值是一个空字符串,则用户代理必须解释src属性的值,将其关联到该元素,并且如果关联成功,必须读取返回的绝对URL

读取图片时必须延迟元素所在文档的加载事件,直到资源完成读取时由网络任务源排入任务(将在下面定义)执行结束。

如果图片获取成功,没有发生网络错误,且图片的类型是一个支持的图片类型,且图片是该类型的有效图片,则该图片被称为可用。如果在图片完全下载之前为真,在图片完成读取时由网络任务源排入的每个任务必须恰当的更新图片的表现。

为了判断图片的类型,用户代理应该应用图片嗅探规则,其中使用图片的相关的Content-Type头作为正式的类型。如果没有应用这些规则,则图片的类型必须为图片的相关的Content-Type头所给出的类型。

用户代理禁止支持非图片资源。用户代理禁止直行图片资源中嵌入的可执行代码。用户代理必须仅显示多页资源中的第一页。用户代理禁止资源在交互方式下执行,但应该接受资源中的任何动画。

对于在资源完成读取时由网络任务源排入任务,如果下载成功且图片可用,则必须在input元素上排入一个任务触发一个简单事件,该事件名为load;否则,如果读取过程由于远程服务器没有相应失败,或者读取过程完成但图片无效或不支持,则必须在input元素上排入一个任务触发一个简单事件,该事件名为error。

alt属性为用户及不支持图片的用户代理提供用于替代按钮的文本标签。alt属性必须一直存在,且必须包含一个非空字符串。

input元素支持尺寸属性

如果设置了src属性,该图片可用且用户代理被设置为显示图片,则:该元素表示一个从src属性所标记的图片中选择一个坐标的控件;如果元素是可变的,则用户代理应该允许用户选择该坐标。如果当前元素拥有一个所属表单,则该元素的激活行为是获得用户所选择的坐标并从该input元素提交所属表单。如果用户在没有明确选择一个坐标的情况下激活了该控件,则必须假设坐标为(0, 0)。

否则,该元素表示一个标签为alt属性的值的提交按钮;如果元素是可变的,则用户代理应该允许用户激活该按钮。如果当前元素拥有一个所属表单,则该元素的激活行为是设选择的坐标为(0, 0)并从该input元素提交所属表单

选择的坐标必须有一个X坐标和一个Y坐标组成。该坐标表示相对于图片边界的位置,其坐标控件沿X轴向右,沿Y轴向下。

X坐标必须为一个有效的整数,表示一个数字x,其在范围-(边框+边距)≤x+边框+边距,其中为图片的渲染宽度,边框为图片左侧边框的宽度,边距为图片左侧边距的宽度,边框为图片右侧边框的宽度,边距为图片右侧边距的宽度,其中所有的尺寸均使用CSS像素给出。

Y坐标必须为一个有效的整数,表示一个数字y,其在范围-(边框+边距)≤y+边框+边距,其中为图片的渲染高度,边框为图片顶部边框的宽度,边距为图片顶部边距的宽度,边框为图片底部边框的宽度,边距为图片底部边距的宽度,其中所有的尺寸均使用CSS像素给出。

若缺少边框或边距,则其宽度为零CSS像素。

formactionformenctypeformmethodformnovalidateformtarget属性是表单提交属性

注:在很大程度上本状态的行为与img元素的行为相似。我们鼓励读者阅读该章节,那里对这些需求进行了更详细地描述。
重置按钮状态

input元素的type属性为重置按钮状态,则应用本节中的规则。

input元素表示一个按钮,当激活按钮时重置表单。如果元素拥有一个value属性,则按钮的标签必须为该属性的值;否则,其必须为一个实现时定义的意为“重置”或类似意义的字符串。该元素是一个按钮

如果当前元素是可变的,则用户代理应该允许用户激活该元素。

如果当前元素拥有一个所属表单,则该元素的激活行为重置所属表单;否则,不进行操作。

约束验证:该元素禁止约束验证

按钮状态

input元素的type属性为按钮状态,则应用本节中的规则。

input元素表示一个没有默认行为的按钮。必须通过value属性提供按钮的标签,即使其可能为空字符串。如果元素拥有一个value属性,则按钮的标签必须为该属性的值;否则,其必须为一个空字符串。该元素是一个按钮

如果当前元素是可变的,则用户代理应该允许用户激活该元素。该元素的激活行为不进行任何操作。

约束验证:该元素禁止约束验证