Warning:
This wiki has been archived and is now read-only.
HTML5/the-button-element
Contents
button元素
- 分类:
- 流式内容。
段落式内容。
交互式式内容。
可列的、可标的和可提交的的表单相关元素。
- 使用场景:
- 需要段落式内容处。
- 内容模型:
- 段落式内容,但禁止包含交互式内容后裔。
- 允许的属性:
- 全局属性
autofocus
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
name
type
value
- DOM接口:
interface HTMLButtonElement : HTMLElement {
attribute boolean autofocus;
attribute boolean disabled;
readonly attribute HTMLFormElement form;
attribute DOMString formAction;
attribute DOMString formEnctype;
attribute DOMString formMethod;
attribute DOMString formNoValidate;
attribute DOMString formTarget;
attribute DOMString name;
attribute DOMString type;
attribute DOMString value;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(in DOMString error);
readonly attribute NodeList labels;
};
button元素表示一个按钮。如果该元素没有被禁用,则用户代理应该允许用户激活该按钮。
该元素是一个按钮。
type属性控制该按钮激活时的行为。其是一个枚举属性。下表中列出了该属性的关键字和状态——最左侧一列中的关键字映射到同一行中第二列的单元格中的状态。
关键字 | 状态 | 简要说明 |
---|---|---|
submit | 提交按钮 | 提交该表单 |
reset | 重置按钮 | 重置该表单 |
button | 按钮 | 不进行操作 |
缺失默认值为提交按钮状态。
如果type属性处于提交按钮状态,该元素明确的是一个提交按钮。
约束验证:如果type属性处于重置按钮或按钮状态,则该元素禁止约束验证。
如果该元素被禁用,则button元素的激活行为是执行下列为该元素type属性当前状态定义的步骤。
form属性明确的将button元素与其所属表单相关联。name属性表示元素的名称。disabled属性用于使该控件不可交互并防止提交其值。autofocus属性控制焦点。formaction、formenctype、formmethod、formnovalidate和formtarget属性是表单提交属性。
如果该元素的type属性不处于提交按钮状态,则禁止标记formaction、formenctype、formmethod、formnovalidate和formtarget属性。
value属性该处该元素用于表单提交的值。如果该元素拥有value属性,该元素的值为其value属性的值,否则为空字符串。
value IDL属性必须反映同名的内容属性。
type IDL属性必须反映同名的内容属性,且仅限已知的值。
willValidate、validity和validationMessage属性,以及checkValidity()和setCustomValidity()方法,是约束验证API的一部分。labels属性提供该元素的label列表。autofocus、disabled、form和name IDL属性是元素的表单API的一部分。
下列标为“显示提示”的按钮在激活时弹出一个对话框:
<button type=button onclick="alert('This 15-20 minute piece was composed by George Gershwin.')"> 显示提示 </button>
select元素
- 分类:
- 流式内容。
段落式内容。
交互式式内容。
可列的、可标的、可提交的和可重置的表单相关元素。
- 使用场景:
- 需要段落式内容处。
- 内容模型:
- 零或多个option和optgroup元素。
- 允许的属性:
- 全局属性
autofocus
disabled
form
multiple
name
required
size
- DOM接口:
interface HTMLSelectElement : HTMLElement {
attribute boolean autofocus;
attribute boolean disabled;
readonly attribute HTMLFormElement form;
readonly attribute boolean multiple;
attribute DOMString name;
attribute boolean required;
attribute unsigned long size;
readonly attribute DOMString type;
readonly attribute HTMLOptionsCollection options;
attribute unsigned long length;
getter any item(in unsigned long index);
void add(in HTMLElement element, in optional HTMLElement before);
void add(in HTMLElement element, in long before);
void remove(in long index);
readonly attribute HTMLCollection selectedOPtions;
attribute long selectedIndex;
attribute DOMString value;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(in DOMString error);
readonly attribute NodeList labels;
};
select元素表示一个在选项集合中进行选择的控件。
multiple属性是一个布尔型属性。如果设置了该属性,则select元素表示一个从选项列表中选择零或多个选项的控件。如果没有设置该属性,则select元素表示一个从选项列表中选择一个单独选项的控件。
size属性给出将要展示给用户的选项的数目。如果标记了size属性,则必须其值必须是一个大于零的有效的非负整数。如果设置了multiple属性,则size属性的默认值为4。如果没有设置multiple属性,则size属性的默认值为1。
如果一个select元素拥有size属性,且对其值应用解析非负整数的规则能够获得结果,则该元素的显示尺寸为该结果。如果对该元素的值应用规则时没有成功,或者如果没有设置size属性,则该元素的显示尺寸为该元素的默认值。
一个select元素的选项列表包括该select元素的所有option子元素以及该select元素的所有optgroup子元素的所有option子元素,并保持树形结构顺序。
required属性是一个布尔型属性。如果标记了该属性,则要求用户在提交表单前选择一个值。
如果一个select元素标记了一个required属性、没有标记multiple属性且显示尺寸为1;且如果该select元素的选项列表中的第一个option元素的值为空字符串,且该option元素的父元素是select元素(不是optgroup元素),则该option元素是select元素的占位标签选项。
如果一个select元素标记了一个required属性、没有标记multiple属性且显示尺寸为1,则该select元素必须拥有一个占位标签选项。
约束验证:如果元素标记了required属性,且select元素的选项列表中的option元素的值为空字符串,且该option元素的选择状态都没有被设为真,或者select元素的选项列表中选择状态被设为真的option元素是占位标签选项,则该元素出现未填写。
如果没有设置multiple属性,且该元素没有被禁用,则用户代理应该允许用户选择其选项列表中没有被禁用的option元素。在选择该option元素之后(通过点击、通过改变该元素的值之后移出焦点、通过菜单命令或通过任意其他机制),将用户交互事件排入队列之前(例如click事件之前),用户代理必须将选择的option元素选择状态设为真,并使用用户交互任务源作为任务源排入一个任务以在该select元素上冒泡的触发一个简单事件,该事件名为change。
如果没有设置multiple属性,当一个select元素选项列表中的option元素的选择状态被设为真时,或者当选择状态为真的option元素插入到select元素选项列表中时,用户代理必须将其选项列表中的其他option元素的选择状态设为假。
如果没有设置multiple属性且该元素的显示尺寸大于1,则用户代理同样应该允许用户将选择状态为真的option元素反选。在该操作被传达给用户代理之后,将用户交互事件排入队列之前(例如click事件之前),用户代理必须将选择的option元素选择状态设为假,并使用用户交互任务源作为任务源排入一个任务以在该select元素上冒泡的触发一个简单事件,该事件名为change。
如果没有设置multiple属性且该元素的显示尺寸等于1,当select元素选项列表中的option元素的选择状态均被设为假时,用户代理必须将选项列表中按照树形结构顺序的第一个没有被禁用的option元素(如果存在)的选择状态设为真。
如果设置了multiple属性,且该元素没有被禁用,则用户代理应该允许用户切换其选项列表中没有被禁用的option元素的选择状态(通过点击、通过菜单命令或通过任意其他机制)。在用户修改了一个或多个option元素的选择状态之后,将用户交互事件排入队列之前(例如click事件之前),用户代理必须使用用户交互任务源作为任务源排入一个任务以在该select元素上冒泡的触发一个简单事件,该事件名为change。
select元素的重置算法是编辑该元素选项列表中的所有option元素,如果option元素拥有一个selected属性,则设其选择状态为真,否则设为假。
form属性用于将select元素与其所属表单相关联。name属性表示元素的名称。disabled属性用于使该控件不可交互并防止提交其值。autofocus属性控制焦点。
select . type
如果元素拥有multiple属性,则返回“select-multiple”,否则返回“select-one”。
select . options
返回一个选项列表的HTMLOptionsCollection。
select . length [ = value ]
返回选项列表中的元素数。
当设置一个更小的数时,截取select元素中的option元素数。
当设置一个更大的数时,向select元素中插入新的空白option元素。
element = select . item(index)
select[index]
返回选项列表中索引为index的元素。元素按照树形结构顺序排序。
如果index超出范围则返回null。
element = select . namedItem(name)
如果匹配了多个元素,则返回一个包含所有这些元素的NodeList对象。
select . add(element [, before ])
在before给出的节点前插入element。
before参数可以为一个数值,在这种情况下,element应当插入到索引为该数值的元素之前;before参数还可以为选项列表中的一个元素,在这种情况下,element应当插入到该元素之前。
如果before参数被忽略、为null或者是一个超出范围的数值,则element应当被插入到列表的结尾。
如果element是它要插入到的元素的祖先,则该方法应当抛出一个HIERARCHY_REQUEST_ERR异常。如果element不是一个option或optgroup元素,则该方法不进行任何操作。
select . selectedOptions
返回一个选项列表中被选择的HTMLCollection。
select . selectedIndex [ = value ]
如果存在被选择的元素,则返回这些元素中第一个的索引,否则返回-1。
可以被设置,用户改变选择的元素。
select . value [ = value ]
如果存在被选择的元素,则返回这些元素中第一个的值,否则返回空字符串。
可以被设置,用户改变选择的元素。
对于type IDL属性,在获取时,如果没有标记multiple属性则必须返回字符串“select-one”,如果标记了multiple属性则必须返回字符串“seelct-multiple”。
options IDL属性必须返回一个植根于该select元素的HTMLOptionsCollection对象,其过滤器匹配选项列表中的元素。
options集合同样反映在HTMLSelectElement对象上。在任意时刻,支持的属性索引为该时刻options属性所返回的对象所支持的索引。
length IDL属性必须返回options集合所表示的节点的数目。在获取时,其行为必须与options集合上同名的属性相同。
item(index)方法必须返回options集合上以相同的参数调用同名方法返回的值。
namedItem(name)方法必须返回options集合上以相同的参数调用同名方法返回的值。
相似的,add()和remove()方法的行为必须和在同一个options集合上各自的同名方法一样。
selectedOptions IDL属性必须返回一个植根于该select节点的HTMLCollection对象,其过滤器匹配选项列表中选择状态为真的元素。
对于selectedIndex IDL属性,在获取时,必须返回选项列表中选择状态为真的第一个option元素(如果存在)的索引,否则必须返回-1。
在设置时,selectedIndex属性必须将选项列表中所有的option元素的选择状态设为假,之后对于选项列表中索引为给出的新值的option元素(如果存在),必须将其选择状态设为真。
对于value IDL属性,在获取时,必须返回选项列表中按树形结构顺序排列的第一个选择状态为真的option元素(如果存在)的值,否则返回空字符串。
在设置时,value属性必须将选项列表中所有的option元素的选择状态设为假,之后对于选项列表中值为给出的新值的option元素(如果存在),必须将其选择状态设为真。
multiple、required和size IDL属性必须反映各自同名的内容属性。size IDL属性仅限非负数值,且其默认值为零(由于历史原因与其所反映的size内容属性的默认值不同)。
willValidate、validity和validationMessage属性,以及checkValidity()和setCustomValidity()方法是约束验证API的一部分。labels属性提供该元素的label列表。autofocus、disabled、form和name IDL属性是元素的表单API的一部分。
下面的例子中展示了一个select元素如何用于向用户提供一个在一组选项中选择单一选项。默认选项被预先选中。
<p> <label for="unittype">选择单位类型:</label> <select id="unittype" name="unittype"> <option value="1"> Miner </option> <option value="2"> Puffer </option> <option value="3" selected> Snipey </option> <option value="4"> Max </option> <option value="5"> Firebot </option> </select> </p>
在下面,用户可以选择任意数目的选项。默认状态下,选中了全部五个选项。
<p> <label for="allowedunits">在下图中选择单位类型:</label> <select id="allowedunits" name="allowedunits" multiple> <option value="1" selected> Miner </option> <option value="2" selected> Puffer </option> <option value="3" selected> Snipey </option> <option value="4" selected> Max </option> <option value="5" selected> Firebot </option> </select> </p>
datalist元素
- 分类:
- 流式内容。
段落式内容。
- 使用场景:
- 需要段落式内容处。
- 内容模型:
- 可能为:段落式内容。
可能为:零或多个option元素。
- 允许的属性:
- 全局属性
- DOM接口:
interface HTMLDataListElement : HTMLElement {
readonly attribute HTMLCollection options;
};
datalist元素表示一组作为其他控件预定义选项的option元素。元素的内容表示传统用户代理的后备内容,其中还包括表示预定义选项的option元素。在进行渲染时,datalist元素不表示任何意义,并且其和其子节点应该被隐藏。
datalist元素应该通过在一个input元素上使用list属性将其与该input元素相连。
datalist元素中的每一个没有被禁用且其值不为空字符串的option子元素表示一个建议。每个建议拥有一个值和一个标签。
options IDL属性必须返回一个植根于datalist节点的HTMLCollection,其过滤器匹配option元素。
约束验证:如果一个元素拥有一个datalist元素作为其祖先,则其禁止约束验证。
optgroup元素
- 分类:
- 无。
- 使用场景:
- 作为select元素的子元素。
- 内容模型:
- 零或多个option元素。
- 允许的属性:
- 全局属性
disabled
label
- DOM接口:
interface HTMLOptGroupElement : HTMLElement {
attribute boolean disabled;
attribute DOMString label;
};
optgroup元素表示一组拥有一个共同的标签的option元素。
option元素的元素组,由作为optgroup元素子元素的option元素组成。
若在select元素中展示option元素,则用户代理应该在展示这些option元素时,按组先关联并独立于其他option元素。
disabled属性是一个布尔型属性,用于一次性禁用一整组option元素。
必须标记label属性。其值该出了分组用于用户界面上的名称。用户代理应该在标记select元素中的option元素的组的时候使用该属性的值。
disabled和label IDL属性必须反映各自同名的内容属性。
下列片段展示了如何在select下拉控件中表示在三个课程中的讲义:
<form action="courseselector.dll" method="get"> <p>Which course would you like to watch today? <p><label>Course: <select name="c"> <optgroup label="8.01 Physics I: Classical Mechanics"> <option value="8.01.1">Lecture 01: Powers of Ten <option value="8.01.2">Lecture 02: 1D Kinematics <option value="8.01.3">Lecture 03: Vectors <optgroup label="8.02 Electricity and Magnestism"> <option value="8.02.1">Lecture 01: What holds our world together? <option value="8.02.2">Lecture 02: Electric Field <option value="8.02.3">Lecture 03: Electric Flux <optgroup label="8.03 Physics III: Vibrations and Waves"> <option value="8.03.1">Lecture 01: Periodic Phenomenon <option value="8.03.2">Lecture 02: Beats <option value="8.03.3">Lecture 03: Forced Oscillations with Damping </select> </label> <p><input type=submit value="▶ Play"> </form>
option元素
- 分类:
- 无。
- 使用场景:
- 作为select元素的子元素。
作为datalist元素的子元素。
作为optgroup元素的子元素。
- 内容模型:
- 文本。
- 允许的属性:
- 全局属性
disabled
label
selected
value
- DOM接口:
[NamedConstructor=Option(),
NamedConstructor=Option(in DOMString text),
NamedConstructor=Option(in DOMString text, in DOMString value),
NamedConstructor=Option(in DOMString text, in DOMString value, in boolean defaultSelected),
NamedConstructor=Option(in DOMString text, in DOMString value, in boolean defaultSelected, in boolean selected)]
interface HTMLOptionElement : HTMLElement {
attribute boolean disabled;
readonly attribute HTMLFormElement form;
attribute DOMString label;
attribute boolean defaultSelected;
attribute boolean selected;
attribute DOMString value;
attribute DOMString text;
readonly attribute long index;
};
option元素表示一个select元素的选项或一个datalist元素的建议列表的一部分。
在某些情况下根据select元素定义中的描述,一个option元素可以成为一个select元素的占位标签选项。一个占位标签选项不能表示一个实际的选项,而是表示一个select控件的标签。
disabled属性是一个布尔型属性。如果一个option元素设置了disabled属性,或该元素是一个设置了disabled属性的optgroup元素的子元素,则该option元素被禁用。
被禁用的option元素必须阻止将任意在用户交互任务源上排入任务的点击事件指派给该元素。
label属性为该元素提供了一个标签。如果一个option元素拥有一个label属性,则其标签为该属性的值,否则为该元素的textContent。
value属性为该元素提供了一个值。如果一个option元素拥有一个value属性,则其值为该属性的值,否则为该元素的textContent。
selected属性是一个布尔型属性。其表示该元素默认的选择状态。
一个option元素的选择状态是一个布尔型状态,初始化为假。除非特殊标记,如果一个元素拥有一个selected属性,则在该元素被创建时,其选择状态必须被设为真。当为一个option元素添加selected属性时,其选择状态必须被设为真。
对于没有标记multiple属性的select元素,禁止其拥有超过一个设置了selected属性的option元素作为其后裔。
一个option元素的索引是在同一个选项列表中按照树形结构顺序在其前面的的option元素的数目。如果该option元素不再一个选项列表之中,则option元素的索引为零。
option . selected
如果该元素被选中,则返回真,否则返回假。
可以被设置,用来覆盖该元素的当前状态。
option . index
option . form
返回该元素的form元素(如果存在),否则返回null。
option . text
与textContent相似,除了合并了空格。
option = new Option( [ text [, value [, defaultSelected [, selected ] ] ] ] )
返回一个新的option元素。
text参数设置该元素的内容。
value参数设置value属性。
defaultSelected参数设置selected属性。
selected参数设置该属性是否被选中。如果忽略该参数,即使defaultSelected参数为真,该元素仍然没有被选中。
disabled和label IDL属性必须反映各自同名的内容元素。defaultSelected IDL属性必须反映selected内容属性。
对于value IDL属性,在获取时,如果该元素拥有value内容属性,则必须返回该内容属性的值,否则必须返回该元素textContent IDL属性的值。在设置时,必须将该元素的value内容属性设为新值。
对于selected IDL属性,在获取时,如果该元素的选择状态为真,则必须返回真,否则必须返回假。在设置时,必须将该元素的选择状态设为新值。
index IDL属性必须返回元素的索引。
对于text IDL属性,在获取时,必须返回该元素textContent IDL属性的值,但返回值移去了开头及结尾处的空格字符、将所有包含两个或多个空格字符的序列替换为一个单独的U+0020空格字符。在设置时,其行为应该和将textContent IDL属性的值设为新值的操作相同。
form IDL属性的行为由该option元素是否在一个select元素之中决定。如果option元素拥有一个select元素作为其父节点,或者拥有一个optgroup元素作为其父节点且该optgroup元素拥有一个select元素作为其父节点【译:此处的optgroup元素在原文中为colgroup元素】,则该form IDL属性必须返回与select元素的form IDL属性相同的值。否则,必须返回null。
这里提供了几个用于创建HTMLOptionElement对象的构造器(除了来自于DOM Core的类似于createElement()的工厂方法):Option()、Option(text)、Option(text, value)、Option(text, value, defaultSelected)和Option(text, value, defaultSelected, selected)。当调用这些构造器时,必须返回一个新的HTMLOptionElement对象(一个新的option元素)。如果设置了text参数,则新对象必须拥有其唯一的一个Node,该节点的类型为TEXT_NODE(3),其数据为该参数的值。如果设置了value参数,则新对象必须拥有一个value属性,该属性的值被设为该参数的值。如果设置了defaultSelected参数且该参数为真,则新对象必须拥有一个没有设值的selected属性。如果设置了selected参数且该参数为真,则新对象必须将其选择状态设为真;否则,如果没有设置第四个参数或其值为假,则即使设置了defaultSelected参数且其值为真,选择状态也必须设为假。该对象的所在文档必须为调用该构造器的接口对象所在的Window对象的浏览器上下文的活动的文档。
textarea元素
- 分类:
- 流式内容。
段落式内容。
交互式内容。
可列的、可标的、可提交的和可重置的表单相关元素。 - 使用场景:
- 需要段落式内容处。
- 内容模型:
- 文本。
- 允许的属性:
- 全局属性
autofocus
cols
dirname
disabled
form
maxlength
name
placeholder
readonly
required
rows
wrap
- DOM接口:
interface HTMLTextAreaElement : HTMLElement {
attribute boolean autofocus;
attribute unsigned long cols;
attribute DOMString dirname;
attribute boolead disabled;
readonly attribute HTMLFormElement form;
attribute long maxLength;
attribute DOMString name;
attribute DOMString placeholder;
attribute boolean readonly;
attribute boolean required;
attribute unsigned long rows;
attribute DOMString wrap;
readonly attribute DOMString type;
attribute DOMString defaultValue;
attribute DOMString value;
readonly attribute unsigned long textLength;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(in DOMString error);
readonly attribute NodeList labels;
void select();
attribute unsigned long selectionStart;
attribute unsigned long selectionEnd;
attribute DOMString selectionDirection;
void setSelectionRange(in unsigned long start, in unsigned long end, in optional DOMString direction);
};
textarea元素表示一个该元素原始值的多行纯文本编辑控件。控件的内容表示控件的默认值。
对于一个textarea元素和其原始值中的新行,应该是Unicode双向算法中的单独段落。该要求可能会通过样式层间接实现。举例说明,一个HTML+CSS用户代理可以通过实现CSS ‘unicode-bidi’属性实现该需求。[BIDI] [CSS]
readonly属性是一个布尔型属性,其用于控制文本是否可以被用户编辑。
约束验证:如果在textarea元素上标记了readonly属性,则该元素禁止约束验证。
如果一个textarea元素没有被禁用且没有标记readonly属性,则其是可变的。
若一个textarea是可变的,则其原始值应该可以被用户编辑:用户代理应该允许用户编辑、插入和移除文本,插入和移除U+000A换行(LF)字符形式的换行符。在每次由用户造成的元素的原始值发生变化时,用户代理必须排入一个任务以在textarea元素上冒泡地触发一个简单事件,该事件名为input。用户代理可能会在排入任务之前等待用户交互中的恰当的中断;举例说明,一个用户代理可以等待用户在100毫秒内没有击键,以便仅在用户停止操作时触发一个事件,而不是在每次击键是触发一个事件。
textarea元素拥有一个脏值标记,其必须初始化为假,并且必须在用户对该控件进行交互而造成其原始值发生变化时设为真。
若textarea元素的textContent IDL属性的值发生变化时,如果该元素的脏值标记为假,则必须将该元素的原始值设为该元素textContent IDL属性的值。
textarea元素的重置算法是将该元素的值设为该元素textContent IDL属性的值。
如果该元素是可变的,则用户代理应该允许用户修改该元素的书写方向,将其设为从左向右的书写方向或者从右向左的书写方向。如果用户这样做了,则用户代理必须执行下列步骤:
- 如果用户选择从左向右的书写方向,则将元素的dir属性设为“ltr”;如果用户选择从右向左的书写方向,则将元素的dir属性设为“rtl”。
- 排入一个任务以在textarea元素上冒泡地触发一个简单事件,该事件名为input。
cols属性标记了每行的预计最大字符数。如果标记了cols属性,则其值必须为一个大于零的有效的非负整数。如果对该属性的值应用解析非负整数的规则时返回了一个大于零的数值,则该元素的字符宽度为该值,否则为20。
用户代理可能会将textarea元素的字符宽度作为向用户展示每行会包含多少个字符的提示(例如,对于可视化的用户代理,是空间的宽度为该字符数目)。在视觉渲染中,用户代理应该对用户的输入进行换行,且每行必会宽于该字符数目。
rows属性标记了要展示的行数。如果标记了rows属性,则其值必须是一个大于零的有效的非负整数。如果对该属性的值应用解析非负整数的规则时返回了一个大于零的数值,则该元素的字符高度为该值,否则为2。
视觉用户代理应该将该控件的高度设为由字符高度给出的行数。
wrap属性是一个拥有两个关键字和状态的枚举属性:soft关键字映射到Soft状态,以及hard关键字映射到Hard状态。缺失默认值为Soft状态。
Soft状态指示textarea元素中的文本在提交时不自动换行(即使在渲染时自动换行)。
Hard状态指示textarea元素中的文本由用户代理添加新行,以在提交时对文本进行自动换行。
如果元素的wrap属性处于Hard状态,则必须标记cols属性。
- 替换所有其后没有跟随U+000A换行(LF)字符的U+000D回车(CR)字符,以及所有没有跟随在U+000D回车(CR)字符之后的U+000A换行(LF)字符为一个由U+000D回车U+000A换行(CRLF)字符对组成的两个字符的字符串。
- 如果元素的wrap属性处于Hard状态,则使用一个用户代理定义的算法向字符串中插入U+000D回车U+000A换行(CRLF)字符对,使得每行中没有超过字符宽度个字符。基于该需求的要求,每行的分隔为字符串开始、字符串结尾以及U+000D回车U+000A换行(CRLF)字符对。
maxlength属性是一个由textarea元素脏值标记控制的表单控件maxlength属性。
如果textarea元素拥有一个允许的最大的值长度,则该元素的孩子必须满足其textContent IDL属性的值得码位长度等于或小于该元素的允许的最大的值长度。
required属性是一个布尔型属性。如果标记了该属性,则要求用户在提交表单前输入一个值。
约束验证:如果该元素标记了required属性,且该元素是可变的,且元素的值为空字符串,则该元素出现未填。
placeholder属性表示一个用户帮助用户输入数据的提示(一个词或者短语)。提示可以是一个要输入的值的实例或者对预期的格式的描述。如果标记了该属性,则其值禁止包含U+000A换行(LF)和U+000D回车(CR)字符。
placeholder属性不应该替代属性。
当元素的值为空字符串且该控件没有被聚焦时,用户代理应该相用户提供经过移去换行符后的这些提示(例如在一个空白的无焦点的控件中显示)。
dirname属性是一个表单控件dirname属性。
form属性拥有将该textarea元素与其所属表单相关联。name属性表示元素的名称。disabled属性用于使控件不可交互且阻止其值被提交。autofocus属性控制焦点。
textarea . type
返回字符串“textarea”。
textarea . value
返回该元素的当前值。
可以被设置,用于改变值。
cols、placeholder、required、rows和wrap属性必须反映各自同名的内容属性。cols和rows属性仅限大于零的非负数值。cols属性的默认值为20。rows属性的默认值为2。dirName IDL属性必须反映dirname内容属性。maxLength IDL属性必须反映maxlength内容属性,仅限非负数值。readOnly IDL属性必须反映readonly内容属性。
type IDL属性必须返回值“textarea”。
defaultValue IDL属性的行为必须与该元素的textContent IDL属性相同。
对于value属性,在获取时,必须返回元素的原始值;在设置时,必须将元素的原始值设为新值。
textLength IDL属性必须返回元素的值的码位长度。
willValidate、validity和validaitonMessage属性,以及chackValidity()和setCustomValidity()方法,是约束验证API的一部分。labels属性提供一个该元素的label的列表。select()、selectionStart、selectionEnd、selectionDirection和setSelectionRange()方法和属性暴露元素的文本选择。autofocus、disabled、form和name IDL属性是元素的表单API的一部分。
下面的textarea元素允许输入自由格式的文本:
<p>如果您有任何评论,请让我们知道:<textarea cols=80 name=comments></textarea></p>
限制评论的最大长度,可以使用maxlength属性:
<p>如果您有任何简短的评论,请让我们知道:<textarea cols=80 name=comments maxlength=200></textarea></p>
通过将文本插入到元素之中,给出默认值:
<p>如果您有任何评论,请让我们知道:<textarea cols=80 name=comments>You rock!</textarea></p>
要求浏览器在提交其值时同时提交书写方向,可以标记dirname属性:
<p>如果您有任何评论,请让我们知道(您可以使用英语或希伯来文编写您的评论):<textarea cols=80 name=comments dirname=comments.dir></textarea></p>
keygen元素
- 分类:
- 流式内容。
段落式内容。
交互式内容。
可列的、可标的、可提交的和可重置的表单相关元素。 - 使用场景:
- 需要段落式内容处。
- 内容模型:
- 空。
- 允许的属性:
- 全局属性
autofocus
challenge
disabled
form
keytype
name
- DOM接口:
interface HTMLKeygenElement : HTMLElement {
attribute boolean autofocus;
attribute DOMString challenge;
attribute boolead disabled;
readonly attribute HTMLFormElement form;
attribute DOMString keytype;
attribute DOMString name;
readonly attribute DOMString type;
attribute DOMString defaultValue;
attribute DOMString value;
readonly attribute unsigned long textLength;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(in DOMString error);
readonly attribute NodeList labels;
};
keygen元素表示一个密钥对生成控件。当控件所在的表单提交时,私钥将储存在本地密匙库中,公钥将被打包并发送至服务器。
可以标记challenge属性。其值将和提交的密钥一起打包。
keytype属性是一个枚举属性。下表中列出了该属性的关键字与状态——最左侧一列的关键字对应同一行内第二列的单元格中的状态。我们不要求用户代理支持所有这些值,但是必须承认它们支持的算法所对应的值。
关键字 | 状态 |
---|---|
rsa | RSA |
无效值默认状态是unknown状态。缺失值默认状态是RSA状态(如果支持),或unknown状态。
用户代理可能会为每个keygen元素提供一个用户界面,以允许用户配置该元素的密钥对生成器,例如密钥长度。
keygen元素的重置算法是将该元素的各种配置信息还原为其默认值。
元素的值为下列算法所返回的字符串:
- 使用下列适当的步骤:
- 如果元素拥有一个challenge属性,则设challenge为该属性的值。否则,设challenge为空字符串。
- 设算法为一个RFC 5280定义的ASN.1 AlgorithmIdentifier结构体。其中,algorithm字段使用RFC 3279的2.2节(“签署算法”)中定义的OID指定用于确定签署算法的ASN.1 OID,parameters字段按照RFC 3279为本算法的AlgorithmIdentifier结构体创建。[X690] [RFC5280] [RFC3279]
- 设spki为一个RFC 5280定义的ASN.1 SubjectPublicKeyInfo结构体。其中,algorithm字段为上一步中的算法结构体,subjectPublicKey字段是使用ASN.1 DER对公钥进行编码返回的位串(BIT STRING)值。[X690] [RFC5280]
- 设publicKeyAndChallenge为下面定义的一个ASN.1 PublicKeyAndChallenge结构体,其中,spki字段为上一步中的spki结构体,challenge字段为更早的challenge字符串。[X690]
- 设signature为使用ASN.1 DER对使用私钥作为签名密钥对使用ASN.1 DER对publicKeyAndChallenge结构体进行编码获得的字节码应用签署算法所获得的签名进行编码的结果。[X690]。
- 设signedPublicKeyAndChallenge为一个下面定义的ASN.1 SignedPublicKeyAndChallenge结构体,其中,publicKeyAndChallenge字段为publicKeyAndChallenge结构体,signatureAlgorithm字段为算法结构体,signature字段为上一步中的signature位串。
- 返回使用base64对使用ASN.1 DER对signedPublicKeyAndChallenge结构体进行编码的结果进行编码的结果。[RFC4648] [X690]
上述算法中使用的数据对象定义如下。这些定义使用了RFC 5280中定义的相同的“ASN.1-like”语法。[RFC5280]
PublicKeyAndChallenge ::= SEQUENCE {
spki SubjectPublicKeyInfo,
challenge IA5STRING
}
SignedPublicKeyAndChallenge ::= SEQUENCE {
publicKeyAndChallenge PublicKeyAndChallenge,
signatureAlgorithm AlgorithmIdentifier,
signature BIT STRING
}
form属性用于将该keygen元素与其所属表单相关联。name属性表示元素的名称。disabled属性用于使控件不可交互且阻止其值被提交。autofocus属性控制焦点。
keygen . type
返回字符串“keygen”。
challenge IDL属性必须反映同名的内容属性。
keytype IDL属性必须反映同名的内容属性,仅限已知的值。
type IDL属性必须返回值“keygen”。
willValidate、validity和validaitonMessage属性,以及chackValidity()和setCustomValidity()方法,是约束验证API的一部分。labels属性提供一个该元素的label的列表。autofocus、disabled、form和name IDL属性是元素的表单API的一部分。
本规范没有定义生成的私钥应如何使用。我们预计,在接收到SignedPublicKeyAndChallenge (SPKAC)结构体后,服务器将生成一个客户证书,并且将其提供给用户下载;一旦下载了该证书并将其与私钥一起存储至密钥库中,则可以通过使用TLS及证书验证来验证服务。
为了生成一个密钥对、将私钥加入用户的密钥库、向服务器提交公钥,可以标记如下代码:
<form action="processkey.cgi" method="post" enctype="multipart/form-data"> <p><keygen name="key"></p> <p><input type=submit value="提交密钥"></p> </form>
服务器将接收到一个表单提交,其中包含包含一个作为“key”的值的打包过的RSA公钥。它可以被用于各种用途,例如像之前提到的生成一个客户证书。
output元素
- 分类:
- 流式内容。
段落式内容。
可列的、可标的和可重置的表单相关元素。 - 使用场景:
- 需要段落式内容处。
- 内容模型:
- 段落式内容。
- 允许的属性:
- 全局属性
for
form
name
- DOM接口:
interface HTMLOutputElement : HTMLElement {
[PutForwards=value] readonly attribute DomSettableTokenList htmlFor;
readonly attribute HTMLFormElement form;
attribute DOMString name;
readonly attribute DOMString type;
attribute DOMString defaultValue;
attribute DOMString value;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(in DOMString error);
readonly attribute NodeList labels;
};
for内容属性允许在计算的结果和某个元素之间建立联系。该元素表示参加或影响计算的值。如果标记了for属性,其必须包含一个由区分大小写的空格分隔的不重复的无序标记集合组成的字符串,其中每个标记必须是同一个Document中的一个元素的ID的值。
form属性用于将该output元素与其所属表单相关联。name属性表示元素的名称。
该元素拥有一个值模式标记。其值为value或default。初始化时,值模式标记必须被设为default。
当值模式标记处于default模式时,该元素的内容表示该元素的值及其默认值。当值模式标记处于value模式时,该元素的内容只表示该元素的值,其默认值仅能通过defaultValue IDL属性访问。
一旦该元素的后裔经任意途径发生变化,如果其值模式标记处于default模式,则必须将该元素的默认值设为该元素textContent IDL属性的值。
output元素的重置算法是将该元素的值模式标记设为default,并将该元素的textContent IDL属性的值设为该元素的默认值(从而替换元素的子节点)。
output . value [ = value ]
返回该元素的当前值。
可以被设置,替换其值。
output . defaultValue [ = value ]
返回该元素的当前默认值。
可以被设置,替换其默认值。
output . type
返回字符串“output”。
value IDL属性的行为必须与该元素textContent IDL属性相似,除了在设置时,在改变子节点之前必须将该元素的值模式标记设为value。
对于defaultValue IDL属性,在获取时,必须返回该元素的默认值。在设置时,必须将元素的默认值设为新值,如果该元素的值模式标记处于default模式,则还要将元素的textContent IDL属性设为新值。
type IDL属性必须返回值“output”。
willValidate、validity和validaitonMessage属性,以及chackValidity()和setCustomValidity()方法,是约束验证API的一部分。labels属性提供一个该元素的label的列表。form和name IDL属性是元素的表单API的一部分。
简单的计算可以使用output显示其计算结果:
<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber"> <input name=a type=number step=any> + <input name=b type=number step=any> = <output name=o></output> </form>
progress元素
- 分类:
- 流式内容。
段落式内容。
可标的表单相关元素。 - 使用场景:
- 需要段落式内容处。
- 内容模型:
- 段落式内容,但不能是progress元素的后裔。
- 允许的属性:
- 全局属性
value
max
form
- DOM接口:
interface HTMLProgressElement : HTMLElement {
attribute double value;
attribute double max;
readonly attribute double position;
readonly attribute HTMLFormElement form;
readonly attribute NodeList labels;
};
progress元素表示一个任务的完成进度。进度可以是不确定的,其表示进度正在增长,但在任务完成前尚不知道剩余的工作量(例如该任务正在等待一个远程主机的响应);进度还可以是一个零至最大值之间的数值,该处当前已经完成的工作所占的比例。
有两个属性用于确定该元素所表示的任务完成度。value属性表明已经完成的任务量,max属性表明任务需要的工作量总和。单位为任意值且不需指定。
我们鼓励编码人员在该元素的内部加入包含当前值与最大值的文本,使该元素在传统用户代理上依然可用。
一下Web应用片段展示了某个自动化任务的进度:
<section> <h2>任务进度</h2> <p>进度:<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>
(本实例中的updateProgress()方法将通过本页中的其他代码调用,并将进度条的状态更新为任务进度。)
如果设置了value和max属性,则其值必须为有效的浮点数值。如果设置了value属性,则其值必须大于等于零,并且,如果标记了max属性则小于等于该属性的值,否则必须小于等于1.0。如果标记了max属性,则其值必须大于零。
用户代理需求:如果忽略了value属性,则该进度条是一个不确定进度条。否则,其为确定进度条。
如果该进度条是一个确定进度条且该元素拥有max属性,则用户代理必须按照解释浮点数值的规则解释max属性的值。如果没有返回一个错误,且解释后的值大于零,则进度条的最大值为该值。否则,如果元素没有max属性,或者如果有该属性但返回一个错误,或者如果解释后的值小于等于零,则进度条的最大值为1.0。
如果该进度条是一个确定进度条,则用户代理必须按照解释浮点数值的规则解释value属性的值。如果没有返回一个错误,且解释后的值小于最大值且大于零,则进度条的当前值为该值。否则,如果解释后的值大于等于最大值,则进度条的当前值为进度条的最大值。否则,如果解释value属性返回一个错误,或者如果解释后的值小于等于零,则进度条的当前值为零。
展示进度条的用户代理需求:在向用户展示progress元素时,用户代理应该指明其为确定的或不确定的进度条,并且,如果是前一种情况,应该指明当前值相对于最大值的位置。
form属性用于将该progress元素与其所属表单相关联。
progress . position
对于确定进度条(已知当前值和最大值),返回最大值除以当前值的结果。
对于不确定进度条,返回-1。
如果进度条是一个不确定进度条,则position IDL属性必须返回-1。否则,必须返回最大值除以当前值所返回的结果。
如果进度条是一个不确定进度条,则value IDL属性,在获取时,必须返回0。否则,必须返回当前值。在设置时,给出的值必须被转换为该数值作为浮点型数值的最佳表现形式,并且必须将value内容属性设为该字符串。
max IDL属性必须反映同名的内容属性。max的默认值为1.0。
labels属性提供该元素label的列表。form IDL属性是元素表单API的一部分。
meter元素
- 分类:
- 流式内容。
段落式内容。
可标的表单相关元素。 - 使用场景:
- 需要段落式内容处。
- 内容模型:
- 段落式内容,但不能是meter元素的后裔。
- 允许的属性:
- 全局属性
value
min
max
low
high
optimum
form
- DOM接口:
interface HTMLMeterElement : HTMLElement {
attribute double value;
attribute double min;
attribute double max;
attribute double low;
attribute double high;
attribute double optimum;
readonly attribute HTMLFormElement form;
readonly attribute NodeList labels;
};
meter元素表示一个在已知范围内的标量度量,或者一个小数值;例如磁盘使用率、查询结果的相关度或选举的得票率。
它也被成为一个量表。
有六个属性用于确定该元素所表示的量表的语义。
min属性标识了范围的最小边界,max属性标识了最大边界。value属性标识了量表中标为“测量”的值。
另外三个属性可以用于将量表文卫“低”、“中”和“高”三个部分,并说明哪一部分为“最佳”部分。low属性标识被认为是“低”的部分的范围,high属性标识被认为是“高”的部分的范围。optimum属性该处了“最佳”的位置;如果其值高于“高”标记则说明较大的值更佳;如果其值低于“低”标记则说明较小的值更佳,自然地,如果其值在两个标记之间则说明既不大也不小的值更佳。
编码人员需求:必须标记value属性。如果标记了value、min、low、high、max和optimum属性,则其值必须是有效地浮点数值。
另外,属性的值需要进一步约束:
设值为value属性的数值。
如果标记了min属性,则设最小值为该属性的值,否则设其为零。
如果标记了max属性,则设最大值为该属性的值,否则设其为1.0。
如果满足条件,必须满足下列不等式:
- 最小值 ≤ 值 ≤ 最大值
- 最小值 ≤ low ≤ 最大值(如果标记了low)
- 最小值 ≤ high' ≤ 最大值(如果标记了high)
- 最小值 ≤ optimum ≤ '最大值(如果标记了optimum)
- low ≤ high(如果同时标记了low和high)
我们鼓励编码人员在该元素的内部加入表示量表状态的文字,使该元素在传统用户代理上依然可用。
下面的例子展示了三个表示四分之三的量表:
存储空间使用情况:<meter value=6 max=8>6 blocks used (out of 8 total)</meter> 选举得票率:<meter value=0.75><img alt="75%" src="graph75.png"></meter> 门票销售情况:<meter min="0" max="100" value="75"></meter>
下例中对本元素的使用不正确,因为其没有给出范围(默认最大值为1,但两个量表的值均大于最大值):
<p>柚子饼的半径为<meter value=12>12cm</meter> 且其厚度为<meter value=2>2cm</meter>.</p> <!-- BAD! -->
相反,可以不适用meter元素,也可以根据上下文中其他饼的情况给meter元素定义一个范围:
<p>柚子饼半径12cm,厚度2cm。</p> <dl> <dt>半径:<dd> <meter min=0 max=20 value=12>12cm</meter> <dt>厚度:<dd> <meter min=0 max=10 value=2>2cm</meter> </dl>
在meter元素上没有明确指定单位的方法,但是可以通过通过向title属性标记自由格式的文本实现。
下面的例子提及了单位:
<dl> <dt>半径:<dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter> <dt>厚度:<dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter> </dl>
用户代理需求:用户代理必须使用解释浮点数值的规则解释min、max、value、low、high和optimum属性。
用户代理必须使用下列所有数值来获取量表上的六点的值。(被处理的顺序是重要的,因为某些值会引用早前的值。)
- 最小值
- 如果标记了min属性,且可以从该属性解释出一个值,则最小值为该值。否则,最小值为零。
- 最大值
- 如果标记了max属性,且可以从该属性解释出一个值,则最大值为该值。否则,最大值为1.0。
- 如果最大值小于最小值,则最大值实际上与最小值相同。
- 当前值
- 如果标记了value属性,且可以从该属性解释出一个值,则该值为当前值。否则,当前值为零。
- 如果当前值小于最小值,则当前值实际上与最小值相同。
- 如果,另一方面,当前值大于最大值,则当前值为最大值。
- 低边界
- 如果标记了low属性,且可以从该属性解释出一个值,则低边界为该值。否则,低边界与最小值相同。
- 如果低边界小于最小值,则低边界实际上与最小值相同。相似的,如果低边界大于最大值,则实际上为最大值。
- 高边界
- 如果标记了high属性,且可以从该属性解释出一个值,则高边界为该值。否则,高边界与最大值相同。
- 如果高边界小于低边界,则高边界实际上与低边界相同。相似的,如果高边界大于最大值,则实际上为最大值。
- 最佳点
- 如果标记了optimum属性,且可以从该属性解释出一个值,则最佳点为该值。否则,最佳点为最大值与最小值之间的中点。
- 如果最佳点小于最小值,则最佳点实际上与最小值相同。相似的,如果最佳点高于最大值,则实际上为最大值。
所有这些将造成下列所有不等式成立:
- 最小值≤当前值≤最大值
- 最小值≤低边界≤高边界≤最大值
- 最小值≤最佳点≤最大值
量表区域的用户代理需求:如果最佳点等于低边界、高边界或者任意两者之间的值,则量表高、低边界之间的区域必须被作为最佳区域进行处理,且如果存在较低和较高部分,必须将它们作为不理想进行处理。否则,如果最佳点小于低边界,则最小值与低边界之间的区域必须被作为最佳区域进行处理,低边界与高边界之间的区域必须被作为不理想区域进行处理,高边界到最大值之间的区域必须被作为特别不理想区域进行处理。最后,如果最佳点大于高边界,则情况正好相反;高边界与最大值之间的区域必须被作为最佳区域进行处理,高边界与低边界之间的区域必须被作为不理想区域进行处理,低边界与最小值之间的区域必须被作为特别不理想区域进行处理。
展示量表的用户代理需求:在向用户展示一个meter元素时,用户代理应该指出当前值相对于最大和最小值之间的位置,以及当前值相对于三个区域之间的关系。
下列标记:
<h3>推荐小组</h3> <menu type="toolbar"> <a href="?cmd=hsg" onclick="hideSuggestedGroups()">隐藏推荐小组</a> </menu> <ul> <li> <p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> - <a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">加入</a></p> <p>小组描述:<strong>WWW布局/展示。</strong></p> <p>'''<meter value="0.5">中活跃度,</meter>'''新闻组,618个用户</p> </li> <li> <p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> - <a href="/group/netscape.public.mozilla.xpinstall/subscribe">加入</a></p> <p>小组描述:<strong>Mozilla XPInstall讨论。</strong></p> <p>'''<meter value="0.25">低活跃度,</meter>'''新闻组,22个用户</p> </li> <li> <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> - <a href="/group/mozilla.dev.general/subscribe">加入</a></p> <p>'''<meter value="0.25">低活跃度,</meter>'''新闻组,66个用户</p> </li> </ul>
其渲染可能为:
File:Http://www.w3.org/TR/2011/WD-html5-20110525/sample-meter.png
用户代理可能会结合title属性及其他属性的值来提供上下文相关的帮助或者通过嵌入文本详细说明实际值。
距离说明,下列片段:
<meter min=0 max=60 value=23.2 title=seconds></meter>
……可能会造成用户代理在显示该量表时,使用一个在第一行中显示“Value: 23.2 out of 60.”、第二行显示“seconds”的工具栏。
对于value IDL属性,在获取时,必须返回当前值。在设置时,给出的值必须被转换为该数值作为浮点型数值的最佳表现形式,并且必须将value内容属性设为该字符串。
min、max、low、high和optimum IDL属性必须反映同名的内容属性。
labels属性提供该元素label的列表。form IDL属性是元素表单API的一部分。
下面的例子展示了一个量表如何转换为本地化或者适合打印的文本。
<p>Disk usage: <meter min=0 value=170261928 max=233257824>170 261 928 bytes used out of 233 257 824 bytes available</meter></p>