HTML-form-elements-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>HTML Standard — Forms （各種フォーム用の要素）（日本語訳）</title>
<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-whatwg.css" type="text/css">

<script src="common0.js"></script>
<script src="common1.js" async></script>


<script>

Util.ready = function(){
	const source_data = {
		toc_main: 'MAIN',
		generate: expand
	};
	source_data.collectParts = (parts) => {
		const tbody = C('tbody');
		tbody.innerHTML = PAGE_DATA.form_category_data
			.replace(/\./g, '<td>')
			.replace(/\d/g, '<td>●')
			.replace(/\n([\w\-]+): */g, 
		'\n<tr><th><code class="element">$1</code>'
		);

		parts._form_category_body = tbody;
		delete PAGE_DATA.form_category_data;
	}

	Util.switchWordsInit(source_data);
}

function expand(){
	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;

	let context = '';

	return this.html.replace(
		/%[\w\-~一-鿆あ-ん]+|``?(.+?)([$@\^])(\w*)/g,
		create_html
	);

	function create_html(match, key, indicator, klass){

if(!key) {//%
	return `<var>${match.slice(1)}</var>`;
}

let href = '';
let href1 = '';
{
	const n = key.indexOf('＠');
	if(n > 0) {
		href1 = key.slice(n + 1);
		key = key.slice(0, n);
	}
}
let text = key;

switch(klass){
case 'r':
	text = `[${key}]`;
	href = `HTML-references.html#refs${key}`;
	break;
case 'l':
	text = `"<code class="literal">${text}</code>"`;
	break;
case 'eI':
case 'm':
	const n = text.indexOf('(');
	if(n > 0){
		key = text.slice(0, n);
		text = key + text.slice(n).replace(/\w+/g, '<var>$&</var>');
	}
	break;
case 'U':
	text = `U+${key}`;
	break;
case 'xCode':
	return `<a id="_ex-html-${key}">＊</a>`
	break;
case 'en':
	text = `<span lang="en">${key}</span>`;
	break;
case 'AA':
	return `<a href="~HTMLARIA#el-${key}">作者~向け</a>／<a href="~HTMLAAM#el-${key}">実装者~向け</a>`;
	break;
case 'obsMb':
	text = '廃用にされた~memberもある';
	href= `~HTMLLS/obsolete.html#${key}-partial`;
	break;
}

let tag = tag_map[klass];

if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}

if(match[1] === '`') {//文脈依存
	if(indicator === '^'){
		context = key;
	} else {
		klass = `${klass}!${context}`;
	}
}

if(indicator !== '^'){
	href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	}
}

return text;

	}
}

</script>


<!--%form 分類データ
	1 = own可
	2 = listed
	3 = submit可
	4 = reset可
	5 = label可
-->
<script type="text/plain" id="_source_data">


●●options

spec_date:2025-04-09
trans_update:2025-03-15
source_checked:250314
page_state_key:HTML
spec_status:LS
original_url:https://html.spec.whatwg.org/multipage/form-elements.html
	abbr_url:HEforms
nav_prev:HTML-forms-intro-ja.html
nav_next:HEinput
trans_1st_pub:2016-09-25


●●class_map
e:element
a:attr
p:property
et:event-type
st:attr-state
v:value
E:error
M:method
U:code-point
op:op
obsMb:comment
cn:cp-name

●●tag_map
I:code
m:code
eI:code
E:code
c:code
e:code
a:code
M:code
et:code
st:i
p:code
v:code
U:span
op:span
i:i
em:em
obsMb:span
cn:span


●●original_urls
introduction-4:https://html.spec.whatwg.org/multipage/forms.html
categories:https://html.spec.whatwg.org/multipage/forms.html
the-form-element:https://html.spec.whatwg.org/multipage/forms.html
the-label-element:https://html.spec.whatwg.org/multipage/forms.html
the-input-element:https://html.spec.whatwg.org/multipage/input.html


●●form_category_data

button:   123.56
fieldset: 12..5.
input:    123456
meter:    .....6
object:   123...
output:   12.456
progress: .....6
select:   123456
textarea: 123456
img:      1.....
x-custom:      1234.6

●●original_id_map

●●mdn_urls
the-button-element:HTML/Element/button
the-datalist-element:HTML/Element/datalist
the-fieldset-element:HTML/Element/fieldset
the-form-element:HTML/Element/form
the-legend-element:HTML/Element/legend
the-label-element:HTML/Element/label
the-meter-element:HTML/Element/meter
the-output-element:HTML/Element/output
the-optgroup-element:HTML/Element/optgroup
the-option-element:HTML/Element/option
the-progress-element:HTML/Element/progress
the-select-element:HTML/Element/select
the-textarea-element:HTML/Element/textarea

htmlformelement:API/HTMLFormElement
htmllabelelement:API/HTMLLabelElement
htmlbuttonelement:API/HTMLButtonElement
htmlselectelement:API/HTMLSelectElement
htmldatalistelement:API/HTMLDataListElement
htmloptgroupelement:API/HTMLOptGroupElement
htmloptionelement:API/HTMLOptionElement
htmltextareaelement:API/HTMLTextAreaElement
htmloutputelement:API/HTMLOutputElement
htmlprogresselement:API/HTMLProgressElement
htmlmeterelement:API/HTMLMeterElement
htmlfieldsetelement:API/HTMLFieldSetElement
htmllegendelement:API/HTMLLegendElement

●●link_map

	●IDL, event

CEReactions:~HEcustom#cereactions
HTMLConstructor:~HTMLdom#htmlconstructor
LegacyOverrideBuiltIns:~WEBIDLjs#LegacyOverrideBuiltIns
LegacyUnenumerableNamedProperties:~WEBIDLjs#LegacyUnenumerableNamedProperties
LegacyFactoryFunction:~WEBIDLjs#LegacyFactoryFunction
LegacyNullToEmptyString:~WEBIDLjs#LegacyNullToEmptyString

I.DOMException:~WEBIDL#idl-DOMException

E.HierarchyRequestError:~WEBIDL#hierarchyrequesterror
E.NotFoundError:~WEBIDL#notfounderror
E.NotSupportedError:~WEBIDL#notsupportederror
E.InvalidStateError:~WEBIDL#invalidstateerror
E.NotAllowedError:~WEBIDL#notallowederror
E.SecurityError:~WEBIDL#securityerror
E.TypeError:~TC39#sec-native-error-types-used-in-this-standard-typeerror

I.CommandEvent:~HTMLinteraction#commandevent
I.HTMLFormElement:#htmlformelement
I.HTMLLabelElement:#htmllabelelement
I.HTMLButtonElement:#htmlbuttonelement
I.HTMLSelectElement:#htmlselectelement
I.HTMLDataListElement:#htmldatalistelement
I.HTMLOptGroupElement:#htmloptgroupelement
I.HTMLOptionElement:#htmloptionelement
I.HTMLTextAreaElement:#htmltextareaelement
I.HTMLOutputElement:#htmloutputelement
I.HTMLProgressElement:#htmlprogresselement
I.HTMLMeterElement:#htmlmeterelement
I.HTMLFieldSetElement:#htmlfieldsetelement
I.HTMLLegendElement:#htmllegendelement
I.HTMLMenuElement:~HEgrouping#htmlmenuelement
I.ElementInternals:~HEcustom#elementinternals
I.PopoverInvokerElement:~HTMLpopover#popoverinvokerelement
I.SelectionMode:~HTMLforms#selectionmode
I.ValidityState:~HTMLforms#validitystate

I.ChildNode:~DOM4#interface-childnode
I.DOMTokenList:~DOM4#interface-domtokenlist
I.Element:~DOM4#interface-element
I.HTMLCollection:~DOM4#interface-htmlcollection
I.HTMLElement:~HTMLdom#htmlelement
I.HTMLFormControlsCollection:~HTMLcdom#htmlformcontrolscollection
I.HTMLOptionsCollection:~HTMLcdom#htmloptionscollection
I.RadioNodeList:~HTMLcdom#radionodelist

I.NodeList:~DOM4#interface-nodelist
I.Text:~DOM4#interface-text

m.cancelable:~DOM4#dom-event-cancelable
m.composed:~DOM4#dom-event-composed
m.value:~DOM4#dom-domtokenlist-value
m.createElement:~DOM4#dom-document-createelement
m.bubbles:~DOM4#dom-event-bubbles
	m.composed:~DOM4#dom-event-composed	→ 入力~eventを発火する
m.document.forms:~HTMLdom#dom-document-forms
m.forms:~HTMLdom#dom-document-forms

m.item:~DOM4#dom-htmlcollection-item
m.namedItem:~DOM4#dom-htmlcollection-nameditem
m.textContent:~DOM4#dom-node-textcontent
m.length:~HTMLcdom#dom-htmloptionscollection-length
m.add:~HTMLcdom#dom-htmloptionscollection-add
m.remove:~HTMLcdom#dom-htmloptionscollection-remove

m.command:~HTMLinteraction#dom-commandevent-command
m.source:~HTMLinteraction#dom-commandevent-source

m.labels:#dom-lfe-labels
	m.labels:#dom-elementinternals-labels

m.select:~HTMLforms#dom-textarea/input-select
m.selectionDirection:~HTMLforms#dom-textarea/input-selectiondirection
m.selectionEnd:~HTMLforms#dom-textarea/input-selectionend
m.selectionStart:~HTMLforms#dom-textarea/input-selectionstart
m.setRangeText:~HTMLforms#dom-textarea/input-setrangetext
m.setSelectionRange:~HTMLforms#dom-textarea/input-setselectionrange

m.checkValidity:~HTMLforms#dom-cva-checkvalidity
m.reportValidity:~HTMLforms#dom-cva-reportvalidity
m.setCustomValidity:~HTMLforms#dom-cva-setcustomvalidity
m.validationMessage:~HTMLforms#dom-cva-validationmessage
m.validity:~HTMLforms#dom-cva-validity
m.willValidate:~HTMLforms#dom-cva-willvalidate

m.action:~HTMLforms#dom-fs-action
m.encoding:~HTMLforms#dom-fs-encoding
m.enctype:~HTMLforms#dom-fs-enctype
m.formAction:~HTMLforms#dom-fs-formaction
m.formEnctype:~HTMLforms#dom-fs-formenctype
m.formMethod:~HTMLforms#dom-fs-formmethod
m.formNoValidate:~HTMLforms#dom-fs-formnovalidate
m.formTarget:~HTMLforms#dom-fs-formtarget
m.method:~HTMLforms#dom-fs-method
m.noValidate:~HTMLforms#dom-fs-novalidate
m.target:~HTMLforms#dom-fs-target

m.autocomplete:~HTMLautofill#dom-fe-autocomplete
m.disabled:~HTMLforms#dom-fe-disabled
m.name:~HTMLforms#dom-fe-name

m.form:~HTMLforms#dom-fae-form
m.form.elements:#dom-form-elements
m.fieldset.elements:#dom-fieldset-elements

m!form.acceptCharset:#dom-form-acceptcharset
m!form.autocomplete:#dom-form-autocomplete
m!form.checkValidity:#dom-form-checkvalidity
m!form.elements:#dom-form-elements
m!form.length:#dom-form-length
m!form.name:#dom-form-name
m!form.rel:#dom-form-rel
m!form.relList:#dom-form-rellist

m!form.reportValidity:#dom-form-reportvalidity
m!form.reset:#dom-form-reset
m!form.requestSubmit:#dom-form-requestsubmit
m!form.submit:#dom-form-submit
m!form.getter:#dom-form-item
m!form.~getterN:#dom-form-nameditem

m!label.control:#dom-label-control
m!label.form:#dom-label-form
m!label.htmlFor:#dom-label-htmlfor

m!button.command:#dom-button-command
m!button.commandForElement:#dom-button-commandforelement
m!button.type:#dom-button-type
m!button.value:#dom-button-value

m!datalist.options:#dom-datalist-options

m!fieldset.disabled:#dom-fieldset-disabled
m!fieldset.elements:#dom-fieldset-elements
m!fieldset.type:#dom-fieldset-type

m!legend.form:#dom-legend-form

m!meter.high:#dom-meter-high
m!meter.low:#dom-meter-low
m!meter.max:#dom-meter-max
m!meter.min:#dom-meter-min
m!meter.optimum:#dom-meter-optimum
m!meter.value:#dom-meter-value

m!optgroup.disabled:#dom-optgroup-disabled
m!optgroup.label:#dom-optgroup-label

m!option.Option:#dom-option
m!option.defaultSelected:#dom-option-defaultselected
m!option.disabled:#dom-option-disabled
m!option.form:#dom-option-form
m!option.index:#dom-option-index
m!option.label:#dom-option-label
m!option.selected:#dom-option-selected
m!option.text:#dom-option-text
m!option.value:#dom-option-value

m!output.defaultValue:#dom-output-defaultvalue
m!output.htmlFor:#dom-output-htmlfor
m!output.type:#dom-output-type
m!output.value:#dom-output-value

m!progress.max:#dom-progress-max
m!progress.position:#dom-progress-position
m!progress.value:#dom-progress-value

m!select.add:#dom-select-add
m!select.item:#dom-select-item
m!select.length:#dom-select-length
m!select.multiple:#dom-select-multiple
m!select.namedItem:#dom-select-nameditem
m!select.options:#dom-select-options
m!select.remove:#dom-select-remove
m!select.required:#dom-select-required
m!select.selectedIndex:#dom-select-selectedindex
m!select.selectedOptions:#dom-select-selectedoptions
	m!select.getter:#dom-select-getter
m!select.setter:#dom-select-setter
m!select.showPicker:~HEinput#dom-select-showpicker
m!select.size:#dom-select-size
m!select.type:#dom-select-type
m!select.value:#dom-select-value

m!textarea.cols:#dom-textarea-cols
m!textarea.defaultValue:#dom-textarea-defaultvalue
m!textarea.dirName:#dom-textarea-dirname
m!textarea.maxLength:#dom-textarea-maxlength
m!textarea.minLength:#dom-textarea-minlength
m!textarea.placeholder:#dom-textarea-placeholder
m!textarea.readOnly:#dom-textarea-readonly
m!textarea.required:#dom-textarea-required
m!textarea.rows:#dom-textarea-rows
m!textarea.textLength:#dom-textarea-textlength
m!textarea.type:#dom-textarea-type
m!textarea.value:#dom-textarea-value
m!textarea.wrap:#dom-textarea-wrap

eI.labels:#dom-elementinternals-labels

et.change:~HTMLindex#event-change
et.click:~UIEVENTS#event-type-click
et.command:~HTMLindex#event-command
et.input:~UIEVENTS#event-type-input
et.submit:~HTMLindex#event-submit

	●e, a
e.form:#the-form-element
e.label:#the-label-element
e.button:#the-button-element
e.select:#the-select-element
e.datalist:#the-datalist-element
e.dialog:~HEinteractive#the-dialog-element
e.optgroup:#the-optgroup-element
e.option:#the-option-element
e.textarea:#the-textarea-element
e.output:#the-output-element
e.progress:#the-progress-element
e.meter:#the-meter-element
e.fieldset:#the-fieldset-element
e.legend:#the-legend-element

e.menu:~HEgrouping#the-menu-element
e.input:~HEinput#the-input-element
e.hr:~HEgrouping#the-hr-element
e.img:~HEimages#the-img-element
e.samp:~HEtextlevel#the-samp-element
e.script:~HEscripting#the-script-element
e.object:~HEembed#the-object-element
e.iframe:~HEembed#the-iframe-element


a.id:~HTMLdom#the-id-attribute
a.dir:~HTMLdom#attr-dir
a.title:~HTMLdom#attr-title
a.~nameI:~HTMLobs#attr-img-name
a.tabindex:~HTMLinteraction#attr-tabindex

a.autofocus:~HTMLinteraction#attr-fe-autofocus
a.autocapitalize:~HTMLinteraction#attr-autocapitalize
a.autocorrect:~HTMLinteraction#attr-autocorrect
a.autocomplete:~HTMLautofill#attr-fe-autocomplete
a.dirname:~HTMLforms#attr-fe-dirname
a.disabled:~HTMLforms#attr-fe-disabled
a.maxlength:~HTMLforms#attr-fe-maxlength
a.minlength:~HTMLforms#attr-fe-minlength
a.name:~HTMLforms#attr-fe-name

a.action:~HTMLforms#attr-fs-action
a.enctype:~HTMLforms#attr-fs-enctype
a.formaction:~HTMLforms#attr-fs-formaction
a.formenctype:~HTMLforms#attr-fs-formenctype
a.formmethod:~HTMLforms#attr-fs-formmethod
a.formnovalidate:~HTMLforms#attr-fs-formnovalidate
a.formtarget:~HTMLforms#attr-fs-formtarget
a.method:~HTMLforms#attr-fs-method
a.novalidate:~HTMLforms#attr-fs-novalidate
a.target:~HTMLforms#attr-fs-target

a.form:~HTMLforms#attr-fae-form

	a.popover:~HTMLpopover#attr-popover → ~popover要素
a.popovertarget:~HTMLpopover#attr-popovertarget
a.popovertargetaction:~HTMLpopover#attr-popovertargetaction

a.list:~HEinput#attr-input-list
a.type:~HEinput#attr-input-type
	a!img.name
	a!option.selected
	a!option.name
	a!optgroup.disabled


a!button.command:#attr-button-command
a!button.commandfor:#attr-button-commandfor
a!button.type:#attr-button-type
a!button.value:#attr-button-value
a!fieldset.disabled:#attr-fieldset-disabled
a!form.accept-charset:#attr-form-accept-charset
a!form.autocomplete:#attr-form-autocomplete
a!form.name:#attr-form-name
a!form.rel:#attr-form-rel
a!label.for:#attr-label-for
a!meter.high:#attr-meter-high
a!meter.low:#attr-meter-low
a!meter.max:#attr-meter-max
a!meter.min:#attr-meter-min
a!meter.optimum:#attr-meter-optimum
a!meter.value:#attr-meter-value
a!optgroup.disabled:#attr-optgroup-disabled
a!optgroup.label:#attr-optgroup-label
a!option.disabled:#attr-option-disabled
a!option.label:#attr-option-label
a!option.name:~HTMLobs#attr-option-name
a!option.selected:#attr-option-selected
a!option.value:#attr-option-value
a!output.for:#attr-output-for
a!progress.max:#attr-progress-max
a!progress.value:#attr-progress-value
a!select.multiple:#attr-select-multiple
a!select.required:#attr-select-required
a!select.size:#attr-select-size
a!textarea.cols:#attr-textarea-cols
a!textarea.maxlength:#attr-textarea-maxlength
a!textarea.minlength:#attr-textarea-minlength
a!textarea.placeholder:#attr-textarea-placeholder
a!textarea.readonly:#attr-textarea-readonly
a!textarea.required:#attr-textarea-required
a!textarea.rows:#attr-textarea-rows
a!textarea.wrap:#attr-textarea-wrap

	●value, state

v.off:~HTMLautofill#attr-fe-autocomplete-off
v.on:~HTMLautofill#attr-fe-autocomplete-on
v!form.on:#attr-form-autocomplete-on
v!form.off:#attr-form-autocomplete-off

v.ltr:~HTMLdom#attr-dir-ltr
v.rtl:~HTMLdom#attr-dir-rtl

v.submit:#attr-button-type-submit
v.reset:#attr-button-type-reset
v.button:#attr-button-type-button

v.soft:#attr-textarea-wrap-soft
v.hard:#attr-textarea-wrap-hard

v.noreferrer:~HTMLlinks#link-type-noreferrer
v.opener:~HTMLlinks#link-type-opener
v.noopener:~HTMLlinks#link-type-noopener

v.toggle-popover:#attr-button-command-toggle-popover
v.show-popover:#attr-button-command-show-popover
v.hide-popover:#attr-button-command-hide-popover
v.close:#attr-button-command-close
v.show-modal:#attr-button-command-show-modal
~custom~command~keyword:#attr-button-command-custom

st.Hidden:~HEinput#hidden-state-(type=hidden)
st.Image:~HEinput#image-button-state-(type=image)

st.~button:#attr-button-type-button-state
st.再設定する:#attr-button-type-reset-state
st.提出する:#attr-button-type-submit-state
st.自動:#attr-button-type-auto-state

st.off:#attr-form-autocomplete-off-state
st.on:#attr-form-autocomplete-on-state
st.Hard:#attr-textarea-wrap-hard-state
st.Soft:#attr-textarea-wrap-soft-state

st.~popoverを~toggleする:#attr-button-command-toggle-popover-state
st.~popoverを示す:#attr-button-command-show-popover-state
st.~popoverを隠す:#attr-button-command-hide-popover-state
st.閉じる:#attr-button-command-close-state
st.~modalを示す:#attr-button-command-show-modal-state
st.~custom:#attr-button-command-custom-state
st.未知:#attr-button-command-unknown-state

	st.~popoverなし:~HTMLpopover#attr-popover-none-state → ~popover要素

	●用語

~formに所有され得る要素:#form-associated-element
	~formに所有され得る:#form-associated-element
提出-可能:#category-submit
再設定-可能:#category-reset
自動頭字化-と自動訂正-を継承-:#category-autocapitalize
	~listされる要素:#category-listed
~listされる:#category-listed
~label可能:#category-label
~button:#concept-button
呼出元~commandは妥当か？手続き:#is-valid-invoker-command-steps
呼出元~command手続き:#invoker-command-steps

	!form
再設定~用に~lockされたか:#locked-for-reset
過去~名~map:#past-names-map

	!label
~label先~control:#labeled-control

	!button
提出-~button:#concept-submit-button

	!output
!output.上書き既定~値:#concept-output-default-value-override
!output.既定~値:#concept-output-default-value

	!textarea
!textarea.生の値:#concept-textarea-raw-value
~textarea用に行lを折返す:#textarea-wrapping-transformation
行数:#attr-textarea-rows-value
一行分の字数:#attr-textarea-cols-value

!fieldset.不能化されて:#concept-fieldset-disabled

!meter.実際の値:#concept-meter-actual
!meter.上界:#concept-meter-high
!meter.下界:#concept-meter-low
!meter.最大~値:#concept-meter-maximum
!meter.最小~値:#concept-meter-minimum
!meter.最適~点p:#concept-meter-optimum

	!select
!select.選ばれ:#concept-select-pick
!select.表示~size:#concept-select-size
!select.~toggle:#concept-select-toggle
!select.選択肢~list:#concept-select-option-list
選択肢~list:#concept-select-option-list
選択-更新の通知を送信する:#send-select-update-notifications
仮入力~label選択肢:#placeholder-label-option
選択状態を設定する~algo:#selectedness-setting-algorithm
設定し直すよう依頼-:#ask-for-a-reset
~option群:#_options-collection

	!option
opt.~dirtyか:#concept-option-dirtiness
opt.不能化されて:#concept-option-disabled
opt.~index:#concept-option-index
opt.~label:#concept-option-label
opt.選択状態:#concept-option-selectedness
opt.値:#concept-option-value

!progress.値:#concept-progress-value
!progress.現在の値:#concept-progress-current-value
!progress.最大~値:#concept-progress-maximum


	!legend
~legend:#_fieldset-legend


	●用語（forms
~formを提出する:~HTMLforms#concept-form-submit
	%利用者-関与i:~HTMLforms#submit-user-involvement
~formを再設定する:~HTMLforms#concept-form-reset
再設定される:~HTMLforms#concept-form-reset
再設定~algo:~HTMLforms#concept-form-reset-control
選択~方向を設定する:~HTMLforms#set-the-selection-direction
~text手入力~cursor位置:~HTMLforms#concept-textarea/input-cursor

fe.~API値:~HTMLforms#concept-fe-api-value
fe.不能化されて:~HTMLforms#concept-fe-disabled
fe.変異-可能:~HTMLforms#concept-fe-mutable
fe.値:~HTMLforms#concept-fe-value
fe.値は~dirtyか:~HTMLforms#concept-fe-dirty
利用者~妥当性:~HTMLforms#user-validity

~form所有者:~HTMLforms#form-owner
所有され:~HTMLforms#form-owner
~form提出:~HTMLforms#form-submission
~form提出用の属性:~HTMLforms#attributes-for-form-submission

~autofill欄~名:~HTMLautofill#autofill-field-name

拘束~検証の対象外:~HTMLforms#barred-from-constraint-validation
拘束~検証~API:~HTMLforms#the-constraint-validation-api

	＊a/option.disabled:#attr-option-disabled
	:~HTMLforms#attr-fe-maxlength
	:~HTMLforms#attr-fe-minlength

拘束をヤリトリありに検証する:~HTMLforms#interactively-validate-the-constraints
拘束を静的に検証する:~HTMLforms#statically-validate-the-constraints
値に許容される最大~長さ:~HTMLforms#maximum-allowed-value-length
~menu~command:~HEinteractive#using-the-option-element-to-define-a-command
欠落である難あり:~HTMLforms#suffering-from-being-missing
~entry~list:~HTMLforms#entry-list
~entry~listを構築する:~HTMLforms#constructing-the-form-data-set

	●用語（HTML
~HTML要素:~HTMLINFRA#html-elements

入力~eventを発火する:~HEinput#_fire-input-event

~formに所有され得る~custom要素:~HEcustom#form-associated-custom-element
iN.~target要素:~HEcustom#internals-target

分類:~HTMLdom#concept-element-categories
内容~属性:~HTMLdom#concept-element-attributes
内容~model:~HTMLdom#concept-element-content-model
この要素を利用できる文脈:~HTMLdom#concept-element-contexts
~accessibilityの考慮点:~HTMLdom#concept-element-accessibility-considerations
~DOM~interface:~HTMLdom#concept-element-dom
~flow内容:~HTMLdom#flow-content-2
大域~属性:~HTMLdom#global-attributes
ヤリトリありな内容:~HTMLdom#interactive-content-2
なし:~HTMLdom#concept-content-nothing
可触~内容:~HTMLdom#palpable-content-2
句ng内容:~HTMLdom#phrasing-content-2
見出し内容:~HTMLdom#heading-content-2
text/html における~tag省略:~HTMLdom#concept-element-tag-omission
~text:~HTMLdom#text-content
方向性:~HTMLdom#the-directionality
	＊has rendering requirements involving the bidirectional algorithm:~HTMLdom#bidireq
要素間~空白:~HTMLdom#inter-element-whitespace
表現-:~HTMLdom#represents
参照-:~HTMLdom#referenced
~scriptを~supportする要素:~HTMLdom#script-supporting-elements-2

~hyperlink:~HTMLlinks#hyperlink
§ ~HTML~link型:~HTMLlinks#linkTypes

~navigable:~HTMLds#navigable
全部的に作動中:~HTMLds#fully-active

結付けられた文書:~WINDOW#concept-document-window

要素~taskを~queueする:~WAPI#queue-an-element-task
現在の大域~obj:~WAPI#current-global-object
利用者ヤリトリ~task~source:~WAPI#user-interaction-task-source
~click~eventを発火-:~WAPI#fire-a-click-event

結付けられた要素を取得する:~HTMLcdom#attr-associated-element
反映する:~HTMLcdom#reflect
既定の値:~HTMLcdom#default-value
正な数のみに制限され:~HTMLcdom#limited-to-numbers-greater-than-zero
既知な値のみに制限され:~HTMLcdom#limited-to-only-known-values
~fallbackありの下で正な整数のみに制限され:~HTMLcdom#limited-to-only-non-negative-numbers-greater-than-zero-with-fallback
負でない整数のみに制限され:~HTMLcdom#limited-to-only-non-negative-numbers

~live:~HTMLINFRA#live
~HTML要素~挿入-時の手続き:~HTMLINFRA#html-element-insertion-steps
~HTML要素~除去-時の手続き:~HTMLINFRA#html-element-removing-steps
~HTML要素~移動-時の手続き:~HTMLINFRA#html-element-moving-steps

真偽-属性:~HTMLcms#boolean-attribute
列挙d属性:~HTMLcms#enumerated-attribute
欠落~値~用の既定の状態:~HTMLcms#missing-value-default
妥当でない値~用の既定の状態:~HTMLcms#invalid-value-default
妥当な負でない整数:~HTMLcms#valid-non-negative-integer
妥当な浮動小数点数:~HTMLcms#valid-floating-point-number
浮動小数点数として最良な表現:~HTMLcms#best-representation-of-the-number-as-a-floating-point-number
浮動小数点数として構文解析する:~HTMLcms#rules-for-parsing-floating-point-number-values
負でない整数として構文解析する:~HTMLcms#rules-for-parsing-non-negative-integers
~space等で分離された~token集合:~HTMLcms#set-of-space-separated-tokens

~XML構文解析器:~HTMLxml#xml-parser
~microdata:~HTMLLS/microdata.html#microdata

~focusされ:~HTMLinteraction#focused
一過な作動化を有して:~HTMLinteraction#transient-activation

~popover要素:~HTMLpopover#_popover-element
~popoverを隠す:~HTMLpopover#hide-popover-algorithm
~popoverを示す:~HTMLpopover#show-popover
~popover~target属性~作動化の挙動:~HTMLpopover#popover-target-attribute-activation-behavior
~popoverの妥当性を検査する:~HTMLpopover#check-popover-validity

~event用の~naviに対する利用者-関与i:~HTMLnav#event-uni

終了~tag:~HTMLwriting#syntax-end-tag
~HTML構文解析器:~HTMLparsing#html-parser
~open要素~stack:~HTMLparsing#stack-of-open-elements

具現化されて:~HTMLrendering#being-rendered

	●用語（外部

実装定義:~INFRA#implementation-defined
~HTML名前空間:~INFRA#html-namespace
~ASCII大小無視:~INFRA#ascii-case-insensitive
~ASCII空白を剥いで縮約する:~INFRA#strip-and-collapse-ascii-whitespace
長さ:~INFRA#string-length
改行文字を正規化する:~INFRA#normalize-newlines
から開始して:~INFRA#string-starts-with

有順序~集合:~INFRA#ordered-set
set.付加する:~INFRA#set-append
有順序~map:~INFRA#ordered-map

~URL:~URL1#concept-url

~ID:~DOM4#concept-id
~target:~DOM4#concept-event-target
~eventを発火する:~DOM4#concept-event-fire
~clone時の手続き:~DOM4#concept-node-clone-ext
~target:~DOM4#event-target
接続されて:~DOM4#connected
要素を作成する:~DOM4#concept-create-element
~data:~DOM4#concept-cd-data
~node文書:~DOM4#concept-node-document
~collectionにより表現され:~DOM4#represented-by-the-collection
el.名前空間:~DOM4#concept-element-namespace
el.局所~名:~DOM4#concept-element-local-name
属性~値を設定する:~DOM4#concept-element-attributes-set-value
~tree順序:~DOM4#concept-tree-order
根:~DOM4#concept-tree-root
~tree:~DOM4#concept-tree
	＊~DOM4#in-a-document
作動化の挙動:~DOM4#eventtarget-activation-behavior
最初の子:~DOM4#concept-tree-first-child
子~群~変更-時の手続き:~DOM4#concept-node-children-changed-ext
子~text内容:~DOM4#concept-child-text-content
子孫~text内容:~DOM4#concept-descendant-text-content
全~内容を文字列に置換する:~DOM4#string-replace-all
tL.~supportする~token集合:~DOM4#concept-supported-tokens

	the method of the same name:~DOM4#dom-htmlcollection-item
	the method of the same name:~DOM4#dom-htmlcollection-nameditem

有index~prop取得子:~WEBIDL#dfn-indexed-property-getter
有名~prop取得子:~WEBIDL#dfn-named-property-getter
有名~propの値を決定する手続き:~WEBIDL#dfn-determine-the-value-of-a-named-property
有index~propの値を決定する手続き:~WEBIDL#dfn-determine-the-value-of-an-indexed-property
~supportする~prop名:~WEBIDL#dfn-supported-property-names
新たな有index~propの値を設定する手続き:~WEBIDL#dfn-set-the-value-of-a-new-indexed-property
既存の有index~propの値を設定する手続き:~WEBIDL#dfn-set-the-value-of-an-existing-indexed-property
~supportする~prop~index:~WEBIDL#dfn-supported-property-indices


●●words_table1


nameI:name
getterN:getter

●●words_table

	●network／url／保安
提出用の:submission::~


	●DOM／IDL／data構造／操作
同名の:namesake:~
要素間:inter-element::~
	子たち:children
呼出元:invoker:呼び出し元

	●構文
open:
連結-:concatenate::~
省略:omission:~
省略不可:omissibleでない:~

浮動小数点数:floating-point number:~
実数:number::~
剥いで:stripして::~
	normalization
区切られ:delimitされ:~

	●一般処理
迂回-:bypass:~

factory::::ファクトリ
持続-:persist:~
旧-:old:~
	設定し直す:reset

	%挿入された~node:insertedNode
	%除去された~node:removedNode
	%移動された~node:movedNode
	%旧-親:oldParent
	%所有者:-
	%select:-
	%select:selectElement
	%S:-
	%親:-
	%O:-
	%option:-
	%O:optionElement
	%~node:node
	%複製:copy
	-:subtree
	%~target:target
	%~command:command
	-:isPopover
	%継続するか:continue
	%状態:state

	●状態／妥当性
check::::チェック
	用意:available

必須:required::~
必須の:required::~
不定:indeterminate:~
確定的:determinate:~
最適:optimum:~
	最適でないsuboptimal
点p:point:点
下界:lower bound:~
上界:upper bound:~
	有界な:known
	有界でない:arbitrary
	~dirtyか:dirtiness
dirtiness:::dirty 有無
dirty::::

	●UI
textarea:
選択肢:option::~::オプション
欄:field::~::フィールド
checkbox::::チェックボックス
drop-down::::ドロップダウン
	unfocus
help::::ヘルプ
keystroke::::キーストローク
radio::::ラジオ
tooltip::::ツールチップ
pop-up::::ポップアップ
雛形:template::ひな形::テンプレート
popover:
picker:::選択 UI
	~picker:picker UI
編集-:edit:~
編集:edit:~
autofill:
自動頭字化-:autocapitalize::~
自動訂正-:autocorrect::~
選択-:select:~
選択:selection:~
選択状態:selectedness:~
未選択に:unselect:~
折返され:wrapされ::折り返され
折返した:wrapした::折り返した
折返す:wrapする::折り返す
改行:line break:~
縮約-:collapse::~
自由-:free-:~
複数行:multiline:~
双方向-:bidirectional::~
右横書き:right-to-left::~
左横書き:left-to-right::~
書字:writing::~
計器:gauge::~
計算機:calculator:~
隠す:hideする:~
隠して:hideして:~
示す:showする:~
示して:showして:~
示され:showされ:~
示さな:showしな:~
閉じる:closeする:~
開く:openする:~
肯定的:positive:~
否定的:negative:~

仮入力:placeholder::~
一過:transient::~

	●呈示


	●内容
legend:
microdata::::
outline::::アウトライン
句ng:phrasing::句::フレージング
見出し:heading::~
	文脈に応じた:context-sensitive
可触:palpable::~
分類:categories:~
分類-:categorize:~
機械読取可能:machine-readable:機械読み取り可能
句:phrase::~
生の:raw:~
	~~混在-:intermix

	●仕様
	適切でない:inappropriate
関連度:relevance:~
不十分:insufficient:~
概略的:brief:~
対照:contrast:~
微妙:subtle:~

	それでも:still
	明らか:clear
	に基づく:refer
	間違い:wrong
	手の込んだ:elaborate
	間違い:wrong
	一例として:for instance,
	〜ほど良い:better
	良く:good
	-:similarly
	よく似る:very similar
	それまで:so far been
	概要:brief description
	-:down-level
	saying
	§:in an earlier
	§:section
	制約されない:unrestricted
	要
	適合していない:non-conforming
	でない，:as opposed to
	呼ばれる:known as a
	結び付けられる:hook-up
	-:fall into
	伝える:inform
	〜でも:nonetheless
	ときには:Occasionally it can be

	●未分類
隠され:hideされ:~
	-:present
年月t:year＆month::年＆月
milli::::ミリ
disk::::ディスク
候補:candidate:~
役割:role:~
過去:past:~
齢:age:~
地域化-:localize::~::ローカル化
不等式:inequality:~
種類:kind:~
切落す:truncateする:切り落とす
表面化-:surface:~

	respond
	-:paragraph
	~code片:snippet
	:come
	点:point
	引用-:quote
	一次元:scalar
	失う:lose
	短い:small
	戻-:back
	数:number
	選ぶ:pick
	上限:High limit
	下限:Low limit
	低域:low range
	高域:high range
	中域:medium
	low
	high
	medium
	より少ない:smaller
	より多い:greater
	末尾:the end
	予め:select preselect
	超えない:no wider
	手紙:letter
	75%:three-quarters
	区分:segment
	:naturally
	消費量:space usage ／ usage
	総量:how much〜total
	体重:weight
	身長:height
	取り込まれた:went into
	特定候補:have selected a particular candidate
	投票割合:fraction of a voting population
	~~拡張:expand
	平文による:pretty-print
	置く:put
	率:fraction
	割合:fractional
	最長:oldest
	倣うべき:right
	なし:none
	課程:course
	講義:lessons
	もっと埋められる:filled out
	振り切れた:maxed out
		-:blank
	空欄の:blank
	amongst
	sourced
	put
	-:convey
	gain
	ask
	そのまま映し出す:mirror
	time
	finally
	looking
	パイ:pie
	six
	everything

	●指示語
	:previous
	以前に:previously
	一定の:certain
	残っ:remain／remaining
	残りの:remainder
	自身以外の:rest
	まとめて:together
	すべて:everything
	常に，:at any instant
	先に来る:earlier
	部位／域:part
	域:region／part


●●html_code_list


■form-1
<form action="https://www.google.com/search" method="get">
 <label>Google: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>
<form action="https://www.bing.com/search" method="get">
 <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>


■label-1
<label><input type=checkbox name=lost> Lost</label>

■label-2
<label><my-checkbox name=lost></my-checkbox> Lost</label>

■label-3
<p><label>名前： <input name=fn> <small>形式： スズキ・イチロウ</small></label></p>
<p><label>年齢： <input name=age type=number min=0></label></p>
<p><label>郵便番号： <input name=pc> <small>形式： 000-9999</small></label></p>

<p><label>Full name: <input name=fn> <small>Format: First Last</small></label></p>
<p><label>Age: <input name=age type=number min=0></label></p>
<p><label>Post code: <input name=pc> <small>Format: AB12 3CD</small></label></p>


■button-1
<button type=button
        onclick="alert('この 15 〜 20 分の区間は George Gershwin により作曲された。')">
 ヒントを示す
</button>

<button type=button
        onclick="alert('This 15-20 minute piece was composed by George Gershwin.')">
 Show hint
</button>


■button-2
<button type=button
        commandfor="the-popover"
        command="show-popover">
 メニューを示す
</button>
<div popover
     id="the-popover">
 <button commandfor="the-popover"
         command="hide-popover">
  メニューを隠す
 </button>
</div>

メニューを示す:Show menu
メニューを隠す:Hide menu

■button-3
<button type=button
        commandfor="the-image"
        command="--rotate-landscape">
 横倒しにする
</button>
<button type=button
        commandfor="the-image"
        command="--rotate-portrait">
 元へ戻す
</button>
<img id="the-image"
     src="photo.jpg">
<％script>
  const %image = document.getElementById("the-image");
  %image.addEventListener("command", (%event) => {
   if ( %event.command == "--rotate-landscape" ) {
    %event.target.style.rotate = "-90deg"
   } else if ( %event.command == "--rotate-portrait" ) {
    %event.target.style.rotate = "0deg"
   }
  });
</％script>

横倒しにする:Rotate Left
元へ戻す:Rotate Right

■select-1
<p>
 <label for="unittype">ユニットを選択：</label>
 <select id="unittype" name="unittype">
  <option value="1"> サムライ </option>
  <option value="2"> ニンジャ </option>
  <option value="3" selected> 狙撃手 </option>
  <option value="4"> 自爆兵 </option>
  <option value="5"> 鬼 </option>
 </select>
</p>

<p>
 <label for="unittype">Select unit type:</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>


■select-2
<select name="unittype" required>
 ＜<option value=""> ユニットを選択： </option>＞
 <option value="1"> サムライ </option>
 <option value="2"> ニンジャ </option>
 <option value="3"> 狙撃手 </option>
 <option value="4"> 自爆兵 </option>
 <option value="5"> 鬼 </option>
</select>

<select name="unittype" <strong>required</strong>>
 <strong><option value=""> Select unit type </option></strong>
 <option value="1"> Miner </option>
 <option value="2"> Puffer </option>
 <option value="3"> Snipey </option>
 <option value="4"> Max </option>
 <option value="5"> Firebot </option>
</select>


■select-3
<p>
 <label for="allowedunits">このマップで使えるユニットを選択：</label>
 <select id="allowedunits" name="allowedunits" multiple>
  <option value="1" selected> サムライ </option>
  <option value="2" selected> ニンジャ </option>
  <option value="3" selected> 狙撃手 </option>
  <option value="4" selected> 自爆兵 </option>
  <option value="5" selected> 鬼 </option>
 </select>
</p>

<p>
 <label for="allowedunits">Select unit types to enable on this map:</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>


■select-4
<label>
 希望する曲を選んでください。
 <select multiple required name="act2">
  <option value="s1">なんだかんだ
  <option value="s2">あれやこれや
  <option value="s3">めったやたら
  <option value="s4">しっちゃかめっちゃか
  <option value="s5">あーだこーだ
  <option value="s6">てんやわんや
  <option value="s7">なんたらかんたら
  <option value="s8">どうもこうも
  <option value="s9">えっちらおっちら
 </select>
</label>

<label>
 Select the songs from that you would like on your Act II Mix Tape:
 <select multiple required name="act2">
  <option value="s1">It Sucks to Be Me (Reprise)
  <option value="s2">There is Life Outside Your Apartment
  <option value="s3">The More You Ruv Someone
  <option value="s4">Schadenfreude
  <option value="s5">I Wish I Could Go Back to College
  <option value="s6">The Money Song
  <option value="s7">School for Monsters
  <option value="s8">The Money Song (Reprise)
  <option value="s9">There's a Fine, Fine Line (Reprise)
  <option value="s10">What Do You Do With a B.A. in English? (Reprise)
  <option value="s11">For Now
 </select>
</label>

■select-5
<label>
 次にかける曲を選んでください：
 <select required name="next">
  <option value="sr">ランダム
  <hr>
  <option value="s1">なんだかんだ
  <option value="s2">あれやこれや
  …

<label>
 Select the song to play next:
 <select required name="next">
  <option value="sr">Random
  <hr>
  <option value="s1">It Sucks to Be Me (Reprise)
  <option value="s2">There is Life Outside Your Apartment
  …

■datalist-1
<label>
 動物：
 <input name=animal list=animals>
 <datalist id=animals>
  <option value="猫">
  <option value="犬">
 </datalist>
</label>

<label>
 Animal:
 <input name=animal list=animals>
 <datalist id=animals>
  <option value="Cat">
  <option value="Dog">
 </datalist>
</label>


■datalist-2
<label>
 動物：
 <input name=animal list=animals>
</label>
<datalist id=animals>
 <label>
  またはリストから選択してください：
  <select name=animal>
   <option value="">
   <option>猫
   <option>犬
  </select>
 </label>
</datalist>

<label>
 Animal:
 <input name=animal list=animals>
</label>
<datalist id=animals>
 <label>
  or select from the list:
  <select name=animal>
   <option value="">
   <option>Cat
   <option>Dog
  </select>
 </label>
</datalist>


■optgroup-1
<form action="courseselector.dll" method="get">
 <p>今日はどの課程を受講しますか？
 <p><label>課程：
  <select name="c">
   <optgroup label="8.01 物理 I: 古典力学">
    <option value="8.01.1">講座 01: Powers of Ten
    <option value="8.01.2">講座 02: 一次元の運動
    <option value="8.01.3">講座 03: ベクトル
   <optgroup label="8.02 電磁気学">
    <option value="8.02.1">講座 01: この世界は何でできているのか？
    <option value="8.02.2">講座 02: 電界
    <option value="8.02.3">講座 03: 電束
   <optgroup label="8.03 物理 III: 振動と波">
    <option value="8.03.1">講座 01: 周期的な現象
    <option value="8.03.2">講座 02: 波動
    <option value="8.03.3">講座 03: 減衰振動
  </select>
 </label>
 <p><input type=submit value="▶ 再生">
</form>

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


■textarea-1
Filename: <code>/etc/bash.bashrc</code>
<textarea name="buffer" readonly>
# System-wide .bashrc file for interactive bash(1) shells.
％
# To enable the settings / commands in this file for login shells as well,
# this file has to be sourced in /etc/profile.
％
# If not running interactively, don't do anything
[ -z "$PS1" ] &amp;&amp; return
％
...</textarea>


■textarea-2
<p>何かコメントがあれば、寄せてください： <textarea cols=80 name=comments></textarea></p>

<p>If you have any comments, please let us know: <textarea cols=80 name=comments></textarea></p>

■textarea-3
<p>短いコメントを寄せられます： <textarea cols=80 name=comments maxlength=200></textarea></p>

<p>If you have any short comments, please let us know: <textarea cols=80 name=comments maxlength=200></textarea></p>

■textarea-4
<p>何かコメントがあれば、寄せてください： <textarea cols=80 name=comments>You rock!</textarea></p>

<p>If you have any comments, please let us know: <textarea cols=80 name=comments>You rock!</textarea></p>

■textarea-5
<textarea required minlength="500">Dear Madam Speaker,
％
Regarding your letter dated ...
％
...
％
Yours Sincerely,
％
...</textarea>

■textarea-6
<textarea placeholder="Dear Francine,
％
They closed the parks this week, so we won't be able to
meet your there. Should we just have dinner?
％
Love,
Daddy"></textarea>

■textarea-7
<p>何かコメントがあれば、寄せてください（日本語でもヘブライ語でも可能です）：
<textarea cols=80 name=comments dirname=comments.dir></textarea></p>


■output-1
<form
    onsubmit="return false"
    oninput="o.value = a.valueAsNumber + b.valueAsNumber"
>
 <input id=a type=number step=any> +
 <input id=b type=number step=any> =
 <output id=o for="a b"></output>
</form>

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
 <input id=a type=number step=any> +
 <input id=b type=number step=any> =
 <output id=o for="a b"></output>
</form>

■output-2
<output id="result"></output>
<％script>
 var %primeSource = new WebSocket('ws://primes.example.net/');
 %primeSource.onmessage = function (%event) {
   document.getElementById('result').value = %event.data;
 }
</％script>

■progress-1
<section>
 <h2>Task Progress</h2>
 <p>Progress: <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>

■meter-1a
使用済み区画： <meter value=6 max=8>6 区画 （総数 8 ）</meter>

Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>

■meter-1b
投票者数： <meter value=0.75><img alt="75%" src="graph75.png"></meter>

Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>

■meter-1c
チケット売り上げ枚数： <meter min="0" max="100" value="75"></meter>

Tickets sold: <meter min="0" max="100" value="75"></meter>

■meter-2 bad
<!-- この例は不良である。 -->
<p>このグレープフルーツパイの半径は <meter value=12>12cm</meter> で、
高さは <meter value=2>2cm</meter> です。</p>

<p>The grapefruit pie had a radius of <meter value=12>12cm</meter>
and a height of <meter value=2>2cm</meter>.</p> <!-- BAD! -->

■meter-3
<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>

<p>The grapefruit pie had a radius of 12cm and a height of
2cm.</p>
<dl>
 <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
 <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
</dl>

■meter-4
<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>

<dl>
 <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
 <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
</dl>

■meter-5
<h3>Suggested groups</h3>
<menu>
 <li><a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a></li>
</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">join</a></p>
  <p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
  <p>＜<meter value="0.5">Moderate activity,</meter>＞ Usenet, 618 subscribers</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">join</a></p>
  <p>Group description: <strong>Mozilla XPInstall discussion.</strong></p>
  <p>＜<meter value="0.25">Low activity,</meter>＞ Usenet, 22 subscribers</p>
 </li>
 <li>
  <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> -
     <a href="/group/mozilla.dev.general/subscribe">join</a></p>
  <p>＜<meter value="0.25">Low activity,</meter>＞ Usenet, 66 subscribers</p>
 </li>
</ul>

■meter-6
<meter min=0 max=60 value=23.2 title=秒数></meter>

<meter min=0 max=60 value=23.2 title=seconds></meter>


■meter-7
<p>ディスク消費量： <meter min=0 value=170261928 max=233257824>全容量 233 257 824 バイトのうち 170 261 928 バイト使用済み</meter></p>

<p>Disk usage: <meter min=0 value=170261928 max=233257824>170 261 928 bytes used
out of 233 257 824 bytes available</meter></p>


■fieldset-1
<fieldset>
 <legend>ディスプレイ</legend>
 <p><label><input type=radio name=c value=0 checked>白地に黒</label>
 <p><label><input type=radio name=c value=1>黒地に白</label>
 <p><label><input type=checkbox name=g>グレイスケールを利用</label>
 <p><label>コントラストを上げる <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label>
 <datalist id=contrast>
  <option label=通常 value=0>
  <option label=最大 value=100>
 </datalist>
</fieldset>


<fieldset>
 <legend>Display</legend>
 <p><label><input type=radio name=c value=0 checked> Black on White</label>
 <p><label><input type=radio name=c value=1> White on Black</label>
 <p><label><input type=checkbox name=g> Use grayscale</label>
 <p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label>
 <datalist id=contrast>
  <option label=Normal value=0>
  <option label=Maximum value=100>
 </datalist>
</fieldset>

■fieldset-2
<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  会員カードを使う
 </label> </legend>
 <p><label>カード名義： <input name=clubname required></label></p>
 <p><label>カード番号： <input name=clubnum required pattern="[-0-9]+"></label></p>
 <p><label>有効期限： <input name=clubexp type=month></label></p>
</fieldset>

<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 <p><label>Expiry date: <input name=clubexp type=month></label></p>
</fieldset>


■fieldset-3
<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  会員カードを使う
 </label> </legend>
 <p><label>カード名義： <input name=clubname required></label></p>
％
 <fieldset name="numfields">
  <legend> <label>
   <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked">
   番号が数字のカードをお持ちの方
  </label> </legend>
  <p><label>カード番号： <input name=clubnum required pattern="[-0-9]+"></label></p>
 </fieldset>
％
 <fieldset name="letfields" disabled>
  <legend> <label>
   <input type=radio name=clubtype onchange="form.letfields.disabled = !checked">
   番号がアルファベットのカードをお持ちの方
  </label> </legend>
  <p><label>カードコード： <input name=clublet required pattern="[A-Za-z]+"></label></p>
 </fieldset>
</fieldset>


<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <fieldset name="numfields">
  <legend> <label>
   <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked">
   My card has numbers on it
  </label> </legend>
  <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 </fieldset>
 <fieldset name="letfields" disabled>
  <legend> <label>
   <input type=radio name=clubtype onchange="form.letfields.disabled = !checked">
   My card has letters on it
  </label> </legend>
  <p><label>Card code: <input name=clublet required pattern="[A-Za-z]+"></label></p>
 </fieldset>
</fieldset>

■fieldset-4
<fieldset>
 <legend> <h2>
  連絡方法は、どれにしますか？
 </h2> </legend>
 <p> <label>
 <input type=radio checked name=contact_pref>
  電話
 </label> </p>
 <p> <label>
  <input type=radio name=contact_pref>
  テキストメッセージ
 </label> </p>
 <p> <label>
  <input type=radio name=contact_pref>
  メール
 </label> </p>
</fieldset>

<fieldset>
 <legend> <h2>
  How can we best reach you?
 </h2> </legend>
 <p> <label>
 <input type=radio checked name=contact_pref>
  Phone
 </label> </p>
 <p> <label>
  <input type=radio name=contact_pref>
  Text
 </label> </p>
 <p> <label>
  <input type=radio name=contact_pref>
  Email
 </label> </p>
</fieldset>

●●images
＠HTML-resources/
sample-meter｜height:178px;｜｜.png

●●trans_metadata
<p>
~THIS_PAGEは、~WHATWGによる HTML 仕様の
<a href="~SPEC_URL">§ Forms</a>
内の各種要素に関する節を日本語に翻訳したものです。
~PUB
</p>

</script>
</head>
<body>

<header>
	<hgroup>
<h1>HTML — フォーム用の要素</h1>

	</hgroup>
</header>

<main id="MAIN" hidden>

			<section id="_conventions">
<h4>【この訳に特有な表記規約】</h4>

◎表記記号

			</section>
			<section id="introduction-4">
<h4 title="Introduction">4.10.1. 序論</h4>

<p class="trans-note">【
この節の内容は、
`別~page＠HTML-forms-intro-ja.html#introduction-4$にて。
】</p>

			</section>
			<section id="categories">
<h4 title="Categories">4.10.2. 分類</h4>

<p>
この節における各種~要素は、
`~flow内容$, `句ng内容$, `ヤリトリありな内容$などの通例の分類に加えて，いくつかの重なり合う（が、微妙に異なる）分類に仕分けられる
— その重なりは、
ほぼ歴史的な理由によるものであるが。
◎
Mostly for historical reasons, elements in this section fall into several overlapping (but subtly different) categories in addition to the usual ones like flow content, phrasing content, and interactive content.
</p>

<p>
次に挙げる要素は、
`~formに所有され得る要素@
とされ，ある~formに`所有され$得ることを意味する
⇒＃
`button$e,
`fieldset$e,
`input$e,
`object$e,
`output$e,
`select$e,
`textarea$e,
`img$e,
`~formに所有され得る~custom要素$
◎
A number of the elements are form-associated elements, which means they can have a form owner.
• buttonfieldsetinputobjectoutputselecttextareaimgform-associated custom elements
</p>

<p>
`~formに所有され得る要素$は、
更にいくつかに分類される：
◎
The form-associated elements fall into several subcategories:
</p>

<dl class="def-list">
	<dt>
`~listされる@
要素
◎
Listed elements
</dt>
	<dd>
次に挙げる要素は、［
`form.elements$m ／ `fieldset.elements$m
］~API内に~listされる。
これらの要素には、
作者が`~form所有者$を明示的に指定できるようにする，［
`form$a 内容~属性と対応する `form$m ~IDL属性
］がある
⇒＃
`button$e,
`fieldset$e,
`input$e,
`object$e,
`output$e,
`select$e,
`textarea$e,
`~formに所有され得る~custom要素$
◎
Denotes elements that are listed in the form.elements and fieldset.elements APIs. These elements also have a form content attribute, and a matching form IDL attribute, that allow authors to specify an explicit form owner.
• buttonfieldsetinputobjectoutputselecttextareaform-associated custom elements
</dd>

	<dt>
`提出-可能@
な要素
◎
Submittable elements
</dt>
	<dd>
次に挙げる要素は、
`form$e 要素を`提出する＠~HTMLforms#concept-form-submit$ために`~entry~listを構築する$ときに利用され得る
⇒＃
`button$e,
`input$e,
`select$e,
`textarea$e,
`~formに所有され得る~custom要素$
◎
Denotes elements that can be used for constructing the entry list when a form element is submitted.
• buttoninputselecttextareaform-associated custom elements
</dd>
	<dd>
`提出-可能$な要素には、
その属性に依存して
`~button@
になるものもある。
要素がいつ~buttonになるかは、
関連な節の注釈文にて定義される。
~buttonには、
特定的に
`提出-~button@
になるものもある。
◎
Some submittable elements can be, depending on their attributes, buttons. The prose below defines when an element is a button. Some buttons are specifically submit buttons.
</dd>

	<dt>
`再設定-可能@
な要素
◎
Resettable elements
</dt>
	<dd>
次に挙げる要素は、
`form$e 要素が`再設定される$ときに影響され得る
⇒＃
`input$e,
`output$e,
`select$e,
`textarea$e,
`~formに所有され得る~custom要素$
◎
Denotes elements that can be affected when a form element is reset.
• inputoutputselecttextareaform-associated custom elements
</dd>

	<dt>
`自動頭字化-と自動訂正-を継承-@
する要素
◎
Autocapitalize-and-autocorrect-inheriting elements
</dt>
	<dd>
次に挙げる要素は、
`~form所有者$から［
`autocapitalize$a, `autocorrect$a
］属性を継承する
⇒＃
`button$e,
`fieldset$e,
`input$e,
`output$e,
`select$e,
`textarea$e
◎
Denotes elements that inherit the autocapitalize and autocorrect attributes from their form owner.
• buttonfieldsetinputoutputselecttextarea
</dd>
</dl>

<p>
`~formに所有され得る要素$に限らず，一部の要素は、
`~label可能@
な要素に分類される。
これらは、
`label$e 要素に結び付け得る要素である
⇒＃
`button$e,
`input$e （ `type$a 属性が `Hidden$st 状態`でないもの^emに限る）
`meter$e,
`output$e,
`progress$e,
`select$e,
`textarea$e,
`~formに所有され得る~custom要素$
◎
Some elements, not all of them form-associated, are categorized as labelable elements. These are elements that can be associated with a label element.
• buttoninput (if the type attribute is not in the Hidden state)meteroutputprogressselecttextareaform-associated custom elements
</p>

<div class="trans-note">
<table id="_form_category_table"><caption>【
上述した分類の要約（最後の行 `x-custom^e は、
`~formに所有され得る~custom要素$）
】</caption>
<thead>
<tr><th>要素
<th>`所有され得る＠#form-associated-element$
<th>`~listされる$
<th>`提出-可能$
<th>`再設定-可能$
<th>`自動頭字化-と自動訂正-を継承-$する
<th>`~label可能$
<tbody id="_form_category_body">
</table>
</div>

			</section>
			<section id="the-form-element">
<h4 title="The form element">4.10.3. ``form^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$ ／ `可触~内容$
◎
Flow content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`~flow内容$が期待される所。
◎
Where flow content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`~flow内容$
— ただし，子孫に `form$e 要素は無いとする。
◎
Flow content, but with no form element descendants.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$。
◎
Global attributes
</dd>
	<dd>
``accept-charset$a
—
`~form提出$用に利用する文字~符号化法。
◎
accept-charset — Character encodings to use for form submission
</dd>
	<dd>
`action$a
—
`~form提出$用に利用する`~URL$
◎
action — URL to use for form submission
</dd>
	<dd>
``autocomplete$a
—
この~form内の各~controlにおける既定の~autofill特能を設定する。
◎
autocomplete — Default setting for autofill feature for controls in the form
</dd>
	<dd>
`enctype$a
—
`~form提出$用に利用する`~entry~list$用の符号化法の種別。
◎
enctype — Entry list encoding type to use for form submission
</dd>
	<dd>
`method$a
—
`~form提出$用に利用する~method（等）。
◎
method — Variant to use for form submission
</dd>
	<dd>
``name$a
—
`document.forms$m ~APIにおいて利用する~formの名前。
◎
name — Name of form to use in the document.forms API
</dd>
	<dd>
`novalidate$a
—
`~form提出$に際し，~form~control検証を迂回する。
◎
novalidate — Bypass form control validation for form submission
</dd>
	<dd>
`target$a
— `~form提出$用の
【それにより~navigateされる】
`~navigable$。
◎
target — Navigable for form submission
</dd>
	<dd>
``rel$a
— 【何も述べられていない】
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`form$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window,
 `LegacyOverrideBuiltIns$,
 `LegacyUnenumerableNamedProperties$]
interface `HTMLFormElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute DOMString ``acceptCharset$m;
  [`CEReactions$] attribute USVString `action$m;
  [`CEReactions$] attribute DOMString ``autocomplete$m;
  [`CEReactions$] attribute DOMString `enctype$m;
  [`CEReactions$] attribute DOMString `encoding$m;
  [`CEReactions$] attribute DOMString `method$m;
  [`CEReactions$] attribute DOMString ``name$m;
  [`CEReactions$] attribute boolean `noValidate$m;
  [`CEReactions$] attribute DOMString `target$m;
  [`CEReactions$] attribute DOMString ``rel$m;
  [SameObject, PutForwards=`value$m] readonly attribute DOMTokenList ``relList$m;

  [SameObject] readonly attribute `HTMLFormControlsCollection$I ``elements$m;
  readonly attribute unsigned long ``length$m;
  ``getter$m `Element$I (unsigned long %index);
  ``~getterN$m (`RadioNodeList$I or `Element$I) (DOMString %name);

  undefined ``submit$m();
  undefined ``requestSubmit$m(optional `HTMLElement$I? %submitter = null);
  [`CEReactions$] undefined ``reset$m();
  boolean ``checkValidity$m();
  boolean ``reportValidity$m();
};
</pre>

</dd>
</dl>

<p>
`form$e 要素は、［
`~formに所有され得る要素$たちからなる~collection
］を通して操作できる`~hyperlink$を`表現-$する
— その中に、
編集-可能な値を表現し，処理~用に~serverへ提出され得るものも含ませ得るような。
◎
The form element represents a hyperlink that can be manipulated through a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
</p>

<p>
``accept-charset@a
属性は、
提出に利用されることになる文字~符号化法を与える。
この属性に指定する値は、
`~ASCII大小無視$で `UTF-8^l に合致しなければナラナイ。
`ENCODING$r
◎
The accept-charset attribute gives the character encodings that are to be used for the submission. If specified, the value must be an ASCII case-insensitive match for "UTF-8". [ENCODING]
</p>

<p>
``name@a
属性は、
`forms$m ~collectionの中における当の `form$e 要素の名前を表現する。
この属性に指定する値は、［
`forms$m ~collection内の `form$e 要素たちの間で一意, かつ空でない文字列
］でなければナラナイ。
◎
The name attribute represents the form's name within the forms collection. The value must not be the empty string, and the value must be unique amongst the form elements in the forms collection that it is in, if any.
</p>

<p>
``autocomplete@a
属性は，`列挙d属性$であり、
次に挙げる~keyword, とり得る状態, それらの対応付けが定義される：
◎
The autocomplete attribute is an enumerated attribute with the following keywords and states:
</p>

<div>
<table><thead>
<tr><th>~keyword
<th>状態
<th>概略的な記述
<tbody>

<tr><td>``on@v
<td>`on@st
<td>
各~form~controlの`~autofill欄~名$は、
既定では `on$v に設定される。

<tr><td>``off@v
<td>`off@st
<td>
各~form~controlの`~autofill欄~名$は、
既定では `off$v に設定される。
</table>
◎
Keyword｜State｜Brief description
on｜on｜Form controls will have their autofill field name set to "on" by default.
off｜off｜Form controls will have their autofill field name set to "off" by default.
</div>

<p>
``autocomplete$a 属性の［
`欠落~値~用の既定の状態$, `妥当でない値~用の既定の状態$
］は、
いずれも `on$st とする。
◎
The attribute's missing value default and invalid value default are both the on state.
</p>

<p>
`~form提出用の属性$として、［
`action$a, `enctype$a, `method$a, `novalidate$a, `target$a
］属性もある。
◎
The action, enctype, method, novalidate, and target attributes are attributes for form submission.
</p>

<p>
`form$e 要素の
``rel@a
属性は、
要素が作成する~linkの種類を制御する。
属性の値は、
`~space等で分離された~token集合$（一意）でなければナラナイ。
許容される~keyword, それらの意味は、
`§ ~HTML~link型$に定義される。
◎
The rel attribute on form elements controls what kinds of links the elements create. The attribute's value must be a unordered set of unique space-separated tokens. The allowed keywords and their meanings are defined in an earlier section.
</p>

<p>
``rel$a が`~supportする~token集合$tLは、
`§ ~HTML~link型$に定義される~keywordのうち［
`form$e 要素~上に許容される，かつ
処理~modelに影響iする，かつ
~UAが~supportする
］ものである。
この~token集合にアリな~keywordは，［
`noreferrer$v,
`noopener$v,
`opener$v
］であり、
``rel$a が`~supportする~token集合$tLは，［
これらの~tokenのうち，~UAが それ用の処理~modelを実装するもの
］のみを含むモノトスル。
◎
rel's supported tokens are the keywords defined in HTML link types which are allowed on form elements, impact the processing model, and are supported by the user agent. The possible supported tokens are noreferrer, noopener, and opener. rel's supported tokens must only include the tokens from this list that the user agent implements the processing model for.
</p>

<dl class="domintro">

	<dt>%form.``elements$m</dt>
	<dd>
この~form内の~form~controlたちからなる `HTMLFormControlsCollection$I を返す。
（ただし、
歴史的な理由から，画像~buttonは除外される）。
◎
Returns an HTMLFormControlsCollection of the form controls in the form (excluding image buttons for historical reasons).
</dd>

	<dt>%form.``length$m</dt>
	<dd>
この~form内の~form~controlの個数を返す（ただし、
歴史的な理由から，画像~buttonは除外される）。
◎
Returns the number of form controls in the form (excluding image buttons for historical reasons).
</dd>

	<dt>%form[%index]</dt>
	<dd>
この~form内の %~index 番の要素を返す（ただし、
歴史的な理由から，画像~buttonは除外される）。
◎
Returns the indexth element in the form (excluding image buttons for historical reasons).
</dd>

	<dt>%form[%name]</dt>
	<dd>
<p>
この~form内の所与の `~ID$ または `name$a を伴う ~form~controlを返す
— ただし：
</p>
		<ul>
			<li>
複数ある場合、
それらの~form~controlからなる `RadioNodeList$I を返す。
</li>
			<li>
歴史的な理由から、
画像~buttonは除外される。
</li>
			<li>
該当するものが無い場合、
所与の~IDを有する `img$e 要素を返す。
</li>
		</ul>
◎
Returns the form control (or, if there are several, a RadioNodeList of the form controls) in the form with the given ID or name (excluding image buttons for historical reasons); or, if there are none, returns the img element with the given ID.
</dd>
	<dd>
要素が 特定0の名前を利用して 一度でも参照されたなら、
その名前は，この~methodにて その要素を参照する仕方として 可用であり続けることになる
— 要素の実際［
`~ID$ ／ `name$a
］が変化しても，要素が同じ`~tree$内にあり続ける限り。
◎
Once an element has been referenced using a particular name, that name will continue being available as a way to reference that element in this method, even if the element's actual ID or name changes, for as long as the element remains in the tree.
</dd>
	<dd>
合致する~itemが複数のある場合、
それらの要素すべてを包含する `RadioNodeList$I ~objが返される。
◎
If there are multiple matching items, then a RadioNodeList object containing all those elements is returned.
</dd>

	<dt>%form.``submit()$m</dt>
	<dd>
この~formを提出する
— が、
次はしない
⇒
`拘束をヤリトリありに検証する$／ `submit$et ~eventを発火する
◎
Submits the form, bypassing interactive constraint validation and without firing a submit event.
</dd>

	<dt>%form.``requestSubmit( [ submitter ] )$m</dt>
	<dd>
この~formを提出するよう要請する。
``submit()$m と違って、
この~methodは［
`拘束をヤリトリありに検証する$ ／ `submit$et ~eventを発火する
］ことも含む
— どちらも提出を取消せる。
◎
Requests to submit the form. Unlike submit(), this method includes interactive constraint validation and firing a submit event, either of which can cancel submission.
</dd>
	<dd>
%submitter 引数を利用して特定の`提出-~button$を指せる
— その［
`formaction$a ／
`formenctype$a ／
`formmethod$a ／
`formnovalidate$a ／
`formtarget$a
］属性は、
提出に影響iし得る。
加えて、
%submitter は，提出~用に`~entry~listを構築する$ときに含まれることになるが、
通常は，~buttonは除外される。
◎
The submitter argument can be used to point to a specific submit button, whose formaction, formenctype, formmethod, formnovalidate, and formtarget attributes can impact submission. Additionally, the submitter will be included when constructing the entry list for submission; normally, buttons are excluded.
</dd>

	<dt>%form.``reset()$m</dt>
	<dd>
この~formを再設定する。
◎
Resets the form.
</dd>

	<dt>%form.``checkValidity()$m</dt>
	<dd>
この~formに属する~controlがすべて妥当~ならば ~T を返す。
他の場合は ~F を返す。
◎
Returns true if the form's controls are all valid; otherwise, returns false.
</dd>

	<dt>%form.``reportValidity()$m</dt>
	<dd>
この~formに属する~controlがすべて妥当~ならば ~T を返す。
他の場合は ~F を返すことに加え，そのことを利用者に伝える。
◎
Returns true if the form's controls are all valid; otherwise, returns false and informs the user.
</dd>

</dl>

<p>
``autocomplete@m
~IDL属性は、
`既知な値のみに制限され$る下で，
``autocomplete$a 内容~属性を`反映する$モノトスル。
◎
The autocomplete IDL attribute must reflect the content attribute of the same name, limited to only known values.
</p>

<div>
<p>
``name@m
~IDL属性は、
``name$a 内容~属性を`反映する$モノトスル。
</p>

<p>
``rel@m
~IDL属性は、
``rel$a 内容~属性を`反映する$モノトスル。
</p>
◎
The name and rel IDL attributes must reflect the content attribute of the same name.
</div>

<p>
``acceptCharset@m
~IDL属性は、
``accept-charset$a 内容~属性を`反映する$モノトスル。
◎
The acceptCharset IDL attribute must reflect the accept-charset content attribute.
</p>

<p>
``relList@m
~IDL属性は、
``rel$a 内容~属性を`反映する$モノトスル。
◎
The relList IDL attribute must reflect the rel content attribute.
</p>

<hr>

<div class="algo">
``elements@m
取得子~手続きは
⇒
~RET 次のようにされた `HTMLFormControlsCollection$I
⇒
根 ~SET コレの`根$,<br>
~filterは［
コレに`所有され$ている, かつ`~listされる$要素のうち，次に該当しないもの
］に合致する
⇒
`input$e 要素のうち，［
`type$a 属性の状態 ~EQ `Image$st
］であるもの（これは、
歴史的な理由から除外されている）
◎
The elements IDL attribute must return an HTMLFormControlsCollection rooted at the form element's root, whose filter matches listed elements whose form owner is the form element, with the exception of input elements whose type attribute is in the Image Button state, which must, for historical reasons, be excluded from this particular collection.
</div>

<div class="algo">
``length@m
取得子~手続きは
⇒
~RET コレの ``elements$m が成す`~collectionにより表現され$る~nodeの個数
◎
The length IDL attribute must return the number of nodes represented by the elements collection.
</div>

<p>
``getter@m
における`有index~prop取得子$の挙動は、
コレの ``elements$m ~collection %C に基づく：
◎
↓</p>
<ul>
	<li>
コレが`~supportする~prop~index$は、
常に， %C のそれと同じとする。
◎
The supported property indices at any instant are the indices supported by the object returned by the elements attribute at that instant.
</li>
	<li>
コレ用の`有index~propの値を決定する手続き$は、
所与の
( %index )
に対し［
%C の `item$m ~methodが引数 %index に対し返す値
］を返すモノトスル。
◎
To determine the value of an indexed property for a form element, the user agent must return the value returned by the item method on the elements collection, when invoked with the given index as its argument.
</li>
</ul>

<p>
``~getterN@m
における`有名~prop取得子$の挙動は、
以下に与える `form$e 要素~用の［
~supportする~prop名／
有名~propの値を決定する手続き
］に従う。
◎
↓</p>

<hr>

<p>
各 `form$e 要素は、
`過去~名~map@
— 名前をある要素に対応付ける`有順序~map$ —
を有する。
それは、
各~controlの名前を，その名前が変更されても
【当の `form^e が`~supportする~prop名$の中に】
持続するために利用される。
◎
Each form element has a mapping of names to elements called the past names map. It is used to persist names of controls even when they change names.
</p>

<div class="algo">
<p>
`form$e 要素 %form が`~supportする~prop名$は、
次の~algoを遂行した結果として得される：
◎
The supported property names consist of the names obtained from the following algorithm, in the order obtained from this algorithm:
</p>
<ol>
	<li>
%~tuple群 ~LET 空~list
— この~listを成す各~entryは、
( 名前, 要素, ~source ~IN { `id^i, `name^i, `過去^i }, 齢 )
が成す~tupleになる
【~sourceは、何がこの~entryの~sourceであるかを指示する】
◎
Let sourced names be an initially empty ordered list of tuples consisting of a string, an element, a source, where the source is either id, name, or past, and, if the source is past, an age.
</li>
	<li>
<p>
%form に`所有され$ている
~EACH( %候補 )
に対し【この時点では、順序は有意でない】：
</p>
		<ol>
			<li>
~IF［
%候補 は `img$e 要素でない
］~AND［
%候補 は `~listされる$要素でない
］
⇒
~CONTINUE
</li>
			<li>
~IF［
%候補 は `input$e 要素である
］~AND［
%候補 の `type$a 属性の状態 ~EQ `Image$st
］
⇒
~CONTINUE
</li>
			<li>
~IF［
%候補 は `id$a 属性 %A を有する
］
⇒
%~tuple群 に次の~entryを追加する
⇒
( %A の値, %候補, `id^i, ε )
</li>
			<li>
~IF［
%候補 は［
`name$a ／ `~nameI$a
］属性 %A を有する
］
⇒
%~tuple群 に次の~entryを追加する
⇒
( %A の値, %候補, `name^i, ε )
</li>
		</ol>
◎
For each listed element candidate whose form owner is the form element, with the exception of any input elements whose type attribute is in the Image Button state:
• If candidate has an id attribute, add an entry to sourced names with that id attribute's value as the string, candidate as the element, and id as the source.
• If candidate has a name attribute, add an entry to sourced names with that name attribute's value as the string, candidate as the element, and name as the source.
◎
For each img element candidate whose form owner is the form element:
• If candidate has an id attribute, add an entry to sourced names with that id attribute's value as the string, candidate as the element, and id as the source.
• If candidate has a name attribute, add an entry to sourced names with that name attribute's value as the string, candidate as the element, and name as the source.
</li>
	<li>
%齢~index ~LET 0
</li>
	<li>
<p>
%form の`過去~名~map$を成す
~EACH( %名前 → %要素 )
に対し：
</p>
		<ol>
			<li>
%~tuple群 に次に与える~entryを追加する
⇒
( %名前, %要素, `過去^i, %齢~index )
</li>
			<li>
%齢~index ~DECBY 1
</li>
		</ol>
◎
For each entry past entry in the past names map, add an entry to sourced names with the past entry's name as the string, past entry's element as the element, past as the source, and the length of time past entry has been in the past names map as the age.
</li>
	<li>
<p>
%~tuple群 を成す~entryたちを 次に従って~sortする：
</p>
		<ol>
			<li>
~entryの要素の`~tree順序$で~sortする
</li>
			<li>
要素が同じ~entryどうしは、
~sourceが［
`id^i, `name^i, `過去^i
］の順になるよう~sortする
</li>
			<li>
要素が同じ, かつ［
~source ~EQ `過去^i
］を満たす~entryどうしは、
齢の降順に~sortする
（~entryの名前が`過去~名~map$に~keyとして早く追加されたものほど先に来るよう）
</li>
		</ol>
◎
Sort sourced names by tree order of the element entry of each tuple, sorting entries with the same element by putting entries whose source is id first, then entries whose source is name, and finally entries whose source is past, and sorting entries with the same element and source by their age, oldest first.
</li>
	<li>
%名前~群 ~LET 新たな`有順序~集合$
◎
↓</li>
	<li>
<p>
%~tuple群 を成す
~EACH( %~entry )
に対し
</p>
		<ol>
			<li>
~IF［
%~entry の名前 ~NEQ 空~文字列
］
⇒
%名前~群 に %~entry の名前を`付加する$set
</li>
		</ol>
◎
Remove any entries in sourced names that have the empty string as their name.
◎
Remove any entries in sourced names that have the same name as an earlier entry in the map.
</li>
	<li>
~RET %名前~群
◎
Return the list of names from sourced names, maintaining their relative order.
</li>
</ol>
</div>

<div class="algo">
<p>
`form$e 要素 %form 用の`有名~propの値を決定する手続き$は、
所与の
( %form が`~supportする~prop名$ %名前 )
に対し：
◎
To determine the value of a named property name for a form element, the user agent must run the following steps:
</p>
<ol>
	<li>
<p>
%O ~LET %form に結付けられた`~live$な `RadioNodeList$I ~obj
— それは、
所与の時点で %form に`所有され$ている要素のうち，次の (A) を満たすものは［
在るならば，それら ／
無いならば，次の (B) を満たすものたち
］からなる`~tree順序$による~listを表現するものとして定義される：
</p>
		<ul>
			<li>
<p>
(A) ~AND↓：
</p>
				<ul>
					<li>
`~listされる$要素である
</li>
					<li>
次を満たさない
⇒
［
`input$e 要素である
］~AND［
その `type$a 属性の状態 ~EQ `Image$st
］
</li>
					<li>
［
`id$a 属性を有していて，その値 ~EQ %名前
］~OR［
`name$a 属性を有していて，その値 ~EQ %名前
］
</li>
				</ul>
			</li>
			<li>
<p>
(B) ~AND↓：
</p>
				<ul>
					<li>
`img$e 要素である
</li>
					<li>
［
`id$a 属性を有していて，その値 ~EQ %名前
］~OR［
`~nameI$a 属性を有していて，その値 ~EQ %名前
］
</li>
				</ul>
			</li>
		</ul>
◎
Let candidates be a live RadioNodeList object containing all the listed elements, whose form owner is the form element, that have either an id attribute or a name attribute equal to name, with the exception of input elements whose type attribute is in the Image Button state, in tree order.
◎
If candidates is empty, let candidates be a live RadioNodeList object containing all the img elements, whose form owner is the form element, that have either an id attribute or a name attribute equal to name, in tree order.
</li>
	<li>
<p>
%O が表現する要素の個数に応じて：
◎
↓</p>
		<ul class="switch">
			<li>
<p>
0 個：
</p>
				<ol>
					<li>
~Assert：
`過去~名~map$[ %名前 ] ~NEQ ε
</li>
					<li>
~RET `過去~名~map$[ %名前 ]
</li>
				</ol>
◎
If candidates is empty, name is the name of one of the entries in the form element's past names map: return the object associated with name in that map.

			</li>
			<li>
複数~個
⇒
~RET %O
◎
If candidates contains more than one node, return candidates.
</li>
			<li>
<p>
1 個：
</p>
				<ol>
					<li>
%要素 ~LET %O が表現する唯一の要素
</li>
					<li>
`過去~名~map$[ %名前 ] ~SET %要素
</li>
					<li>
~RET %要素
</li>
				</ol>
◎
Otherwise, candidates contains exactly one node. Add a mapping from name to the node in candidates in the form element's past names map, replacing the previous entry with the same name, if any.
◎
Return the node in candidates.
</li>
		</ul>
	</li>
</ol>
</div>

<p>
`form$e 要素の`過去~名~map$ %~map を成すどの~entry %~entry に対しても
⇒
%~entry の値である要素の`~form所有者$が変化したときは、
%~map から %~entry を除去するモノトスル。
◎
If an element listed in a form element's past names map changes form owner, then its entries must be removed from that map.
</p>

<hr>

<div class="algo">
``submit()@m
~method手続きは
⇒
`~formを提出する$( コレ, `submit() ~method^i【！#submit-subbmitted-from-method】 )
◎
The submit() method steps are to submit this from this, with submitted from submit() method set to true.
</div>

<div class="algo">
<p>
``requestSubmit(submitter)@m
~method手続きは：
◎
The requestSubmit(submitter) method, when invoked, must run the following steps:
</p>
<ol>
	<li>
<p>
~IF［
%submitter ~NEQ ~NULL
］：
◎
If submitter is not null, then:
</p>
		<ol>
			<li>
~IF［
%submitter は`提出-~button$でない
］
⇒
~THROW `TypeError$E
◎
If submitter is not a submit button, then throw a TypeError.
</li>
			<li>
~IF［
%submitter の`~form所有者$ ~NEQ コレ
］
⇒
~THROW `NotFoundError$E
◎
If submitter's form owner is not this form element, then throw a "NotFoundError" DOMException.
</li>
		</ol>
	</li>
	<li>
~ELSE
⇒
%submitter ~SET コレ
◎
Otherwise, set submitter to this form element.
</li>
	<li>
`~formを提出する$( コレ, %submitter )
◎
Submit this form element, from submitter.
</li>
</ol>
</div>

<div class="algo">
<p>
``reset()@m
~method手続きは：
◎
The reset() method, when invoked, must run the following steps:
</p>
<ol>
	<li>
~IF［
コレ の`再設定~用に~lockされたか$ ~EQ ~T
］
⇒
~RET
◎
If the form element is marked as locked for reset, then return.
</li>
	<li>
コレの
`再設定~用に~lockされたか@
~SET ~T
◎
Mark the form element as locked for reset.
</li>
	<li>
`~formを再設定する$( コレ )
◎
Reset the form element.
</li>
	<li>
コレの`再設定~用に~lockされたか$ ~SET ~F
◎
Unmark the form element as locked for reset.
</li>
</ol>
</div>

<div class="algo">
``checkValidity()@m
~method手続きは
⇒
~RET ~IS［
次の結果 ~EQ `肯定的^i
］
⇒
`拘束を静的に検証する$( コレ )
◎
If the checkValidity() method is invoked, the user agent must statically validate the constraints of the form element, and return true if the constraint validation return a positive result, and false if it returned a negative result.
</div>

<div class="algo">
``reportValidity()@m
~method手続きは
⇒
~RET ~IS［
次の結果 ~EQ `肯定的^i
］
⇒
`拘束をヤリトリありに検証する$( コレ )
◎
If the reportValidity() method is invoked, the user agent must interactively validate the constraints of the form element, and return true if the constraint validation return a positive result, and false if it returned a negative result.
</div>

<div class="example">
<p>
例
— 2 つの探索~formがある：
◎
This example shows two search forms:
</p>

`form-1^xCode
</div>

			</section>
			<section id="the-label-element">
<h4 title="The label element">4.10.4. ``label^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$ ／`句ng内容$ ／ `ヤリトリありな内容$ ／ `可触~内容$
◎
Flow content.
◎
Phrasing content.
◎
Interactive content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$
— ただし，子孫に次に挙げるものは無いとする
⇒＃
この要素の`~label先~control$以外の`~label可能$な要素／
`label$e 要素
◎
Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
``for$a
— この~labelを~form~controlに結付ける。
◎
for — Associate the label with form control
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`label$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window]
interface `HTMLLabelElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  readonly attribute `HTMLFormElement$I? ``form$m;
  [`CEReactions$] attribute DOMString ``htmlFor$m;
  readonly attribute `HTMLElement$I? ``control$m;
};
</pre>

</dd>
</dl>

<div>
<p>
`label$e 要素は、
~UI内の~captionを`表現-$する。
この~captionには、
次のいずれかにより，［
当の要素の`~label先~control$と呼ばれる，特定の~form~control
］を結付けれる：
</p>
<ul>
	<li>
``for@a
属性を利用して，当の~controlを指す
— この属性に指定する値は、
`label$e 要素と同じ`~tree$内にある`~label可能$な要素の`~ID$でなければナラナイ。
</li>
	<li>
要素の内側に当の~controlを置く
</li>
</ul>
◎
The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using the for attribute, or by putting the form control inside the label element itself.
</div>

<div class="algo">
<p>
`label$e 要素の
`~label先~control@
は、
次の手続きの結果として定義される：
</p>

<ol>
	<li>
%S ~LET ［
要素は ``for$a 属性 %A を有するならば 要素と同じ`~tree$内の要素のうち，［
`~ID$ ~EQ %A の値
］を満たすものたちが成す集合
／
~ELSE_ 要素の子孫~要素たちが成す集合
］
</li>
	<li>
%S ~SET %S 内の`~label可能$な要素たちが成す集合
</li>
	<li>
~IF［
%S は空である
］
⇒
~RET ε （~~存在しない）
</li>
	<li>
~RET %S 内の要素のうち，`~tree順序$で最初のもの
</li>
</ol>

◎
Except where otherwise specified by the following rules, a label element has no labeled control.
◎
The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable element in the same tree as the label element. If the attribute is specified and there is an element in the tree whose ID is equal to the value of the for attribute, and the first such element in tree order is a labelable element, then that element is the label element's labeled control.
◎
If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.
</div>

<p>
`label$e 要素の正確な［
既定の呈示, 既定の挙動
］
— 特に，その`作動化の挙動$ —
は、
当の~platformに~label用の挙動があるならば，それに合致するベキである。
`label$e 要素の`作動化の挙動$は、［
その子孫である`ヤリトリありな内容$ %C, および %C の子孫
］を~targetにする~eventに対しては，何もしないモノトスル。
◎
The label element's exact default presentation and behavior, in particular what its activation behavior might be, if anything, should match the platform's label behavior. The activation behavior of a label element for events targeted at interactive content descendants of a label element, and any descendants of those interactive content descendants, must be to do nothing.
</p>

<p class="note">注記：
`~formに所有され得る~custom要素$は，`~label可能$な要素なので、
~UAにとっては，［
`label$e 要素の`作動化の挙動$が`~label先~control$に影響iする所
］では［
組込みの要素, ~custom要素
］どちらも影響iされることになる。
◎
Form-associated custom elements are labelable elements, so for user agents where the label element's activation behavior impacts the labeled control, both built-in and custom elements will be impacted.
</p>

<div class="example">
<p>
例えば，［
~labelを~clickすると ~form~controlが作動化されるような~platform
］上の~UAは、［
次の~code片にて `label$e が~clickされた
］ときも
— 利用者が要素を誘発したかのように —
`input$e 要素に向けて`~click~eventを発火-$できる：
◎
For example, on platforms where clicking a label activates the form control, clicking the label in the following snippet could trigger the user agent to fire a click event at the input element, as if the element itself had been triggered by the user:
</p>

`label-1^xCode

<p>
同様に `my-checkbox^e は，`~formに所有され得る~custom要素$として宣言されたと見做すなら
（`この例＠~HEcustom#custom-elements-face-example$の様に）、
次の~codeは：
◎
Similarly, assuming my-checkbox was declared as a form-associated custom element (like in this example), then the code
</p>

`label-2^xCode

<p>
`my-checkbox^e 要素に向けて`~click~eventを発火-$するのと同じ挙動になる。
◎
would have the same behavior, firing a click event at the my-checkbox element.
</p>

<p>
両~事例とも，他の~platformにおける挙動は、
当の~controlを~focusするだけか，何もしないであろう。
◎
On other platforms, the behavior in both cases might be just to focus the control, or to do nothing.
</p>
</div>

<div class="example">
<p>
次の例に 3 個の~form~controlを示す。
それぞれは~labelを伴い、
うち 2 個には，利用者が倣うべき形式を示す短い~textも含められている。
◎
The following example shows three form controls each with a label, two of which have small text showing the right format for users to use.
</p>

`label-3^xCode
</div>

<dl class="domintro">

	<dt>%label.``control$m</dt>
	<dd>
この要素の`~label先~control$を返す。
◎
Returns the form control that is associated with this element.
</dd>

	<dt>%label.``form$m</dt>
	<dd>
この要素の`~label先~control$が［
在るならば その `~form所有者$ ／
無いならば ~NULL
］を返す。
◎
Returns the form owner of the form control that is associated with this element.
◎
Returns null if there isn't one.
</dd>
</dl>

<p>
``htmlFor@m
~IDL属性は、
``for$a 内容~属性を`反映する$モノトスル。
◎
The htmlFor IDL attribute must reflect the for content attribute.
</p>

<div class="algo">
``control@m
取得子~手続きは
⇒
~RET ［
コレの`~label先~control$ ~NEQ ε ならば それ ／
~ELSE_ ~NULL
］
◎
The control IDL attribute must return the label element's labeled control, if any, or null if there isn't one.
</div>

<div class="algo">
<p>
``form@m
取得子~手続きは：
◎
The form IDL attribute must run the following steps:
</p>
<ol>
	<li>
%~control ~LET コレの`~label先~control$
◎
↓</li>
	<li>
~IF［
%~control ~EQ ε
］
⇒
~RET ~NULL
◎
If the label element has no labeled control, then return null.
</li>
	<li>
~IF［
%~control は`~formに所有され得る要素$でない
］
⇒
~RET ~NULL
◎
If the label element's labeled control is not a form-associated element, then return null.
</li>
	<li>
~RET %~control の`~form所有者$
（これも ~NULL になり得る）
◎
Return the label element's labeled control's form owner (which can still be null).
</li>
</ol>

<p class="note">注記：
`label$e 要素の ``form$m ~IDL属性は、［
`~listされる$`~formに所有され得る要素$
］の `form$m ~IDL属性とは異なる。【！＊原文リンク誤：form$a】
また、
`label$e 要素には `form$a 内容~属性は適用されない。
◎
The form IDL attribute on the label element is different from the form IDL attribute on listed form-associated elements, and the label element does not have a form content attribute.
</p>
</div>

<hr>

<dl class="domintro">
	<dt>%control.`labels$m</dt>
	<dd>
この~form~controlを`~label先~control$にしている `label$e 要素すべてからなる
`NodeList$I を返す。
◎
Returns a NodeList of all the label elements that the form control is associated with.
</dd>
</dl>

<p>
各［
`~label可能$な要素 ／ `input$e 要素
］には、
`NodeList$I ~objが結付けられる
— それは、［
当の要素を`~label先~control$とする `label$e 要素たち
］からなる，`~tree順序$による~listを表現し，次のいずれかの~IDL属性に公開される：
◎
Labelable elements and all input elements have a live NodeList object associated with them that represents the list of label elements, in tree order, whose labeled control is the element in question.＼
</p>
<ul>
	<li class="algo">
<p>
当の要素が`~formに所有され得る~custom要素$でない場合、
要素が実装する~interfaceの
`labels@m
属性
— その取得子~手続きは：
</p>
		<ol>
			<li>
~IF［
コレは `input$e 要素であって, その `type$a ~属性は `Hidden$st 状態にある
］
⇒
~RET ~NULL
</li>
			<li>
~RET コレに結付けられた `NodeList$I ~obj
— これは、
常に同じ~objを返すモノトスル
</li>
		</ol>
◎
The labels IDL attribute of labelable elements that are not form-associated custom elements, and the labels IDL attribute of input elements,＼
on getting, must return that NodeList object, and that same value must always be returned, unless this element is an input element whose type attribute is in the Hidden state, in which case it must instead return null.
</li>
	<li class="algo">
<p>
当の要素が`~formに所有され得る~custom要素$である場合、
`ElementInternals$I の
`labels@eI
属性
— その取得子~手続きは：
</p>
		<ol>
			<li>
%要素 ~LET コレの`~target要素$iN
</li>
			<li>
~IF［
%要素 は`~formに所有され得る~custom要素$でない
］
⇒
~THROW `NotSupportedError$E
</li>
			<li>
~RET %要素 に結付けられた `NodeList$I ~obj
— これは、
常に同じ~objを返すモノトスル
</li>
		</ol>
◎
Form-associated custom elements don't have a labels IDL attribute. Instead, their ElementInternals object has a labels IDL attribute.＼
On getting, it must throw a "NotSupportedError" DOMException if the target element is not a form-associated custom element. Otherwise, it must return that NodeList object, and that same value must always be returned.
</li>
</ul>

<div class="example">
<p>
次の（適合していない）な例に、
`input$e 要素の `type$a 属性が変更されたとき，
`NodeList$I に何が起こるか, および
`labels$m は何を返すかを示す：
◎
This (non-conforming) example shows what happens to the NodeList and what labels returns when an input element has its type attribute changed.
</p>

<pre class="lang-html">
&lt;!doctype html&gt;
&lt;p&gt;&lt;label&gt;&lt;input&gt;&lt;/label&gt;&lt;/p&gt;
&lt;script&gt;
 const %input = document.querySelector('input');
 const %labels = %input.labels;
 console.assert(%labels.length === 1);

 %input.type = 'hidden';
 console.assert(%labels.length === 0); /* <span class="comment">
%input はもはや %label の`~label先~control$でない
◎
the input is no longer the label's labeled control
</span> */
 console.assert(%input.%labels === null);

 %input.type = 'checkbox';
 console.assert(%labels.length === 1); /* <span class="comment">
%input は再び %label の`~label先~control$になる
◎
the input is once again the label's labeled control
</span> */
 console.assert(%input.labels === %labels); /* <span class="comment">
元と同じ値が返される
◎
same value as returned originally
</span> */
&lt;/script&gt;
</pre>
</div>

			</section>
			<section id="the-input-element">
<h4 title="The input element">4.10.5. ``input^e 要素</h4>

<p class="trans-note">【
この節の内容は、
`別~page＠HTML-input-ja.html$にて。
】</p>

			</section>
			<section id="the-button-element">
<h4 title="The button element">4.10.6. ``button^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$ ／`句ng内容$ ／ `ヤリトリありな内容$ ／ `可触~内容$ ／
◎
Flow content.
◎
Phrasing content.
◎
Interactive content.
◎
Listed, labelable, submittable, and autocapitalize-and-autocorrect inheriting form-associated element.
◎
Palpable content.
</dd>
	<dd>
`~formに所有され得る要素$のうち［
`~listされる$ ／ `~label可能$な ／ `提出-可能$な ／ `自動頭字化-と自動訂正-を継承-$する
］もの
◎
↑</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$
— ただし、
子孫に［
`ヤリトリありな内容$ ／ `tabindex$a 属性が指定された要素
］があってはならない。
◎
Phrasing content, but there must be no interactive content descendant and no descendant with the tabindex attribute specified.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
``command$a
— ~targetにされた要素がとる動作を指示する。
◎
command — Indicates to the targeted element which action to take.
</dd>
	<dd>
``commandfor$a
— 呼出される~targetを別の要素にする。
◎
commandfor — Targets another element to be invoked.
</dd>
	<dd>
`disabled$a
— この~form~controlは不能化されるかどうか。
◎
disabled — Whether the form control is disabled
</dd>
	<dd>
`form$a
— この要素の所有者にする `form$e 要素を与える。
◎
form — Associates the element with a form element
</dd>
	<dd>
`formaction$a
— `~form提出$用に利用する`~URL$
◎
formaction — URL to use for form submission
</dd>
	<dd>
`formenctype$a
— `~form提出$用に利用する`~entry~list$用の符号化法の種別。
◎
formenctype — Entry list encoding type to use for form submission
</dd>
	<dd>
`formmethod$a
— `~form提出$用に利用する~method（等）
◎
formmethod — Variant to use for form submission
</dd>
	<dd>
`formnovalidate$a
— `~form提出$に際し，~form~control検証を迂回する。
◎
formnovalidate — Bypass form control validation for form submission
</dd>
	<dd>
`formtarget$a
— `~form提出$用の
【それにより~navigateされる】
`~navigable$。
◎
formtarget — Navigable for form submission
</dd>
	<dd>
`name$a
— ［
`~form提出$用に ／ `form.elements$m ~APIにおいて
］利用する，この要素の名前。
◎
name — Name of the element to use for form submission and in the form.elements API
</dd>
	<dd>
`popovertarget$a
— ［
~toggleする／示す／隠す
］~targetになる`~popover要素$を指示する。
◎
popovertarget — Targets a popover element to toggle, show, or hide
</dd>
	<dd>
`popovertargetaction$a
— ~targetにされた`~popover要素$に対し［
~toggleする／示す／隠す
］のうちどれを行うかを指示する。
◎
popovertargetaction — Indicates whether a targeted popover element is to be toggled, shown, or hidden
</dd>
	<dd>
``type$a
— ~buttonの型
◎
type — Type of button
</dd>
	<dd>
``value$a
— `~form提出$用に利用される値。
◎
value — Value to be used for form submission
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`button$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window]
interface `HTMLButtonElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute DOMString ``command$m;
  [`CEReactions$] attribute `Element$I? ``commandForElement$m;
  [`CEReactions$] attribute boolean `disabled$m;
  readonly attribute `HTMLFormElement$I? `form$m;
  [`CEReactions$] attribute USVString `formAction$m;
  [`CEReactions$] attribute DOMString `formEnctype$m;
  [`CEReactions$] attribute DOMString `formMethod$m;
  [`CEReactions$] attribute boolean `formNoValidate$m;
  [`CEReactions$] attribute DOMString `formTarget$m;
  [`CEReactions$] attribute DOMString `name$m;
  [`CEReactions$] attribute DOMString ``type$m;
  [`CEReactions$] attribute DOMString ``value$m;

  readonly attribute boolean `willValidate$m;
  readonly attribute `ValidityState$I `validity$m;
  readonly attribute DOMString `validationMessage$m;
  boolean `checkValidity$m();
  boolean `reportValidity$m();
  undefined `setCustomValidity$m(DOMString %error);

  readonly attribute `NodeList$I `labels$m;
};

`HTMLButtonElement$I includes `PopoverInvokerElement$I;
</pre>

</dd>
</dl>

<p>
`button$e 要素は、
その内容で~labelされた~buttonを`表現-$する。
◎
The button element represents a button labeled by its contents.
</p>

<p>
要素は`~button$になる。
◎
The element is a button.
</p>

<p>
``type@a
属性は、
~buttonが作動化されたときの挙動を制御する。
この属性は，`列挙d属性$であり、
次に挙げる~keyword, とり得る状態, それらの対応付けが定義される：
◎
The type attribute controls the behavior of the button when it is activated. It is an enumerated attribute with the following keywords and states:
</p>

<div>
<table><thead>
<tr><th>~keyword
<th>状態
<th>概略的な記述
<tbody>

<tr><td>`submit@v
<td>`提出する@st
<td>~formを提出する

<tr><td>`reset@v
<td>`再設定する@st
<td>~formを再設定する

<tr><td>`button@v
<td>`~button@st
<td>何もしない

<tr><td>
<td>`自動@st
<td>
【［当の要素が`提出-~button$になるならば`提出する$st ／~ELSE_ `~button$st ］と同じに挙動する。】
</table>
◎
Keyword｜State｜Brief description
submit｜Submit Button｜Submits the form.
reset｜Reset Button｜Resets the form.
button｜Button｜Does nothing.
</div>

<p>
``type$a 属性の［
`欠落~値~用の既定の状態$, `妥当でない値~用の既定の状態$
］は、
いずれも `自動$st とする。
◎
The attribute's missing value default and invalid value default are both the Auto state.
</p>

<p>
`button$e 要素 %要素 が`提出-~button$であるとは、
~OR↓ が満たされることをいう：
◎
A button element is said to be a submit button if any of the following are true:
</p>
<ul>
	<li>
<p>
~AND↓：
</p>
		<ul>
			<li>
%要素 の ``type$a 属性の状態 ~EQ `自動$st
</li>
			<li>
%要素 は ``command$a 内容~属性を有さない
</li>
			<li>
%要素 は ``commandfor$a 内容~属性を有さない
</li>
		</ul>
◎
the type attribute is in the Auto state and both the command and commandfor content attributes are not present; or
</li>
	<li>
%要素 の ``type$a 属性の状態 ~EQ `提出する$st
◎
the type attribute is in the Submit Button state.
</li>
</ul>

<p><strong>拘束~検証</strong>
⇒
要素は、
`提出-~button$でない間は，`拘束~検証の対象外$になる
◎
Constraint validation: If the element is not a submit button, the element is barred from constraint validation.
</p>

<p>
``commandfor@a
属性に指定する値は、［
当の属性を有する`~button$と同じ`~tree$内にある要素
］の`~ID$でなければナラナイ。
◎
If specified, the commandfor attribute value must be the ID of an element in the same tree as the button with the commandfor attribute.
</p>

<p>
``command@a
属性は，`列挙d属性$であり、
次に挙げる~keyword, とり得る状態, それらの対応付けが定義される：
◎
The command attribute is an enumerated attribute with the following keywords and states:
</p>

<div>
<table><thead><tr><th>~keyword
<th>状態
<th>概略的な記述
</thead><tbody>

<tr><td>`toggle-popover@v
<td>`~popoverを~toggleする@st
<td>~targetにされた`~popover要素$を示す／隠す

<tr><td>`show-popover@v
<td>`~popoverを示す@st
<td>~targetにされた`~popover要素$を示す

<tr><td>`hide-popover@v
<td>`~popoverを隠す@st
<td>~targetにされ`~popover要素$を隠す

<tr><td>`close@v
<td>`閉じる@st
<td>~targetにされた `dialog$e 要素を閉じる

<tr><td>`show-modal@v
<td>`~modalを示す@st
<td>~targetにされた `dialog$e 要素を~modalとして開く

<tr><td>`~custom~command~keyword$
<td>`~custom@st
<td>~targetにされた要素に向けて `command$et ~eventを配送する他は何もしない

<tr><td>
<td>`未知@st
<td>【何もしない】

</tbody></table>
◎
Keyword｜State｜Brief description
toggle-popover｜Toggle Popover｜Shows or hides the targeted popover element.
show-popover｜Show Popover｜Shows the targeted popover element.
hide-popover｜Hide Popover｜Hides the targeted popover element.
close｜Close｜Closes the targeted dialog element.
show-modal｜Show Modal｜Opens the targeted dialog element as modal.
A custom command keyword｜Custom｜Only dispatches the command event on the targeted element.
</div>

<p>
``command$a 属性の［
`欠落~値~用の既定の状態$, `妥当でない値~用の既定の状態$
］は、
いずれも `未知$st とする。
◎
The attribute's missing value default and invalid value default are both the Unknown state.
</p>

<p>
`~custom~command~keyword@
は、
`--^l `から開始して$いる文字列である。
◎
A custom command keyword is a string that starts with "--".
</p>

<div class="algo">
<p>
`button$e 要素 %要素 の`作動化の挙動$は、
所与の
( %~event )
に対し：
◎
A button element element's activation behavior given event is:
</p>
<ol>
	<li>
~IF［
%要素 は`不能化されて$feいる
］
⇒
~RET
◎
If element is disabled, then return.
</li>
	<li>
~IF［
%要素 の`~node文書$は`全部的に作動中$でない
］
⇒
~RET
◎
If element's node document is not fully active, then return.
</li>
	<li>
%所有者 ~LET %要素 の`~form所有者$
◎
↓</li>
	<li>
<p>
~IF［
%所有者 ~NEQ ~NULL
］：
◎
If element has a form owner:
</p>
		<ol>
			<li>
<p>
~IF［
%要素 は`提出-~button$である
］：
</p>
				<ol>
					<li>
%利用者-関与i ~LET `~event用の~naviに対する利用者-関与i$( %~event )
</li>
					<li>
`~formを提出する$( %所有者, %要素, %利用者-関与i )
</li>
					<li>
~RET
</li>
				</ol>
◎
If element is a submit button, then submit element's form owner from element with userInvolvement set to event's user navigation involvement, and return.
</li>
			<li>
<p>
~IF［
%要素 の ``type$a 属性の状態 ~EQ `再設定する$st
］：
</p>
				<ol>
					<li>
`~formを再設定する$( %所有者 )
</li>
					<li>
~RET
</li>
				</ol>
◎
If element's type attribute is in the Reset Button state, then reset element's form owner, and return.
</li>
			<li>
~IF［
%要素 の ``type$a 属性の状態 ~EQ `自動$st
］
⇒
~RET
◎
If element's type attribute is in the Auto state, then return.
</li>
		</ol>
	</li>
	<li>
%~target ~LET %要素 の ``commandfor$a に`結付けられた要素を取得する$()
◎
Let target be the result of running element's get the commandfor associated element.
</li>
	<li>
<p>
~IF［
%~target ~NEQ ~NULL
］：
◎
If target is not null:
</p>
		<ol>
			<li>
%~command ~LET %要素 の ``command$a 属性
【属性の値ではなく，属性~nodeへの参照】
◎
Let command be element's command attribute.
</li>
			<li>
~IF［
%~command の状態 ~EQ `未知$st
］
⇒
~RET
◎
If command is in the Unknown state, then return.
</li>
			<li>
<p>
~IF［
%~target は`~popover要素$でない
］~AND［
%~command の状態 ~NEQ `~custom$st
］：
◎
Let isPopover be true if target's popover attribute is not in the no popover state; otherwise false.
◎
If isPopover is false and command is not in the Custom state:
</p>
				<ol>
					<li>
~Assert：
%~target の`名前空間$el ~EQ `~HTML名前空間$
◎
Assert: target's namespace is the HTML namespace.
</li>
					<li>
<p>
~IF［
~NOT ~AND↓
］…
</p>
						<ul>
							<li>
この標準が %~target の`局所~名$el用に定義する`呼出元~commandは妥当か？手続き$ %手続き はある
</li>
							<li>
%手続き( %~command ) ~EQ ~T
</li>
						</ul>
<p>
…ならば
⇒
~RET
</p>
◎
If this standard does not define is valid invoker command steps for target's local name, then return.
◎
Otherwise, if the result of running target's corresponding is valid invoker command steps given command is false, then return.
</li>
				</ol>
			</li>
			<li>
<p>
%継続するか ~LET `~eventを発火する$( %~target, `command$et, `CommandEvent$I )
— 次のように初期化して
⇒＃
`command$m 属性 ~SET %~command【 %要素 の ``command$m 取得子が返す値？】,
`source$m 属性 ~SET %要素,
`cancelable$m 属性 ~SET ~T,
`composed$m 属性 ~SET ~T
◎
Let continue be the result of firing an event named command at target, using CommandEvent, with its command attribute initialized to command, its source attribute initialized to element, and its cancelable and composed attributes initialized to true.
</p>

<p class="XXX">
`~DOM標準の課題 #1328＠https://github.com/whatwg/dom/issues/1328$ は…
【以下、 `CommandEvent$I にて述べられる課題と同じなので，和訳は省略する。】
◎
DOM standard issue #1328 tracks how to better standardize associated event data in a way which makes sense on Events. Currently an event attribute initialized to a value cannot also have a getter, and so an internal slot (or map of additional fields) is required to properly specify this.
</p>
			</li>
			<li>
~IF［
%継続するか ~EQ ~F
］
⇒
~RET
◎
If continue is false, then return.
</li>
			<li>
~IF［
%~target は`接続されて$いない
］
⇒
~RET
◎
If target is not connected, then return.
</li>
			<li>
<p>
%~command の状態に応じて：
◎
↓</p>
				<ul class="switch">
					<li>
`~custom$st
⇒
~RET
◎
If command is in the Custom state, then return.
</li>
					<li>
`~popoverを隠す$st
⇒
~IF［
`~popoverの妥当性を検査する$( %~target, `示している^i, ~F, ~NULL ) ~EQ ~T
］
⇒
`~popoverを隠す$( %~target, ~T, ~T , ~F )
◎
If command is in the Hide Popover state:
• If the result of running check popover validity given target, true, false, and null is true, then run the hide popover algorithm given target, true, true, and false.
</li>
					<li>
<p>
`~popoverを~toggleする$st：
◎
Otherwise, if command is in the Toggle Popover state:
</p>
				<ol>
					<li>
~IF［
`~popoverの妥当性を検査する$( %~target, `隠している^i, ~F, ~NULL ) ~EQ ~T
］
⇒
`~popoverを示す$( %~target, ~T, ~T, ~F )
◎
If the result of running check popover validity given target, false, false, and null is true, then run the show popover algorithm given target, true, true, and false.
</li>
					<li>
~ELIF［
`~popoverの妥当性を検査する$( %~target, `示している^i, ~F, ~NULL ) ~EQ ~T
］
⇒
`~popoverを隠す$( %~target, ~T, ~T , ~F )
◎
Otheriwse, if the result of running check popover validity given target, true, false, and null is true, then run the hide popover algorithm given target, true, true, and false.
</li>			</ol>
					</li>
					<li>
`~popoverを示す$st
⇒
~IF［
`~popoverの妥当性を検査する$( %~target, `隠している^i, ~F, ~NULL ) ~EQ ~T
］
⇒
`~popoverを示す$( %~target, ~T, ~T, ~F )
◎
Otherwise, if command is in the Show Popover state:
• If the result of running check popover validity given target, false, false, and null is true, then run the show popover algorithm given target, true, true, and false.
</li>
					<li>
その他
⇒
~IF［
この標準が %~target の`局所~名$el用に定義する`呼出元~command手続き$ %手続き はある
］
⇒
%手続き( %~target, %要素, %~command )
◎
Otherwise, if this standard defines invoker command steps for target's local name, then run the corresponding invoker command steps given target, element and command.
</li>
				</ul>
			</li>
		</ol>
	</li>
	<li>
~ELSE
⇒
`~popover~target属性~作動化の挙動$( %要素, %~event の`~target$ )
◎
Otherwise, run the popover target attribute activation behavior given element and event's target.
</li>
</ol>
</div>

<p>
`~HTML要素$には、
その`局所~名$elに応じて，
次に挙げる特定の手続きが定義され得る
⇒＃
`呼出元~commandは妥当か？手続き@,
`呼出元~command手続き@
◎
An HTML element can have specific is valid invoker command steps and invoker command steps defined for the element's local name.
</p>

<p>
`button$e 要素の：
◎
↓</p>

<ul>
	<li>
`form$a 属性は、
要素を ある`~form所有者$に明示的に所有させるために利用される。
◎
The form attribute is used to explicitly associate the button element with its form owner.＼
</li>
	<li>
`name$a 属性は、
要素の名前を表現する。
◎
The name attribute represents the element's name.＼
◎
</li>
	<li>
`disabled$a 属性は、
~controlをヤリトリありでなくして，その値は提出されないようにするために利用される。
◎
The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted.＼
</li>
	<li>
次に挙げる属性は、
`~form提出用の属性$である
⇒＃
`formaction$a,
`formenctype$a,
`formmethod$a,
`formnovalidate$a,
`formtarget$a
◎
The formaction, formenctype, formmethod, formnovalidate, and formtarget attributes are attributes for form submission.
</li>
</ul>

<p class="note">注記：
`formnovalidate$a 属性は、
提出-~buttonが拘束~検証を誘発しないようにするために利用できる。
◎
The formnovalidate attribute can be used to make submit buttons that do not trigger the constraint validation.
</p>

<p>
上に挙げた`~form提出用の属性$は、
要素が`提出-~button$でない場合には，指定されてはナラナイ。
◎
The formaction, formenctype, formmethod, formnovalidate, and formtarget must not be specified if the element is not a submit button.
</p>

<p>
``commandForElement@m
~IDL属性は、
``commandfor$a 内容~属性を`反映する$モノトスル。
◎
The commandForElement IDL attribute must reflect the element's commandfor content attribute.
</p>

<p>
``command@m
~IDL属性の：
◎
↓</p>
<ul>
	<li class="algo">
取得子~手続きは
⇒
~RET コレの ``command$a 属性の状態に応じて
⇒＃
`~custom$st ならば当の属性の値 ／
`未知$st ならば空~文字列 ／
~ELSE_ 当の状態に対応している~keyword
◎
The command getter steps are:
• Let command be this's command attribute.
• If command is in the Custom state, then return command's value.
• If command is in the Unknown state, then return the empty string.
• Return the keword corresponding to the value of command.
</li>
	<li class="algo">
設定子~手続きは
⇒
``command$a 内容~属性 ~SET 所与の値
◎
The command setter steps are to set the command content attribute to the given value.
</li>
</ul>

<p>
``value@a
属性は、
~form提出の目的における要素の値を与える。
要素の`値$feは［
要素が ``value$a 属性を有するならば その値 ／
~ELSE_ 空~文字列
］になる。
◎
The value attribute gives the element's value for the purposes of form submission. The element's value is the value of the element's value attribute, if there is one, or the empty string otherwise.
</p>

<p class="note">注記：
~button（および その値）は、
~form提出を起動するために利用されたときに限り，~form提出に含まれる。
◎
A button (and its value) is only included in the form submission if the button itself was used to initiate the form submission.
</p>

<hr>

<p>
``value@m
~IDL属性は、
``value$a 内容~属性を`反映する$モノトスル。
◎
The value IDL attribute must reflect the content attribute of the same name.
</p>

<p>
``type@m
~IDL属性の：
◎
↓</p>
<ul>
	<li class="algo">
<p>
取得子~手続きは：
◎
The type getter steps are:
</p>
		<ol>
			<li>
~IF［
コレ は`提出-~button$である
］
⇒
~RET `submit^l
◎
If this is a submit button, then return "submit".
</li>
			<li>
%状態 ~LET コレの ``type$a 属性の状態
◎
Let state be this's type attribute.
</li>
			<li>
~Assert：
%状態 ~NEQ `提出する$st
◎
Assert: state is not in the Submit Button state.
</li>
			<li>
~RET %状態 に応じて
⇒＃
`自動$st ならば `button^l ／
~ELSE_ %状態 に対応している~keyword値
◎
If state is in the Auto state, then return "button".
◎
Return the keyword value corresponding to state.
</li>
</ol>

	</li>
	<li class="algo">
設定子~手続きは
⇒
``type$a 内容~属性 ~SET 所与の値
◎
The type setter steps are to set the type content attribute to the given value.
</li>
</ul>

<p>
`button$e 要素には、
次に挙げる~IDL~memberもある：
◎
↓</p>
<ul>
	<li>
次に挙げるものは、
`拘束~検証~API$の一部を成す
⇒＃
`willValidate$m,
`validity$m,
`validationMessage$m,
`checkValidity()$m,
`reportValidity()$m,
`setCustomValidity()$m
◎
The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API.＼
</li>
	<li>
`labels$m は、
要素を指している `label$e からなる~listを供する。
◎
The labels IDL attribute provides a list of the element's labels.＼
</li>
	<li>
次に挙げるものは、
要素の~form~APIの一部を成す
⇒＃
`disabled$m,
`form$m,
`name$m
◎
The disabled, form, and name IDL attributes are part of the element's forms API.
</li>
</ul>

<div class="example">
<p>
"~~ヒントを~~示す" と~labelされた次の~buttonは、
作動化-時には~dialog~boxを~pop-upする：
◎
The following button is labeled "Show hint" and pops up a dialog box when activated:
</p>

`button-1^xCode
</div>

<div class="example">
<p>
``commandfor$a を利用して，
`~button$が作動化されたとき`~popover要素$を［
示す／隠す
］方法を次に示す：
◎
The following shows how buttons can use commandfor to show and hide an element with the popover attribute when activated:
</p>

`button-2^xCode
</div>

<div class="example">
<p>
`~custom~command~keyword$を伴う ``commandfor$a を~buttonに利用する方法を次に示す
— これは、
未指定な挙動~用に~custom~commandを利用する方法をデモる：
◎
The following shows how buttons can use commandfor with a custom command keyword on an element, demonstrating how one could use custom commands for unspecified behavior:
</p>

`button-3^xCode
</div>

			</section>
			<section id="the-select-element">
<h4 title="The select element">4.10.7. ``select^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$ ／`句ng内容$ ／ `ヤリトリありな内容$ ／ `可触~内容$ ／
◎
Flow content.
◎
Phrasing content.
◎
Interactive content.
◎
Listed, labelable, submittable, resettable, and autocapitalize-and-autocorrect inheriting form-associated element.
◎
Palpable content.
</dd>
	<dd>
`~formに所有され得る要素$のうち［
`~listされる$ ／ `提出-可能$な ／ `再設定-可能$な ／ `自動頭字化-と自動訂正-を継承-$する
］もの
◎
↑</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
0 個~以上の［
次のいずれかに該当する要素
］
⇒＃
`option$e ／
`optgroup$e ／
`hr$e ／
`~scriptを~supportする要素$
◎
Zero or more option, optgroup, hr, and script-supporting elements.
Zero or more option, optgroup, and script-supporting elements.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
`autocomplete$a
— ~formの~autofill特能~用の~hint。
◎
autocomplete — Hint for form autofill feature
</dd>
	<dd>
`disabled$a
— この~form~controlは不能化されるかどうか。
◎
disabled — Whether the form control is disabled
</dd>
	<dd>
`form$a
— この要素の所有者にする `form$e 要素を与える。
◎
form — Associates the element with a form element
</dd>
	<dd>
``multiple$a
— 複数個の値を許容するかどうか。
◎
multiple — Whether to allow multiple values
</dd>
	<dd>
`name$a
— ［
`~form提出$用に ／ `form.elements$m ~APIにおいて
］利用する，この要素の名前。
◎
name — Name of the element to use for form submission and in the form.elements API
</dd>
	<dd>
``required$a
— この~controlは`~form提出$用に要求されるかどうか。
◎
required — Whether the control is required for form submission
</dd>
	<dd>
``size$a
— ~controlの~size。
◎
size — Size of the control
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
［
要素は ``multiple$a 属性を有する
］~OR［
要素は ``size$a 属性を有していて，その値 ~GT 1
］ならば
⇒
`作者~向け＠~HTMLARIA#el-select-multiple-or-size-greater-1$／
`実装者~向け＠~HTMLAAM#el-select-listbox$
◎
If the element has a multiple attribute or a size attribute with a value &gt; 1: for authors; for implementers.
</dd>
	<dd>
他の場合
⇒
`作者~向け＠~HTMLARIA#el-select$／
`実装者~向け＠~HTMLAAM#el-select-combobox$
◎
Otherwise: for authors; for implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window]
interface `HTMLSelectElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute DOMString `autocomplete$m;
  [`CEReactions$] attribute boolean `disabled$m;
  readonly attribute `HTMLFormElement$I? `form$m;
  [`CEReactions$] attribute boolean ``multiple$m;
  [`CEReactions$] attribute DOMString `name$m;
  [`CEReactions$] attribute boolean ``required$m;
  [`CEReactions$] attribute unsigned long ``size$m;

  readonly attribute DOMString ``type$m;

  [SameObject] readonly attribute `HTMLOptionsCollection$I ``options$m;
  [`CEReactions$] attribute unsigned long ``length$m;
  getter `HTMLOptionElement$I? ``item$m(unsigned long %index);
  `HTMLOptionElement$I? ``namedItem$m(DOMString %name);
  [`CEReactions$] undefined ``add$m((`HTMLOptionElement$I or `HTMLOptGroupElement$I) %element, optional (`HTMLElement$I or long)? %before = null);
  [`CEReactions$] undefined ``remove$m(); // ChildNode overload
  [`CEReactions$] undefined ``remove$m(long %index);
  [`CEReactions$] ``setter$m undefined (unsigned long %index, `HTMLOptionElement$I? %option);

  [SameObject] readonly attribute `HTMLCollection$I ``selectedOptions$m;
  attribute long ``selectedIndex$m;
  attribute DOMString ``value$m;

  readonly attribute boolean `willValidate$m;
  readonly attribute `ValidityState$I `validity$m;
  readonly attribute DOMString `validationMessage$m;
  boolean `checkValidity$m();
  boolean `reportValidity$m();
  undefined `setCustomValidity$m(DOMString %error);

  undefined ``showPicker$m();

  readonly attribute `NodeList$I `labels$m;
};
</pre>

</dd>
</dl>

<p>
`select$e
要素は、
選択肢（ option ）の集合から いくつかを選択するための~controlを表現する。
◎
The select element represents a control for selecting amongst a set of options.
</p>

<p>
``multiple@a
属性は、
`真偽-属性$である。
`select$e 要素は、
この属性を［
有する ／ 有さない
］ならば，要素の``選択肢~list$から［
0 個~以上の選択肢 ／ 単独の選択肢
］を選択するための~controlを`表現-$する。
◎
The multiple attribute is a boolean attribute. If the attribute is present, then the select element represents a control for selecting zero or more options from the list of options. If the attribute is absent, then the select element represents a control for selecting a single option from the list of options.
</p>

<p>
``size@a
属性は、
利用者に示す選択肢の個数を与える。
この属性に指定する値は、
1 以上の`妥当な負でない整数$でなければナラナイ。
◎
The size attribute gives the number of options to show to the user. The size attribute, if specified, must have a value that is a valid non-negative integer greater than zero.
</p>

<div class="algo">
<p>
`select$e 要素 %select の
``表示~size@
は：
</p>
<ol>
	<li>
%属性~値 ~LET %select は ``size$a 属性を［
有するならば その値／
有さないならば ε
］
</li>
	<li>
<p>
~IF［
%属性~値 ~NEQ ε
］：
</p>
		<ol>
			<li>
%結果 ~LET `負でない整数として構文解析する$( %属性~値 )
</li>
			<li>
<p>
~IF［
%結果 ~NIN { `失敗^i, 0† }
］
⇒
~RET %結果
</p>

<p class="trans-note">【†
原文は %結果 が（不適合な値） 0 になる場合に，そのまま %結果 を返しているが、
`失敗^i と等価に扱われるべきであろう。
】</p>
			</li>
		</ol>
	</li>
	<li>
~IF［
%select は ``multiple$a 属性を有する
］
⇒
~RET 4
</li>
	<li>
~RET 1
</li>
</ol>

◎
The display size of a select element is the result of applying the rules for parsing non-negative integers to the value of element's size attribute, if it has one and parsing it is successful. If applying those rules to the attribute's value is not successful, or if the size attribute is absent, then the element's display size is 4 if the element's multiple content attribute is present, and 1 otherwise.
</div>

<div class="algo">
<p>
`select$e 要素 %select の
``選択肢~list@
は、
次を満たす `option$e 要素~すべてからなり，
常に`~tree順序$で~sortするとする
⇒
［
%select の子である
］~OR［
%select の子である `optgroup$e 要素の子である
］
◎
The list of options for a select element consists of all the option element children of the select element, and all the option element children of all the optgroup element children of the select element, in tree order.
</p>
</div>

<p>
``required@a
属性は、
`真偽-属性$である。
指定されたときは、
利用者には，~formを提出する前に値を選択するよう要求されることになる。
◎
The required attribute is a boolean attribute. When specified, the user will be required to select a value before submitting the form.
</p>

<div class="algo">
<p>
`select$e 要素 %select の
`仮入力~label選択肢@
は、
次に従って決定される［
`option$e 要素または ε
］である：
</p>

<ol>
	<li>
<p>
~IF［
%select は次の `条件 (A)^i を満たさない
］
⇒
~RET ε
</p>

<p>
`条件 (A)^i
⇒
［
``required$a 属性を有する
］~AND［
``multiple$a 属性は有さない
］~AND［
``表示~size$ ~EQ 1
］
</p>
	</li>
	<li>
~IF［
%select の``選択肢~list$は空である
］
⇒
~RET ε
</li>
	<li>
%option ~LET %select の``選択肢~list$を成す最初の要素
</li>
	<li>
~IF［
%option の`値$opt ~NEQ 空~文字列
］
⇒
~RET ε
</li>
	<li>
~IF［
%option の親~node ~NEQ %select
（親~nodeは `optgroup$e 要素である）
］
⇒
~RET ε
</li>
	<li>
~RET %option
</li>
</ol>

◎
If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.
</div>

<p>
`select$e 要素は、
上の手続きの `条件 (A)^i を満たすならば，その`仮入力~label選択肢$ ~EQ ε になってはナラナイ。
【これは、作者~向け要件。】
◎
If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1, then the select element must have a placeholder label option.
</p>

<p class="note">注記：
実施においては、
上の段落に言明した要件が適用され得るのは，当の `select$e 要素が［
値 ~GT 1 にされた ``size$a 属性
］を有さないときに限られている。
◎
In practice, the requirement stated in the paragraph above can only apply when a select element does not have a size attribute with a value greater than 1.
</p>

<p><strong>拘束~検証</strong>
⇒
`select$e 要素 %select は、
次を満たしている間は，`欠落である難あり$になる
⇒
［
%select は ``required$a 属性を有する
］~AND［
%select の``選択肢~list$内に次を満たす `option$e 要素 %option は無い
］
⇒
［
%option の`選択状態$opt ~EQ ~T
］~AND［
%option ~NEQ %select の`仮入力~label選択肢$
］
◎
Constraint validation: If the element has its required attribute specified, and either none of the option elements in the select element's list of options have their selectedness set to true, or the only option element in the select element's list of options with its selectedness set to true is the placeholder label option, then the element is suffering from being missing.
</p>

<p>
`select$e 要素 %select が ``multiple$a 属性を有さない下では
— 以下、
%L は %select の``選択肢~list$を表すとする —
~UAは：
◎
↓</p>

<ul>
	<li>
<p>
%select は`不能化されて$feいない場合、
利用者が［
%L 内の `option$e 要素のうち，`不能化されて$optいない任意のもの
］を選べるようにするベキである。
◎
If the multiple attribute is absent, and the element is not disabled, then the user agent should allow the user to pick an option element in its list of options that is itself not disabled.＼
</p>

<div class="p">
<p>
そのような `option$e 要素 %option が，利用者から
``選ばれ@
たときは（ ~click ／ その値を変更してから %select への~focusを他へ移して ／ `~menu~command$ ／ その他の仕組み を通して）、［
関連な利用者ヤリトリ~event（例： `click$et ~event）が~queueされる前
］に，次を走らすモノトスル：
</p>
		<ol>
			<li>
%option の`選択状態$opt ~SET ~T
</li>
			<li>
%option の`~dirtyか$opt ~SET ~T
</li>
			<li>
`選択-更新の通知を送信する$( %select )
</li>
		</ol>

◎
Upon this option element being picked (either through a click, or through unfocusing the element after changing its value, or through a menu command, or through any other mechanism), and before the relevant user interaction event is queued (e.g. before the click event), the user agent must set the selectedness of the picked option element to true, set its dirtiness to true, and then send select update notifications.
</div>
	</li>
	<li>
<p>
ある `option$e 要素 %option に対し，次のいずれかが生じたときは：
</p>
		<ul>
			<li>
%option が %L 内にある下で， %option の `選択状態$opt が ~T に設定されたとき
</li>
			<li>
%option の`選択状態$opt ~EQ ~T の下で， %option が %L に追加されたとき
</li>
		</ul>
<p>
%L 内の %option 以外の `option$e 要素すべてに対し，その`選択状態$optを ~F に設定するモノトスル。
</p>
◎
If the multiple attribute is absent, whenever an option element in the select element's list of options has its selectedness set to true, and whenever an option element with its selectedness set to true is added to the select element's list of options, the user agent must set the selectedness of all the other option elements in its list of options to false.
</li>
	<li>
<p>
［
%select の``表示~size$ ~GT 1
］の下では、
利用者が［
%L 内の `option$e 要素のうち［
`選択状態$opt ~EQ ~T
］なる任意のもの
］を未選択にできるようにするベキである。
◎
If the multiple attribute is absent and the element's display size is greater than 1, then the user agent should also allow the user to request that the option whose selectedness is true, if any, be unselected.＼
</p>

<div class="algo">
<p>
そのような `option$e 要素 %option が，利用者から未選択にするよう要請されたときは、［
関連な利用者ヤリトリ~event（例： `click$et ~event）が~queueされる前
］に，次を走らすモノトスル：
</p>
		<ol>
			<li>
%option の`選択状態$opt ~SET ~F
</li>
			<li>
%option の`~dirtyか$opt ~SET ~T
</li>
			<li>
`選択-更新の通知を送信する$( %select )
</li>
		</ol>
◎
Upon this request being conveyed to the user agent, and before the relevant user interaction event is queued (e.g. before the click event), the user agent must set the selectedness of that option element to false, set its dirtiness to true, and then send select update notifications.
</div>
	</li>
</ul>

<div class="algo">
<p>
`選択状態を設定する~algo@
は、
所与の
( `select$e 要素 %select )
に対し：
</p>
<ol>
	<li>
~IF［
%select は ``multiple$a 属性を有する
］
⇒
~RET
</li>
	<li>
%L ~LET %要素 の``選択肢~list$
</li>
	<li>
%~list ~LET %L を成す要素のうち［
`選択状態$opt ~EQ ~T
］を満たすものからなる同順の~list
</li>
	<li>
<p>
~IF［
%~list は空である
］：
</p>
		<ol>
			<li>
~IF［
%select の``表示~size$ ~NEQ 1
］
⇒
~RET
</li>
			<li>
%L を成す
~EACH( %option )
に対し
⇒
~IF［
%option は`不能化されて$optいない
］
⇒＃
%option の`選択状態$opt ~SET ~T；
~RET
</li>
		</ol>
	</li>
	<li>
~ELSE
⇒
%~list を成す最後の要素~以外の
~EACH( %要素 )
に対し
⇒
%要素 の`選択状態$opt ~SET ~F
</li>
</ol>
◎
The selectedness setting algorithm, given a select element element, is to run the following steps:
• If element's multiple attribute is absent, and element's display size is 1, and no option elements in the element's list of options have their selectedness set to true, then set the selectedness of the first option element in the list of options in tree order that is not disabled, if any, to true, and return.
• If element's multiple attribute is absent, and two or more option elements in element's list of options have their selectedness set to true, then set the selectedness of all but the last option element with its selectedness set to true in the list of options in tree order to false.
</div>

<div class="algo">
<p>
`option$e 用の`~HTML要素~挿入-時の手続き$は、
所与の
( %挿入された~node )
に対し：
</p>
<ol>
	<li>
%親 ~LET %挿入された~node の親
</li>
	<li>
~IF［
%親 は `optgroup$e 要素である
］
⇒
%親 ~SET %親 の親
</li>
	<li>
~IF［
%親 は `select$e 要素である
］
⇒
`選択状態を設定する~algo$( %親 )
</li>
</ol>
◎
The option HTML element insertion steps, given insertedNode, are:
• If insertedNode's parent is a select element, or insertedNode's parent is an optgroup element whose parent is a select element, then run that select element's selectedness setting algorithm.
</div>

<div class="algo">
<p>
`option$e 用の`~HTML要素~除去-時の手続き$は、
所与の
( %除去された~node, %旧-親 )
に対し：
</p>
<ol>
	<li>
~IF［
%旧-親 は `optgroup$e 要素である
］
⇒
%旧-親 ~SET %旧-親 の親
</li>
	<li>
~IF［
%旧-親 は `select$e 要素である
］
⇒
`選択状態を設定する~algo$( %旧-親 )
</li>
</ol>
◎
The option HTML element removing steps, given removedNode and oldParent, are:
• If oldParent is a select element, or oldParent is an optgroup element whose parent is a select element, then run that select element's selectedness setting algorithm.
</div>

<div class="algo">
<p>
`option$e 用の`~HTML要素~移動-時の手続き$は、
所与の
( %移動された~node, %旧-親 )
に対し：
◎
The option HTML element moving steps, given movedNode and oldParent, are:
</p>
<ol>
	<li>
`option$e 用の`~HTML要素~除去-時の手続き$( %移動された~node, %旧-親 )
◎
Run the option HTML element removing steps given movedNode and oldParent.
</li>
	<li>
`option$e 用の`~HTML要素~挿入-時の手続き$( %移動された~node )
◎
Run the option HTML element insertion steps given movedNode.
</li>
</ol>
</div>

<div class="algo">
<p>
`optgroup$e 用の`~HTML要素~除去-時の手続き$は、
所与の
( %除去された~node, %旧-親 )
に対し：
◎
The optgroup HTML element removing steps, given removedNode and oldParent, are:
</p>
<ol>
	<li>
~IF［
%旧-親 は `select$e 要素である
］~AND［
%除去された~node は子として `option$e 要素を有する
］
⇒
`選択状態を設定する~algo$( %旧-親 )
◎
If oldParent is a select element and removedNode has an option child, then run oldParent's selectedness setting algorithm.
</li>
</ol>
</div>

<div class="algo">
<p>
`optgroup$e 用の`~HTML要素~移動-時の手続き$は、
所与の
( %移動された~node, %旧-親 )
に対し：
◎
The optgroup HTML element moving steps, given movedNode and oldParent, are:
</p>
<ol>
	<li>
`optgroup$e 用の`~HTML要素~除去-時の手続き$( %移動された~node, %旧-親 )
◎
Run the optgroup HTML element removing steps given movedNode and oldParent.
</li>
</ol>
</div>

<div class="algo">
<p>
`選択肢~list$を成す ある `option$e 要素 %要素 を
`設定し直すよう依頼-@
されたときは、
次を走らす
</p>
<ol>
	<li>
%親 ~LET %要素 の親
</li>
	<li>
~IF［
%親 は `optgroup$e 要素である
］
⇒
%親 ~SET %親 の親
</li>
	<li>
`選択状態を設定する~algo$( %親 )
</li>
</ol>
◎
If an option element in the list of options asks for a reset, then run that select element's selectedness setting algorithm.
</div>

<p>
`select$e 要素 %select が［
`不能化されて$feいない
］~AND［
``multiple$a 属性を有する
］ならば、
~UAは，
%select の``選択肢~list$を成す各［
`不能化されて$optいない `option$e 要素
］ %option に対し：
◎
If the multiple attribute is present, and the element is not disabled, then the user agent＼
</p>
<ul>
	<li>
%option の`選択状態$optを
``~toggle@
することを利用者に許容するベキである。
◎
should allow the user to toggle the selectedness of the option elements in its list of options that are themselves not disabled.＼
</li>
	<li class="algo">
<p>
利用者が %option を
（~clickや`~menu~command$, その他の仕組みを通して）
``~toggle$したときは、［
関連な利用者ヤリトリ~event（例： `click$et ~event）が~queueされる前
］に，次を走らすモノトスル：
◎
Upon such an element being toggled (either through a click, or through a menu command, or any other mechanism), and before the relevant user interaction event is queued (e.g. before a related click event),＼
</p>
		<ol>
			<li>
%option の`選択状態$opt ~SET ~IS［
%option の`選択状態$opt ~EQ ~F
］
◎
the selectedness of the option element must be changed (from true to false or false to true),＼
</li>
			<li>
%option の`~dirtyか$opt ~SET ~T
◎
the dirtiness of the element must be set to true, and＼
</li>
			<li>
`選択-更新の通知を送信する$( %select )
◎
the user agent must send select update notifications.
</li>
		</ol>
	</li>
</ul>

<div class="algo">
<p>
`選択-更新の通知を送信する@
~algoは、
所与の
( `select$e 要素 %select )
に対し
⇒
`要素~taskを~queueする$( `利用者ヤリトリ~task~source$, %select, 次の手続き )
◎
When the user agent is to send select update notifications,＼
queue an element task on the user interaction task source given the select element to＼
</p>
<div class="algo">
<p>
手続きは：
◎
run these steps:
</p>
		<ol>
			<li>
%select の`利用者~妥当性$ ~SET ~T
◎
Set the select element's user validity to true.
</li>
			<li>
`入力~eventを発火する$( %select, `input$et )
◎
Fire an event named input at the select element, with the bubbles and composed attributes initialized to true.
</li>
			<li>
`入力~eventを発火する$( %select, `change$et )
◎
Fire an event named change at the select element, with the bubbles attribute initialized to true.
</li>
		</ol>
</div>
</div>

<div class="algo">
<p>
`select$e 要素 %select 用の`再設定~algo$は：
◎
The reset algorithm for a select element selectElement is:
</p>
<ol>
	<li>
%select の`利用者~妥当性$ ~SET ~F
◎
Set selectElement's user validity to false.
</li>
	<li>
<p>
%select の``選択肢~list$を成す
~EACH( %option )
に対し：
◎
For each optionElement of selectElement's list of options:
</p>
		<ol>
			<li>
%option の`選択状態$opt ~SET ~IS［
%option は `selected＠#attr-option-selected$a 属性を有する
］
◎
If optionElement has a selected attribute, then set optionElement's selectedness to true; otherwise set it to false.
</li>
			<li>
%option の`~dirtyか$opt ~SET ~F
◎
Set optionElement's dirtiness to false.
</li>
		</ol>
	</li>
	<li>
`選択状態を設定する~algo$( %select )
◎
Run the selectedness setting algorithm given selectElement.
</li>
</ol>
</div>

<p>
`select$e 要素の：
◎
↓</p>
<ul>
	<li>
`form$a 属性は、
要素を ある`~form所有者$に明示的に所有させるために利用される。
◎
The form attribute is used to explicitly associate the select element with its form owner.＼
</li>
	<li>
`name$a 属性は、
要素の名前を表現する。
◎
The name attribute represents the element's name.＼
</li>
	<li>
`disabled$a 属性は、
~controlをヤリトリありでなくして，その値は提出されないようにするために利用される。
◎
The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted.＼
</li>
	<li>
`autocomplete$a 属性は、
~UAが~autofillの挙動をどう供するかを制御する。
◎
The autocomplete attribute controls how the user agent provides autofill behavior.
</li>
</ul>

<p>
`不能化されて$feいない `select$e 要素は、
`変異-可能$feとする。
◎
A select element that is not disabled is mutable.
</p>

<dl class="domintro">

	<dt>%select.``type$m</dt>
	<dd>
要素が ``multiple$a 属性を［
有するならば `select-multiple^l ／
有さないならば `select-one^l
］を返す。
◎
Returns "select-multiple" if the element has a multiple attribute, and "select-one" otherwise.
</dd>

	<dt>%select.``options$m</dt>
	<dd>
``選択肢~list$ を表現する `HTMLOptionsCollection$I を返す。
◎
Returns an HTMLOptionsCollection of the list of options.
</dd>

	<dt>%select.``length$m [ = %value ]</dt>
	<dd>
``選択肢~list$を成す要素の個数を返す。
◎
Returns the number of elements in the list of options.
</dd>
	<dd>
より少ない数に設定された場合、
`select$e 内の `option$e 要素たちを，その個数になるよう切落す。
◎
When set to a smaller number, truncates the number of option elements in the select.
</dd>
	<dd>
より多い数に設定された場合、
新たな空欄の `option$e 要素を `select$e に追加する。
◎
When set to a greater number, adds new blank option elements to the select.
</dd>

	<dt>%element = %select.``item$m(%index)</dt>

	<dt>%select[%index]</dt>
	<dd>
``選択肢~list$内の %~index 番の~itemを返す。
◎
Returns the item with index index from the list of options. The items are sorted in tree order.
</dd>

	<dt>%element = %select.``namedItem$m(%name)</dt>
	<dd>
``選択肢~list$内に次を満たす~itemが［
在るならば それらのうち最初のもの ／
無いならば ~NULL
］返す
⇒
［
%name ~EQ `~ID$
］~OR［
%name ~EQ `name＠#attr-option-name$a
］
◎
Returns the first item with ID or name name from the list of options.
◎
Returns null if no element with that ID could be found.
</dd>

	<dt>%select.``add$m(%element [, %before ])</dt>
	<dd>
%before にて与えられた~nodeの前に， %element を挿入する。
◎
Inserts element before the node given by before.
</dd>
	<dd>
%before 引数は、
``選択肢~list$を成す要素の他に，数もとり得る。
数の場合、
%before は``選択肢~list$内の %before 番の~itemとして解釈される。
◎
The before argument can be a number, in which case element is inserted before the item with that number, or an element from the list of options, in which case element is inserted before that element.
</dd>
	<dd>
%before が［
省略されている ／ ~NULL ／
範囲外の数
］の場合、
%element は ~listの末尾に追加されることになる。
◎
If before is omitted, null, or a number out of range, then element will be added at the end of the list.
</dd>
	<dd>
%element が %select の先祖である場合、
`HierarchyRequestError$E 例外が投出される。
◎
This method will throw a "HierarchyRequestError" DOMException if element is an ancestor of the element into which it is to be inserted.
</dd>

	<dt>%select.``selectedOptions$m</dt>
	<dd>
``選択肢~list$内の選択されているものからなる `HTMLCollection$I を返す。
◎
Returns an HTMLCollection of the list of options that are selected.
</dd>

	<dt>%select.``selectedIndex$m [ = %value ]</dt>
	<dd>
選択されている~itemが［
在るならば それらのうち最初のものの~index ／
無いならば −1
］を返す。
◎
Returns the index of the first selected item, if any, or −1 if there is no selected item.
</dd>
	<dd>
設定して，選択を変更できる。
◎
Can be set, to change the selection.
</dd>

	<dt>%select.``value$m [ = %value ]</dt>
	<dd>
選択されている~itemが［
在るならば それらのうち最初のものの`値$opt ／
無いならば 空~文字列
］を返す。
◎
Returns the value of the first selected item, if any, or the empty string if there is no selected item.
</dd>
	<dd>
設定して，選択を変更できる。
◎
Can be set, to change the selection.
</dd>

	<dt>%select.``showPicker()$m</dt>
	<dd>
%select 用に適用-可能な~pickerがあれば、
利用者が値を選択できるよう，それを示す。
◎
Shows any applicable picker UI for select, so that the user can select a value.
</dd>
	<dd>
%select が`変異-可能$feでない場合、
`InvalidStateError$E 例外が投出される。
◎
Throws an "InvalidStateError" DOMException if select is not mutable.
</dd>
	<dd>
`一過な作動化を有して$いない間に~callされた場合、
`NotAllowedError$E 例外が投出される。
◎
Throws a "NotAllowedError" DOMException if called without transient user activation.
</dd>
	<dd>
%select が非同一-生成元 `iframe$e の内側にある場合、
`SecurityError$E 例外が投出される。
◎
Throws a "SecurityError" DOMException if select is inside a cross-origin iframe.
</dd>
	<dd>
%select が`具現化されて$いない場合、
`NotSupportedError$E 例外が投出される。
◎
Throws a "NotSupportedError" DOMException if select is not being rendered.
</dd>
</dl>

<div class="algo">
``type@m
取得子~手続きは
⇒
~RET コレは ``multiple$a 属性を［
有するならば `select-multiple^l ／
有さないならば `select-one^l
］
◎
The type IDL attribute, on getting, must return the string "select-one" if the multiple attribute is absent, and the string "select-multiple" if the multiple attribute is present.
</div>

<div class="algo">
``options@m
取得子~手続きは
⇒
~RET 次のようにされた `HTMLOptionsCollection$I ~obj
⇒＃
根 ~SET コレ,
~filterは コレの``選択肢~list$を成す各~要素に合致する
◎
The options IDL attribute must return an HTMLOptionsCollection rooted at the select node, whose filter matches the elements in the list of options.
</div>

<p>
`HTMLSelectElement$I ~objは、
その ``options$m 取得子~手続きが返す~obj
— 以下では、
~objの
`~option群@
と称される —
を そのまま映し出す。
それが`~supportする~prop~index$は、
常に，`~option群$のそれと同じとする。
◎
The options collection is also mirrored on the HTMLSelectElement object. The supported property indices at any instant are the indices supported by the object returned by the options attribute at that instant.
</p>

<div class="algo">
``length@m
取得子~手続きは
⇒
~RET コレの`~option群$が成す`~collectionにより表現され$る~nodeの個数
◎
The length IDL attribute must return the number of nodes represented by the options collection.＼
</div>

<div class="algo">
``length$m 設定子~手続きは
⇒
コレの`~option群$の `length$m 設定子~手続き( 所与の値 )
◎
On setting, it must act like the attribute of the same name on the options collection.
</div>

<div class="algo">
``item(index)@m
~method手続きは
⇒
~RET コレの`~option群$の `item$m ~method手続き( %index )
◎
The item(index) method must return the value returned by the method of the same name on the options collection, when invoked with the same argument.
</div>

<div class="algo">
``namedItem(name)@m
~method手続きは
⇒
~RET コレの`~option群$の `namedItem$m ~method手続き( %name )
◎
The namedItem(name) method must return the value returned by the method of the same name on the options collection, when invoked with the same argument.
</div>

<p>
``setter@m
用の［
`新たな有index~propの値を設定する手続き$／
`既存の有index~propの値を設定する手続き$
］は、
代わりに，コレの`~option群$の`対応する~algo＠~HTMLcdom#dom-htmloptionscollection-setter$を走らすモノトスル。
◎
When the user agent is to set the value of a new indexed property or set the value of an existing indexed property for a select element, it must instead run the corresponding algorithm on the select element's options collection.
</p>

<div class="algo">
``add(element, before)@m
~method手続きは
⇒
コレの`~option群$の `add$m ~method手続き( %element, %before )
◎
Similarly, the add(element, before) method must act like its namesake method on that same options collection.
</div>

<div class="algo">
<p>
``remove(index)@m
~method手続きは：
◎
The remove() method must＼
</p>
<ol>
	<li>
~IF［
%index ~NEQ ε
］
⇒
コレの`~option群$の `remove$m ~method手続き( %index )
◎
act like its namesake method on that same options collection when it has arguments,＼
</li>
	<li>
~ELSE
⇒
［
コレが実装する `ChildNode$I ~interface（ `HTMLSelectElement$I ~interfaceが継承する `Element$I ~interfaceが実装する それ）
］の `remove＠~DOM4#dom-childnode-remove$m ~method手続き()
◎
and like its namesake method on the ChildNode interface implemented by the HTMLSelectElement ancestor interface Element when it has no arguments.
</li>
</ol>
</div>

<div class="algo">
``selectedOptions@m
取得子~手続きは
⇒
~RET 次のようにされた `HTMLCollection$I ~obj
⇒＃
根 ~SET コレ,
~filterは コレの``選択肢~list$を成す要素のうち［ `選択状態$opt ~EQ ~T ］を満たすものに合致する
◎
The selectedOptions IDL attribute must return an HTMLCollection rooted at the select node, whose filter matches the elements in the list of options that have their selectedness set to true.
</div>

<div class="algo">
<p>
``selectedIndex@m
取得子~手続きは：
◎
The selectedIndex IDL attribute, on getting, must＼
</p>
<ol>
	<li>
コレの``選択肢~list$を成す
~EACH( %option )
に対し
⇒
~IF［
%option の`選択状態$opt ~EQ ~T
］
⇒
~RET %option の`~index$opt
◎
return the index of the first option element in the list of options in tree order that has its selectedness set to true, if any.＼
</li>
	<li>
~RET −1
◎
If there isn't one, then it must return −1.
</li>
</ol>
</div>

<div class="algo">
<p>
``selectedIndex$m 設定子~手続きは：
◎
On setting, the selectedIndex attribute must＼
</p>
<ol>
	<li>
<p>
コレの``選択肢~list$を成す
~EACH( %option )
に対し：
</p>
		<ol>
			<li>
%option の`選択状態$opt ~SET ~F
</li>
			<li>
~IF［
%option の`~index$opt ~NEQ 所与の値
］
⇒
~CONTINUE
</li>
			<li>
%option の`選択状態$opt ~SET ~T
</li>
			<li>
%option の`~dirtyか$opt ~SET ~T
</li>
		</ol>
◎
set the selectedness of all the option elements in the list of options to false, and then the option element in the list of options whose index is the given new value, if any, must have its selectedness set to true and its dirtiness set to true.
</li>
</ol>

<p class="note">注記：
これは、
`select$e 要素~内の どの要素も［
`選択状態$opt ~NEQ ~T
］にさせ得る
— 要素が［
``multiple$a 属性を有さない
］~AND［
``表示~size$ ~EQ 1
］の場合でも。
◎
This can result in no element having a selectedness set to true even in the case of the select element having no multiple attribute and a display size of 1.
</p>
</div>

<div class="algo">
<p>
``value@m
取得子~手続きは：
◎
The value IDL attribute, on getting, must＼
</p>
<ol>
	<li>
コレの``選択肢~list$を成す
~EACH( %option )
に対し
⇒
~IF［
%option の`選択状態$opt ~EQ ~T
］
⇒
~RET %option の`値$opt
◎
return the value of the first option element in the list of options in tree order that has its selectedness set to true, if any.＼
</li>
	<li>
~RET 空~文字列
◎
If there isn't one, then it must return the empty string.
</li>
</ol>
</div>

<div class="algo">
<p>
``value$m 設定子~手続きは：
◎
On setting, the value attribute must＼
</p>
<ol>
	<li>
コレの``選択肢~list$を成す
~EACH( %option )
に対し
⇒
%option の`選択状態$opt ~SET ~F
◎
set the selectedness of all the option elements in the list of options to false,＼
</li>
	<li>
コレの``選択肢~list$を成す
~EACH( %option )
に対し
⇒
~IF［
%option の`値$opt ~EQ 所与の値
］
⇒＃
%option の`選択状態$opt ~SET ~T；
%option の`~dirtyか$opt ~SET ~T；
~BREAK
◎
and then the first option element in the list of options, in tree order, whose value is equal to the given new value, if any, must have its selectedness set to true and its dirtiness set to true.
</li>
</ol>

<p class="note">注記：
これは、
`select$e 要素~内の どの要素も［
`選択状態$opt ~NEQ ~T
］にさせ得る
— 要素が［
``multiple$a 属性を有さない
］~AND［
``表示~size$ ~EQ 1
］の場合でも。
◎
This can result in no element having a selectedness set to true even in the case of the select element having no multiple attribute and a display size of 1.
</p>
</div>

<div>
<p>
``multiple@m
~IDL属性は、
``multiple$a 内容~属性を`反映する$モノトスル。
</p>

<p>
``required@m
~IDL属性は、
``required$a 内容~属性を`反映する$モノトスル。
</p>

<p>
``size@m
~IDL属性は、
`既定の値$は 0 とする下で，
``size$a 内容~属性を`反映する$モノトスル。
</p>
◎
The multiple, required, and size IDL attributes must reflect the respective content attributes of the same name.＼
The size IDL attribute has a default value of 0.
</div>

<p class="note">注記：
歴史的な理由から、
``size$m ~IDL属性の値の既定の値は，利用されている実際の~sizeを返さない。
``size$a 内容~属性が無い場合、
それは， ``multiple$a 属性が［
在るならば 4 ／ 無いならば 1
］になる。
◎
For historical reasons, the default value of the size IDL attribute does not return the actual size used, which, in the absence of the size content attribute, is either 1 or 4 depending on the presence of the multiple attribute.
</p>

<p>
`select$e 要素には、
次に挙げる~IDL~memberもある：
◎
↓</p>
<ul >
	<li>
次に挙げるものは、
`拘束~検証~API$の一部を成す
⇒＃
`willValidate$m,
`validity$m,
`validationMessage$m,
`checkValidity()$m,
`reportValidity()$m,
`setCustomValidity()$m
◎
The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API.＼
</li>
	<li>
`labels$m は、
要素を指している `label$e からなる~listを供する。
◎
The labels IDL attribute provides a list of the element's labels.＼
</li>
	<li>
次に挙げるものは、
要素の~form~APIの一部を成す
⇒＃
`disabled$m,
`form$m,
`name$m
◎
The disabled, form, and name IDL attributes are part of the element's forms API.
</li>
</ul>

<div class="example">
<p>
`select$e 要素を利用して，利用者が単独の選択肢を選択できるような選択肢の集合を利用者に提供する例
— 予め，既定の選択肢が選択されている：
◎
The following example shows how a select element can be used to offer the user with a set of options from which the user can select a single option. The default option is preselected.
</p>

`select-1^xCode

<p>
既定の選択肢が無い場合、
代わりに`仮入力~label選択肢$を利用できる：
◎
When there is no default option, a placeholder can be used instead:
</p>

`select-2^xCode
</div>

<div class="example">
<p>
利用者が、
提供された選択肢の集合から いくつでも選択できるようにする例
— すべての選択肢が，既定で選択されている：
◎
Here, the user is offered a set of options from which they can select any number. By default, all five options are selected.
</p>

`select-3^xCode
</div>

<div class="example">
<p>
利用者が 1 個~以上の~itemを選択する必要がある~UI例：
◎
Sometimes, a user has to select one or more items. This example shows such an interface.
</p>

`select-4^xCode
</div>

<div class="example">
<p>
ときには、
分離子があると有用になる：
◎
Occasionally it can be useful to have a separator:
</p>

`select-5^xCode
</div>

			</section>
			<section id="the-datalist-element">
<h4 title="The datalist element">4.10.8. ``datalist^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$ ／ `句ng内容$
◎
Flow content.
◎
Phrasing content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
<p>
次のいずれか一方：
</p>
		<ul>
			<li>
`句ng内容$
</li>
			<li>
0 個~以上の［
次のいずれかに該当する要素
］
⇒＃
`option$e,
`~scriptを~supportする要素$
</li>
		</ul>
◎
Either: phrasing content.
◎
Or: Zero or more option and script-supporting elements.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`datalist$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window]
interface `HTMLDataListElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [SameObject] readonly attribute `HTMLCollection$I ``options$m;
};
</pre>

</dd>
</dl>

<p>
`datalist$e
要素は、［［
他の~control用の定義済み選択肢
］を表現する［
`option$e 要素の集合
］］を表現する。
描画においては、
`datalist$e 要素は，何も`表現-$しない
— それらの子も含め，隠されるベキである。
◎
The datalist element represents a set of option elements that represent predefined options for other controls. In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.
</p>

<p>
`datalist$e 要素は、
2 つの仕方で利用できる：
◎
↓</p>

<ul>
	<li>
<p>
最も単純な事例では、
要素は単に いくつかの `option$e 要素を子に有する。
◎
The datalist element can be used in two ways. In the simplest case, the datalist element has just option element children.
</p>

<div class="example">
`datalist-1^xCode
</div>

	</li>
	<li>
<p>
より手の込んだ事例では、
`datalist$e 要素は，それを~supportしない~client用に表示される内容を与えれる。
この事例では、
各 `option$e 要素は， `datalist$e 要素の内側にある `select$e 要素の内側に供されている。
◎
In the more elaborate case, the datalist element can be given contents that are to be displayed for down-level clients that don't support datalist. In this case, the option elements are provided inside a select element inside the datalist element.
</p>

<div class="example">
`datalist-2^xCode
</div>

	</li>
</ul>

<p>
`datalist$e 要素は、
`input$e 要素に，その `list$a 属性を通して結び付けられる。
◎
The datalist element is hooked up to an input element using the list attribute on the input element.
</p>

<p>
`datalist$e 要素の子孫である `option$e 要素のうち，次を満たすものは、
示唆を表現し，［
`値$opt, `~label$opt
］を有する
⇒
［
`不能化されて$optいない
］~AND［
`値$optは空でない文字列である
］
◎
Each option element that is a descendant of the datalist element, that is not disabled, and whose value is a string that isn't the empty string, represents a suggestion. Each suggestion has a value and a label.
</p>

<dl class="domintro">
	<dt>%datalist.``options$m</dt>
	<dd>
`datalist$e 要素の
`option$e 要素からなる `HTMLCollection$I を返す。
◎
Returns an HTMLCollection of the option elements of the datalist element.
</dd>
</dl>

<div class="algo">
``options@m
取得子~手続きは
⇒
~RET 次のようにされた `HTMLCollection$I
⇒＃
根 ~SET コレ,
~filterは `option$e 要素に合致する
◎
The options IDL attribute must return an HTMLCollection rooted at the datalist node, whose filter matches option elements.
</div>

<p><strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`拘束~検証の対象外$になる
⇒
要素の先祖に `datalist$e 要素がある
◎
Constraint validation: If an element has a datalist element ancestor, it is barred from constraint validation.
</p>

			</section>
			<section id="the-optgroup-element">
<h4 title="The optgroup element">4.10.9. ``optgroup^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
なし。
◎
None.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`select$e 要素の子として。
◎
As a child of a select element.
</dd>

	<dt>`内容~model$</dt>
	<dd>
0 個~以上の［
次のいずれかに該当する要素
］
⇒＃
`option$e,
`~scriptを~supportする要素$
◎
Zero or more option and script-supporting elements.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
`optgroup$e 要素の`終了~tag$は、
次が満たされるならば，省略できる
⇒
［
直後に［
別の `optgroup$e ／ `hr$e
］要素が来る
］~OR［
親~要素~内に後続する内容は無い
］
◎
An optgroup element's end tag can be omitted if the optgroup element is immediately followed by another optgroup element, if it is immediately followed by an hr element, or if there is no more content in the parent element.


</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
``disabled$a
— この~form~controlは不能化されるかどうか。
◎
disabled — Whether the form control is disabled
</dd>
	<dd>
``label$a
— 利用者から可視な~label。
◎
label — User-visible label
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`optgroup$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window]
interface `HTMLOptGroupElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute boolean ``disabled$m;
  [`CEReactions$] attribute DOMString ``label$m;
};
</pre>

</dd>
</dl>

<p>
`optgroup$e 要素は、
共通な~labelを伴う `option$e 要素たちが成す~groupを`表現-$する。
◎
The optgroup element represents a group of option elements with a common label.
</p>

<p>
この~groupは、
`optgroup$e 要素の子である `option$e 要素たちからなる。
◎
The element's group of option elements consists of the option elements that are children of the optgroup element.
</p>

<p>
~UAは、
そのような~groupを `select$e 要素~内に示すときは，
~groupを成す `option$e 要素たちを
— それらが互いに関係しているように —
他の `option$e 要素から分離して示すベキである。
◎
When showing option elements in select elements, user agents should show the option elements of such groups as being related to each other and separate from other option elements.
</p>

<p>
``disabled@a
属性は、
`真偽-属性$である
— それは、
~groupを成す `option$e 要素たちを まとめて`不能化する＠#concept-option-disabled$ことに利用できる。
◎
The disabled attribute is a boolean attribute and can be used to disable a group of option elements together.
</p>

<p>
``label@a
属性は、
指定されなければナラナイ。
その値は、
~groupの名前を与える。
~UIの目的においては、
~UAは，この属性の値を利用して `select$e 要素~内の `option$e 要素~groupに~labelを与えるベキである。
◎
The label attribute must be specified. Its value gives the name of the group, for the purposes of the user interface. User agents should use this attribute's value when labeling the group of option elements in a select element.
</p>

<div>
<p>
``disabled@m
~IDL属性は、
``disabled$a 内容~属性を`反映する$モノトスル。
</p>

<p>
``label@m
~IDL属性は、
``label$a 内容~属性を`反映する$モノトスル。
</p>
◎
The disabled and label attributes must reflect the respective content attributes of the same name.
</div>

<p class="note">注記：
`optgroup$e 要素を選択する仕方は無い。
選択できるのは `option$e 要素に限られる。
`optgroup$e 要素は、
単に`option$e 要素~groupに~labelを供するに過ぎない。
◎
There is no way to select an optgroup element. Only option elements can be selected. An optgroup element merely provides a label for a group of option elements.
</p>

<div class="example">
<p>
`select$e ~drop-down ~widget内に 3 種の課程からなる講義を提供する例：
◎
The following snippet shows how a set of lessons from three courses could be offered in a select drop-down widget:
</p>

`optgroup-1^xCode
</div>

			</section>
			<section id="the-option-element">
<h4 title="The option element">4.10.10. ``option^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
なし。
◎
None.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`select$e 要素の子として。
◎
As a child of a select element.
</dd>
	<dd>
`datalist$e 要素の子として。
◎
As a child of a datalist element.
</dd>
	<dd>
`optgroup$e 要素の子として。
◎
As a child of an optgroup element.
</dd>

	<dt>`内容~model$</dt>
	<dd>
要素は［
``label$a 属性を有する
］~AND［
``value$a 属性を有する
］場合に限り
⇒
`なし$。
◎
If the element has a label attribute and a value attribute: Nothing.
</dd>
	<dd>
要素は［
``label$a 属性を有する
］~AND［
``value$a 属性を有さない
］場合に限り
⇒
`~text$。
◎
If the element has a label attribute but no value attribute: Text.
</dd>
	<dd>
要素は［
``label$a 属性を有さない
］~AND［
`datalist$e 要素の子でない
］場合に限り
⇒
`要素間~空白$でない`~text$。
◎
If the element has no label attribute and is not a child of a datalist element: Text that is not inter-element whitespace.
</dd>
	<dd>
要素は［
``label$a 属性を有する
］~AND［
`datalist$e 要素の子である
］場合に限り
⇒
`~text$。
◎
If the element has no label attribute and is a child of a datalist element: Text.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
`option$e 要素の`終了~tag$は、
次が満たされるならば，省略できる
⇒
［
直後に［
別の `option$e ／ `optgroup$e ／ `hr$e
］要素が来る
］~OR［
親~要素~内に後続する内容は無い
］
◎
An option element's end tag can be omitted if the option element is immediately followed by another option element, if it is immediately followed by an optgroup element, if it is immediately followed by an hr element, or if there is no more content in the parent element.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
``disabled$a
— この~form~controlは不能化されるかどうか。
◎
disabled — Whether the form control is disabled
</dd>
	<dd>
``label$a
— 利用者から可視な~label。
◎
label — User-visible label
</dd>
	<dd>
``selected$a
— この選択肢が既定ので選択されるかどうか。
◎
selected — Whether the option is selected by default
</dd>
	<dd>
``value$a
— `~form提出$用に利用される値。
◎
value — Value to be used for form submission
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`option$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window,
 `LegacyFactoryFunction$=``Option$m(optional DOMString %text = "", optional DOMString %value, optional boolean %defaultSelected = false, optional boolean %selected = false)]
interface `HTMLOptionElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute boolean ``disabled$m;
  readonly attribute `HTMLFormElement$I? ``form$m;
  [`CEReactions$] attribute DOMString ``label$m;
  [`CEReactions$] attribute boolean ``defaultSelected$m;
  attribute boolean ``selected$m;
  [`CEReactions$] attribute DOMString ``value$m;

  [`CEReactions$] attribute DOMString ``text$m;
  readonly attribute long ``index$m;
};
</pre>

</dd>
</dl>

<p>
`option$e 要素は、［
`select$e 要素~内の選択肢
］, または［
`datalist$e 要素~内の示唆~listの一部
］を`表現-$する。
◎
The option element represents an option in a select element or as part of a list of suggestions in a datalist element.
</p>

<p>
`select$e 要素の定義にて述べた一定の状況下では、
`option$e 要素は `select$e 要素の`仮入力~label選択肢$になり得る。
`仮入力~label選択肢$は、
実際の選択肢を表現しない代わりに
`select$e ~controlの~labelを表現する。
◎
In certain circumstances described in the definition of the select element, an option element can be a select element's placeholder label option. A placeholder label option does not represent an actual option, but instead represents a label for the select control.
</p>

<div class="p">
<p>
``disabled@a
属性は、
`真偽-属性$である。
`option$e 要素は、
~OR↓ を満たすとき，
`不能化されて@opt
いるとされる：
</p>
		<ul>
			<li>
``disabled$a 属性を有する
</li>
			<li>
`disabled＠#attr-optgroup-disabled$a 属性を有する `optgroup$e 要素の子である
</li>
		</ul>
◎
The disabled attribute is a boolean attribute. An option element is disabled if its disabled attribute is present or if it is a child of an optgroup element whose disabled attribute is present.
</div>

<p>
【！＊？#attr-option-disabled】
`option$e 要素が`不能化されて$optいる間は、
`利用者ヤリトリ~task~source$から`~queueされ＠~WAPI#queue-a-task$る どの `click$et ~eventも，要素に配送しないモノトスル。
◎
An option element that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.
</p>

<p>
``label@a
属性は、
要素の~labelを供する。
`option$e 要素の
`~label@opt
は、［［
要素は ``label$a 内容~属性を有していて，その値 ~NEQ 空~文字列
］ならば その値 ／
~ELSE_ 要素の``text$m ~IDL属性の値
］になる。
◎
The label attribute provides a label for element. The label of an option element is the value of the label content attribute, if there is one and its value is not the empty string, or, otherwise, the value of the element's text IDL attribute.
</p>

<p>
``label$a 内容~属性に指定する値は、
空であってはナラナイ。
◎
The label content attribute, if specified, must not be empty.
</p>

<p>
``value@a
属性は、
要素の値を供する。
`option$e 要素の
`値@opt
は、［
要素は ``value$a 内容~属性を有するならば その値 ／
~ELSE_ 要素の ``text$m ~IDL属性の値
］になる。
◎
The value attribute provides a value for element. The value of an option element is the value of the value content attribute, if there is one, or, if there is not, the value of the element's text IDL attribute.
</p>

<p>
``selected@a
属性は、
`真偽-属性$である。
それは、
要素の既定の`選択状態$optを表現する。
◎
The selected attribute is a boolean attribute. It represents the default selectedness of the element.
</p>

<p>
`option$e 要素の
`~dirtyか@opt
は、
真偽-状態であり，初期~時には ~F とする。
それは
``selected$a 内容~属性を［
追加する／除去する
］ことが効果を及ぼすかどうかを制御する。
◎
The dirtiness of an option element is a boolean state, initially false. It controls whether adding or removing the selected content attribute has any effect.
</p>

<p>
`option$e 要素の
`選択状態@opt
は、
真偽-状態であり，初期~時には ~F とする。
他が指定されない限り，要素の作成-時には、
要素の`選択状態$optは，［
要素が ``selected$a 属性を有する
］ならば ~T に設定されるモノトスル。
［
`~dirtyか$opt ~EQ ~F
］の下では、
``selected$a 属性が `option$e 要素［
に追加される ／ から`除去される^em
］度に、
その`選択状態$optは，［
~T ／ ~F
］に設定されるモノトスル。
◎
The selectedness of an option element is a boolean state, initially false. Except where otherwise specified, when the element is created, its selectedness must be set to true if the element has a selected attribute. Whenever an option element's selected attribute is added, if its dirtiness is false, its selectedness must be set to true. Whenever an option element's selected attribute is removed, if its dirtiness is false, its selectedness must be set to false.
</p>

<p class="note">注記：
``Option()$m
構築子は、
3 個~以下の引数で~callされたときは、
`選択状態$optの初期~状態を上書きして
— ［
3 個目の引数 ~EQ ~T
］の場合（ ``selected$a 属性は設定されることを含意する）であっても —
状態は 常に ~F になるようにする。
4 個目の引数を利用すれば、
初期の`選択状態$opt状態を明示的に設定できる。
◎
The Option() constructor, when called with three or fewer arguments, overrides the initial state of the selectedness state to always be false even if the third argument is true (implying that a selected attribute is to be set). The fourth argument can be used to explicitly set the initial selectedness state when using the constructor.
</p>

<p>
`select$e 要素が `multiple＠#attr-select-multiple$a 属性を有さない場合、
その子孫に［
``selected$a 属性を有する
］ような `option$e 要素が複数~在ってはナラナイ。
◎
A select element whose multiple attribute is not specified must not have more than one descendant option element with its selected attribute set.
</p>

<p>
`option$e 要素 %option の
`~index@opt
は、［
%option が ある`選択肢~list$内に含まれるならば その~list内で %option より前に来る
`option$e 要素の個数 ／
~ELSE_ 0 †
］とする。
【† ~listの先頭にあるときと区別がつかないことになる。】
◎
An option element's index is the number of option elements that are in the same list of options but that come before it in tree order. If the option element is not in a list of options, then the option element's index is zero.
</p>

<dl class="domintro">

	<dt>%option.``selected$m</dt>
	<dd>
要素が選択されているならば ~T を返す。
他の場合は ~F を返す。
◎
Returns true if the element is selected, and false otherwise.
</dd>
	<dd>
設定して，この要素の現在の状態を上書きできる。
◎
Can be set, to override the current state of the element.
</dd>

	<dt>%option.``index$m</dt>
	<dd>
`select$e 要素の`~option群$における要素の~indexを返す。
【！`options＠#dom-select-options$m ~list】
◎
Returns the index of the element in its select element's options list.
</dd>

	<dt>%option.``form$m</dt>
	<dd>
要素が属する `form$e 要素が［
在るならば それ ／
無いならば ~NULL
］を返す。
◎
Returns the element's form element, if any, or null otherwise.
</dd>

	<dt>%option.``text$m</dt>
	<dd>
~ASCII空白は縮約され， `script$e 要素は飛ばされることを除いて、
`textContent$m と同じ。
◎
Same as textContent, except that spaces are collapsed and script elements are skipped.
</dd>

	<dt>%option = new ``Option( [ text [, value [, defaultSelected [, selected ] ] ] ] )$m</dt>
	<dd>
新たな `option$e 要素を返す。
◎
Returns a new option element.
</dd>
	<dd>
%text 引数は、
要素の内容を設定する。
◎
The text argument sets the contents of the element.
</dd>
	<dd>
%value 引数は ``value$a 属性を設定する。
◎
The value argument sets the value attribute.
</dd>
	<dd>
%defaultSelected 引数は ``selected$a 属性を設定する。
◎
The defaultSelected argument sets the selected attribute.
</dd>
	<dd>
%selected 引数は、
要素が選択されるかどうかを設定する。
省略された場合、［
%defaultSelected 引数 ~EQ ~T
］であっても，要素は選択されない。
◎
The selected argument sets whether or not the element is selected. If it is omitted, even if the defaultSelected argument is true, the element is not selected.
</dd>
</dl>

<p>
``disabled@m
~IDL属性は、
``disabled$a 内容~属性を`反映する$モノトスル。
◎
The disabled IDL attribute must reflect the content attribute of the same name.＼
</p>

<p>
``defaultSelected@m
~IDL属性は、
``selected$a 内容~属性を`反映する$モノトスル。
◎
The defaultSelected IDL attribute must reflect the selected content attribute.
</p>

<div class="algo">
``label@m
取得子~手続きは
⇒
~RET ［
コレは ``label$a  内容~属性を有するならば その値 ／
~ELSE_ コレの`~label$opt
］
◎
The label IDL attribute, on getting, if there is a label content attribute, must return that attribute's value; otherwise, it must return the element's label.＼
</div>

<div class="algo">
``label$m 設定子~手続きは
⇒
コレの ``label$a 内容~属性を所与の値に設定する
◎
On setting, the element's label content attribute must be set to the new value.
</div>

<div class="algo">
``value@m
取得子~手続きは
⇒
~RET コレの`値$opt
◎
The value IDL attribute, on getting, must return the element's value.＼
</div>

<div class="algo">
``value$m 設定子~手続きは
⇒
コレの ``value$a 内容~属性を所与の値に設定する
◎
On setting, the element's value content attribute must be set to the new value.
</div>

<div class="algo">
``selected@m
取得子~手続きは
⇒
~RET コレの`選択状態$opt
◎
The selected IDL attribute, on getting, must return true if the element's selectedness is true, and false otherwise.＼
</div>

<div class="algo">
<p>
``selected$m 設定子~手続きは：
</p>
<ol>
	<li>
コレの`選択状態$opt ~SET 所与の値
</li>
	<li>
コレの`~dirtyか$opt  ~SET ~T
</li>
	<li>
コレを`設定し直すよう依頼-$する
</li>
</ol>
◎
On setting, it must set the element's selectedness to the new value, set its dirtiness to true, and then cause the element to ask for a reset.
</div>

<div class="algo">
``index@m
取得子~手続きは
⇒
~RET コレの`~index$opt
◎
The index IDL attribute must return the element's index.
</div>

<div class="algo">
<p>
``text@m
取得子~手続きは：
</p>
<ol>
	<li>
%結果 ~LET 次に該当する `Text$I ~node【の~data】すべてを`~tree順序$で連結した結果
⇒
コレの子孫であって，コレの子孫である［
`script$e ／
~SVG `script＠~SVGinteract#elementdef-script$e
］要素の子孫ではない
</li>
	<li>
~RET `~ASCII空白を剥いで縮約する$( %結果 )
</li>
</ol>
◎
The text IDL attribute, on getting, must return the result of stripping and collapsing ASCII whitespace from the concatenation of data of all the Text node descendants of the option element, in tree order, excluding any that are descendants of descendants of the option element that are themselves script or SVG script elements.
</div>

<div class="algo">
``text$m 設定子~手続きは
⇒
コレの`全~内容を文字列に置換する$( 所与の値 )
◎
The text attribute's setter must string replace all with the given value within this element.
</div>

<div class="algo">
<p>
``form@m
取得子~手続きは：
</p>
<ol>
	<li>
%select ~LET コレの親
</li>
	<li>
~IF［
%select は `optgroup$e 要素である
］
⇒
%select ~SET %select の親
</li>
	<li>
~IF［
%select は `select$e 要素である
］
⇒
~RET %select の `form$m 取得子~手続き()
</li>
	<li>
~RET ~NULL
</li>
</ol>
◎
The form IDL attribute's behavior depends on whether the option element is in a select element or not. If the option has a select element as its parent, or has an optgroup element as its parent and that optgroup element has a select element as its parent, then the form IDL attribute must return the same value as the form IDL attribute on that select element. Otherwise, it must return null.
</div>

<div class="algo">
<p>
``Option(text, value, defaultSelected, selected)@m
は、
`HTMLOptionElement$I ~objを作成する旧来の~factory関数である（
`createElement()$m などの~DOMによる~factory~methodに加えて供されている）。
その~method手続きは：
◎
A legacy factory function is provided for creating HTMLOptionElement objects (in addition to the factory methods from DOM such as createElement()): Option(text, value, defaultSelected, selected).＼
◎
When invoked, the legacy factory function must perform the following steps:
</p>
<ol>
	<li>
%文書 ~LET `現在の大域~obj$に`結付けられた文書$
◎
Let document be the current global object's associated Document.
</li>
	<li>
%option ~LET `要素を作成する$( %文書, `option^l, `~HTML名前空間$ )
◎
Let option be the result of creating an element given document, "option", and the HTML namespace.
</li>
	<li>
~IF［
%text ~NEQ 空~文字列
］
⇒
%option に次のようにされた新たな `Text$I ~nodeを付加する
⇒
~data ~SET %text
◎
If text is not the empty string, then append to option a new Text node whose data is text.
</li>
	<li>
~IF［
%value ~NEQ ε
］
⇒
%option の`属性~値を設定する$( "``value$a", %value )
◎
If value is given, then set an attribute value for option using "value" and value.
</li>
	<li>
~IF［
%defaultSelected ~EQ ~T
］
⇒
%option の`属性~値を設定する$( "``selected$a", 空~文字列 )
◎
If defaultSelected is true, then set an attribute value for option using "selected" and the empty string.
</li>
	<li>
%option の`選択状態$opt ~SET %selected
（ %defaultSelected を問わず）
◎
If selected is true, then set option's selectedness to true; otherwise set its selectedness to false (even if defaultSelected is true).
</li>
	<li>
~RET %option
◎
Return option.
</li>
</ol>
</div>

			</section>
			<section id="the-textarea-element">
<h4 title="The textarea element">4.10.11. ``textarea^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$ ／`句ng内容$ ／ `ヤリトリありな内容$ ／ `可触~内容$ ／
◎
Flow content.
◎
Phrasing content.
◎
Interactive content.
◎
Listed, labelable, submittable, resettable, and autocapitalize-and-autocorrect inheriting form-associated element.
◎
Palpable content.
</dd>
	<dd>
`~formに所有され得る要素$のうち［
`~listされる$ ／ `提出-可能$な ／ `再設定-可能$な ／ `自動頭字化-と自動訂正-を継承-$する
］もの
◎
↑</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`~text$。
◎
Text.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
`autocomplete$a
— ~formの~autofill特能~用の~hint。
◎
autocomplete — Hint for form autofill feature
</dd>
	<dd>
``cols$a
— 行あたりの最大~文字~数
◎
cols — Maximum number of characters per line
</dd>
	<dd>
`dirname$a
— `~form提出$時に要素の`方向性$を送信するために利用される，~form~controlの名前。
◎
dirname — Name of form control to use for sending the element's directionality in form submission
</dd>
	<dd>
`disabled$a
— この~form~controlは不能化されるかどうか。
◎
disabled — Whether the form control is disabled
</dd>
	<dd>
`form$a
— この要素の所有者にする `form$e 要素を与える。
◎
form — Associates the element with a form element
</dd>
	<dd>
``maxlength$a
— 値の最大`長さ$。
◎
maxlength — Maximum length of value
</dd>
	<dd>
``minlength$a
— 値の最小`長さ$。
◎
minlength — Minimum length of value
</dd>
	<dd>
`name$a
— ［
`~form提出$用に ／ `form.elements$m ~APIにおいて
］利用する，この要素の名前。
◎
name — Name of the element to use for form submission and in the form.elements API
</dd>
	<dd>
``placeholder$a
— この~form~controlに配置され，利用者から可視になる~label。
◎
placeholder — User-visible label to be placed within the form control
</dd>
	<dd>
``readonly$a
— 利用者が値を編集できなくするかどうか
◎
readonly — Whether to allow the value to be edited by the user
</dd>
	<dd>
``required$a
— この~controlは`~form提出$用に要求されるかどうか。
◎
required — Whether the control is required for form submission
</dd>
	<dd>
``rows$a
— 示す行l数
◎
rows — Number of lines to show
</dd>
	<dd>
``wrap$a
— `~form提出$時に，~form~controlの値はどう折返されるか
◎
wrap — How the value of the form control is to be wrapped for form submission
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`textarea$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window]
interface `HTMLTextAreaElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute DOMString `autocomplete$m;
  [`CEReactions$] attribute unsigned long ``cols$m;
  [`CEReactions$] attribute DOMString ``dirName$m;
  [`CEReactions$] attribute boolean `disabled$m;
  readonly attribute `HTMLFormElement$I? `form$m;
  [`CEReactions$] attribute long ``maxLength$m;
  [`CEReactions$] attribute long ``minLength$m;
  [`CEReactions$] attribute DOMString `name$m;
  [`CEReactions$] attribute DOMString ``placeholder$m;
  [`CEReactions$] attribute boolean ``readOnly$m;
  [`CEReactions$] attribute boolean ``required$m;
  [`CEReactions$] attribute unsigned long ``rows$m;
  [`CEReactions$] attribute DOMString ``wrap$m;

  readonly attribute DOMString ``type$m;
  [`CEReactions$] attribute DOMString ``defaultValue$m;
  attribute [`LegacyNullToEmptyString$] DOMString ``value$m;
  readonly attribute unsigned long ``textLength$m;

  readonly attribute boolean `willValidate$m;
  readonly attribute `ValidityState$I `validity$m;
  readonly attribute DOMString `validationMessage$m;
  boolean `checkValidity$m();
  boolean `reportValidity$m();
  undefined `setCustomValidity$m(DOMString %error);

  readonly attribute `NodeList$I `labels$m;

  undefined `select$m();
  attribute unsigned long `selectionStart$m;
  attribute unsigned long `selectionEnd$m;
  attribute DOMString `selectionDirection$m;
  undefined `setRangeText$m(DOMString %replacement);
  undefined `setRangeText$m(DOMString %replacement, unsigned long %start, unsigned long %end, optional `SelectionMode$I %selectionMode = "preserve");
  undefined `setSelectionRange$m(unsigned long %start, unsigned long %end, optional DOMString %direction);
};
</pre>

	</dd>
</dl>

<p>
この節においては
⇒＃
`LF^i は 文字 `000A^U `LINE FEED^cn ／
`CR^i は 文字 `000D^U `CARRIAGE RETURN^cn
◎終
を表すとする。
</p>

<p>
`textarea$e 要素は、［
要素の
``生の値@
を与える，複数行からなる素な~text
］用の編集~controlを`表現-$する。
この~controlの内容は、
~controlの既定の値を表現する。
◎
The textarea element represents a multiline plain text edit control for the element's raw value. The contents of the control represent the control's default value.
</p>

<p>
`textarea$e ~controlの``生の値$は、
初期~時には空~文字列になるモノトスル。
◎
The raw value of a textarea control must be initially the empty string.
</p>

<p class="note">注記：
この要素には、
`双方向-~algoを孕む描画~要件がある＠~HTMLdom#bidireq$。
◎
This element has rendering requirements involving the bidirectional algorithm.
</p>

<p>
``readonly@a
属性は、
`真偽-属性$であり，利用者が~textを編集できなくするかどうかを制御するために利用される。
◎
The readonly attribute is a boolean attribute used to control whether the text can be edited by the user or not.
</p>

<div class="example">
<p>
この例では、
~text~controlは読専~fileの中身を表現するので `readonly^a が付与されている：
◎
In this example, a text control is marked read-only because it represents a read-only file:
</p>

`textarea-1^xCode
</div>

<p><strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`拘束~検証の対象外$になる
⇒
`textarea$e 要素は
``readonly$a 属性を有する
◎
Constraint validation: If the readonly attribute is specified on a textarea element, the element is barred from constraint validation.
</p>

<p>
`textarea$e 要素は、［
`不能化されて$feいない
］~AND［
``readonly$a 属性を有さない
］ならば，`変異-可能$feとする。
◎
A textarea element is mutable if it is neither disabled nor has a readonly attribute specified.
</p>

<p>
`textarea$e 要素 %要素 が`変異-可能$feである下では、
~UAは：
◎
When a textarea is mutable,＼
</p>

<ul>
	<li>
利用者が %要素 の``生の値$を編集できるようにするベキである
— ~textを［
編集- ／ 挿入- ／ 除去-
］できるようにして。
◎
its raw value should be editable by the user: the user agent should allow the user to edit, insert, and remove text, and＼
</li>
	<li>
利用者が 改行を `LF^i の形で［
挿入- ／ 除去-
］できるようにするベキである。
◎
to insert and remove line breaks in the form of U+000A LINE FEED (LF) characters.＼
</li>
	<li class="algo">
<p>
どの時点であれ，利用者が %要素 の``生の値$を変更したときは、
次を行うモノトスル
⇒
`要素~taskを~queueする$( `利用者ヤリトリ~task~source$, %要素, 次の手続き )
◎
Any time the user causes the element's raw value to change, the user agent must queue an element task on the user interaction task source given the textarea element to＼
</p>
<div class="algo">
手続きは
⇒
`入力~eventを発火する$( %要素, `input$et )
◎
fire an event named input at the textarea element, with the bubbles and composed attributes initialized to true.＼
</div>
	</li>
	<li>
前項の~taskを~queueする前に，利用者とのヤリトリに相応しい間 待機してヨイ
— 例えば、［
各~keystrokeごとに~eventを発火し続けずに，利用者が手を止めたときに限り 発火する
］ように，［
100 ~milli秒~間 ~UIkeyが叩かれずにいるとき
］まで待機することもできる。
◎
User agents may wait for a suitable break in the user's interaction before queuing the task; for example, a user agent could wait for the user to have not hit a key for 100ms, so as to only fire the event when the user pauses, instead of continuously for each keystroke.
</li>
</ul>

<p>
`textarea$e 要素の`値は~dirtyか$feは、［
利用者が~controlとヤリトリして その``生の値$を変更する
］度に， ~T に設定されるモノトスル。
◎
A textarea element's dirty value flag must be set to true whenever the user interacts with the control in a way that changes the raw value.
</p>

<div class="algo">
`textarea$e 要素~用の`~clone時の手続き$は、
所与の
( %~node, %複製, … )
に対し
⇒
%複製 の
⇒＃
``生の値$ ~SET %~node の``生の値$,
`値は~dirtyか$fe ~SET %~node の`値は~dirtyか$fe
◎
The cloning steps for textarea elements given node, copy, and subtree are to propagate the raw value and dirty value flag from node to copy.
</div>

<div class="algo">
<p>
`textarea$e 要素~用の`子~群~変更-時の手続き$は
⇒
~IF［
要素の`値は~dirtyか$fe ~EQ ~F
］
⇒
要素の``生の値$ ~SET 要素の`子~text内容$
◎
The children changed steps for textarea elements must, if the element's dirty value flag is false, set the element's raw value to its child text content.
</p>
</div>

<div class="algo">
<p>
`textarea$e 要素~用の`再設定~algo$は
⇒
要素の
⇒＃
`利用者~妥当性$ ~SET ~T,
`値は~dirtyか$fe ~SET ~F,
``生の値$ ~SET 要素の`子~text内容$
</p>
◎
The reset algorithm for textarea elements is to＼
set the user validity to false,＼
dirty value flag back to false,＼
and set the raw value of element to its child text content.
</div>

<div class="algo">
<p>
`textarea$e 要素が［
`~HTML構文解析器$ ／ `~XML構文解析器$
］の`~open要素~stack$から~popされたときは、
~UAは，次を呼出すモノトスル
⇒
要素~用の`再設定~algo$
◎
When a textarea element is popped off the stack of open elements of an HTML parser or XML parser, then the user agent must invoke the element's reset algorithm.
</p>
</div>

<div class="algo">
<p>
`textarea$e 要素 %要素 が`変異-可能$feである下では、
~UAは，利用者が %要素 の書字~方向を［
左横書き／右横書き
］に変更できるようにするベキである。
利用者がそうしたときは、
~UAは，次の手続きを走らすモノトスル：
◎
If the element is mutable, the user agent should allow the user to change the writing direction of the element, setting it either to a left-to-right writing direction or a right-to-left writing direction. If the user does so, the user agent must then run the following steps:
</p>

<ol>
	<li>
%要素 の`dir$a 属性 ~SET
利用者が選択した書字~方向に応じて［
左横書きならば `ltr$v ／
右横書き ならば `rtl$v
］
◎
Set the element's dir attribute to "ltr" if the user selected a left-to-right writing direction, and "rtl" if the user selected a right-to-left writing direction.
</li>
	<li>
<p>
`要素~taskを~queueする$( `利用者ヤリトリ~task~source$, %要素, 次の手続き )
◎
Queue an element task on the user interaction task source given the textarea element to＼
</p>
<div class="algo">
手続きは
⇒
`入力~eventを発火する$( %要素, `input$et )
◎
fire an event named input at the textarea element, with the bubbles and composed attributes initialized to true.
</div>
	</li>
</ol>
</div>

<p>
``cols@a
属性は、
`一行分の字数$
— 期待される，行あたりの最大~文字~数 —
を指定する。
この属性に指定する値は、
1 以上の`妥当な負でない整数$でなければナラナイ。
◎
The cols attribute specifies the expected maximum number of characters per line. If the cols attribute is specified, its value must be a valid non-negative integer greater than zero.＼
</p>

<div class="algo">
<p>
`textarea$e 要素の
`一行分の字数@
は：
</p>
<ol>
	<li>
%属性~値 ~LET 要素は ``cols$a 属性を［
有するならば その値／
有さないならば ε
］
</li>
	<li>
<p>
~IF［
%属性~値 ~NEQ ε
］：
</p>
		<ol>
			<li>
%結果 ~LET `負でない整数として構文解析する$( %属性~値 )
</li>
			<li>
~IF［
%結果 ~NIN { `失敗^i, 0 }
］
⇒
~RET %結果
</li>
		</ol>
	</li>
	<li>
~RET 20
</li>
</ol>
◎
If applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character width is that value; otherwise, it is 20.
</div>

<p>
~UAは、
`一行分の字数$を［
~serverが選好する 各~行lごとの文字~数を表す，利用者への~hint
］として利用してヨイ（例：
視覚的な~UAにおいては、
~controlの横幅を その文字~数にするなど）。
視覚的な描画においては、
~UAは，描画~時に 各~行lが この文字~数を超えないように
利用者の入力を折返すベキである。
◎
The user agent may use the textarea element's character width as a hint to the user as to how many characters the server prefers per line (e.g. for visual user agents by making the width of the control be that many characters). In visual renderings, the user agent should wrap the user's input in the rendering so that each line is no wider than this number of characters.
</p>

<p class="trans-note">【
`一行分の字数$は、
原文では “`character width^en” と称されている
（そのまま訳すと “文字横幅” になり，紛らわしい）。
下の “`行数$（ `character height^en ）” も同様。
】【
各~文字の~~字幅の違い（全角と半角など）を どう取扱うかについては、
この仕様には述べられていない。
】</p>

<p>
``rows@a
属性は、
`行数$
— 利用者に示す行l数 —
を指定する。
この属性に指定する値は、
1 以上の`妥当な負でない整数$でなければナラナイ。
◎
The rows attribute specifies the number of lines to show. If the rows attribute is specified, its value must be a valid non-negative integer greater than zero.＼
</p>

<div class="algo">
<p>
`textarea$e 要素の
`行数@
は：
</p>
<ol>
	<li>
%属性~値 ~LET 要素は ``rows$a 属性を［
有するならば その値／
有さないならば ε
］
</li>
	<li>
<p>
~IF［
%属性~値 ~NEQ ε
］：
</p>
		<ol>
			<li>
%結果 ~LET `負でない整数として構文解析する$( %属性~値 )
</li>
			<li>
~IF［
%結果 ~NIN { `失敗^i, 0 }
］
⇒
~RET %結果
</li>
		</ol>
	</li>
	<li>
~RET 2
</li>
</ol>
◎
If applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character height is that value; otherwise, it is 2.
</div>

<p>
視覚的な~UAは、
~controlの縦幅を`行数$で与えられる行l数に設定するベキである。
◎
Visual user agents should set the height of the control to the number of lines given by character height.
</p>

<p>
``wrap@a
属性は，`列挙d属性$であり、
次に挙げる~keyword, とり得る状態, それらの対応付けが定義される：
◎
The wrap attribute is an enumerated attribute with the following keywords and states:
</p>

<div>
<table><thead>
<tr><th>~keyword
<th>状態
<th>概略的な記述
<tbody>

<tr><td>`soft@v
<td>`Soft@st
<td>
~textは、
提出-時には折返されない
（それでも、
描画-時には，折返され得るが）。

<tr><td>`hard@v
<td>`Hard@st
<td>
~textは、
提出-時には折返されるよう，~UAにより改行文字が追加される。

</table>
◎
Keyword｜State｜Brief description
soft｜Soft｜Text is not to be wrapped when submitted (though can still be wrapped in the rendering).
hard｜Hard｜Text is to have newlines added by the user agent so that the text is wrapped when it is submitted.
</div>

<p>
``wrap$a 属性の［
`欠落~値~用の既定の状態$, `妥当でない値~用の既定の状態$
］は、
いずれも `Soft$st とする。
◎
The attribute's missing value default and invalid value default are both the Soft state.
</p>

<p>
要素は、
`Hard$st 状態にある場合は，
``cols$a 属性も指定されなければナラナイ。
◎
If the element's wrap attribute is in the Hard state, the cols attribute must be specified.
</p>

<p>
歴史的な理由から、
要素の値は，それぞれ目的が異なる 3 通りの仕方で正規化される：
◎
For historical reasons, the element's value is normalized in three different ways for three different purposes.＼
</p>

<ul>
	<li>
``生の値$は、
元々設定された値を表す。
それは正規化されない。
◎
The raw value is the value as it was originally set. It is not normalized.＼
</li>
	<li>
`~API値$feは［
``value$m, ``textLength$m
~IDL属性, および
`maxlength$a, `minlength$a 内容~属性
］に利用される値を表す。
それは、
改行には常に `LF^i を利用するよう正規化される。
◎
The API value is the value used in the value IDL attribute, textLength IDL attribute, and by the maxlength and minlength content attributes. It is normalized so that line breaks use U+000A LINE FEED (LF) characters.＼
</li>
	<li>
最後に，［
~form提出／この仕様における他の処理~model
］に利用される`値$feがある。
それは、
`~API値$feと同じように正規化される。
加えて、
要素が ``wrap$a 属性を有する下では，必要yなら、
~textを所与の字数で折返すために，追加的な改行も挿入される。
◎
Finally, there is the value, as used in form submission and other processing models in this specification. It is normalized as for the API value, and in addition, if necessary given the element's wrap attribute, additional line breaks are inserted to wrap the text at the given width.
</li>
</ul>

<div class="algo">
<p>
要素の`~API値$feを得するための~algoは、
次の結果を返す
⇒
`改行文字を正規化する$( 要素の``生の値$ )
◎
The algorithm for obtaining the element's API value is to return the element's raw value, with newlines normalized.
</p>
</div>

<div class="algo">
<p>
要素の`値$feは、
次の結果として定義される
⇒
`~textarea用に行lを折返す$( 要素の`~API値$fe )
◎
The element's value is defined to be the element's API value with the textarea wrapping transformation applied.＼
</p>
</div>

<div class="algo">
<p>
`~textarea用に行lを折返す@
~algoは、
所与の
( %文字列 )
に対し，次を適用する：
◎
The textarea wrapping transformation is the following algorithm, as applied to a string:
</p>
<ol>
	<li>
~IF［
要素の ``wrap$a 属性の状態 ~EQ `Hard$st
］
⇒
`実装定義$な~algoを利用して、［
各~行lの文字~数 ~LTE `一行分の字数$
］になるように， %文字列 の中に `LF^i を挿入する。
この要件の目的においては、
各~行lは［
%文字列 の始端, %文字列 の終端, `LF^i
］で区切られるとする。
◎
If the element's wrap attribute is in the Hard state, insert U+000A LINE FEED (LF) characters into the string using an implementation-defined algorithm so that each line has no more than character width characters. For the purposes of this requirement, lines are delimited by the start of the string, the end of the string, and U+000A LINE FEED (LF) characters.
</li>
</ol>
</div>

<p>
``maxlength@a
属性は、
<a href="~HTMLforms#attr-fe-maxlength">~form~control `maxlength^a 属性</a>
である。
◎
The maxlength attribute is a form control maxlength attribute.
</p>

<p>
［
`textarea$e 要素の`値に許容される最大~長さ$ ~NEQ ε
］の場合、
要素の子たちは，次を満たすようにするモノトスル
⇒
次の結果の`長さ$ ~LTE 要素の`値に許容される最大~長さ$
⇒
`改行文字を正規化する$( 要素の`子孫~text内容$ ) 
◎
If the textarea element has a maximum allowed value length, then the element's children must be such that the length of the value of the element's descendant text content with newlines normalized is less than or equal to the element's maximum allowed value length.
</p>

<p>
``minlength@a
属性は、
<a href="~HTMLforms#attr-fe-minlength">~form~control `minlength^a 属性</a>
である。
◎
The minlength attribute is a form control minlength attribute.
</p>

<p>
``required@a
属性は、
`真偽-属性$である。
指定されたときは、
利用者には，~formを提出する前に値を手入力するよう要求されることになる。
◎
The required attribute is a boolean attribute. When specified, the user will be required to enter a value before submitting the form.
</p>

<p><strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`欠落である難あり$になる
⇒
［
要素は ``required$a を有する
］~AND［
要素は`変異-可能$feである
］~AND［
要素の`値$fe ~EQ 空~文字列
］
◎
Constraint validation: If the element has its required attribute specified, and the element is mutable, and the element's value is the empty string, then the element is suffering from being missing.
</p>

<p>
``placeholder@a
属性は、
`短い^em~hint（または単語や短い句）を表現する。
この属性は、
~controlが値を有さないとき，利用者を援助する~dataを与えることが意図される。
この~hintは、
見本の値や，期待される形式についての概略的な記述にすることもできる。
◎
The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
</p>

<p>
``placeholder$a 属性は `label$e の代替として利用されるベキでない。
より長い~hintや他の助言的~textには、
`title$a 属性がより適切になる。
◎
The placeholder attribute should not be used as an alternative to a label. For a longer hint or other advisory text, the title attribute is more appropriate.
</p>

<div class="note">
<p>注記：
これらの仕組みは互いに よく似るが、
微妙に相違する：
</p>
		<ul>
			<li>
~controlの `label$e で与えられる~hintは，いつでも示される。
</li>
			<li>
``placeholder$a 属性が与える短い~hintは，利用者が値を手入力する前に示される。
</li>
			<li>
`title$a 属性~内の~hintは，利用者が更なる~helpを要請したときに示される。
</li>
		</ul>
◎
These mechanisms are very similar but subtly different: the hint given by the control's label is shown at all times; the short hint given in the placeholder attribute is shown before the user enters a value; and the hint in the title attribute is shown when the user requests further help.
</div>

<p>
~UAは、
要素の`値$feが空~文字列で
~controlが`~focusされ$ていないときには、
この~hintを（当の~controlの内側に表示するなどして）利用者に呈示するベキである。
~hintの描画-時には，~hint内の各［
［ `CR^i, `LF^i ］並び, および他の `CR^i, `LF^i
］は，改行として扱うモノトスル。
◎
User agents should present this hint to the user when the element's value is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused control). All U+000D CARRIAGE RETURN U+000A LINE FEED character pairs (CRLF) in the hint, as well as all other U+000D CARRIAGE RETURN (CR) and U+000A LINE FEED (LF) characters in the hint, must be treated as line breaks when rendering the hint.
</p>

<p>
~UAは、［
当の~controlが`~focusされ$たとき、
通常は，この~hintを利用者に示さない
］場合でも，［
`autofocus$a 属性の結果として~focusされた場合には、
~control用の~hintを示す
］ベキである
— その事例では、
利用者が~focusする前に~controlを精査する機会は，無いので。
◎
If a user agent normally doesn't show this hint to the user when the control is focused, then the user agent should nonetheless show the hint for the control if it was focused as a result of the autofocus attribute, since in that case the user will not have had an opportunity to examine the control before focusing it.
</p>

<p>
`textarea$e 要素の：
◎
↓</p>

<ul >
	<li>
`name$a 属性は、
要素の名前を表現する。
◎
The name attribute represents the element's name.＼
</li>
	<li>
`dirname$a 属性は、
要素の`方向性$がどう提出されるかを制御する。
◎
The dirname attribute controls how the element's directionality is submitted.＼
</li>
	<li>
`disabled$a 属性は、
~controlをヤリトリありでなくして，その値は提出されないようにするために利用される。
◎
The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted.＼
</li>
	<li>
`form$a 属性は、
要素を ある`~form所有者$に明示的に所有させるために利用される。
◎
The form attribute is used to explicitly associate the textarea element with its form owner.＼
</li>
	<li>
`autocomplete$a は、
~UAが~autofillの挙動をどう供するかを制御する。
◎
The autocomplete attribute controls how the user agent provides autofill behavior.
</li>
</ul>

<dl class="domintro">

	<dt>%textarea.``type$m</dt>
	<dd>
文字列 `textarea^l を返す。
◎
Returns the string "textarea".
</dd>

	<dt>%textarea.``value$m</dt>
	<dd>
この要素の現在の値を返す。
◎
Returns the current value of the element.
</dd>
	<dd>
設定して値を変更できる。
◎
Can be set, to change the value.
</dd>
</dl>

<div>
<p>
``placeholder@m
~IDL属性は、
``placeholder$a 内容~属性を`反映する$モノトスル。
</p>

<p>
``required@m
~IDL属性は、
``required$a 内容~属性を`反映する$モノトスル。
</p>

<p>
``wrap@m
~IDL属性は、
``wrap$a 内容~属性を`反映する$モノトスル。
</p>

<p>
``cols@m
~IDL属性は、
`~fallbackありの下で正な整数のみに制限され$る, かつ`既定の値$は 20 とする下で，
``cols$a 内容~属性を`反映する$モノトスル。
</p>

<p>
``rows@m
~IDL属性は、
`~fallbackありの下で正な整数のみに制限され$る, かつ`既定の値$は 2 とする下で，
``rows$a 内容~属性を`反映する$モノトスル。
</p>
◎
The cols, placeholder, required, rows, and wrap IDL attributes must reflect the respective content attributes of the same name.＼
The cols and rows attributes are limited to only positive numbers with fallback.＼
The cols IDL attribute's default value is 20.＼
The rows IDL attribute's default value is 2.＼
</div>

<p>
``dirName@m
~IDL属性は、
`dirname$a 内容~属性を`反映する$モノトスル。
◎
The dirName IDL attribute must reflect the dirname content attribute.＼
</p>

<p>
``maxLength@m
~IDL属性は、
`負でない整数のみに制限され$る下で，
``maxlength$a 内容~属性を`反映する$モノトスル。
◎
The maxLength IDL attribute must reflect the maxlength content attribute, limited to only non-negative numbers.＼
</p>

<p>
``minLength@m
~IDL属性は、
`負でない整数のみに制限され$る下で，
``minlength$a
内容~属性を`反映する$モノトスル。
◎
The minLength IDL attribute must reflect the minlength content attribute, limited to only non-negative numbers.＼
</p>

<p>
``readOnly@m
~IDL属性は、
``readonly$a 内容~属性を`反映する$モノトスル。
◎
The readOnly IDL attribute must reflect the readonly content attribute.
</p>

<div class="algo">
``type@m
取得子~手続きは
⇒
~RET 文字列 `textarea^l
◎
The type IDL attribute must return the value "textarea".
</div>

<div class="algo">
``defaultValue@m
取得子~手続きは
⇒
~RET コレの`子~text内容$
◎
The defaultValue attribute's getter must return the element's child text content.
</div>

<div class="algo">
``defaultValue$m 設定子~手続きは
⇒
コレの`全~内容を文字列に置換する$( 所与の値 )
◎
The defaultValue attribute's setter must string replace all with the given value within this element.
</div>

<div class="algo">
``value@m
取得子~手続きは
⇒
~RET コレの`~API値$fe
◎
The value IDL attribute must, on getting, return the element's API value.＼
</div>

<div class="algo">
<p>
``value$m 設定子~手続きは：
◎
On setting, it must perform the following steps:
</p>
<ol>
	<li>
%旧~API値 ~LET コレの`~API値$fe
◎
Let oldAPIValue be this element's API value.
</li>
	<li>
コレの``生の値$ ~SET 所与の値
◎
Set this element's raw value to the new value.
</li>
	<li>
コレの`値は~dirtyか$fe ~SET ~T
◎
Set this element's dirty value flag to true.
</li>
	<li>
<p>
~IF［
コレの`~API値$fe ~NEQ %旧~API値
］：
</p>
		<ol>
			<li>
`~text手入力~cursor位置$を終端へ移動する
</li>
			<li>
選択されている~textは未~選択-にする
</li>
			<li>
コレの`選択~方向を設定する$( `none^l )
</li>
		</ol>
◎
If the new API value is different from oldAPIValue, then move the text entry cursor position to the end of the text control, unselecting any selected text and resetting the selection direction to "none".
</li>
</ol>
</div>

<div class="algo">
``textLength@m
取得子~手続きは
⇒
~RET コレの`~API値$feの`長さ$
◎
The textLength IDL attribute must return the length of the element's API value.
</div>

<p>
`textarea$e 要素には、
次に挙げる~IDL~memberもある：
◎
↓</p>
<ul >
	<li>
次に挙げるものは、
`拘束~検証~API$の一部を成す
⇒＃
`willValidate$m,
`validity$m,
`validationMessage$m,
`checkValidity()$m,
`reportValidity()$m,
`setCustomValidity()$m
◎
The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API.＼
</li>
	<li>
`labels$m は、
要素を指している `label$e からなる~listを供する。
◎
The labels IDL attribute provides a list of the element's labels.＼
</li>
	<li>
［
`select()$m ／ `selectionStart$m ／ `selectionEnd$m ／ `selectionDirection$m ／ `setRangeText()$m ／ `setSelectionRange()$m
］は、
要素の~text選択を公開する。
◎
The select(), selectionStart, selectionEnd, selectionDirection, setRangeText(), and setSelectionRange() methods and IDL attributes expose the element's text selection.＼
</li>
	<li>
次に挙げるものは、
要素の~form~APIの一部を成す
⇒＃
`disabled$m,
`form$m,
`name$m
◎
The disabled, form, and name IDL attributes are part of the element's forms API.
</li>
</ul>

<div class="example">
<p>
`textarea$e を利用して，~form内に制約されない自由-形な~text入力を与える例：
◎
Here is an example of a textarea being used for unrestricted free-form text input in a form:
</p>

`textarea-2^xCode

<p>
``maxlength$a 属性を利用すれば、
~commentの最大~長さを指定できる：
◎
To specify a maximum length for the comments, one can use the maxlength attribute:
</p>

`textarea-3^xCode

<p>
既定の値を与えるには、
要素の内側に~textを含する：
◎
To give a default value, text can be included inside the element:
</p>

`textarea-4^xCode

<p>
最小な長さも与えれる。
ここでの手紙には，（最小な長さより短い）雛形が供されているが、
~formを提出するには不十分であり，利用者はもっと埋める必要がある：
◎
You can also give a minimum length. Here, a letter needs to be filled out by the user; a template (which is shorter than the minimum length) is provided, but is insufficient to submit the form:
</p>

`textarea-5^xCode

<p>
明示的な雛形を供さなくとも、
利用者に基本-形を示唆する仮入力を与えれる：
◎
A placeholder can be given as well, to suggest the basic form to the user, without providing an explicit template:
</p>

`textarea-6^xCode

<p>
`dirname$a 属性を指定すれば、
要素の`方向性$も値に伴わせるように，~browserに提出させられる：
◎
To have the browser submit the directionality of the element along with the value, the dirname attribute can be specified:
</p>

`textarea-7^xCode
</div>

			</section>
			<section id="the-output-element">
<h4 title="The output element">4.10.12. ``output^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$ ／ `句ng内容$ ／ `可触~内容$ ／
◎
Flow content.
◎
Phrasing content.
◎
Listed, labelable, resettable, and autocapitalize-and-autocorrect inheriting form-associated element.
◎
Palpable content.
</dd>
	<dd>
`~formに所有され得る要素$のうち［
`~listされる$ ／ `~label可能$な ／ `再設定-可能$な ／ `自動頭字化-と自動訂正-を継承-$する
］もの
◎
↑</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
``for$a
— この出力を計算させた~controlを指定する。
◎
for — Specifies controls from which the output was calculated
</dd>
	<dd>
`form$a
— この要素の所有者にする `form$e 要素を与える。
◎
form — Associates the element with a form element
</dd>
	<dd>
`name$a
— `form.elements$m ~APIにおいて利用する，この要素の名前。
◎
name — Name of the element to use in the form.elements API.
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`output$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window]
interface `HTMLOutputElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [SameObject, PutForwards=`value$m] readonly attribute `DOMTokenList$I ``htmlFor$m;
  readonly attribute `HTMLFormElement$I? `form$m;
  [`CEReactions$] attribute DOMString `name$m;

  readonly attribute DOMString ``type$m;
  [`CEReactions$] attribute DOMString ``defaultValue$m;
  [`CEReactions$] attribute DOMString ``value$m;

  readonly attribute boolean `willValidate$m;
  readonly attribute `ValidityState$I `validity$m;
  readonly attribute DOMString `validationMessage$m;
  boolean `checkValidity$m();
  boolean `reportValidity$m();
  undefined `setCustomValidity$m(DOMString %error);

  readonly attribute `NodeList$I `labels$m;
};
</pre>

</dd>
</dl>

<p>
`output$e 要素は、［
~appにより遂行された計算の結果 ／
利用者~動作の結果
］を`表現-$する。
◎
The output element represents the result of a calculation performed by the application, or the result of a user action.
</p>

<p class="note">注記：
この要素は、
`samp$e 要素と対照をなす
— それは、
以前に走らせた他の~programの出力を引用するときに，適切な要素になる。
◎
This element can be contrasted with the samp element, which is the appropriate element for quoting the output of other programs run previously.
</p>

<p>
``for@a
内容~属性は、
計算の結果と［
計算に［
取り込まれた／波及した
］値を表現する要素
］との間に，明示的な関係性を与えれるようにする。
この属性に指定する値は、
`~space等で分離された~token集合$（一意）であって，その各~tokenは［
同じ`~tree$内に在る，ある要素
］の`~ID$の値を与えていなければナラナイ。
◎
The for content attribute allows an explicit relationship to be made between the result of a calculation and the elements that represent the values that went into the calculation or that otherwise influenced the calculation. The for attribute, if specified, must contain a string consisting of an unordered set of unique space-separated tokens, none of which are identical to another token and each of which must have the value of an ID of an element in the same tree.
</p>

<p>
`output$e 要素の：
◎
↓</p>

<ul>
	<li>
`form$a 属性は、
`output$e 要素を ある`~form所有者$に明示的に所有させるために利用される。
◎
The form attribute is used to explicitly associate the output element with its form owner.＼
</li>
	<li>
`name$a 属性は、
要素の名前を表現する。
◎
The name attribute represents the element's name.＼
</li>
</ul>

<p>
各 `output$e 要素には、
~form~controlの~event~handlerから容易に`参照-$できるように，~formに所有され得るが、
この要素の値が，~formの提出-時に提出されることはない。
◎
The output element is associated with a form so that it can be easily referenced from the event handlers of form controls; the element's value itself is not submitted when the form is submitted.
</p>

<p>
各 `output$e 要素は、
``上書き既定~値@
を有する
— それは，文字列または ~NULL であり、
初期~時には ~NULL になるモノトスル。
◎
The element has a default value override (null or a string). Initially it must be null.
</p>

<p>
各 `output$e 要素の
``既定~値@
は、
次を返す
⇒＃
要素の``上書き既定~値$ ~NEQ ~NULL ならば それ ／
~ELSE_ 要素の`子孫~text内容$
◎
The element's default value is determined by the following steps:
• If this element's default value override is non-null, then return it.
• Return this element's descendant text content.
</p>

<div class="algo">
<p>
`output$e 要素~用の`再設定~algo$は：
◎
The reset algorithm for output elements is to run these steps:
</p>
<ol>
	<li>
要素の`全~内容を文字列に置換する$( 要素の``既定~値$ )
◎
String replace all with this element's default value within this element.
</li>
	<li>
要素の``上書き既定~値$ ~SET ~NULL
◎
Set this element's default value override to null.
</li>
</ol>
</div>

<dl class="domintro">

	<dt>%output.``value$m [ = %value ]</dt>
	<dd>
この要素の現在の値を返す。
◎
Returns the element's current value.
</dd>
	<dd>
設定して，値を変更できる。
◎
Can be set, to change the value.
</dd>

	<dt>%output.``defaultValue$m [ = %value ]</dt>
	<dd>
この要素の現在の既定の値を返す。
◎
Returns the element's current default value.
</dd>
	<dd>
設定して，既定の値を変更できる。
◎
Can be set, to change the default value.
</dd>

	<dt>%output.``type$m</dt>
	<dd>
文字列 `output^l を返す。
◎
Returns the string "output".
</dd>
</dl>

<div class="algo">
``value@m
取得子~手続きは
⇒
~RET コレの`子孫~text内容$
◎
The value getter steps are to return this's descendant text content.
</div>

<div class="algo">
<p>
``value$m 設定子~手続きは：
◎
The value setter steps are:
</p>
<ol>
	<li>
コレの``上書き既定~値$ ~SET コレの``既定~値$
◎
Set this's default value override to its default value.
</li>
	<li>
コレの`全~内容を文字列に置換する$( 所与の値 )
◎
String replace all with the given value within this.
</li>
</ol>
</div>

<div class="algo">
``defaultValue@m
取得子~手続きは
⇒
~RET コレの``既定~値$
◎
The defaultValue getter steps are to return the result of running this's default value.
</div>

<div class="algo">
<p>
``defaultValue$m 設定子~手続きは：
◎
The defaultValue setter steps are:
</p>
<ol>
	<li>
~IF［
コレの``上書き既定~値$ ~EQ ~NULL
］
⇒＃
コレの`全~内容を文字列に置換する$( 所与の値 )；
~RET 【 ~RET は余計？】
◎
If this's default value override is null, then string replace all with the given value within this and return.
</li>
	<li>
コレの``上書き既定~値$ ~SET 所与の値
◎
Set this's default value override to the given value.
</li>
</ol>
</div>

<div class="algo">
``type@m
取得子~手続きは
⇒
~RET `output^l
◎
The type getter steps are to return "output".
</div>

<p>
``htmlFor@m
~IDL属性は、
``for$a 内容~属性を`反映する$モノトスル。
◎
The htmlFor IDL attribute must reflect the for content attribute.
</p>

<p>
`output$e 要素には、
次に挙げる~IDL~memberもある：
◎
↓</p>
<ul >
	<li>
次に挙げるものは、
`拘束~検証~API$の一部を成す
⇒＃
`willValidate$m,
`validity$m,
`validationMessage$m,
`checkValidity()$m,
`reportValidity()$m,
`setCustomValidity()$m
◎
The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API.＼
</li>
	<li>
`labels$m は、
要素を指している `label$e からなる~listを供する。
◎
The labels IDL attribute provides a list of the element's labels.＼
</li>
	<li>
次に挙げるものは、
要素の~form~APIの一部を成す
⇒＃
`form$m,
`name$m
◎
The form and name IDL attributes are part of the element's forms API.
</li>
</ul>

<div class="example">
<p>
`output$e を利用して，単純な計算機の計算-結果を表示する例：
◎
A simple calculator could use output for its display of calculated results:
</p>

`output-1^xCode
</div>

<div class="example">
<p>
次の例では，ある計算が~remote~serverにより遂行され、
`output$e 要素を利用して，返されて来た結果を報告する：
◎
In this example, an output element is used to report the results of a calculation performed by a remote server, as they come in:
</p>

`output-2^xCode
</div>

			</section>
			<section id="the-progress-element">
<h4 title="The progress element">4.10.13. ``progress^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$ ／ `句ng内容$ ／ `可触~内容$ ／ `~label可能$な要素
◎
Flow content.
◎
Phrasing content.
◎
Labelable element.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$
— ただし、
子孫に `progress$e 要素が在ってはならない。
◎
Phrasing content, but there must be no progress element descendants.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
``value$a
— 要素の現在の値
◎
value — Current value of the element
</dd>
	<dd>
``max$a
— 範囲の上界
◎
max — Upper bound of range
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`progress$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window]
interface `HTMLProgressElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute double ``value$m;
  [`CEReactions$] attribute double ``max$m;
  readonly attribute double ``position$m;
  readonly attribute `NodeList$I `labels$m;
};
</pre>

</dd>
</dl>

<p>
`progress$e 要素は、
~taskの完了~進捗を`表現-$する。
進捗は、［
`不定^i, `確定的^i
］のいずれかになる。
前者は、
進捗は ~taskが完了するまで どの程度~作業が残っているか明らかでないことを指示する（例：~taskは~remote~hostからの応答を待機しているなど）。
後者は、
それまでに完了した作業の進捗~率を { 0 〜 ある最大 } の範囲に入る数として与える。
◎
The progress element represents the completion progress of a task. The progress is either indeterminate, indicating that progress is being made but that it is not clear how much more work remains to be done before the task is complete (e.g. because the task is waiting for a remote host to respond), or the progress is a number in the range zero to a maximum, giving the fraction of work that has so far been completed.
</p>

<p>
要素により表現される現在の~task完了を決定する 2 個の属性がある：
◎
There are two attributes that determine the current task completion represented by the element.＼
</p>

<ul>
	<li>
``value@a
属性は、
完了した~task量を指定する。
◎
The value attribute specifies how much of the task has been completed, and＼
</li>
	<li>
``max@a
属性は、
~taskが要する作業の総量を指定する。
◎
the max attribute specifies how much work the task requires in total.＼
</li>
	<li>
両~属性とも、
単位は任意であり，指定されない。
◎
The units are arbitrary and not specified.
</li>
</ul>

<p class="note">注記：
進捗~barを `確定的^i にするためには、
``value$a 属性に現在の進捗（ 0.0 〜 ``最大~値$ に入る数）を伴わせて追加する。
進捗~barを `不定^i にするためには、
``value$a 属性を除去する。
◎
To make a determinate progress bar, add a value attribute with the current progress (either a number from 0.0 to 1.0, or, if the max attribute is specified, a number from 0 to the value of the max attribute). To make an indeterminate progress bar, remove the value attribute.
</p>

<p>
作者には、
進捗が旧来の~UAの利用者からも可用になるよう，要素の内側に 現在の値と最大~値を~textとして~inlineに含めることも奨励される。
◎
Authors are encouraged to also include the current value and the maximum value inline as text inside the element, so that the progress is made available to users of legacy user agents.
</p>

<div class="example">
<p>
ある自動化された~taskの進捗を示す~web~appの例：
◎
Here is a snippet of a web application that shows the progress of some automated task:
</p>

`progress-1^xCode

<p>
（この例の `updateProgress()^m ~methodは、
実際の進捗~barを更新するためにあり、
~taskが進捗するに伴い，~page上の他の~codeから~callされることになる。）
◎
(The updateProgress() method in this example would be called by some other code on the page to update the actual progress bar as the task progressed.)
</p>
</div>

<div class="p">
<p>
［
``value$a ／ ``max$a
］属性に指定する値は、
`妥当な浮動小数点数$でなければナラナイ。
加えて、
%V, %M を次で与える値とするとき［
0 ~LTE %V ~LTE %M
］~AND［
0 ~LT %M
］を満たさなければナラナイ：
</p>
		<ul>
			<li>
%V は、
要素は ``value$a 属性を有するならば それが表現する実数 ／
~ELSE_ 0
</li>
			<li>
%M は、
要素は ``max$a 属性を有するならば それが表現する実数 ／
~ELSE_ 1.0
</li>
		</ul>
◎
The value and max attributes, when present, must have values that are valid floating-point numbers. The value attribute, if present, must have a value greater than or equal to zero, and less than or equal to the value of the max attribute, if present, or 1.0, otherwise. The max attribute, if present, must have a value greater than zero.
</div>

<p class="note">注記：
`progress$e 要素を［
~task進捗でない，単なる計器などの何か
］に利用するのは間違いである。
一例として、
`progress$e を利用して~disk消費量を指示するのは適切でない。
その種の事例には、
`meter$e 要素が用意されている。
◎
The progress element is the wrong element to use for something that is just a gauge, as opposed to task progress. For instance, indicating disk space usage using progress would be inappropriate. Instead, the meter element is available for such use cases.
</p>

<p><strong>~UA要件</strong>
⇒
進捗~barは、［
``value$a 属性が省略されたならば `不定^i ／
~ELSE_ `確定的^i
］にする。
◎
User agent requirements: If the value attribute is omitted, then the progress bar is an indeterminate progress bar. Otherwise, it is a determinate progress bar.
</p>

<p>
進捗~barが `確定的^i であるならば、
~UAは，当の要素 %要素 の：
◎
↓</p>
<ul>
	<li class="algo">
<p>
``最大~値@
を次に従って得るモノトスル：
</p>
		<ol>
			<li>
%属性~値 ~LET %要素 は ``max$a 属性を［
有するならば その値／
有さないならば ε
］
</li>
			<li>
~IF［
%属性~値 ~EQ ε
］
⇒
~RET 1.0
</li>
			<li>
%最大 ~LET `浮動小数点数として構文解析する$( %属性~値 )
</li>
			<li>
~IF［
%最大 ~EQ `失敗^i
］
⇒
~RET 1.0
</li>
			<li>
~IF［
%最大 ~LTE 0
］
⇒
~RET 1.0
</li>
			<li>
~RET %最大
</li>
		</ol>
◎
If the progress bar is a determinate progress bar and the element has a max attribute, the user agent must parse the max attribute's value according to the rules for parsing floating-point number values. If this does not result in an error, and if the parsed value is greater than zero, then the maximum value of the progress bar is that value. Otherwise, if the element has no max attribute, or if it has one but parsing it resulted in an error, or if the parsed value was less than or equal to zero, then the maximum value of the progress bar is 1.0.
</li>
	<li class="algo">
<p>
``値@
を次に従って得るモノトスル：
</p>
		<ol>
			<li>
~Assert：
%要素 は ``value$a 属性を有する
</li>
			<li>
%値 ~LET `浮動小数点数として構文解析する$( %要素 の ``value$a 属性の値 )
</li>
			<li>
~IF［
%値 ~NEQ `失敗^i
］~AND［
%値 ~GT 0
］
⇒
~RET %値
</li>
			<li>
~RET 0
</li>
		</ol>
◎
If the progress bar is a determinate progress bar, user agents must parse the value attribute's value according to the rules for parsing floating-point number values. If this does not result in an error and the parsed value is greater than zero, then the value of the progress bar is that parsed value. Otherwise, if parsing the value attribute's value resulted in an error or a number less than or equal to zero, then the value of the progress bar is zero.
</li>
	<li class="algo">
<p>
``現在の値@
を次に従って得るモノトスル：
</p>
		<ol>
			<li>
%値 ~LET %要素 の``値$
</li>
			<li>
%最大~値 ~LET %要素 の``最大~値$
</li>
			<li>
~IF［
%値 ~LTE %最大~値
］
⇒
~RET %値
</li>
			<li>
~RET %最大~値
</li>
		</ol>
◎
If the progress bar is a determinate progress bar, then the current value is the maximum value, if value is greater than the maximum value, and value otherwise.
</li>
</ul>

<div>
<p><strong>進捗~barを示すときの~UA要件</strong>
⇒
利用者に対し `progress$e 要素を表現するときは、
~UAは，次を指示するベキである：
</p>
		<ul>
			<li>
［
`確定的^i, `不定^i
］どちらなのか
</li>
			<li>
`確定的^i な場合、
``最大~値$に相対的な``現在の値$の位置
</li>
		</ul>
◎
UA requirements for showing the progress bar: When representing a progress element to the user, the UA should indicate whether it is a determinate or indeterminate progress bar, and in the former case, should indicate the relative position of the current value relative to the maximum value.
</div>

<dl class="domintro">

	<dt>%progress.``position$m</dt>
	<dd>
`確定的^i な進捗~bar（現在の最大~値が既知であるもの）に対しては［
現在の値 ÷ 最大~値
］を返す。
◎
For a determinate progress bar (one with known current and maximum values), returns the result of dividing the current value by the maximum value.
</dd>
	<dd>
`不定^i な進捗~barに対しては −1 を返す。
◎
For an indeterminate progress bar, returns −1.
</dd>
</dl>

<div class="algo">
``position@m
取得子~手続きは
⇒
~RET ［
コレは `不定^i な進捗~barであるならば −1 ／
~ELSE_［
コレの``現在の値$ ÷ コレの``最大~値$
］］
◎
If the progress bar is an indeterminate progress bar, then the position IDL attribute must return −1. Otherwise, it must return the result of dividing the current value by the maximum value.
</div>

<div class="algo">
``value@m
取得子~手続きは
⇒
~RET ［
コレが `不定^i な進捗~barであるならば 0 ／
~ELSE_ コレの``現在の値$
］
◎
If the progress bar is an indeterminate progress bar, then the value IDL attribute, on getting, must return 0. Otherwise, it must return the current value.＼
</div>

<div class="algo">
<p>
``value$m 設定子~手続きは
⇒
コレの ``value$m 内容~属性を［
所与の値を`浮動小数点数として最良な表現$に変換した結果
］に設定する
◎
On setting, the given value must be converted to the best representation of the number as a floating-point number and then the value content attribute must be set to that string.
</p>

<p class="note">注記：
対応する内容~属性が無いときに ``value$m ~IDL属性を自身に設定すると、
進捗~barは `不定^i から進捗を伴わない `確定的^i に変化することになる。
◎
Setting the value IDL attribute to itself when the corresponding content attribute is absent would change the progress bar from an indeterminate progress bar to a determinate progress bar with no progress.
</p>
</div>

<p>
``max@m
~IDL属性は、
`正な数のみに制限され$る, かつ`既定の値$は 1.0 とする下で，
``max$a 内容~属性を`反映する$モノトスル。
◎
The max IDL attribute must reflect the content attribute of the same name, limited to only positive numbers. The default value for max is 1.0.
</p>

<p>
`progress$e 要素には、
次に挙げる~IDL~memberもある
⇒
`labels$m は、
要素を指している `label$e からなる~listを供する。
◎
The labels IDL attribute provides a list of the element's labels.
</p>

			</section>
			<section id="the-meter-element">
<h4 title="The meter element">4.10.14. ``meter^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$ ／ `句ng内容$ ／ `可触~内容$ ／ `~label可能$な要素
◎
Flow content.
◎
Phrasing content.
◎
Labelable element.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$
— ただし、
子孫に `meter$e 要素が在ってはならない。
◎
Phrasing content, but there must be no meter element descendants.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
``value$a
— 要素の現在の値
◎
value — Current value of the element
</dd>
	<dd>
``min$a
— 範囲の下界
◎
min — Lower bound of range
</dd>
	<dd>
``max$a
— 範囲の上界
◎
max — Upper bound of range
</dd>
	<dd>
``low$a
— 低域の上限
◎
low — High limit of low range
</dd>
	<dd>
``high$a
— 高域の下限
◎
high — Low limit of high range
</dd>
	<dd>
``optimum$a
— 計器における最適~値
◎
optimum — Optimum value in gauge
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`meter$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window]
interface `HTMLMeterElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute double ``value$m;
  [`CEReactions$] attribute double ``min$m;
  [`CEReactions$] attribute double ``max$m;
  [`CEReactions$] attribute double ``low$m;
  [`CEReactions$] attribute double ``high$m;
  [`CEReactions$] attribute double ``optimum$m;
  readonly attribute `NodeList$I `labels$m;
};
</pre>

	</dd>
</dl>

<p>
`meter$e 要素は、［
ある有界な範囲の中の一次元の測定／割合~値
］を`表現-$する。
例えば：
~disk消費量 ／
~query結果の関連度 ／
特定候補に対する投票割合
◎
The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.
</p>

<p>
これは、
計器（ `gauge^en ）とも呼ばれる。
◎
This is also known as a gauge.
</p>

<p>
`meter$e 要素は、
（進捗~barのような）進捗を指示するために利用されるベキでない。
その役割には、
`progress$e 要素が別途~用意されている。
◎
The meter element should not be used to indicate progress (as in a progress bar). For that role, HTML provides a separate progress element.
</p>

<p class="note">注記：
`meter$e 要素は、
有界でない範囲の一次元の値は表現しない
— 既知な最大~値がない限り、
例えばこれを，体重や身長を報告するために利用するのは間違いである。
◎
The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value.
</p>

<p>
要素により表現される計器の意味論を決定する 6 個の属性がある：
◎
There are six attributes that determine the semantics of the gauge represented by the element.
</p>

<div class="p">
<ul>
	<li>
［
``min@a
／
``max@a
］属性は、
範囲の［
下界 ／ 上界
］を指定する。
</li>
	<li>
``value@a
属性は、
計器に “測定された値” を指示する値を指定する。
</li>
</ul>

◎
The min attribute specifies the lower bound of the range, and the max attribute specifies the upper bound. The value attribute specifies the value to have the gauge indicate as the "measured" value.
</div>

<p>
他の 3 個の属性は、
計器の範囲を［
“低域”, “中域”, “高域”
］に区分し，計器のどの域が “最適な域” になるかを指示するために利用できる：
◎
The other three attributes can be used to segment the gauge's range into "low", "medium", and "high" parts, and to indicate which part of the gauge is the "optimum" part.＼
</p>

<ul>
	<li>
［
``low@a
／
``high@a
］属性は、［
“低域” ／ “高域”
］と見なされる範囲を指定する。
◎
The low attribute specifies the range that is considered to be the "low" part, and the high attribute specifies the range that is considered to be the "high" part.＼
</li>
	<li>
``optimum@a
属性は、
“最適とされる位置” を与える
— それが［
低域 ／ 中域 ／ 高域
］に入る場合、
値は［
低いほど良い ／ 高過ぎても低過ぎても良くない ／ 高いほど良い
］ことを指示する。
◎
The optimum attribute gives the position that is "optimum"; if that is higher than the "high" value then this indicates that the higher the value, the better; if it's lower than the "low" mark then it indicates that lower values are better, and naturally if it is in between then it indicates that neither high nor low values are good.
</li>
</ul>

<p>
<strong>著作~要件</strong>：
◎
Authoring requirements:＼
</p>
<ul>
	<li>
``value$a 属性は、
指定されなければナラナイ。
◎
The value attribute must be specified.＼
</li>
	<li>
次に挙げる属性に指定する値は、
`妥当な浮動小数点数$でなければナラナイ
⇒
``value$a,
``min$a,
``low$a,
``high$a,
``max$a,
``optimum$a
◎
The value, min, low, high, max, and optimum attributes, when present, must have values that are valid floating-point numbers.
</li>
	<li>
<p>
［
``value$a ／ ``low$a ／ ``high$a ／ ``optimum$a
］属性に指定する値が表現する実数は、
次に与える %最小 以上, %最大 以下でなければナラナイ：
</p>
		<ul>
			<li>
%最小 は［
要素は ``min$a 属性を有するならば その値が表現する実数 ／
~ELSE_ 0
］
</li>
			<li>
%最大 は［
要素は ``max$a 属性を有するならば その値が表現する実数 ／
~ELSE_ 1.0
］
</li>
		</ul>
◎
In addition, the attributes' values are further constrained:
◎
Let value be the value attribute's number.
◎
If the min attribute is specified, then let minimum be that attribute's value; otherwise, let it be zero.
◎
If the max attribute is specified, then let maximum be that attribute's value; otherwise, let it be 1.0.
◎
The following inequalities must hold, as applicable:
• minimum ≤ value ≤ maximum
• minimum ≤ low ≤ maximum (if low is specified)
• minimum ≤ high ≤ maximum (if high is specified)
• minimum ≤ optimum ≤ maximum (if optimum is specified)
</li>
	<li>
［
``low$a, ``high$a
］両~属性に値を指定する場合、［
``low$a が表現する実数 ~LT ``high$a が表現する実数
］でなければナラナイ
◎
• low ≤ high (if both low and high are specified)
</li>
</ul>

<p class="note">注記：
最小も最大も指定されない場合の範囲は，
0 以上 1 以下と見做されるので、
値は，その範囲に入る必要がある。
◎
If no minimum or maximum is specified, then the range is assumed to be 0..1, and the value thus has to be within that range.
</p>

<p>
作者には、
`meter$e 要素を~supportしない~UAの利用者~用に，計器の状態の~textな表現を要素の内容に含めることが奨励される。
◎
Authors are encouraged to include a textual representation of the gauge's state in the element's contents, for users of user agents that do not support the meter element.
</p>

<p>
`meter$e 要素の ``value$a 属性は、
`~microdata$と併用されるときは，
要素の機械読取可能な値を供する。
◎
When used with microdata, the meter element's value attribute provides the element's machine-readable value.
</p>

<div class="example">
<p>
次の例に 3 つの計器を示す
— いずれも割合として 75% を指している：
◎
The following examples show three gauges that would all be three-quarters full:
</p>

`meter-1a^xCode
`meter-1b^xCode
`meter-1c^xCode

<p>
要素の不正な利用~例
— それは範囲を与えてないので（加えて，既定の最大は 1 になるので、
両~計器とも最大に振り切れた見かけになる）：
◎
The following example is incorrect use of the element, because it doesn't give a range (and since the default maximum is 1, both of the gauges would end up looking maxed out):
</p>

`meter-2^xCode

<p>
代わりに、
`meter^e 要素を含めないか，または
範囲を定義した `meter^e 要素を利用して，他のパイと比較される文脈における寸法を与える：
◎
Instead, one would either not include the meter element, or use the meter element with a defined range to give the dimensions in context compared to other pies:
</p>

`meter-3^xCode
</div>

<p>
`meter$e 要素に明示的に単位を指定する仕方は無いが、
単位は
`title$a 属性~内に自由-形な~textとして指定してもヨイ。
◎
There is no explicit way to specify units in the meter element, but the units may be specified in the title attribute in free-form text.
</p>

<div class="example">
<p>
上の例は、
次のように拡張すれば，単位も言及できる：
◎
The example above could be extended to mention the units:
</p>

`meter-4^xCode
</div>

<p>
<strong>~UA要件</strong>は、
以下に与えられる。
◎
User agent requirements:＼
</p>

<p>
~UAは、
次に挙げる属性の値を`浮動小数点数として構文解析する$モノトスル
⇒＃
``min$a,
``max$a,
``value$a,
``low$a,
``high$a,
``optimum$a
◎
User agents must parse the min, max, value, low, high, and optimum attributes using the rules for parsing floating-point number values.
</p>

<p>
~UAは、
これらすべての実数を利用して，次に従って，計器~上の 6 点pを与える値を得するモノトスル（評価される順序は重要になる
— 一部の値は、
先に得られた結果に基づくので）：
◎
User agents must then use all these numbers to obtain values for six points on the gauge, as follows. (The order in which these are evaluated is important, as some of the values refer to earlier ones.)
</p>

<ol>
	<li>
<p>
以下においては：
</p>
		<ul>
			<li>
<p>
`N^op( %属性, %既定~値 )
という表記は、
次の結果を表すとする：
</p>
				<ol>
					<li>
%属性~値 ~LET 要素は %属性 を［
有するならば その値／
有さないならば ε
］
</li>
					<li>
<p>
~IF［
%属性~値 ~NEQ ε
］：
</p>
						<ol>
							<li>
%結果 ~LET `浮動小数点数として構文解析する$( %属性~値 )
</li>
							<li>
~IF［
%結果 ~NEQ `失敗^i
］
⇒
~RET %結果
</li>
						</ol>
</li>
					<li>
~RET %既定~値
</li>
				</ol>
			</li>
			<li>
`min^op(…), `max^op(…) は、
順に，所与の引数たちの最小, 最大をとる関数とする。
</li>
		</ul>
◎
↓</li>

	<li>
``最小~値@
は、
次で与えられる
⇒
`N^op( ``min$a, 0 )
◎
The minimum value
◎
If the min attribute is specified and a value could be parsed out of it, then the minimum value is that value. Otherwise, the minimum value is zero.
</li>
	<li>
``最大~値@
は、
次で与えられる
⇒
`max^op ( ``最小~値$, `N^op( ``max$a, 1.0 ) )
◎
The maximum value
◎
If the max attribute is specified and a value could be parsed out of it, then the candidate maximum value is that value. Otherwise, the candidate maximum value is 1.0.
◎
If the candidate maximum value is greater than or equal to the minimum value, then the maximum value is the candidate maximum value. Otherwise, the maximum value is the same as the minimum value.
</li>
	<li>
``実際の値@
は、
次で与えられる
⇒
`min^op( `max^op( ``最小~値$, `N^op( ``value$a, 0 ) ), ``最大~値$ )
◎
The actual value
◎
If the value attribute is specified and a value could be parsed out of it, then that value is the candidate actual value. Otherwise, the candidate actual value is zero.
◎
If the candidate actual value is less than the minimum value, then the actual value is the minimum value.
◎
Otherwise, if the candidate actual value is greater than the maximum value, then the actual value is the maximum value.
◎
Otherwise, the actual value is the candidate actual value.
</li>
	<li>
``下界@
は、
次で与えられる
⇒
`min^op( `max^op( ``最小~値$, `N^op( ``low$a, ``最小~値$ ) ), ``最大~値$ )
◎
The low boundary
◎
If the low attribute is specified and a value could be parsed out of it, then the candidate low boundary is that value. Otherwise, the candidate low boundary is the same as the minimum value.
◎
If the candidate low boundary is less than the minimum value, then the low boundary is the minimum value.
◎
Otherwise, if the candidate low boundary is greater than the maximum value, then the low boundary is the maximum value.
◎
Otherwise, the low boundary is the candidate low boundary.
</li>
	<li>
``上界@
は、
次で与えられる
⇒
`min^op( `max^op( ``下界$, `N^op( ``value$a, ``最大~値$ ) ), ``最大~値$ )
◎
The high boundary
◎
If the high attribute is specified and a value could be parsed out of it, then the candidate high boundary is that value. Otherwise, the candidate high boundary is the same as the maximum value.
◎
If the candidate high boundary is less than the low boundary, then the high boundary is the low boundary.
◎
Otherwise, if the candidate high boundary is greater than the maximum value, then the high boundary is the maximum value.
◎
Otherwise, the high boundary is the candidate high boundary.
</li>
	<li>
``最適~点p@
は、
次で与えられる
⇒
`min^op( `max^op( ``最小~値$, %N ) ), ``最大~値$ )
— ここで
⇒
%N ~EQ `N^op( ``optimum$a, ( ( ``最小~値$ + ``最大~値$ ) ÷ 2 ) )
◎
The optimum point
◎
If the optimum attribute is specified and a value could be parsed out of it, then the candidate optimum point is that value. Otherwise, the candidate optimum point is the midpoint between the minimum value and the maximum value.
◎
If the candidate optimum point is less than the minimum value, then the optimum point is the minimum value.
◎
Otherwise, if the candidate optimum point is greater than the maximum value, then the optimum point is the maximum value.
◎
Otherwise, the optimum point is the candidate optimum point.
</li>
</ol>

<p>
これらすべての結果は、
次の不等式を満たす：
◎
All of which will result in the following inequalities all being true:
</p>

<ul>
	<li>
最小~値 ~LTE 実際の値 ~LTE 最大~値
◎
minimum value ≤ actual value ≤ maximum value
</li>
	<li>
最小~値 ~LTE 下界 ~LTE 上界 ~LTE 最大~値
◎
minimum value ≤ low boundary ≤ high boundary ≤ maximum value
</li>
	<li>
最小~値 ~LTE 最適~点p ~LTE 最大~値
◎
minimum value ≤ optimum point ≤ maximum value
</li>
</ul>

<p><strong>計器の各~域に対する~UA要件</strong>：
◎
UA requirements for regions of the gauge:＼
</p>

<ul>
	<li>
［
``下界$ ~LTE 最適~点p ~LTE ``上界$
］の場合、
計器の
{ ``下界$ 〜 ``上界$ }
域を，最適~域として扱うモノトスル。
◎
If the optimum point is equal to the low boundary or the high boundary, or anywhere in between them, then the region between the low and high boundaries of the gauge must be treated as the optimum region, and the low and high parts, if any, must be treated as suboptimal.＼
</li>
	<li>
［
最適~点p ~LT ``下界$
］の場合、
{ ``最小~値$ 〜 ``下界$ }
域を，最適~域として扱うモノトスル。
◎
Otherwise, if the optimum point is less than the low boundary, then the region between the minimum value and the low boundary must be treated as the optimum region, the region from the low boundary up to the high boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region.＼
</li>
	<li>
［
最適~点p ~GT ``上界$
］の場合、
{ ``上界$ 〜 ``最大~値$ }
域を，最適~域として扱うモノトスル。
◎
Finally, if the optimum point is higher than the high boundary, then the situation is reversed; the region between the high boundary and the maximum value must be treated as the optimum region, the region from the high boundary down to the low boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region.
</li>
	<li>
いずれの場合も、
他の域は，最適とされる域から遠いほど 最適でないものと扱うモノトスル。
◎
↑</li>
</ul>

<p><strong>計器を示すときの~UA要件</strong>
⇒
`meter$e 要素を利用者~向けに表現するときは、
~UAは，［
最小／最大
］値から相対的な実際の値の位置, および
実際の値と計器の 3 域との関係性を指示するベキである。
◎
UA requirements for showing the gauge: When representing a meter element to the user, the UA should indicate the relative position of the actual value to the minimum and maximum values, and the relationship between the actual value and the three regions of the gauge.
</p>

<div class="example">
<p>
次の~markupは…：
◎
The following markup:
</p>

`meter-5^xCode

<p>
…次のように描画されるであろう：
◎
Might be rendered as follows:
</p>

<figure>
<figcaption id="_dgm-sample-meter">
種々の長さの緑色~barで~inlineに描画される `meter$e 要素
◎
With the &lt;meter&gt; elements rendered as inline green bars of varying lengths.
</figcaption></figure>
</div>

<p>
~UAは、
`title$a 属性や他の属性の値を組合せて，文脈に応じた~helpや実際の値の詳細を~~述べる~textを~inlineに供してヨイ。
◎
User agents may combine the value of the title attribute and the other attributes to provide context-sensitive help or inline text detailing the actual values.
</p>

<div class="example">
<p>
例えば、
次の~code片に対しては…：
◎
For example, the following snippet:
</p>

`meter-6^xCode

<p>
… ~UAは、
表示する計器に次のような 2 行の~tooltipを伴わせ得る
⇒＃
“値は 23.2 です（範囲 0 〜 60 ）。”
“秒数”
◎
...might cause the user agent to display a gauge with a tooltip saying "Value: 23.2 out of 60." on one line and "seconds" on a second line.
</p>
</div>

<div class="algo">
``value@m
取得子~手続きは
⇒
~RET コレの``実際の値$
◎
The value IDL attribute, on getting, must return the actual value.＼
</div>

<div class="algo">
``value$m 設定子~手続きは
⇒
コレの ``value$a 内容~属性を［
所与の値を`浮動小数点数として最良な表現$に変換した結果
］に設定する
◎
On setting, the given value must be converted to the best representation of the number as a floating-point number and then the value content attribute must be set to that string.
</div>

<div class="algo">
``min@m
取得子~手続きは
⇒
~RET コレの``最小~値$
◎
The min IDL attribute, on getting, must return the minimum value.＼
</div>

<div class="algo">
``min$m 設定子~手続きは
⇒
コレの ``min$a 内容~属性を［
所与の値を`浮動小数点数として最良な表現$に変換した結果
］に設定する
◎
On setting, the given value must be converted to the best representation of the number as a floating-point number and then the min content attribute must be set to that string.
</div>

<div class="algo">
``max@m
取得子~手続きは
⇒
~RET コレの``最大~値$
◎
The max IDL attribute, on getting, must return the maximum value.＼
</div>

<div class="algo">
``max$m 設定子~手続きは
⇒
コレの ``max$a 内容~属性を［
所与の値を`浮動小数点数として最良な表現$に変換した結果
］に設定する
◎
On setting, the given value must be converted to the best representation of the number as a floating-point number and then the max content attribute must be set to that string.
</div>

<div class="algo">
``low@m
取得子~手続きは
⇒
~RET コレの``下界$
◎
The low IDL attribute, on getting, must return the low boundary.＼
</div>

<div class="algo">
``low$m 設定子~手続きは
⇒
コレの ``low$a 内容~属性を［
所与の値を`浮動小数点数として最良な表現$に変換した結果
］に設定する
◎
On setting, the given value must be converted to the best representation of the number as a floating-point number and then the low content attribute must be set to that string.
</div>

<div class="algo">
``high@m
取得子~手続きは
⇒
~RET コレの``上界$
◎
The high IDL attribute, on getting, must return the high boundary.＼
</div>

<div class="algo">
``high$m 設定子~手続きは
⇒
コレの ``high$a 内容~属性を［
所与の値を`浮動小数点数として最良な表現$に変換した結果
］に設定する
◎
On setting, the given value must be converted to the best representation of the number as a floating-point number and then the high content attribute must be set to that string.
</div>

<div class="algo">
``optimum@m
取得子~手続きは
⇒
~RET コレの``最適~点p$
◎
The optimum IDL attribute, on getting, must return the optimum value.＼
</div>

<div class="algo">
``optimum$m 設定子~手続きは
⇒
コレの ``optimum$a 内容~属性を［
所与の値を`浮動小数点数として最良な表現$に変換した結果
］に設定する
◎
On setting, the given value must be converted to the best representation of the number as a floating-point number and then the optimum content attribute must be set to that string.
</div>

<p>
`meter$e 要素には、
次に挙げる~IDL~memberもある
⇒
`labels$m は、
要素を指している `label$e からなる~listを供する。
◎
The labels IDL attribute provides a list of the element's labels.
</p>

<div class="example">
<p>
計器を［
地域化された／平文による
］~textに~fall-backできるようにもする例：
◎
The following example shows how a gauge could fall back to localized or pretty-printed text.
</p>

`meter-7^xCode
</div>

			</section>
			<section id="the-fieldset-element">
<h4 title="The fieldset element">4.10.15. ``fieldset^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$ ／ `可触~内容$
◎
Flow content.
◎
Listed and autocapitalize-and-autocorrect inheriting form-associated element.
◎
Palpable content.
</dd>
	<dd>
`~formに所有され得る要素$のうち［
`~listされる$ ／ `自動頭字化-と自動訂正-を継承-$する
］もの
◎
↑</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`~flow内容$が期待される所。
◎
Where flow content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
［［
0 〜 1 個の `legend$e 要素
］,
`~flow内容$
］の並び。
◎
Optionally, a legend element, followed by flow content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
``disabled$a
— この~form~controlの子孫のうち［
`legend$e の内側にあるもの以外のもの
］は不能化される。
◎
disabled — Whether the descendant form controls, except any inside legend, are disabled
</dd>
	<dd>
`form$a
— この要素の所有者にする `form$e 要素を与える。
◎
form — Associates the element with a form element
</dd>
	<dd>
`name$a
— `form.elements$m ~APIにおいて利用する，この要素の名前。
◎
name — Name of the element to use in the form.elements API.
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`fieldset$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window]
interface `HTMLFieldSetElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute boolean ``disabled$m;
  readonly attribute `HTMLFormElement$I? `form$m;
  [`CEReactions$] attribute DOMString `name$m;

  readonly attribute DOMString ``type$m;

  [SameObject] readonly attribute `HTMLCollection$I ``elements$m;

  readonly attribute boolean `willValidate$m;
  [SameObject] readonly attribute `ValidityState$I `validity$m;
  readonly attribute DOMString `validationMessage$m;
  boolean `checkValidity$m();
  boolean `reportValidity$m();
  undefined `setCustomValidity$m(DOMString %error);
};
</pre>

</dd>
</dl>

<div class="p">
<p>
`fieldset$e 要素は、
一緒に~group化される~form~control（および他の内容）の集合を`表現-$し，任意選択で，~captionも伴う。
この~captionは、［
`fieldset$e 要素の`~legend$ ~NEQ ε
］ならば，それで与えられる。
`~legend$以外の子孫が~groupを形成する。
</p>

<p>
`fieldset$e 要素の
`~legend@
は、
要素の子に `legend$e 要素は［
在るならば それらのうち`~tree順序$で最初のもの ／
無いならば ε（~~存在しない）
］とする。
</p>

◎
The fieldset element represents a set of form controls (or other content) grouped together, optionally with a caption. The caption is given by the first legend element that is a child of the fieldset element, if any. The remainder of the descendants form the group.
</div>

<p>
`fieldset$e 要素が
``disabled@a
属性を有する場合、
要素の`~legend$を除く，要素~内のすべての~form~controlを`不能化する＠~HTMLforms#concept-fe-disabled$。
◎
The disabled attribute, when specified, causes all the form control descendants of the fieldset element, excluding those that are descendants of the fieldset element's first legend element child, if any, to be disabled.
</p>

<p>
`fieldset$e 要素は、
~OR↓ を満たすとき
``不能化されて@
いるとされる：
◎
A fieldset element is a disabled fieldset if it matches any of the following conditions:
</p>

<ul>
	<li>
``disabled$a 属性を有する
◎
Its disabled attribute is specified
</li>
	<li>
<p>
~AND↓ を満たす，別の `fieldset$e %F が在る：
</p>
		<ul>
			<li>
``disabled$a 属性を有する
</li>
			<li>
要素 ~IN { %F の子孫 }
</li>
			<li>
要素 ~NIN { %F の`~legend$の子孫 }
</li>
		</ul>
◎
It is a descendant of another fieldset element whose disabled attribute is specified, and is not a descendant of that fieldset element's first legend element child, if any.
</li>
</ul>

<p>
`fieldset$e 要素の：
◎
↓</p>
<ul>
	<li>
`form$a 属性は、
要素を ある`~form所有者$に明示的に所有させるために利用される。
◎
The form attribute is used to explicitly associate the fieldset element with its form owner.＼
</li>
	<li>
`name$a 属性は、
要素の名前を表現する。
◎
The name attribute represents the element's name.
</li>
</ul>

<dl class="domintro">

	<dt>%fieldset.``type$m</dt>
	<dd>
文字列 `fieldset^l を返す。
◎
Returns the string "fieldset".
</dd>

	<dt>%fieldset.``elements$m</dt>
	<dd>
この要素~内にある~form~controlからなる `HTMLCollection$I を返す。
◎
Returns an HTMLCollection of the form controls in the element.
</dd>
</dl>

<p>
``disabled@m
~IDL属性は、
``disabled$a 内容~属性を`反映する$モノトスル。
◎
The disabled IDL attribute must reflect the content attribute of the same name.
</p>

<div class="algo">
``type@m
取得子~手続きは
⇒
~RET 文字列 `fieldset^l
◎
The type IDL attribute must return the string "fieldset".
</div>

<div class="algo">
``elements@m
取得子~手続きは
⇒
~RET 次のようにされた `HTMLCollection$I
⇒＃
根 ~SET コレ,
~filterは`~listされる$要素に合致する
◎
The elements IDL attribute must return an HTMLCollection rooted at the fieldset element, whose filter matches listed elements.
</div>

<p>
`fieldset$e 要素には、
次に挙げる~IDL~memberもある：
◎
↓</p>
<ul >
	<li>
次に挙げるものは、
`拘束~検証~API$の一部を成す
⇒＃
`willValidate$m,
`validity$m,
`validationMessage$m,
`checkValidity()$m,
`reportValidity()$m,
`setCustomValidity()$m
◎
The willValidate, validity, and validationMessage attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API.＼
</li>
	<li>
次に挙げるものは、
要素の~form~APIの一部を成す
⇒＃
`form$m,
`name$m
◎
The form and name IDL attributes are part of the element's forms API.
</li>
</ul>

<div class="example">
<p>
`fieldset$e 要素を利用して、
関係する一連の~controlを~groupにまとめる例：
◎
This example shows a fieldset element being used to group a set of related controls:
</p>

`fieldset-1^xCode
</div>

<div class="example">
<p>
次の~code片に， `fieldset^e の `legend^e 内に［
`fieldset^e が可能化されるかどうかを制御する~checkbox
］を伴わせる例を示す。
`fieldset^e の内容は、［
2 個の要求される~text~control, 1 個の省略可能な年月t~control
］からなる。
◎
The following snippet shows a fieldset with a checkbox in the legend that controls whether or not the fieldset is enabled. The contents of the fieldset consist of two required text controls and an optional year/month control.
</p>

`fieldset-2^xCode
</div>

<div class="example">
<p>
`fieldset$e 要素は入子にできる。
前の例を~~拡張してそうする例：
◎
You can also nest fieldset elements. Here is an example expanding on the previous one that does so:
</p>

`fieldset-3^xCode

<p>
この例では、
外縁の "会員カードを使う" ~checkboxは，~checkされておらず、
外縁 `fieldset$e の内側にある すべては，
2 個の~radio~button
— それぞれは入子な `fieldset$e の `legend^e 内にある —
も含め，不能化されることになるが、
その~checkboxが~checkされた場合，両~radio~buttonとも可能化され、
2 個の内縁 `fieldset$e のどちらかを可能化させるよう，選択できるようにする。
◎
In this example, if the outer "Use Club Card" checkbox is not checked, everything inside the outer fieldset, including the two radio buttons in the legends of the two nested fieldsets, will be disabled. However, if the checkbox is checked, then the radio buttons will both be enabled and will let you select which of the two inner fieldsets is to be enabled.
</p>
</div>

<div class="example">
<p>
~controlを~group化する例。
~groupを~labelする `legend$e 要素は
— ~groupが文書の~outline内に表面化するよう —
見出し要素を入子にしている：
◎
This example shows a grouping of controls where the legend element both labels the grouping, and the nested heading element surfaces the grouping in the document outline:
</p>

`fieldset-4^xCode
</div>

			</section>
			<section id="the-legend-element">
<h4 title="The legend element">4.10.16. ``legend^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
なし。
◎
None.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`fieldset$e 要素の`最初の子$として。
◎
As the first child of a fieldset element.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
加えて，`見出し内容$が~~混在していてもよい。
◎
Phrasing content, optionally intermixed with heading content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`legend$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window]
interface `HTMLLegendElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  readonly attribute `HTMLFormElement$I? ``form$m;

  // `HTMLLegendElement$obsMb
};
</pre>

</dd>
</dl>

<p>
`legend$e 要素は、
親が `fieldset$e 要素ならば，［
自身以外の，親の内容
］用の~captionを`表現-$する。
◎
The legend element represents a caption for the rest of the contents of the legend element's parent fieldset element, if any.
</p>

<dl class="domintro">
	<dt>%legend.``form$m</dt>
	<dd>
要素が属する `form$e 要素が［
在るならば それ ／
無いならば ~NULL
］を返す。
◎
Returns the element's form element, if any, or null otherwise.
</dd>
</dl>

<div class="algo">
<p>
``form@m
取得子~手続きは：
◎
The form IDL attribute's behavior depends on whether the legend element is in a fieldset element or not.＼
</p>
<ol>
	<li>
~IF［
コレの親は `fieldset$e 要素である
］
⇒
~RET コレの親の `form$m 取得子~手続き()
◎
If the legend has a fieldset element as its parent, then the form IDL attribute must return the same value as the form IDL attribute on that fieldset element.＼
</li>
	<li>
~RET ~NULL
◎
Otherwise, it must return null.
</li>
</ol>
</div>

			</section>
</main>