HTML-input-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>HTML Standard — The input element（日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-whatwg.css" type="text/css">

<style>

@supports (writing-mode: vertical-rl) {

	#_input-type-attr-value i {
		font-style: normal;
	}

/* td, th に対する writing-mode のバグ対策（本来は span, nowrap 不要） */

	#_input-type-attr-head th > span,
	#_input-type-attr-value td > span {
		writing-mode: vertical-rl;
		white-space: nowrap;
	}
}

.bookkeeping-body > tr > th {
	white-space: nowrap;
}

</style>

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


<script>

Util.ready = () => {
	const source_data = {
		toc_main: 'MAIN',
		bookkeeping: parse_bookkeeping(),
		generate: expand
	};
	Util.switchWordsInit(source_data);

	function parse_bookkeeping(){
		const map = Object.create(null);
		const data = PAGE_DATA.bookkeeping;
		delete PAGE_DATA.bookkeeping;

		const parse1 = (input) => {
			const result = ['','','','','','','','','','','','','','',''];
			input
			.replace(/^([\w+()]+) +(.+)/mg, (match, name, bits) => {
				switch(name){
				case 'value':
				case 'select()':
					bits = bits
					.replace(/[オフ既値テ]/g, '適');
				}
				for(let i = 0; i < 15; i++){
					result[i] += bits[i] + name;
				}
				return '';
			});

			return result;
			// 否accept 否alt ....
		}

		const parse2 = (input) => {
			input = input
				.replace(/ +/g, ':')
				.replace(/否/g, '・');
			return Util.get_mapping(`\n${input}`)
		}

		const rxp = /■(.+)((?:\n.+)+)/g;
		let m;
		while(m = rxp.exec(data)){
			map[m[1]] = m[2].trim();
		}

		map.a = parse1(map.BKa);
		map.m = parse1(map.BKm);
		map.et = parse1(map.BKet);

		map.BKa = parse2(map.BKa);
		map.BKm = parse2(map.BKm);
		map.BKet = parse2(map.BKet);

		const states = Object.create(null);
		map.states = states;

		map.stateS.match(/([\w\-\/]+)$/mg)
		.forEach((st, index) => {
			for( const state of st.split('/') ){
				states[state] = index;
			}
		});

		return map;

	}
}

function expand(){
	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;
	const bookkeeping = this.bookkeeping;
	let bk = null;

	const create_bookkeeping = (state) => {
		const table = bookkeeping.template;
		const pointer = bookkeeping.states[state];
		return table.replace(/([適否])(\w+)/g, (m, a0, klass) => {
			let className = class_map[klass];
			className = className ? ` class="${className}"` : '';
			let first = true;
			return bookkeeping[klass][pointer]
			.replace( /([適否])(\w+)([()]*)/g, (m, a1, name, paren) => {
				if(a0 !== a1) return '';
				const comma = first ? '': ', ';
				first = false;
				return (
`${comma}<a href="${link_map[klass + '.' + name]}"><code${className}>${name}${paren}</code></a>`
				);
			});
		});
	}

	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 'm':
	bk = bookkeeping[`BK${klass}`][key];
	const n = text.indexOf('(');
	if(n > 0){
		key = text.slice(0, n);
		text = key + text.slice(n).replace(/\w+/g, '<var>$&</var>');
	}
	break;
case 'a':
case 'et':
	bk = bookkeeping[`BK${klass}`][key];
	break;
case 'l':
	text = `"<code class="literal">${text}</code>"`;
	break;
case 'U':
	text = `U+${key}`;
	break;
case 'smb':
	text = `(<span class="char-symbol">${text}</span>)`;
	break;
case 'en':
	text = `<span lang="en">${key}</span>`;
	break;
case 'bk': // bookkeeping
	return create_bookkeeping(key);
	break;
case 'BK': //
//	return '';
	text = bk.replace(/[適テ・]/g, '<td> $&');
	bk = null;
	break;
case 'xCode':
	return `<a id="_ex-html-${key}">＊</a>`;
	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(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>


<script type="text/plain" id="_source_data">


●●options

spec_date:2025-03-14
trans_update:2025-03-15
source_checked:250227
page_state_key:HTML
spec_status:LS
original_url:https://html.spec.whatwg.org/multipage/input.html
nav_prev:HEforms
nav_next:HTMLforms
trans_1st_pub:2016-09-17


●●class_map
e:element
a:attr
E:error
et:event-type
P:production
p:property
st:attr-state
h:header
U:code-point
v:value
jA:abstract
obsMb:comment

●●tag_map
I:code
m:code
E:code
c:code
et:code
e:code
a:code
P:code
h:code
p:code
st:i
U:span
t:var
jA:span
v:code
V:var
i:i
obsMb:span
em:em

●●bookkeeping

■stateS
H = Hidden
T = Text/Search
U = Url/Tel
E = Email
P = Password
D = Date/Month/Week/Time
L = Datetime-local
N = Number
R = Range
C = Color
X = Checkbox/Radio
F = File
S = Submit
I = Image
R = Reset/Button

                    H T U E P D L N R C X F S I B
■BKa
accept              否否否否否否否否否否否適否否否
alpha               否否否否否否否否否適否否否否否
alt                 否否否否否否否否否否否否否適否
autocomplete        適適適適適適適適適適否否否否否
checked             否否否否否否否否否否適否否否否
colorspace          否否否否否否否否否適否否否否否
dirname             適適適適適否否否否否否否適否否
formaction          否否否否否否否否否否否否適適否
formenctype         否否否否否否否否否否否否適適否
formmethod          否否否否否否否否否否否否適適否
formnovalidate      否否否否否否否否否否否否適適否
formtarget          否否否否否否否否否否否否適適否
height              否否否否否否否否否否否否否適否
list                否適適適否適適適適適否否否否否
max                 否否否否否適適適適否否否否否否
maxlength           否適適適適否否否否否否否否否否
min                 否否否否否適適適適否否否否否否
minlength           否適適適適否否否否否否否否否否
multiple            否否否適否否否否否否否適否否否
pattern             否適適適適否否否否否否否否否否
placeholder         否適適適適否否適否否否否否否否
popovertarget       否否否否否否否否否否否否適適適
popovertargetaction 否否否否否否否否否否否否適適適
readonly            否適適適適適適適否否否否否否否
required            否適適適適適適適否否適適否否否
size                否適適適適否否否否否否否否否否
src                 否否否否否否否否否否否否否適否
step                否否否否否適適適適否否否否否否
width               否否否否否否否否否否否否否適否

■BKm
checked             否否否否否否否否否否適否否否否
files               否否否否否否否否否否否適否否否
value               既値値値値値値値値値オフ既既既
valueAsDate         否否否否否適否否否否否否否否否
valueAsNumber       否否否否否適適適適否否否否否否
list                否適適適否適適適適適否否否否否
select()            否適適テ適テテテ否テ否テ否否否
selectionStart      否適適否適否否否否否否否否否否
selectionEnd        否適適否適否否否否否否否否否否
selectionDirection  否適適否適否否否否否否否否否否
setRangeText()      否適適否適否否否否否否否否否否
setSelectionRange() 否適適否適否否否否否否否否否否
stepDown()          否否否否否適適適適否否否否否否
stepUp()            否否否否否適適適適否否否否否否


■BKet
input               否適適適適適適適適適適適否否否
change              否適適適適適適適適適適適否否否

■template
<table>
<caption>各種［
内容~属性, ~IDL~member, ~event
］の適用-可否</caption>
<thead><tr><td><th><a href="#concept-input-apply">適用される</a>
<th><a href="#do-not-apply">適用されない</a>
<tbody class="bookkeeping-body">
<tr><th>内容~属性<td>適a<td>否a
<tr><th>~IDL~member<td>適m<td>否m
<tr><th>~event<td>適et<td>否et
</table>


●●words_table


	●network／url／保安
IDN:
Content-Type:
	client側:client-side
punycode::::
	ピュニコード
	~message用:messaging
提出用の:submission::~
遮られ:obscureされ:~
遮る:obscureする:~
識別情報:identity:~

	●仕様
傾向:tend:~
実用:practical use:~
導入:introduction:~
必要性:needs:~
拙い:poorな:~
支援-:assist:~
支援技術:assistive technology:~
	~~通例と同じく:as always
相関-:correlate:~
下位節:subsection:~
自明:trivial:~
概略的:brief:~
選択肢:option:~
	~~選択:choice
機能-:function:~
曖昧:vague:~
複雑:complicated:~
自立的:standalone:~
背後:behind:~
的確:right:~
自由度:freedom:~
尊重-:respect:~
免除-:exempt:~
末端-:end:~
為す:makeする:~
為して:makeして:~
流儀:fashion:~

	program的:programmatic
	代替として:alternatively
	-:possible
	特に／でもある:specifically
	~~相応に:suitably
	考える

	記され:spell-out
	~~区別:distinction
	依拠できない:unreliable
	ただし、:with the caveat that
	実在:actual value seen
	その場で:on the fly
	たまたま:happens to be
	他方:on the other hand
	考える:consider
	一緒に:in conjunction with
	~~期待する:looking for
	留意-:remind
	もちろん:of course
	意味論も:extra-semantic
	種々の:variety
	多様:wide variety
	現実的:realistic
	かかわらず:despite
	最後に:finally
	いくつあるかわからない:untold number
	ごく:quite
	用心深く:with caution
	微妙:subtle
	残念な出来事:sad-accident
	利するように:behalf of
	もう少し:slightly more
	少しばかりの:few bit s of
	この程度に限られる:only so much
	委ねられる:up to
	真の:true
	甘い:lax
	~~導入:phase
	~~早期:early-part
	生じたとき:occurrence
	style 上の:stylistic
	その場:on demand
	的に:fashion
	よく似る:very similar
	しようと:tries to
	すなわち:viz
	accordingly
	likely
	merely
	note
	refer
	respective
	very
	nonetheless
	事情:circumstances
	等:alike
	かまわない:free to
	~~領域:area
	両面:twofold
	〜にある理由:reasoning
	一つは:First
	もう一つは:Second
	それなりの:good deal of
	変更しないまま:leaves unchanged
	アリ性:possibility
	片方だけ:exactly one of these will be true
	数える:count
	誤りを正す:applying correction
	少数の~~具体例を挙げる:for illustration, a few examples include
	導く:leadする
	〜一方で、:Recall that 〜
	真に:true
	~~過去:earlier
	~~選択:choice

	●暦
Date:
Gregorian::::グレゴリオ
UTC:
milli::::ミリ
	milli秒:millisecond
	午前 0 時:midnight
閏:leap::~
年t:year::年
月t:month::月
日t:day::日
時t:hour::時
分t:minute::分
秒t:second::秒

年月t:year＆month::年＆月
	月日t:month＆date::月＆日
週t:week::週
年週t:year＆week::年＆週
週年t:week-year::週年
日時t:date＆time::日時
時間帯:time zone::~
偏差:time-zone offset::~
	~~時間:hours
milli::::ミリ
	~milli秒t:millisecond
暦:calendar::~
月曜:Monday::~
世紀:century:~


	紀元前:BCE

	1000 分の 1 秒:thousandth-of-a-second
	1970 年 1 月:January 1970
	1 ヶ月後:month late
	1970 年の第 1 週:1970-W01
	~UTC午前 0 時:midnight UTC on the morning of
	〜の午前 0 時:midnight on the morning of
	午後 9 時:9pm
	午前 6 時:6am
	現今の:contemporary

	●構文
perl:
compile::::コンパイル
省略:omission:~
正規表現:regular expression:~
regexp:
	%~regexp完了:regexpCompletion
	%起点付き~pattern:anchoredPattern
	起点にする:anchored
	起点:anchor
改行:line break:~
約物:punctuation:~
自由形:free-form:~
変形-:transform:~
丸めて:roundして:~
浮動小数点数:floating-point number:~
小数部:fraction:~
	fractional
引用符付き:quoted:~
剥ぐ:stripする:~
剥いだ:stripした:~

	突き合わせて:against
	照合-:matched against
	括った:surrounded
	直列化-法:serialization path

	●状態／妥当性
dirty:
overflow::::オーバーフロー
underflow::::アンダーフロー
check::::チェック
	~check有りか:checkedness
	~check有無:checkedness
on:
欠落:missing::~
無毒化:sanitization::~
不一致:mismatch::~

	対象外:barred
	〜の難あり:suffering
	可用にできない:unavailable
肯定的:positive:~
否定的:negative:~
不定:indeterminate:~
中間的:intermediate:~
固定的:fixed:~
	型を有する:typed
実数:number:~
番号:number:~

裏返され:reverseされ::~
粒度:granularity:~
step::::
周期的範囲:periodic domain::~
整数倍:integral multiple:~
拡張子:extension:~
閾値:threshold:~
倍率:scale factor:~
	-:delta
不連続:discontinuous:~
連続的:continuous:~
	linear and continuous
	2 状態をとり得る:two-state
	3 状態をとり得る:tri-state

	●UI
alert:
input:
commit::::コミット
checkbox::::チェックボックス
clipboard::::クリップボード
color-well::color well
dial::::ダイアル
drag::::ドラッグ
drop::::ドロップ
	drag-and-drop
drop-down::::ドロップダウン
email::::メール
filesystem::::ファイルシステム
	~focus可能:focusable
help::::ヘルプ
hover::::
keystroke::::キーストローク
locale::::ロケール
microphone::::マイクロフォン
password::::パスワード
account::::アカウント
search::::
paste::::ペースト
picker:::選択 UI
	~picker:selection picker
	~picker:picker UI
pointing::::ポインタ指示
popover:
slider::::スライダ
打込んだ:typeした:打ち込んだ:::タイプした
打込む:typeする:打ち込む:::タイプする
tooltip::::ツールチップ
undo::::
色環:color wheel:~

directory::::ディレクトリ
radio::::ラジオ
camera::::カメラ
headset::::ヘッドセット
編集-:edit:~
編集:edit:~
選択-:select:~
未選択に:unselect:~
選択:selection:~
退ける:dismissする:~
退けた:dismissした:~
退けら:dismissさ:~
	退けたものと:dismissal
退化-:degrade::~
欄:field::~::フィールド
	増減~button:spinbox
	増減~button付き:spinner
	“増減”:"up" and "down"
autofill:
自動補完-:autocomplete::~
自動補完:autocompletion::~
自動頭字化-:autocapitalize::~
自動訂正-:autocorrect::~
一行の:one-line:~
intelligent:
一過:transient::~
変動:variation:~
埋める:fillする:~
埋めて:fillして:~
	~~未入力:not yet filled in
	予め埋める:prefilling
閉じら:closeさ:~
閉じる:closeする:~
開かれ:openされ:~

隠す:hideする:~
示す:showする:~
示され:showされ:~
示して:showして:~
負担:burden:~
木目細か:fine-grained:~

	元に戻せ:return to
	紛らわしく:confusing
	つまみを離して:let go of the knob
	叩く:hit する
	手を止めた:pause
	簡素:terse
	~pageをめくるような~UI:paged
	応える:serve
	~clickに反応する:clickable
	でなくする:stop
	抑える:capping
	読み上げ:read out
	文面:word
	見かけ:look
	過度な:undue
	より容易:easier
	合わせ／沿うように:consistent
	小さな:minor
	間違い／誤認:mistake
	~~調製済み:preconfigured
	~~出現:brings up
	得る:gain
	選択し直す:re-select
	選ぶ:pick
	選ぶ:chooseする

	●呈示
sRGB:
Display-P3:Display P3
	~animate化:animated
red:
green:
blue:
alpha:
光量:light:~
黒:black:~
	ベージュ
	灰色に霞んだ:gray-out
描く:drawする:~
アキ:spacing::~
縦方向:vertical::~
横方向:horizontal::~
生来:natural::~
解像度:resolution::~
目盛り:tick mark:~
	-:arrow
	-:edge

	●地域
American:::米国
Arabic::::アラビア語
British:::英国
French::::フランス語
Persian::::ペルシャ語
Devanagari::::デヴァーナーガリー
Thai::::タイ語
英語:English::~
	Roman
地域化:localization::~::ローカル化
地域的:local::~::ローカル
双方向-:bidirectional::~
双方向的:bidirectional::~
右横書き:right-to-left::~
左横書き:left-to-right::~
書字:writing::~
文化的:cultural:~


	●内容
句ng:phrasing::句::フレージング
可触:palpable::~
分類:categories:~
credit-card:credit card::クレジットカード
database::::データベース
clip::::クリップ
句:phrase:~
音響:sound:~
電話:telephone:~
	phone

	●処理／event
経過-:elapse:~
中途完了:abrupt completion::~
composed:
load:
持続-:persist:~
復旧-:restore::~

	-:htmlCompatible

	●例
仮名:kana:~
漢字:kanji:~
発音区別符:accent:~
綴り:spelling:~
	写真:photograph
	写真集:photo collection
	~~写真:picture
	友人:friend
	履歴:history
	会話:conversation
	開幕:going to be showing
	~~宣伝:claim
	チケット:ticket
	購入:purchase
	世界中:everywhere
	~~堅い~~論説:intelligent discourse
	~~抑制:discourage
	-:US
	撮られた:take
	市場:market
	早期の:earlier
	空港:airport
	航空便予約:flight booking
	製品:product
	国:country

	●未分類

代用:replacement:~
到着-:arrive:~
迂回-:bypass:~
録音-:record:~
sniff:
重複:duplicate:~
	-:subset
時機:time:~
速度:speed:~
連絡先:contact:~
絞込む:filterする:絞り込む
絞込みつ:filterしつ:絞り込みつ
絞込まれ:filterされ:絞り込まれ
数量-:numeric:~
数量的:numerical:~
近過去:recent:~
合成な:syntheticな:~
防護-:guard:~
WebDriver-BiDi:


	近過去:recent past
	bit
	~~精度:accuracy
	code片:snippet
	-:original
	part::::
	複数~pageからなる:multipage
	各 `option^e に指定した値:completion value
	片:fragment／snippet
	~~数字:numeral
	numeral
	ふるい落とす:filter out
	-:living
	~scriptで動かす:scripted
	示-:show
	-:saying
	-:put
	-:speaking
	-:letting
	:getting
	bookkeeping
	found
	labeled
	having
	結果の:parsed
	戻-:back
	-:letter
	追う:follow
	並び:sequence
	正整数:whole numbers greater than zero
	の小数部:fractional／fraction
	10 進／10 進法／10 進数:decimal
	3 桁ごとにピリオドで分離して，小数点に~commaを用いて:apostrophes between thousands and commas before the decimals
	−:subtracted
	そのままの順序で:maintaining the listの order
	右手:right hand side
	相互に:vice versa
	同時:simultaneous
	~~頻度:how frequent
	~~導入:phase
	途中:partway through
	列目:column
	行:row
	端:extremity／extreme
	長い:long
	longer
	最も幅広な:broadest
	またぐ:span
	旧~値:valueBeforeStepping
	加えた:made
	右方:right
	下方:downwards
	成す:from
	~~成分:part
	~data内容:file body (the contents of the file)
	email:mail
	:maybe
	-:latest
	-:opposite
	-:indeed
	-:primary
	中心:midpoint
	-:extract
	大きい:large
	largest
	最も小さい:smallest
	書-:write
	書いた:writing
	最も近い:nearest
	短い:short
	間:break
	with-no
	おおよそ:somewhat
	go
	nor
	neither
	amongst
	themself
	-:placeholder
	-:cluster
	-:anchor
	few
	period
	-:remote
	sensitive
	wide
	丸める:roundする


●●words_table1


FORMSintro:HTML-forms-intro-ja.html

valueO:value
titleG:title
NaN:<code>NaN</code>

RxpEmail:/^[a-zA-Z0-9.!#$%&amp;'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

●●original_id_map

●●mdn_urls
the-input-element:HTML/Element/input

htmlinputelement:API/HTMLInputElement

●●link_map


	●IDL
CEReactions:~HEcustom#cereactions
HTMLConstructor:~HTMLdom#htmlconstructor
LegacyNullToEmptyString:~WEBIDLjs#LegacyNullToEmptyString

I.HTMLElement:~HTMLdom#htmlelement
I.HTMLDataListElement:~HEforms#htmldatalistelement
I.HTMLSelectElement:~HEforms#htmlselectelement

I.SelectionMode:~HTMLforms#selectionmode
I.ValidityState:~HTMLforms#validitystate

I.HTMLInputElement:#htmlinputelement
I.FileList:~FILEAPI#filelist-section
I.HTMLFormElement:~HEforms#htmlformelement
I.NodeList:~DOM4#interface-nodelist
I.PopoverTargetElement:~HTMLpopover#popovertargetelement
I.PopoverInvokerElement:~HTMLpopover#popoverinvokerelement

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

I.Date:~TC39#sec-date-objects

js.object:~WEBIDL#idl-object

m.accept:#dom-input-accept
m.alpha:#dom-input-alpha
m.alt:#dom-input-alt
m.checked:#dom-input-checked
m.colorSpace:#dom-input-colorspace
m.defaultChecked:#dom-input-defaultchecked
m.defaultValue:#dom-input-defaultvalue
m.dirName:#dom-input-dirname
m.files:#dom-input-files
m.height:#dom-input-height
m.indeterminate:#dom-input-indeterminate
m.list:#dom-input-list
m.max:#dom-input-max
m.maxLength:#dom-input-maxlength
m.min:#dom-input-min
m.minLength:#dom-input-minlength
m.multiple:#dom-input-multiple
m.pattern:#dom-input-pattern
m.placeholder:#dom-input-placeholder
m.readOnly:#dom-input-readonly
m.required:#dom-input-required
m.showPicker:#dom-input-showpicker
	m.showPicker:#dom-select-showpicker
m.size:#dom-input-size
m.src:#dom-input-src
m.step:#dom-input-step
m.stepDown:#dom-input-stepdown
m.stepUp:#dom-input-stepup
m.type:#dom-input-type
m.value:#dom-input-value
m.valueAsDate:#dom-input-valueasdate
m.valueAsNumber:#dom-input-valueasnumber
m.width:#dom-input-width


m.autocomplete:~HTMLautofill#dom-fe-autocomplete
m.checkValidity:~HTMLforms#dom-cva-checkvalidity
m.disabled:~HTMLforms#dom-fe-disabled
m.form.elements:~HEforms#dom-form-elements
m.form:~HTMLforms#dom-fae-form
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.labels:~HEforms#dom-lfe-labels
m.name:~HTMLforms#dom-fe-name
m.reportValidity:~HTMLforms#dom-cva-reportvalidity
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.setCustomValidity:~HTMLforms#dom-cva-setcustomvalidity
m.setRangeText:~HTMLforms#dom-textarea/input-setrangetext
m.setSelectionRange:~HTMLforms#dom-textarea/input-setselectionrange
m.validationMessage:~HTMLforms#dom-cva-validationmessage
m.validity:~HTMLforms#dom-cva-validity
m.willValidate:~HTMLforms#dom-cva-willvalidate

m.bubbles:~DOM4#dom-event-bubbles
m.composed:~DOM4#dom-event-composed
ev.~composedか:~DOM4#composed-flag

	●
e.input:#the-input-element
e.datalist:~HEforms#the-datalist-element
e.form:~HEforms#the-form-element
e.iframe:~HEembed#the-iframe-element
e.label:~HEforms#the-label-element
e.option:~HEforms#the-option-element
e.select:~HEforms#the-select-element

e.img:~HEimages#the-img-element

et.cancel:~HTMLindex#event-cancel
et.change:~HTMLindex#event-change
et.error:~HTMLindex#event-error
et.input:~UIEVENTS#event-type-input
et.load:~HTMLindex#event-load

	●

a.accept:#attr-input-accept
a.alpha:#attr-input-alpha
a.alt:#attr-input-alt
a.checked:#attr-input-checked
a.colorspace:#attr-input-colorspace
a.list:#attr-input-list
a.max:#attr-input-max
a.maxlength:#attr-input-maxlength
a.min:#attr-input-min
a.minlength:#attr-input-minlength
a.multiple:#attr-input-multiple
a.pattern:#attr-input-pattern
a.placeholder:#attr-input-placeholder
a.popovertarget:~HTMLpopover#attr-popovertarget
a.popovertargetaction:~HTMLpopover#attr-popovertargetaction
a.readonly:#attr-input-readonly
a.required:#attr-input-required
a.size:#attr-input-size
a.src:#attr-input-src
a.step:#attr-input-step
a.title:#attr-input-title
a.type:#attr-input-type
a.value:#attr-input-value

a.autocomplete:~HTMLautofill#attr-fe-autocomplete
a.autofocus:~HTMLinteraction#attr-fe-autofocus
a.dirname:~HTMLforms#attr-fe-dirname
a.disabled:~HTMLforms#attr-fe-disabled
a.name:~HTMLforms#attr-fe-name
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.form:~HTMLforms#attr-fae-form
a.inputmode:~HTMLinteraction#attr-inputmode
a.~valueO:~HEforms#attr-option-value
a.selected:~HEforms#attr-option-selected
a.~titleG:~HTMLdom#attr-title
a.width:~HEembed#attr-dim-width
a.dir:~HTMLdom#attr-dir
a.height:~HEembed#attr-dim-height


v._charset_:~HTMLforms#attr-fe-name-charset
v.ltr:~HTMLdom#attr-dir-ltr
v.rtl:~HTMLdom#attr-dir-rtl
v.limited-srgb:#attr-input-colorspace-limited-srgb
v.display-p3:#attr-input-colorspace-display-p3
v.srgb:~CSSCOLOR#valdef-color-srgb
	v.display-p3＠~CSSCOLOR#valdef-color-display-p3

v.hidden:#attr-input-type-hidden-keyword
v.text:#attr-input-type-text-keyword
v.search:#attr-input-type-search-keyword
v.tel:#attr-input-type-tel-keyword
v.url:#attr-input-type-url-keyword
v.email:#attr-input-type-email-keyword
v.password:#attr-input-type-password-keyword
v.date:#attr-input-type-date-keyword
v.month:#attr-input-type-month-keyword
v.week:#attr-input-type-week-keyword
v.time:#attr-input-type-time-keyword
v.datetime-local:#attr-input-type-datetime-local-keyword
v.number:#attr-input-type-number-keyword
v.range:#attr-input-type-range-keyword
v.color:#attr-input-type-color-keyword
v.checkbox:#attr-input-type-checkbox-keyword
v.radio:#attr-input-type-radio-keyword
v.file:#attr-input-type-file-keyword
v.submit:#attr-input-type-submit-keyword
v.image:#attr-input-type-image-keyword
v.reset:#attr-input-type-reset-keyword
v.button:#attr-input-type-button-keyword

	●
st.Button:#button-state-(type=button)
st.Checkbox:#checkbox-state-(type=checkbox)
st.Color:#color-state-(type=color)
st.Date:#date-state-(type=date)
st.Email:#email-state-(type=email)
st.File:#file-upload-state-(type=file)
	File Upload
st.Hidden:#hidden-state-(type=hidden)
st.Image:#image-button-state-(type=image)
st.Datetime-local:#local-date-and-time-state-(type=datetime-local)
st.Month:#month-state-(type=month)
st.Number:#number-state-(type=number)
st.Password:#password-state-(type=password)
st.Radio:#radio-button-state-(type=radio)
	 Button
st.Range:#range-state-(type=range)
st.Reset:#reset-button-state-(type=reset)
	 Button
st.Submit:#submit-button-state-(type=submit)
	 Button
st.Tel:#telephone-state-(type=tel)
st.Search:#text-(type=text)-state-and-search-state-(type=search)
st.Text:#text-(type=text)-state-and-search-state-(type=search)
st.Time:#time-state-(type=time)
st.Url:#url-state-(type=url)
	URL
st.Week:#week-state-(type=week)

	＊st.type=time
	＊st.datetime-local

st.制限された~sRGB:#attr-input-colorspace-limited-srgb-state
st.~Display-P3:#attr-input-colorspace-display-p3-state

	●内部
状態:#_type-state
改行文字:#_newline
入力~eventを発火する:#_fire-input-event

	●concept-input-
適用される:#concept-input-apply
適用されない:#do-not-apply
要求される欄:#concept-input-required
~pickerを~support:#input-support-picker

~Date~objから文字列に変換する:#concept-input-value-date-string
実数から文字列に変換する:#concept-input-value-number-string
文字列から~Date~objに変換する:#concept-input-value-string-date
文字列から実数に変換する:#concept-input-value-string-number

許容される値~step:#concept-input-step
既定の~step基底:#concept-input-step-default-base
既定の~step:#concept-input-step-default
~step倍率:#concept-input-step-scale
~step基底:#concept-input-min-zero

周期的範囲:#has-a-periodic-domain
範囲は裏返されて:#has-a-reversed-range
範囲~制限がある:#have-range-limitations

既定の最大:#concept-input-max-default
既定の最小:#concept-input-min-default
最大:#concept-input-max
最小:#concept-input-min
	最大値:#attr-input-max
	最小値:#attr-input-min

既定~値:#concept-input-value-default-range
~check有無は~dirtyか:#concept-input-checked-dirty-flag
~check有無は~dirty:#concept-input-checked-dirty

可用:#input-img-available
選定された座標:#concept-input-type-image-coordinate
座標を選定する:#concept-input-type-image-coordinate

示唆~source要素:#concept-input-list

選択された~file~list:#concept-input-type-file-selected
~file選択を更新する:#update-the-file-selection
~path成分:#concept-input-file-path

	＊maximum:#concept-input-min
i.既定か~on~mode:#dom-input-value-default-on
i.既定~mode:#dom-input-value-default
i.~filename~mode:#dom-input-value-filename
i.値~mode:#dom-input-value-value


値の無毒化~algo:#value-sanitization-algorithm
~radio~button~group:#radio-button-group
妥当な~email~address~list:#valid-e-mail-address-list
妥当な~email~address:#valid-e-mail-address
~compile済み~patternによる正規表現:#compiled-pattern-regular-expression

	型~変化を通達する:#signal-a-type-change
~input作動化の挙動:#input-activation-behavior

合致して:#regexp-match-a-string
適用-可能なら~pickerを示す:#show-the-picker,-if-applicable

~color-well~control色を更新する:#update-a-color-well-control-color
~color-well~control色を直列化する:#serialize-a-color-well-control-color

	●FORMS
fe.不能化され:~HTMLforms#concept-fe-disabled
fe.~check有りか:~HTMLforms#concept-fe-checked
fe.変異-可能:~HTMLforms#concept-fe-mutable
fe.値:~HTMLforms#concept-fe-value
fe.値~群:~HTMLforms#concept-fe-values
fe.値は~dirtyか:~HTMLforms#concept-fe-dirty
利用者~妥当性:~HTMLforms#user-validity

拘束~検証の対象外:~HTMLforms#barred-from-constraint-validation
~button:~HEforms#concept-button

~form所有者:~HTMLforms#form-owner
値に許容される最大~長さ:~HTMLforms#maximum-allowed-value-length

~formに所有され得る要素:~HEforms#form-associated-element
再設定-可能:~HEforms#category-reset
提出-可能:~HEforms#category-submit
~listされ:~HEforms#category-listed
自動頭字化-と自動訂正-を継承-:~HEforms#category-autocapitalize
~label可能:~HEforms#category-label
提出-~button:~HEforms#concept-submit-button

opt.値:~HEforms#concept-option-value
opt.~label:~HEforms#concept-option-label

~form提出用の属性:~HTMLforms#attributes-for-form-submission
~form提出:~HTMLforms#form-submission
~formを提出する:~HTMLforms#concept-form-submit
	%利用者-関与i:~HTMLforms#submit-user-involvement
~formを再設定する:~HTMLforms#concept-form-reset
再設定~algo:~HTMLforms#concept-form-reset-control
選択~方向を設定する:~HTMLforms#set-the-selection-direction
~text手入力~cursor位置:~HTMLforms#concept-textarea/input-cursor

~pattern不一致の難あり:~HTMLforms#suffering-from-a-pattern-mismatch
~step不一致の難あり:~HTMLforms#suffering-from-a-step-mismatch
型~不一致の難あり:~HTMLforms#suffering-from-a-type-mismatch
~overflowの難あり:~HTMLforms#suffering-from-an-overflow
~underflowの難あり:~HTMLforms#suffering-from-an-underflow
不良~入力の難あり:~HTMLforms#suffering-from-bad-input
欠落である難あり:~HTMLforms#suffering-from-being-missing

~entry~list:~HTMLforms#entry-list
~entry~listを構築する:~HTMLforms#constructing-the-form-data-set

	§ :~HTMLforms#the-constraint-validation-api
	§ :#input-impl-notes
	§ :~FORMSintro#input-author-notes
	§ :#common-input-element-apis
	§ :#common-input-element-attributes
	§ :#common-input-element-events
	:#only-contemporary-times
	:~HTMLforms#constructing-the-form-data-set
	:#file-upload-state-(type=file)
	:#attr-input-title
	:#fakepath-srsly
	:~HTMLforms#attr-fe-maxlength
	:~HTMLforms#attr-fe-minlength

	●WAPI
~queueされ:~WAPI#queue-a-task
要素~taskを~queueする:~WAPI#queue-an-element-task

関連な大域~obj:~WAPI#concept-relevant-global
関連な設定群~obj:~WAPI#relevant-settings-object
~task~source:~WAPI#task-source
~task:~WAPI#concept-task
~network用~task~source:~WAPI#networking-task-source
利用者ヤリトリ~task~source:~WAPI#user-interaction-task-source


	●HTMLdom
分類:~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
text/html における~tag省略:~HTMLdom#concept-element-tag-omission
方向性:~HTMLdom#the-directionality
言語:~HTMLdom#language
表現-:~HTMLdom#represents
自動~方向性を伴う~formに所有され得る要素:~HTMLdom#auto-directionality-form-associated-elements

	●INFRA
実装定義:~INFRA#implementation-defined
~ASCII大小無視:~INFRA#ascii-case-insensitive
前後の~ASCII空白~列を剥ぐ:~INFRA#strip-leading-and-trailing-ascii-whitespace
~commaで分割-:~INFRA#split-on-commas
~commaで分割する:~INFRA#split-on-commas
改行文字を剥ぐ:~INFRA#strip-newlines
長さ:~INFRA#string-length
文字大小区別:~INFRA#string-is
付加する:~INFRA#list-append

	●用語（HTML
無視-:~HTMLINFRA#ignore
並列的:~HTMLINFRA#in-parallel
接続された:~HTMLINFRA#becomes-connected

反映する:~HTMLcdom#reflect
反映して:~HTMLcdom#reflect
既定の値:~HTMLcdom#default-value
既知な値のみに制限され:~HTMLcdom#limited-to-only-known-values
正な整数のみに制限され:~HTMLcdom#limited-to-only-non-negative-numbers-greater-than-zero
負でない整数のみに制限され:~HTMLcdom#limited-to-only-non-negative-numbers

~Content-Type~metadata:~HTMLurl#content-type
~URLを符号化法の下で相対的に構文解析する:~HTMLurl#encoding-parsing-a-url
前後~空白~可の妥当な~URL:~HTMLurl#valid-url-potentially-surrounded-by-spaces
前後~空白~可の妥当かつ空でない~URL:~HTMLurl#valid-non-empty-url-potentially-surrounded-by-spaces

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

年週t:~HTMLcms#concept-week
局所的~日時t:~HTMLcms#concept-datetime-local
日付:~HTMLcms#concept-date
時刻:~HTMLcms#concept-time
年月t:~HTMLcms#concept-month
局所的~日時t文字列を構文解析する:~HTMLcms#parse-a-local-date-and-time-string
日付~文字列を構文解析する:~HTMLcms#parse-a-date-string
年月t文字列を構文解析する:~HTMLcms#parse-a-month-string
時刻~文字列を構文解析する:~HTMLcms#parse-a-time-string
年週t文字列を構文解析する:~HTMLcms#parse-a-week-string
	＊parsing a week
妥当な日付~文字列:~HTMLcms#valid-date-string
妥当な局所的~日時t文字列:~HTMLcms#valid-local-date-and-time-string
妥当な年月t文字列:~HTMLcms#valid-month-string
妥当な時刻~文字列:~HTMLcms#valid-time-string
妥当な年週t文字列:~HTMLcms#valid-week-string
妥当な正規化-済み局所的~日時t文字列:~HTMLcms#valid-normalised-local-date-and-time-string


~focus:~HTMLinteraction#focused
~focusを得た:~HTMLinteraction#gains-focus
~focusを失う:~HTMLinteraction#unfocus-causes-change-event
~focus可能な区画:~HTMLinteraction#focusable-area
一過な作動化を有して:~HTMLinteraction#transient-activation
利用者-作動化を消費する:~HTMLinteraction#consume-user-activation

~popover要素:~HTMLpopover#_popover-element
~popover~target属性~作動化の挙動:~HTMLpopover#popover-target-attribute-activation-behavior

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

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

寸法~属性:~HEembed#dimension-attributes

新たな~Date~obj:~HTMLdep#create-a-date-object

同一-生成元:~ORIGIN#same-origin

持続された状態を復旧する:~HTMLnav#restore-persisted-state
~event用の~naviに対する利用者-関与i:~HTMLnav#event-uni

enV.生成元:~WAPI#concept-settings-object-origin
enV.~top-level生成元:~WAPI#concept-environment-top-level-origin

終了~tag:~HTMLwriting#syntax-end-tag
~load~eventを遅延-:~HTMLparsing#delay-the-load-event

	●用語（外部
故意的な違反:~INFRA#willful-violation
連結する:~INFRA#string-concatenate

~fetchする:~FETCH#concept-fetch
i.応答の本体~終了~時の処理n:~FETCH#fetch-processresponseendofbody
要請:~FETCH#concept-request
rq.~client:~FETCH#concept-request-client
rq.資格証~mode:~FETCH#concept-request-credentials-mode
rq.起動元~種別:~FETCH#request-initiator-type
rq.行先:~FETCH#concept-request-destination
rq.~URL:~FETCH#concept-request-url
rq.~URL資格証を利用するか:~FETCH#concept-request-use-url-credentials-flag
応答:~FETCH#concept-response
~fetch~taskを~queueする:~FETCH#queue-a-fetch-task

~CSS~pixel:~CSSVAL#px
最も近い整数に丸める:~CSSVAL#css-round-to-the-nearest-integer
生来な寸法:~CSSIMAGE#natural-dimensions

~CSS色~値を構文解析する:~CSSCOLOR#parse-a-css-color-value
不透明な黒:~CSSCOLOR#opaque-black
~HTMLに互換な直列化が要請される:~CSSCOLOR#color-serialization-html-compatible-serialization-is-requested
	＠~CSSCOLOR#color-conversion
	＠~CSSCOLOR#color-function
	＠~CSSCOLOR#serializing-color-values


~URL:~URL1#concept-url
url.妥当:~URL1#valid-url-string
絶対~URL:~URL1#absolute-url-string

~ID:~DOM4#concept-id
~clone時の手続き:~DOM4#concept-node-clone-ext
~node文書:~DOM4#concept-node-document
~tree順序:~DOM4#concept-tree-order
~tree:~DOM4#concept-tree
文書~tree内:~DOM4#in-a-document
接続されて:~DOM4#connected
~eventを発火する:~DOM4#concept-event-fire
~target:~DOM4#event-target
作動化の挙動:~DOM4#eventtarget-activation-behavior
旧来の作動化~前の挙動:~DOM4#eventtarget-legacy-pre-activation-behavior
旧来の作動化~取消~時の挙動:~DOM4#eventtarget-legacy-canceled-activation-behavior

中途完了:~TC39#sec-completion-record-specification-type
P.Pattern:~TC39#prod-Pattern
c.RegExp:~TC39#sec-regexp-regular-expression-objects
jA.RegExpCreate:~TC39#sec-regexpcreate
jA.RegExpBuiltinExec:~TC39#sec-regexpbuiltinexec

~MIME型:~MIMESNIFF#mime-type
~parameterを伴わない妥当な~MIME型~文字列:~MIMESNIFF#valid-mime-type-with-no-parameters
画像を特定的に~sniffするための規則:~MIMESNIFF#rules-for-sniffing-images-specifically
給された~MIME型:~MIMESNIFF#supplied-mime-type

	~RFCx/rfc1034#section-3.5
	~RFCx/rfc5322#section-3.2.3

●●html_code_list

■Url-1
<input type="url" name="location" list="urls">
<datalist id="urls">
 <option label="MIME: Format of Internet Message Bodies" value="https://www.rfc-editor.org/rfc/rfc2045">
 <option label="HTML" value="https://html.spec.whatwg.org/">
 <option label="DOM" value="https://dom.spec.whatwg.org/">
 <option label="Fullscreen" value="https://fullscreen.spec.whatwg.org/">
 <option label="Media Session" value="https://mediasession.spec.whatwg.org/">
 <option label="The Single UNIX Specification, Version 3" value="http://www.unix.org/version3/">
</datalist>


■Datetime-local-1
<fieldset>
 <legend>行き先</legend>
 <p><label>空港： <input type=text name=to list=airports></label></p>
 <p><label>出発時刻： <input type=datetime-local name=totime step=3600></label></p>
</fieldset>
<datalist id=airports>
 <option value=ATL label="Atlanta">
 <option value=MEM label="Memphis">
 <option value=LHR label="London Heathrow">
 <option value=LAX label="Los Angeles">
 <option value=FRA label="Frankfurt">
</datalist>

Destination
Airport: 
Departure time: 

■Number-1
<label>How much do you want to charge? $<input type=number min=0 step=0.01 name=price></label>

How much do you want to charge?

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


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

■Range-3
<input type="range" name="a" list="a-values">
<datalist id="a-values">
<option value="10" label="Low">
<option value="90" label="High">
</datalist>


■Radio-1
<form>
 <p><label><input type="radio" name="color" value="クロ" required disabled>クロ</label>
 <p><label><input type="radio" name="color" value="シロ">シロ</label>
 <p><button>選んでください</button>
</form>

color = dog-type
クロ = pupper/Pupper
シロ = doggo/Doggo
Make your choice


■File-1
<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">


■Image-1
<form action="process.cgi">
 <input type=image src=map.png name=where alt="所在リストを示す">
</form>

alt="Show location list"

■input-impl-notes-1
<label>今何してる？ <input name=status maxlength=140></label>

What are you doing?

■input-impl-notes-2
<p><label>ユーザ名：<input name=u required></label>
<p><label>パスワード：<input name=p required minlength=12></label>

Username: 
Password: 

■readonly-attribute-1
<form action="products.cgi" method="post" enctype="multipart/form-data">
 <table>
  <tr> <th> 品番 <th> 品名 <th> 価格 <th> 操作
  <tr>
   <td> <input ＜readonly＞ name="1.pid" value="H412">
   <td> <input required name="1.pname" value="フロア灯 稲妻">
   <td>¥<input required name="1.pprice" value="4999" type="number" min="0" step="1">
   <td> <button formnovalidate name="action" value="delete:1">削除</button>
  <tr>
   <td> <input ＜readonly＞ name="2.pid" value="FG28">
   <td> <input required name="2.pname" value="テーブル灯 雷光">
   <td>¥<input required name="2.pprice" value="2499" type="number" min="0" step="1">
   <td> <button formnovalidate name="action" value="delete:2">削除</button>
  <tr>
   <td> <input required name="3.pid" ＜value=""＞ pattern="[A-Z0-9]+">
   <td> <input required name="3.pname" value="">
   <td>¥<input required name="3.pprice" value="" type="number" min="0" step="1">
   <td> <button formnovalidate name="action" value="delete:3">削除</button>
 </table>
 <p> <button formnovalidate name="action" value="add">追加</button> </p>
 <p> <button name="action" value="update">保存</button> </p>
</form>


■required-attribute-1
<h1>新規アカウントの作成</h1>
<form action="/newaccount" method=post
      oninput="up2.setCustomValidity(up2.value != up.value ? 'パスワードが合致しません。' : '')">
 <p>
  <label for="username">メールアドレス：</label>
  <input id="username" type=email required name=un>
 <p>
  <label for="password1">パスワード：</label>
  <input id="password1" type=password required name=up>
 <p>
  <label for="password2">パスワード確認：</label>
  <input id="password2" type=password name=up2>
 <p>
  <input type=submit value="アカウントを作成する">
</form>

<h1>Create new account</h1>
<form action="/newaccount" method=post
      oninput="up2.setCustomValidity(up2.value != up.value ? 'Passwords do not match.' : '')">
 <p>
  <label for="username">Email address:</label>
  <input id="username" type=email required name=un>
 <p>
  <label for="password1">Password:</label>
  <input id="password1" type=password required name=up>
 <p>
  <label for="password2">Confirm password:</label>
  <input id="password2" type=password name=up2>
 <p>
  <input type=submit value="Create account">
</form>

■required-attribute-2
<fieldset>
 <legend>その映画はベクデルテストに合格しましたか？</legend>
 <p><label><input type="radio" name="bechdel" value="no-characters">いいえ、女性は 2 人すら登場しませんでした。</label>
 <p><label><input type="radio" name="bechdel" value="no-names">いいえ、女性どうしが会話することは決してありませんでした。</label>
 <p><label><input type="radio" name="bechdel" value="no-topic">いいえ、女性どうしの会話の話題は、常に男性のことでした。</label>
 <p><label><input type="radio" name="bechdel" value="yes" ＜required＞>はい。</label>
 <p><label><input type="radio" name="bechdel" value="unknown">わかりません。</label>
</fieldset>

<fieldset>
 <legend>Did the movie pass the Bechdel test?</legend>
 <p><label><input type="radio" name="bechdel" value="no-characters"> No, there are not even two female characters in the movie. </label>
 <p><label><input type="radio" name="bechdel" value="no-names"> No, the female characters never talk to each other. </label>
 <p><label><input type="radio" name="bechdel" value="no-topic"> No, when female characters talk to each other it's always about a male character. </label>
 <p><label><input type="radio" name="bechdel" value="yes" required> Yes. </label>
 <p><label><input type="radio" name="bechdel" value="unknown"> I don't know. </label>
</fieldset>

■multiple-attribute-1
<label>宛先： <input type=email multiple name=to></label>

■multiple-attribute-2
<label>宛先： <input type=email multiple name=to list=contacts></label>
...
<datalist id="contacts">
 <option value="hedral@damowmow.com">
 <option value="pillar@example.com">
 <option value="astrophy@cute.example">
 <option value="astronomy@science.example.org">
</datalist>

■multiple-attribute-3
<label>添付： <input type=file multiple name=att></label>

Attachments:

■pattern-attribute-1
<label> 部品番号：
 <input
   pattern="[0-9][A-Z]{3}"
   name="part"
   title="部品番号は、先頭の数字に 3 個の大文字を続けます。"
 />
</label>

<label> Part number:
 <input pattern="[0-9][A-Z]{3}" name="part"
        title="A part number is a digit followed by three uppercase letters."/>
</label>


■min-max-attribute-1
<input name=bday type=date max="1979-12-31">

■min-max-attribute-2
<input name=quantity required="" type="number" min="1" value="1">

■min-max-attribute-3
<input name="sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00">


■step-attribute-1
<input name=opacity type=range min=0 max=1 step=0.00392156863>

■step-attribute-2
<input name=favtime type=time step=any>


■list-attribute-1
<input type="text" list="function-types">
<datalist id="function-types">
  <option value="function">function</option>
  <option value="async function">async function</option>
  <option value="function*">generator function</option>
  <option value="=>">arrow function</option>
  <option value="async =>">async arrow function</option>
  <option value="async function*">async generator function</option>
</datalist>

■list-attribute-2
<label>Homepage: <input name=hp type=url list=hpurls></label>
<datalist id=hpurls>
 <option value="https://www.google.com/" label="Google">
 <option value="https://www.reddit.com/" label="Reddit">
</datalist>


■list-attribute-3
<p>
 <label>
  品種を入力してください：
  <input type="text" name="breed" list="breeds">
  <datalist id="breeds">
   <option ＜value="アビシニアン"＞>
   <option ＜value="アルパカ"＞>
   <!-- ... -->
  </datalist>
 </label>
</p>

■list-attribute-4
<p>
 <label>
  品種を入力してください：
  <input type="text" name="breed" list="breeds">
 </label>
 <datalist id="breeds">
  <label>
   またはリストから選んでください：
   <select name="breed">
    <option value=""> （未選択）
    <option>＜アビシニアン＞
    <option>＜アルパカ＞
    <!-- ... -->
   </select>
  </label>
 </datalist>
</p>

■placeholder-attribute-1
<fieldset>
 <legend>メールアカウント</legend>
 <p><label>名前： <input type="text" name="fullname" placeholder="何野某"></label></p>
 <p><label>アドレス： <input type="email" name="address" placeholder="hanako@example.net"></label></p>
 <p><label>パスワード: <input type="password" name="password"></label></p>
 <p><label>説明： <input type="text" name="desc" placeholder="わたしのメールアカウント"></label></p>
</fieldset>


■placeholder-attribute-3
<input name=t1 type=tel placeholder="＜&#x202B;＞&#1585;&#1602;&#1605; &#1575;&#1604;&#1607;&#1575;&#1578;&#1601; 1＜&#x202E;＞">
<input name=t2 type=tel placeholder="＜&#x202B;＞&#1585;&#1602;&#1605; &#1575;&#1604;&#1607;&#1575;&#1578;&#1601; 2＜&#x202E;＞">


●●images
＠HTML-resources/
sample-url｜width:480px; height:150px｜｜.svg
sample-range｜width:49px; height:75px;｜｜.png 
sample-range-2a｜width:231px; height:57px;｜｜.png
sample-range-2b｜width:445px; height:56px;｜｜.png
sample-range-labels｜width:103px; height:164px;｜｜.png
sample-email-1｜width:330px; height:100px;｜上の例の描画見本｜.svg
sample-email-2｜width:330px; height:140px;｜上の例の描画見本｜.svg
sample-datalist｜width:280px; height:150px;｜｜.svg

●●trans_metadata
<p>
~THIS_PAGEは、~WHATWGによる HTML 仕様の
<a href="~SPEC_URL">§ The input element</a>
を日本語に翻訳したものです。
~PUB
</p>

</script>
</head>
<body>

<header>
	<hgroup>
<h1>HTML — input 要素</h1>
	</hgroup>
</header>

<main id="MAIN" hidden>

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

◎表記記号

<p>
簡潔に記述するため、
この~pageでは，次に挙げる［
規約／記法／定義
］を導入する：
</p>
<ul>
	<li>
他が指定されない限り，単に “要素” と記された所では、
`input$e 要素, それも 論の対象にされている［
内容~属性／~IDL~member
］があれば，それを有するものを指す
（以下の各項に現れる “要素” も同様）。
</li>
	<li>
単に “~control” と記されたときは、
その語が現れる文脈における要素が`表現-$する~UIを指す。
</li>
	<li>
要素の
`状態@
とは、［
要素の `type$a 属性の状態
］の略記である。
</li>
	<li>
“%X `状態$にある要素”
という表記は、［
現在の`状態$ ~EQ %X
］なる要素を意味する。
</li>
	<li>
`改行文字@
は、
文字［
`000A^U LINE FEED (LF) ／ `000D^U CARRIAGE RETURN (CR) 
］を指す
（原文では、
“`00…^U” と “`newline^en” の 2 通りの表記が用いられているが、
これらは同じである）。
<small>（
語 “改行” （ `line break^en ）も，この~pageにおいては改行文字と同じと考えて差し支えないが、
この語には，呈示における~textの分断（視覚-媒体においては行の折返し）が念頭にある。
）</small>
</li>
</ul>

<div class="algo">
<p>
`入力~eventを発火する@
~algoは、
所与の
( %要素, ~event名 %e ~IN { `input$et, `change$et } )
に対し
⇒
`~eventを発火する$( %要素, %e )
— 次のように初期化して：
</p>
<ul>
	<li>
`bubbles$m 属性 ~SET ~T
</li>
	<li>
%e ~EQ `input$et ならば
⇒
`composed$m 属性 ~SET ~T
【これは、実際には，~eventの`~composedか$evを ~T に設定することを意味する。】
</li>
</ul>

<p>
この~algoは、
他所を簡潔に記すために，この訳に導入している。
これは、
他の一部の~form入力~要素（ `select$e など）からも利用される。
この~algoは、
他の~event名には利用されない。
【！~form用の これらの~event名に対しては、常にこのように発火される】
</p>
</div>

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

<dl class="element-def">

	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$
◎
Flow content.
◎
Phrasing content.
</dd>
	<dd>
<p>
`Hidden$st `状態$でない場合に限り：
</p>
		<ul>
			<li>
`ヤリトリありな内容$／`可触~内容$／
</li>
			<li>
`~formに所有され得る要素$のうち［
`~listされ$る／`~label可能$な／`提出-可能$な／`再設定-可能$な／`自動頭字化-と自動訂正-を継承-$する
］もの
</li>
		</ul>
◎
↓</dd>
	<dd>
`Hidden$st `状態$にある場合に限り
⇒
`~formに所有され得る要素$のうち［
`~listされ$る／`提出-可能$な／`再設定-可能$な／`自動頭字化-と自動訂正-を継承-$する
］もの

◎
If the type attribute is not in the Hidden state: Interactive content.
◎
If the type attribute is not in the Hidden state: Listed, labelable, submittable, resettable, and autocapitalize-and-autocorrect inheriting form-associated element.
◎
If the type attribute is in the Hidden state: Listed, submittable, resettable, and autocapitalize-and-autocorrect inheriting form-associated element.
◎
If the type attribute is not in the Hidden state: Palpable content.
</dd>

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

	<dt>`内容~model$</dt>
	<dd>
`なし$。
◎
Nothing.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
`終了~tag$はない。
◎
No end tag.
</dd>

	<dt>`内容~属性$：</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
`accept$a
— `~file~upload用の~control＠#file-upload-state-(type=file)$に期待される~file型~用の~hint。
◎
accept — Hint for expected file type in file upload controls
</dd>
	<dd>
`alpha$a
— 色の~alpha成分を設定することを利用者に許容するか否か
◎
alpha — Allow the color's alpha component to be set 
</dd>
	<dd>
`alt$a
— 画像が可用でないときの代用~text。
◎
alt — Replacement text for use when images are not available
</dd>
	<dd>
`autocomplete$a
— ~formの~autofill特能~用の~hintを与える。
◎
autocomplete — Hint for form autofill feature
</dd>
	<dd>
`checked$a
— この~controlが~checkされるかどうか。
◎
checked — Whether the control is checked
</dd>
	<dd>
`colorspace$a
— 直列化された色~用の色~空間
◎
colorspace — The color space of the serialized color 
</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 要素【の~ID】を与える。
◎
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>
`height$a
— 縦方向~寸法。
【画像~buttonの】
◎
height — Vertical dimension
</dd>
	<dd>
`list$a
— 自動補完の選択肢からなる~list。
◎
list — List of autocomplete options
</dd>
	<dd class="trans-note">【
“自動補完（ `autocomplete^en ）” と “~autofill（自動で埋める）” が似ていて紛らわしい
（しかも、
上の `autocomplete$a 属性は，~autofill特能~用とされている）
が、
意味としては少し異なる。
前者は、
例えば~URLの最初の何~文字かを手入力した時点で，
利用者が意図している完全な~URLを推測して自動的に補完する特能を指す。
後者は、
入力~欄の名前や~data型から類推して，
以前に記憶した利用者~dataで その欄を自動的に埋める特能を指す
（例：利用者が過去に類似な［
名前／~data型
］の欄に手入力したことがあれば，
そのときの入力で自動的に埋めるなど）。
】</dd>

	<dd>
`max$a
— 最大~値。
◎
max — Maximum value
</dd>
	<dd>
`maxlength$a
— 値の最大~長さ。
【文字~数】
◎
maxlength — Maximum length of value
</dd>
	<dd>
`min$a
— 最小~値。
◎
min — Minimum value
</dd>
	<dd>
`minlength$a
— 値の最小~長さ。
【文字~数】
◎
minlength — Minimum length of value
</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>
`pattern$a
— ~form~controlの値に合致させる~pattern。
◎
pattern — Pattern to be matched by the form control's value
</dd>
	<dd>
`placeholder$a
— ~form~controlの中に置かれる，利用者から可視な~label。
◎
placeholder — User-visible label to be placed within the form control
</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>
`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>
`size$a
— ~controlの~size。
【文字~数。】
◎
size — Size of the control
</dd>
	<dd>
`src$a
— 資源の~address。
【画像~buttonの資源】
◎
src — Address of the resource
</dd>
	<dd>
`step$a
— ~form~controlの値を合致させる粒度。
◎
step — Granularity to be matched by the form control's value
</dd>
	<dd>
`type$a
— ~form~controlの型。
◎
type — Type of form control
</dd>
	<dd>
`value$a
— ~form~controlの値。
◎
value — Value of the form control
</dd>
	<dd>
`width$a
— 横方向~寸法。
【画像~buttonの】
◎
width — Horizontal dimension
</dd>
	<dd>
この要素~上の `title$a 属性には、
`pattern$a 属性との併用-時に，~patternの記述を与える`特別な意味論もある＠#attr-input-title$。
◎
Also, the title attribute has special semantics on this element: Description of pattern (when used with pattern attribute)
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
<p>
要素の`状態$に応じて：
</p>
<ul>
<li>`Hidden$st に対しては： `input-hidden$AA
<li>`Text$st に対しては： `input-text$AA
<li>`Search$st に対しては： `input-search$AA
<li>`Tel$st に対しては： `input-tel$AA
<li>`Url$st に対しては： `input-url$AA
<li>`Email$st に対しては： `input-email$AA
<li>`Password$st に対しては： `input-password$AA
<li>`Date$st に対しては： `input-date$AA
<li>`Month$st に対しては： `input-month$AA
<li>`Week$st に対しては： `input-week$AA
<li>`Time$st に対しては： `input-time$AA
<li>`Datetime-local$st に対しては： `input-datetime-local$AA
<li>`Number$st に対しては： `input-number$AA
<li>`Range$st に対しては： `input-range$AA
<li>`Color$st に対しては： `input-color$AA
<li>`Checkbox$st に対しては： `input-checkbox$AA
<li>`Radio$st に対しては： `input-radio$AA
<li>`File$st に対しては： `input-file$AA
<li>`Submit$st に対しては： `input-submit$AA
<li>`Image$st に対しては： `input-image$AA
<li>`Reset$st に対しては： `input-reset$AA
<li>`Button$st に対しては： `input-button$AA
</ul>

◎
• type attribute in the Hidden state: for authors; for implementers.
• type attribute in the Text state: for authors; for implementers.
• type attribute in the Search state: for authors; for implementers.
• type attribute in the Telephone state: for authors; for implementers.
• type attribute in the URL state: for authors; for implementers.
• type attribute in the Email state: for authors; for implementers.
• type attribute in the Password state: for authors; for implementers.
• type attribute in the Date state: for authors; for implementers.
• type attribute in the Month state: for authors; for implementers.
• type attribute in the Week state: for authors; for implementers.
• type attribute in the Time state: for authors; for implementers.
• type attribute in the Local Date and Time state: for authors; for implementers.
• type attribute in the Number state: for authors; for implementers.
• type attribute in the Range state: for authors; for implementers.
• type attribute in the Color state: for authors; for implementers.
• type attribute in the Checkbox state: for authors; for implementers.
• type attribute in the Radio Button state: for authors; for implementers.
• type attribute in the File Upload state: for authors; for implementers.
• type attribute in the Submit Button state: for authors; for implementers.
• type attribute in the Image Button state: for authors; for implementers.
• type attribute in the Reset Button state: for authors; for implementers.
• type attribute in the Button state: for authors; for implementers.
</dd>

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

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

  [`CEReactions$] attribute DOMString `accept$m;
  [`CEReactions$] attribute boolean `alpha$m;
  [`CEReactions$] attribute DOMString `alt$m;
  [`CEReactions$] attribute DOMString `autocomplete$m;
  [`CEReactions$] attribute boolean `defaultChecked$m;
  attribute boolean `checked$m;
  [`CEReactions$] attribute DOMString `colorSpace$m;
  [`CEReactions$] attribute DOMString `dirName$m;
  [`CEReactions$] attribute boolean `disabled$m;
  readonly attribute `HTMLFormElement$I? `form$m;
  attribute `FileList$I? `files$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 unsigned long `height$m;
  attribute boolean `indeterminate$m;
  readonly attribute `HTMLDataListElement$I? `list$m;
  [`CEReactions$] attribute DOMString `max$m;
  [`CEReactions$] attribute long `maxLength$m;
  [`CEReactions$] attribute DOMString `min$m;
  [`CEReactions$] attribute long `minLength$m;
  [`CEReactions$] attribute boolean `multiple$m;
  [`CEReactions$] attribute DOMString `name$m;
  [`CEReactions$] attribute DOMString `pattern$m;
  [`CEReactions$] attribute DOMString `placeholder$m;
  [`CEReactions$] attribute boolean `readOnly$m;
  [`CEReactions$] attribute boolean `required$m;
  [`CEReactions$] attribute unsigned long `size$m;
  [`CEReactions$] attribute USVString `src$m;
  [`CEReactions$] attribute DOMString `step$m;
  [`CEReactions$] attribute DOMString `type$m;
  [`CEReactions$] attribute DOMString `defaultValue$m;
  [`CEReactions$] attribute [`LegacyNullToEmptyString$] DOMString `value$m;
  attribute `object$js? `valueAsDate$m;
  attribute unrestricted double `valueAsNumber$m;
  [`CEReactions$] attribute unsigned long `width$m;

  undefined `stepUp$m(optional long %n = 1);
  undefined `stepDown$m(optional long %n = 1);

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

  undefined `showPicker$m();

  // `HTMLInputElement$obsMb
};

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

	</dd>
</dl>

<p>
`input$e 要素は、
型を有する~data欄を`表現-$する
— それは，通例的には、
~dataを編集することを利用者に許容するためとして，~form~controlに伴われる。
◎
The input element represents a typed data field, usually with a form control to allow the user to edit the data.
</p>

<p>
`type@a
属性は、
要素の~data型（および，要素が表現する~control）を制御する。
この属性は，`列挙d属性$であり、
次に挙げる~keyword, とり得る状態, それらの対応付けが定義される：
◎
The type attribute controls the data type (and associated control) of the element. It is an enumerated attribute with the following keywords and states:
</p>

<p class="trans-note">【
この訳では、
状態~名を単に［
~keywordの最初の文字だけ大文字にした文字列
］で表す
（概ね，原文の状態~名と一致する）。
原文の状態~名には，もう少し説明的なものもあるが、
この訳では，対応関係を簡明にすることを優先する。
】</p>

<table id="attr-input-type-keywords"><thead><tr><th>
~keyword
◎
Keyword
<th>
状態
◎
State
<th>
~data型
◎
Data type
<th>
~control型
◎
Control type

<tbody><tr><td>`hidden@v
<td>`Hidden$st
<td>
任意の文字列。
◎
An arbitrary string
<td>
可用でない
◎
n/a
<tr><td> `text@v
<td>`Text$st
<td>
改行を伴わない~text。
◎
Text with no line breaks
<td>
~text~control
◎
A text control

<tr><td>`search@v
<td>`Search$st
<td>
改行を伴わない~text。
◎
Text with no line breaks
<td>
~search~control
◎
Search control

<tr><td>`tel@v
<td>`Tel$st
<td>
改行を伴わない~text。
◎
Text with no line breaks
<td>
~text~control
◎
A text control

<tr><td>`url@v
<td>`Url$st
<td>
絶対~URL。
◎
An absolute URL
<td>
~text~control
◎
A text control

<tr><td>`email@v
<td>`Email$st
<td>
~email~address, または それらが成す~list。
◎
An email address or list of email addresses
<td>
~text~control
◎
A text control

<tr><td>`password@v
<td>`Password$st
<td>
改行を伴わない~text（敏感な情報）。
◎
Text with no line breaks (sensitive information)
<td>
手入力された~dataを遮る~text~control
◎
A text control that obscures data entry

<tr><td>`date@v
<td>`Date$st
<td>
( 年t, 月t, 日t ) からなり，時間帯は伴わない日付。
◎
A date (year, month, day) with no time zone
<td>
日付~control
◎
A date control

<tr><td>`month@v
<td>`Month$st
<td>
( 年t, 月t ) からなり, 時間帯は伴わない日付。
◎
A date consisting of a year and a month with no time zone
<td>
年月t~control
◎
A month control

<tr><td>`week@v
<td>`Week$st
<td>
( 週年t, 週t ) からなり, 時間帯は伴わない日付。
◎
A date consisting of a week-year number and a week number with no time zone
<td>
年週t~control
◎
A week control

<tr><td>`time@v
<td>`Time$st
<td>
( 時t, 分t, 秒t )
からなり，時間帯は伴わない時刻
（秒tには小数部も伴われ得る）。
◎
A time (hour, minute, seconds, fractional seconds) with no time zone
<td>
時刻~control
◎
A time control

<tr><td>`datetime-local@v
<td>`Datetime-local$st
<td>
( 年t, 月t, 日t, 時t, 分t, 秒t )
からなり，時間帯は伴わない日時t
（秒tには小数部も伴われ得る）。
◎
A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone
<td>
日時t~control
◎
A date and time control

<tr><td>`number@v
<td>`Number$st
<td>
数量的な値。
◎
A numerical value
<td>
~text~control, または
“増減~button付き” ~control
◎
A text control or spinner control

<tr><td>`range@v
<td>`Range$st
<td>
数量的な値であるが、
正確な値は重要でないとする意味論も伴う。
◎
A numerical value, with the extra semantic that the exact value is not important
<td>
~slider~controlの類
◎
A slider control or similar

<tr><td>`color@v
<td>`Color$st
<td>
8-bitの ( ~red, ~green, ~blue ) 成分からなる~sRGB色。
◎
An sRGB color with 8-bit red, green, and blue components
<td>
色~picker
◎
A color picker

<tr><td>`checkbox@v
<td>`Checkbox$st
<td>
定義済み~listを成す 0 個~以上の値からなる集合。
◎
A set of zero or more values from a predefined list
<td>
~checkbox
◎
A checkbox

<tr><td>`radio@v
<td>`Radio$st
<td>
列挙d値。
◎
An enumerated value
<td>
~radio~button
◎
A radio button

<tr><td>`file@v
<td>`File$st
<td>
それぞれが［
`~MIME型$, および任意選択で~filename
］を伴う，
0 個~以上の~file。
◎
Zero or more files each with a MIME type and optionally a filename
<td>
~buttonとその~label
◎
A label and a button

<tr><td>`submit@v
<td>`Submit$st
<td>
列挙d値。
加えて、［
最後に選択される値であって，~form提出を起動するモノトスル
］とする意味論も伴う。
◎
An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission
<td>
~button
◎
A button

<tr><td>`image@v
<td>`Image$st
<td>
特定0の画像の~sizeに相対的な座標。
加えて、［
最後に選択される値であって，~form提出を起動するモノトスル
］とする，意味論も伴う。
◎
A coordinate, relative to a particular image's size, with the extra semantic that it must be the last value selected and initiates form submission
<td>
~clickに~~反応する画像や~button
◎
Either a clickable image, or a button

<tr><td>`reset@v
<td>`Reset$st
<td>
可用でない。
◎
n/a
<td>
~button
◎
A button

<tr><td>`button@v
<td>`Button$st
<td>
可用でない。
◎
n/a
<td>
~button
◎
A button
</table>

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

<div class="p">
<p>
要素の~data型は、
`状態$ごとに，対応する下位節にて定義される。
</p>

<p>
次に挙げる［
内容~属性／~IDL~member（属性／~method）／ ~event
］は、
要素の`状態$に依存して，要素に［
`適用される@,
`適用されない@
］のいずれかになる：
</p>

<dl>
	<dt>内容~属性</dt>
	<dd>
`accept$a,
`alpha$a,
`alt$a,
`autocomplete$a,
`checked$a,
`colorspace$a,
`dirname$a,
`formaction$a,
`formenctype$a,
`formmethod$a,
`formnovalidate$a,
`formtarget$a,
`height$a,
`list$a,
`max$a,
`maxlength$a,
`min$a,
`minlength$a,
`multiple$a,
`pattern$a,
`placeholder$a,
`readonly$a,
`required$a,
`size$a,
`src$a,
`step$a,
`width$a
</dd>

	<dt>~IDL~member</dt>
	<dd>
`checked$m,
`files$m,
`valueAsDate$m,
`valueAsNumber$m,
`list$m,
`select()$m,
`selectionStart$m,
`selectionEnd$m,
`selectionDirection$m,
`setRangeText()$m,
`setSelectionRange()$m,
`stepUp()$m,
`stepDown()$m
</dd>

	<dt>~event</dt>
	<dd>
`input$et, `change$et
</dd>
</dl>

<p>
上に挙げた特能のうち どれが要素に［
`適用される$／`適用されない$
］かは、
各`状態$に対応する下位節にて，規範的かつ明瞭に定義される
— 次のような表tの形により：
</p>

<table>
<thead><tr>
<td>
<th>`適用される$
<th>`適用されない$
<tbody class="bookkeeping-body">
<tr><th>内容~属性
<td>この欄に挙げられる内容~属性は、
適用される。
<td>この欄に挙げられる内容~属性は、
適用されない
— 加えて、
当の`状態$にある要素に指定してはナラナイ。
<tr><th>~IDL~member
<td>この欄に挙げられる~IDL~memberは、
適用される。
<td>この欄に挙げられる~IDL~memberは、
適用されない。
<tr><th>~event
<td>この欄に挙げられる~eventは、
適用される。
<td>この欄に挙げられる~eventは、
適用されない。
</table>

◎
Which of the accept, alpha, alt, autocomplete, checked, colorspace, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, and width content attributes, the checked, files, valueAsDate, valueAsNumber, and list IDL attributes, the select() method, the selectionStart, selectionEnd, and selectionDirection, IDL attributes, the setRangeText() and setSelectionRange() methods, the stepUp() and stepDown() methods, and the input and change events apply to an input element depends on the state of its type attribute. The subsections that define each type also clearly define in normative "bookkeeping" sections which of these feature apply, and which do not apply, to each type.＼
</div>

<p>
これらの特能の挙動は、
各節に定義されるとおり，
`適用される$かどうかに依存する
（
`§ 内容~属性＠#common-input-element-attributes$ ／
`§ ~API＠#common-input-element-apis$ ／
`§ ~event＠#common-input-element-events$
を見よ）。
◎
The behavior of these features depends on whether they apply or not, as defined in their various sections (q.v. for content attributes, for APIs, for events).
</p>

<p>
次の規範的でない表tに，各~状態に対しどの［
内容~属性／~IDL~member／~event
］が`適用される$かを要約する
（表t内の “・” は適用されない／他は適用される）：
◎
The following table is non-normative and summarizes which of those content attributes, IDL attributes, methods, and events apply to each state:
</p>

<table id="input-type-attr-summary" class="applies">
<thead><tr><th><th colspan="15">`状態$
<tr id="_input-type-attr-head"><th>
<th><span>`Hidden$st
</span><th><span>`Text$st, `Search$st
</span><th><span>`Tel$st, `Url$st
</span><th><span>`Email$st
</span><th><span>`Password$st
</span><th><span>`Date$st, `Month$st, `Week$st, `Time$st
</span><th><span>`Datetime-local$st
</span><th><span>`Number$st
</span><th><span>`Range$st
</span><th><span>`Color$st
</span><th><span>`Checkbox$st, `Radio$st
</span><th><span>`File$st
</span><th><span>`Submit$st
</span><th><span>`Image$st
</span><th><span>`Reset$st, `Button$st
</span>

<tbody><tr><th colspan="16" scope="rowgroup">
内容~属性
◎
Content attributes

<tr><th>`accept$a `●^BK
<tr><th>`alpha$a `●^BK
<tr><th>`alt$a `●^BK
<tr><th>`autocomplete$a `●^BK
<tr><th>`checked$a `●^BK
<tr><th>`colorspace$a `●^BK
<tr><th>`dirname$a `●^BK
<tr><th>`formaction$a `●^BK
<tr><th>`formenctype$a `●^BK
<tr><th>`formmethod$a `●^BK
<tr><th>`formnovalidate$a `●^BK
<tr><th>`formtarget$a `●^BK
<tr><th>`height$a `●^BK
<tr><th>`list$a `●^BK
<tr><th>`max$a `●^BK
<tr><th>`maxlength$a `●^BK
<tr><th>`min$a `●^BK
<tr><th>`minlength$a `●^BK
<tr><th>`multiple$a `●^BK
<tr><th>`pattern$a `●^BK
<tr><th>`placeholder$a `●^BK
<tr><th>`popovertarget$a `●^BK
<tr><th>`popovertargetaction$a `●^BK
<tr><th>`readonly$a `●^BK
<tr><th>`required$a `●^BK
<tr><th>`size$a `●^BK
<tr><th>`src$a `●^BK
<tr><th>`step$a `●^BK
<tr><th>`width$a `●^BK

<tbody><tr><th colspan="16" scope="rowgroup">
~IDL~member
◎
IDL attributes and methods

<tr><th>`checked$m `●^BK
<tr><th>`files$m `●^BK
<tr id="_input-type-attr-value"><th> `value$m
<td><span>`既定~mode$i
</span><td><span>`値~mode$i
</span><td><span>`値~mode$i
</span><td><span>`値~mode$i
</span><td><span>`値~mode$i
</span><td><span>`値~mode$i
</span><td><span>`値~mode$i
</span><td><span>`値~mode$i
</span><td><span>`値~mode$i
</span><td><span>`値~mode$i
</span><td><span>`既定か~on~mode$i
</span><td><span>`~filename~mode$i
</span><td><span>`既定~mode$i
</span><td><span>`既定~mode$i
</span><td><span>`既定~mode$i
</span>
<tr><th>`valueAsDate$m `●^BK
<tr><th>`valueAsNumber$m `●^BK
<tr><th>`list$m `●^BK
<tr><th>`select()$m† `●^BK
<tr><th>`selectionStart$m `●^BK
<tr><th>`selectionEnd$m `●^BK
<tr><th>`selectionDirection$m `●^BK
<tr><th>`setRangeText()$m `●^BK
<tr><th>`setSelectionRange()$m `●^BK
<tr><th>`stepDown()$m `●^BK
<tr><th>`stepUp()$m `●^BK

<tbody><tr><th colspan="16" scope="rowgroup">
~event
◎
Events
<tr><th>`input$et ~event `●^BK
<tr><th>`change$et ~event `●^BK
</table>

<p class="tablenote">†
<small>
"テ" と記されたものは、
~control内に選択-可能な~textがない場合，
`select()$m ~methodは何もしない。
したがって `InvalidStateError$E 例外も投出されない。
</small>
◎
† If the control has no selectable text, the select() method results in a no-op, with no "InvalidStateError" DOMException.
</p>

<p class="trans-note">【
`dirname$a 属性は［
`Reset$st, `Button$st
］状態にも`適用される$べきでは？
（`自動~方向性を伴う~formに所有され得る要素$の定義と整合でない）。
】</p>

<p>
一部の`状態$には、
`値の無毒化~algo@
が定義される。
◎
Some states of the type attribute define a value sanitization algorithm.
</p>

<div class="p">
<p>
各 要素は、
`値$feを有する
— それは、
`value$m ~IDL属性により公開される。
</p>

<p>
一部の`状態$には、
次に挙げる~algoが定義される
— それらは、［
`max$a ／ `min$a ／ `step$a
］内容~属性, および［
`valueAsDate$m ／ `valueAsNumber$m ／ `stepUp()$m
］~IDL~memberにて利用される：
</p>
<ul>
	<li>
`文字列から実数に変換する@
</li>
	<li>
`実数から文字列に変換する@
</li>
	<li>
`文字列から~Date~objに変換する@
</li>
	<li>
`~Date~objから文字列に変換する@
</li>
</ul>
◎
Each input element has a value, which is exposed by the value IDL attribute. Some states define an algorithm to convert a string to a number, an algorithm to convert a number to a string, an algorithm to convert a string to a Date object, and an algorithm to convert a Date object to a string, which are used by max, min, step, valueAsDate, valueAsNumber, and stepUp().
</div>

<p>
要素の`値は~dirtyか$feは、
利用者が~controlとヤリトリして`値$feを変更したときには，
~T に設定するモノトスル
（また、
値が~program的に変更された場合も ~T に設定される
— `value$m ~IDL属性の定義に述べるとおり）。
◎
An input element's dirty value flag must be set to true whenever the user interacts with the control in a way that changes the value. (It is also set to true when the value is programmatically changed, as described in the definition of the value IDL attribute.)
</p>

<div class="algo">
<p>
`value@a
内容~属性は、
要素~用の既定の`値$feを与える。
要素 %要素 にこの属性が［
追加-／設定-／除去-
］されたときは、
~UAは，次を走らすモノトスル：
</p>
<ol>
	<li>
~IF［
%要素 の`値は~dirtyか$fe ~EQ ~T
］
⇒
~RET
</li>
	<li>
%要素 の`値$fe ~SET［
%要素 は `value$a 内容~属性を有するならば その値 ／
~ELSE_ 空~文字列
］
</li>
	<li>
%要素 の`状態$に`値の無毒化~algo$は定義されているならば、
%要素 に対し，それを呼出す
</li>
</ol>

◎
The value content attribute gives the default value of the input element. When the value content attribute is added, set, or removed, if the control's dirty value flag is false, the user agent must set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise, and then run the current value sanitization algorithm, if one is defined.
</div>

<p>
各 要素は、
`~check有りか$feを有する
— それは、
`checked$m ~IDL属性により公開される。
◎
Each input element has a checkedness, which is exposed by the checked IDL attribute.
</p>

<div class="p">
<p>
各 要素は、
真偽-値をとる
`~check有無は~dirtyか@
を有する：
</p>
<ul>
	<li>
<p>
~T の場合、
要素の
`~check有無は~dirty@
であるという。
</p>
<p class="trans-note">【
この訳では、
この用語は利用しない。
単に`~check有無は~dirtyか$を通して述べることにする。
】</p>
	</li>
	<li>
要素の作成-時には，
~F になるモノトスル。
</li>
	<li>
利用者が~controlとヤリトリして`~check有りか$feを変更したときには，
~T になるモノトスル。
</li>
</ul>

◎
Each input element has a boolean dirty checkedness flag. When it is true, the element is said to have a dirty checkedness. The dirty checkedness flag must be initially set to false when the element is created, and must be set to true whenever the user interacts with the control in a way that changes the checkedness.
</div>

<p>
`checked@a
内容~属性は、
要素の既定の`~check有りか$feを与える`真偽-属性$である。
~UAは、［
~controlの`~check有無は~dirtyか$ ~EQ ~F
］の下で，
`checked$a 内容~属性が［
追加された／除去された
］ときは、
要素の`~check有りか$feを［
~T ／ ~F
］に設定するモノトスル。
◎
The checked content attribute is a boolean attribute that gives the default checkedness of the input element. When the checked content attribute is added, if the control does not have dirty checkedness, the user agent must set the checkedness of the element to true; when the checked content attribute is removed, if the control does not have dirty checkedness, the user agent must set the checkedness of the element to false.
</p>

<div class="algo">
<p>
要素 %要素 用の`再設定~algo$は：
◎
The reset algorithm for input elements is to＼
</p>
<ol>
	<li>
%要素 の
⇒＃
`利用者~妥当性$ ~SET ~F,
`値は~dirtyか$fe ~SET ~F,
`~check有無は~dirtyか$ ~SET ~F
◎
set its user validity, dirty value flag, and dirty checkedness flag back to false,＼
</li>
	<li>
%要素 の`値$fe ~SET ［
%要素 は `value$a 内容~属性を有するならば その値 ／
~ELSE_ 空~文字列
］
◎
set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise,＼
</li>
	<li>
%要素 の`~check有りか$fe ~SET ~IS［
%要素 は `checked$a 内容~属性を有する
］
◎
set the checkedness of the element to true if the element has a checked content attribute and false if it does not,＼
</li>
	<li>
`選択された~file~list$があるならば、
それを空にする
◎
empty the list of selected files, and then＼
</li>
	<li>
%要素 の現在の`状態$に`値の無毒化~algo$は定義されているならば、
%要素 に対し，それを呼出す
◎
invoke the value sanitization algorithm, if the type attribute's current state defines one.
</li>
</ol>
</div>

<p>
どの要素も`変異-可能$feになり得る。
他から指定される場合を除き：
◎
Each input element can be mutable.＼
</p>
<ul>
	<li>
要素は常に`変異-可能$feとする。
◎
Except where otherwise specified, an input element is always mutable.＼
</li>
	<li>
~UAは、
次を利用者に許容するベキでない
⇒
要素の［
`値$fe, `~check有りか$fe
］を改変する
◎
Similarly, except where otherwise specified, the user agent should not allow the user to modify the element's value or checkedness.
</li>
</ul>

<p>
`不能化され$feた要素は、
`変異-可能$feでなくなる。
◎
When an input element is disabled, it is not mutable.
</p>

<p class="note">注記：
一部の事例では
（例えば `Date$st 状態は該当するが， `Checkbox$st 状態は該当しない）、
`readonly$a 属性も要素を`変異-可能$feでなくする。
◎
The readonly attribute can also in some cases (e.g. for the Date state, but not the Checkbox state) stop an input element from being mutable.
</p>

<p>
要素は、
`~pickerを~support@
し得る。
~picker（ `picker^en ）とは、
値を選ぶことを末端-利用者に許容する~UI【！~UI要素】である。
要素が~pickerを~supportするかどうかは、［
その`状態$, `実装定義$な挙動
］に依存する。
要素は、
`File$st `状態$にあるときは，
~pickerを~supportするモノトスル。
◎
The input element can support a picker. A picker is a user interface element that allows the end user to choose a value. Whether an input element supports a picker depends on the type attribute state and implementation-defined behavior. An input element must support a picker when its type attribute is in the File Upload state.
</p>

<p class="trans-note">【
用語としての “~pickerを~supportする（しない）” は、
`input$e 以外の要素（ `select$e など）にも利用される。
】</p>

<div class="note">
<p>注記：
これを書いた時点では、
代表的な~browser実装は，そのような~pickerを次に挙げるもの用に示す：
◎
As of the time of this writing, typical browser implementations show such picker UI for:
</p>
<ul>
	<li>
<p>
~OR↓ を満たす要素
◎
↓</p>
		<ul>
			<li>
次に挙げるいずれかの`状態$にある
⇒＃
`Date$st,
`Month$st,
`Week$st,
`Time$st,
`Datetime-local$st,
`Color$st,
`File$st
</li>
			<li>
その`示唆~source要素$ ~NEQ ε
</li>
		</ul>
◎
input elements whose type attributes are in the Date, Month, Week, Time, Local Date and Time, and Color states;
◎
input elements in various states that have a suggestions source element;
◎
input elements whose type attribute is in the File Upload state; and
</li>
	<li>
`select$e 要素
◎
select elements.
</li>
</ul>
</div>

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

<div class="algo">
<p>
要素 %要素 用の`作動化の挙動$は、
所与の
( %~event )
に対し：
◎
The activation behavior for input elements element, given event, are these steps:
</p>
<ol>
	<li>
~IF［
%要素 は`変異-可能$feでない
］~AND［
%要素 の`状態$ ~NIN { `Checkbox$st, `Radio$st }
］
⇒
~RET
◎
If element is not mutable, and element's type attribute is neither in the Checkbox nor in the Radio state, then return.
</li>
	<li>
%要素 用に定義された
`~input作動化の挙動@
はあるならば、
【 %~event を渡して，】それを走らす
◎
Run element's input activation behavior, if any, and do nothing otherwise.
</li>
	<li>
~IF［
%要素 の`~form所有者$ ~NEQ ~NULL
］~AND［
%要素 の`状態$ ~NEQ `Button$st
］
⇒
~RET
◎
If element has a form owner and element's type attribute is not in the Button state, then return.
</li>
	<li>
`~popover~target属性~作動化の挙動$( %要素, %~event の`~target$ )
◎
Run the popover target attribute activation behavior given element and event's target.
</li>
</ol>
</div>

<p class="note">注記：
要素~用の`作動化の挙動$は［
利用者が起動した作動化,
合成な作動化
（例： `el.click()^c を介するそれ）
］どちらに対しても走る一方で、
~UAは，所与の~control用に［
この仕様では指定されない，真に利用者が起動した作動化に限り誘発される挙動
］も備えるかもしれない。
共通な~~選択は、
当の~control用に，`適用-可能なら~pickerを示す$ことである。
対照的に，`~input作動化の挙動$は、［
`File$st ／ `Color$st
］`状態$にあるときの特別な歴史的~事例に限り，~pickerを示す。
◎
Recall that an element's activation behavior runs for both user-initiated activations and for synthetic activations (e.g., via el.click()). User agents might also have behaviors for a given control — not specified here — that are triggered only by true user-initiated activations. A common choice is to show the picker, if applicable, for the control. In contrast, the input activation behavior only shows pickers for the special historical cases of the File Upload and Color states.
</p>

<p>
要素~用の`旧来の作動化~前の挙動$は：
◎
The legacy-pre-activation behavior for input elements are these steps:
</p>
<ul>
	<li class="algo">
<p>
`Checkbox$st `状態$にある要素 %要素 用には、
次に従う：
◎
If this element's type attribute is in the Checkbox state, then＼
</p>
		<ol>
			<li>
( %~check有りか, %不定か ) ~LET %要素 の ( `~check有りか$fe, `indeterminate$m ~IDL属性~値 )
◎
↓</li>
			<li>
%要素 の`~check有りか$fe ~SET ~IS［
%~check有りか ~EQ ~F
］
◎
set this element's checkedness to its opposite value (i.e. true if it is false, false if it is true) and＼
</li>
			<li>
%要素 の `indeterminate$m ~IDL属性 ~SET ~F
◎
set this element's indeterminate IDL attribute to false.
</li>
		</ol>
</li>
	<li class="algo">
<p>
`Radio$st `状態$にある要素 %要素 用には、
次に従う：
◎
If this element's type attribute is in the Radio Button state, then＼
</p>
		<ol>
			<li>
<p>
%~check済み ~LET ~AND↓ を満たす要素は［
在るならば それ／無いならば ε
］：
</p>
				<ul>
					<li>
それ ~IN %要素 が属する`~radio~button~group$
</li>
					<li>
その`~check有りか$fe ~EQ ~T
</li>
				</ul>

<p class="trans-note">【
2 個目の条件により、
該当するものは，在っても一つに限られる
（それは %要素 かもしれない）。
】</p>
◎
get a reference to the element in this element's radio button group that has its checkedness set to true, if any,＼
</li>
			<li>
%要素 の`~check有りか$fe ~SET ~T
◎
and then set this element's checkedness to true.
</li>
		</ol>
	</li>
</ul>

<p>
要素~用の`旧来の作動化~取消~時の挙動$は：
◎
The legacy-canceled-activation behavior for input elements are these steps:
</p>
<ul>
	<li class="algo">
<p>
`Checkbox$st `状態$にある要素 %要素 用には、
次に従う：
◎
If the element's type attribute is in the Checkbox state, then＼
</p>
		<ol>
			<li>
( %~check有りか, %不定か ) ~LET この手続きの呼出nに~~先行する %要素 用の`旧来の作動化~前の挙動$の呼出nにて得られた ( %~check有りか, %不定か )
◎
↓</li>
			<li>
%要素 の
⇒＃
`~check有りか$fe ~SET %~check有りか,
`indeterminate$m ~IDL属性 ~SET %不定か
◎
set the element's checkedness and the element's indeterminate IDL attribute back to the values they had before the legacy-pre-activation behavior was run.
</li>
		</ol>
	</li>
	<li class="algo">
<p>
`Radio$st `状態$にある要素 %要素 用には、
次に従う：
◎
If this element's type attribute is in the Radio Button state, then＼
</p>
		<ol>
			<li>
%~check済み ~LET この手続きの呼出nに~~先行する %要素 用の`旧来の作動化~前の挙動$の呼出nにて得られた %~check済み
◎
if the element to which a reference was obtained in the legacy-pre-activation behavior,＼
</li>
			<li>
<p>
~IF［
%~check済み ~NEQ ε
］~AND［
%要素 ~IN %要素 が属する`~radio~button~group$
］~AND［
%~check済み ~IN %要素 が属する`~radio~button~group$
］
⇒
%~check済み の`~check有りか$fe ~SET ~T
</p>

<p class="trans-note">【
%~check済み ~NEQ ε の下で，
%~check済み と %要素 が同時に別の~group
— `旧来の作動化~前の挙動$の時点における`~radio~button~group$とは別のそれ —
へ移動された場合でも、
満たされることになる。
】</p>
◎
if any, is still in what is now this element's radio button group, if it still has one, and if so, setting that element's checkedness to true;＼
</li>
			<li>
~ELSE
⇒
%要素 の`~check有りか$fe ~SET ~F
◎
or else, if there was no such element, or that element is no longer in this element's radio button group, or if this element no longer has a radio button group, setting this element's checkedness to false.
</li>
		</ol>
	</li>
</ul>

<hr>

<div class="algo">
<p>
新たな要素 %要素 の作成-時には、
次を行うモノトスル：
</p>
<ol>
	<li>
%要素 の描画と挙動を，その`状態$に対し定義される描画と挙動に設定する。
</li>
	<li>
%要素 の`状態$に`値の無毒化~algo$は定義されているならば、
%要素 に対し，それを呼出す。
</li>
</ol>

◎
When an input element is first created, the element's rendering and behavior must be set to the rendering and behavior defined for the type attribute's state, and the value sanitization algorithm, if one is defined for the type attribute's state, must be invoked.
</div>

<div class="algo">
<p id="input-type-change">
要素 %要素 の`状態$が %旧~状態 から %新~状態 へ変化したときは、
~UAは，次の手続きを走らすモノトスル：
◎
When an input element's type attribute changes state, the user agent must run the following steps:
</p>
<ol>
	<li>
%旧~mode ~LET %旧~状態 における `value$m ~IDL属性の~mode
◎
↓</li>
	<li>
%新~mode ~LET %新~状態 における `value$m ~IDL属性の~mode
◎
↓</li>
	<li>
~IF［
%旧~mode ~EQ `値~mode$i
］~AND［
%要素 の`値$fe ~NEQ 空~文字列
］~AND［
%新~mode ~IN { `既定~mode$i, `既定か~on~mode$i }
］
⇒
%要素 の `value$a 内容~属性 ~SET %要素 の`値$fe
◎
If the previous state of the element's type attribute put the value IDL attribute in the value mode, and the element's value is not the empty string, and the new state of the element's type attribute puts the value IDL attribute in either the default mode or the default/on mode, then set the element's value content attribute to the element's value.
</li>
	<li>
<p>
~ELIF［
%旧~mode ~NEQ `値~mode$i
］~AND［
%新~mode ~EQ `値~mode$i
］：
</p>
		<ol>
			<li>
%要素 の`値$fe ~SET ［
%要素 は `value$a 内容~属性を有するならば その値 ／
~ELSE_ 空~文字列
］
</li>
			<li>
%要素 の`値は~dirtyか$fe ~SET ~F
</li>
		</ol>

◎
Otherwise, if the previous state of the element's type attribute put the value IDL attribute in any mode other than the value mode, and the new state of the element's type attribute puts the value IDL attribute in the value mode, then set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise, and then set the control's dirty value flag to false.
</li>
	<li>
~ELIF［
%旧~mode ~NEQ `~filename~mode$i
］~AND［
%新~mode ~EQ `~filename~mode$i
］
⇒
%要素 の`値$fe ~SET 空~文字列
◎
Otherwise, if the previous state of the element's type attribute put the value IDL attribute in any mode other than the filename mode, and the new state of the element's type attribute puts the value IDL attribute in the filename mode, then set the value of the element to the empty string.
</li>
	<li>
%要素 の描画と挙動を %新~状態 のそれらに更新する
◎
Update the element's rendering and behavior to the new state's.
</li>
	<li>
%要素 に対し，
`型~変化を通達する＠#signal-a-type-change@
（これは特に、
`Radio$st 状態に利用される。）
◎
Signal a type change for the element. (The Radio Button state uses this, in particular.)
</li>
	<li>
%新~状態 に`値の無毒化~algo$は定義されているならば、
%要素 に対し，それを呼出す
◎
Invoke the value sanitization algorithm, if one is defined for the type attribute's new state.
</li>
	<li>
<p>
~IF［
%旧~状態 において %要素 に `setRangeText$m は`適用されない$
］~AND［
%新~状態 において %要素 に `setRangeText$m は`適用される$
］：
</p>

		<ol>
			<li>
~Assert： %要素 は~text~controlを表現する
</li>
			<li>
%要素 の`~text手入力~cursor位置$ ~SET ~text~controlの先頭
</li>
			<li>
%要素 の`選択~方向を設定する$( `none^l )
</li>
		</ol>
◎
Let previouslySelectable be true if setRangeText() previously applied to the element, and false otherwise.
◎
Let nowSelectable be true if setRangeText() now applies to the element, and false otherwise.
◎
If previouslySelectable is false and nowSelectable is true, set the element's text entry cursor position to the beginning of the text control, and set its selection direction to "none".
</li>
</ol>
</div>

<hr>

<p>
各種 内容~属性：
◎
↓</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 input element with its form owner.＼
</li>
	<li>
`autocomplete$a 属性は、
~UAが~autofillの挙動をどう供するかを制御する。
◎
The autocomplete attribute controls how the user agent provides autofill behavior.
</li>
</ul>

<p>
`indeterminate@m
~IDL属性は：
◎
The indeterminate IDL attribute＼
</p>
<ul>
	<li>
初期~時には ~F に設定するモノトスル。
◎
must initially be set to false.＼
</li>
	<li>
取得子は、
最後に設定された値を返すモノトスル。
◎
On getting, it must return the last value it was set to.＼
</li>
	<li>
設定子は、
所与の値に設定するモノトスル。
これは、
`Checkbox$st ~controlの外観を変更する以外に効果はない。
◎
On setting, it must be set to the new value. It has no effect except for changing the appearance of checkbox controls.
</li>
</ul>

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

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

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

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

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

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

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

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

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

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

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

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

◎
The accept, alpha, alt, max, min, multiple, pattern, placeholder, required, size, src, and step IDL attributes must reflect the respective content attributes of the same name.＼
</div>

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

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

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

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

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

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

<div class="algo">
<p>
［
`width@m
／
`height@m
］取得子~手続きは：
</p>
<ol>
	<li>
~IF［
コレの`状態$ ~NEQ `Image$st
］~OR［
コレ用に`可用$な画像は無い
］
⇒
~RET 0
</li>
	<li>
%寸法 ~LET コレ用に`可用$な画像は`具現化されて$［
いるならば描画された画像の寸法 ／
いないならば画像の`生来な寸法$
］
</li>
	<li>
~RET ［
`width$m 用には %寸法 を成す横幅 ／
`height$m 用には %寸法 を成す縦幅
］を成す`~CSS~pixel$数
</li>
</ol>
◎
The IDL attributes width and height must return the rendered width and height of the image, in CSS pixels, if an image is being rendered; or else the natural width and height of the image, in CSS pixels, if an image is available but not being rendered; or else 0, if no image is available. When the input element's type attribute is not in the Image Button state, then no image is available. [CSS]
</div>

<p>
［
`width$m ／ `height$m
］設定子は、［
`width$a ／ `height$a
］内容~属性を`反映して$いるかのように動作するモノトスル。
◎
On setting, they must act as if they reflected the respective content attributes of the same name.
</p>

<p>
次に挙げる各種~IDL~memberは：
</p>
<ul>
	<li>
`willValidate$m,
`validity$m,
`validationMessage$m,
`checkValidity()$m,
`reportValidity()$m,
`setCustomValidity()$m
は、
`拘束~検証~API＠~HTMLforms#the-constraint-validation-api$の一部を成す。
◎
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>
`disabled$m,
`form$m,
`name$m
は、
要素の~form~APIの一部を成す。
◎
The disabled, form, and name IDL attributes are part of the element's forms API.
</li>
</ul>

				<section id="states-of-the-type-attribute">
<h5 title="States of the type attribute">4.10.5.1. `type$a 属性の各種 状態</h5>

					<section id="hidden-state-(type=hidden)">
<h6 title="Hidden state (type=hidden)">4.10.5.1.1. `Hidden^st 状態（ `type=hidden^c ）</h6>

<p>
`Hidden$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Hidden state, the rules in this section apply.
</p>

<p>
要素は、
利用者により［
精査-／操作-
］されないものと意図される値を`表現-$する。
◎
The input element represents a value that is not intended to be examined or manipulated by the user.
</p>

<p>
<strong>拘束~検証</strong>
⇒
この`状態$にある要素は、
`拘束~検証の対象外$になる。
◎
Constraint validation: If an input element's type attribute is in the Hidden state, it is barred from constraint validation.
</p>

<p>
要素の `value$a 属性は、
要素が次を満たす場合には省略されなければナラナイ
⇒
`name$a 属性を有していて，その値は "`_charset_$v" に`~ASCII大小無視$で合致する
◎
If the name attribute is present and has a value that is an ASCII case-insensitive match for "_charset_", then the element's value attribute must be omitted.
</p>

<div class="bookkeeping">
`Hidden^bk

<p>
`value$m ~IDL属性は、
`既定~mode$iになる。
</p>

◎
The autocomplete and dirname content attributes apply to this element.
◎
The value IDL attribute applies to this element and is in mode default.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt checked, colorspace, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, popovertarget, popovertargetaction, readonly, required, size, src, step, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods.
◎
The input and change events do not apply.
</div>

					</section>
					<section id="text-(type=text)-state-and-search-state-(type=search)">
<h6 title="Text (type=text) state and Search state (type=search)">4.10.5.1.2. `Text^st 状態（ `type=text^c）, `Search^st 状態（ `type=search^c ）</h6>

<p>
［
`Text$st ／ `Search$st
］`状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Text state or the Search state, the rules in this section apply.
</p>

<p>
要素は、
その`値$feを編集するための，一行の素な~text~controlを`表現-$する。
◎
The input element represents a one line plain text edit control for the element's value.
</p>

<p class="note">注記：
`Text$st 状態と `Search$st 状態との主な相違は，~style上のものでしかない。
~search~controlと定例の~text~controlとが判別されるような~platform上では、
`Search$st ~controlの外観は，定例の~text~controlのそれではなく，~platformの~search~controlの外観に合わせられるかもしれない。
◎
The difference between the Text state and the Search state is primarily stylistic: on platforms where search controls are distinguished from regular text controls, the Search state might result in an appearance consistent with the platform's search controls rather than appearing like a regular text control.
</p>

<p>
要素が`変異-可能$feな場合、
~UAは：
◎
If the element is mutable,＼
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
`値$feを編集する
◎
its value should be editable by the user.＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
`値$feの中へ`改行文字$を挿入する
◎
User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the element's value.
</li>
	<li>
<p>
次を利用者に許容するベキである
⇒
要素の書字~方向を［
左横書き, 右横書き
］いずれかに変更する
◎
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.＼
</p>

<div class="algo">
<p>
利用者がそれを行った場合、
次の手続きを走らすモノトスル：
◎
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 element to＼
</p>
<div class="algo">
手続きは
⇒
`入力~eventを発火する$( 要素, `input$et )
◎
fire an event named input at the element, with the bubbles and composed attributes initialized to true.
</div>
			</li>
		</ol>
</div>
	</li>
</ul>

<p>
`value$a 属性に指定する値は、
`改行文字$を含んではナラナイ。
◎
The value attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.
</p>

<p class="algo">
<strong>`値の無毒化~algo$</strong>
⇒
要素の`値$fe ~SET `改行文字を剥ぐ$( 要素の`値$fe )
◎
The value sanitization algorithm is as follows: Strip newlines from the value.
</p>

<div class="bookkeeping">
`Text^bk

<p>
`value$m ~IDL属性は、
`値~mode$iになる。
</p>

◎
The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, dirname, list, maxlength, minlength, pattern, placeholder, readonly, required, and size content attributes; list, selectionStart, selectionEnd, selectionDirection, and value IDL attributes; select(), setRangeText(), and setSelectionRange() methods.
◎
The value IDL attribute is in mode value.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, checked, colorspace, formaction, formenctype, formmethod, formnovalidate, formtarget, height, max, min, multiple, popovertarget, popovertargetaction, src, step, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, valueAsDate, and valueAsNumber IDL attributes; stepDown() and stepUp() methods.
</div>

					</section>
					<section id="telephone-state-(type=tel)">
<h6 title="Telephone state (type=tel)">4.10.5.1.3. `Tel^st 状態（ `type=tel^c ）</h6>

<p>
`Tel$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Telephone state, the rules in this section apply.
</p>

<p>
要素は、
その`値$feにて与えられる電話~番号を編集するための~controlを`表現-$する。
◎
The input element represents a control for editing a telephone number given in the element's value.
</p>

<p>
要素が`変異-可能$feな場合、
~UAは：
◎
If the element is mutable,＼
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
`値$feを編集する
◎
its value should be editable by the user.＼
</li>
	<li>
アキを変更してもヨイ。
【例： 市外局番と残りの部分の合間。】
◎
User agents may change the spacing and,＼
</li>
	<li>
利用者が手入力した`値$feを成す約物を
— ~careの下で —
変更してもヨイ。
◎
with care, the punctuation of values that the user enters.＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
`値$feの中へ`改行文字$を挿入する
◎
User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the element's value.
</li>
</ul>

<p>
`value$a 属性に指定する値は、
`改行文字$を含んではナラナイ。
◎
The value attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.
</p>

<p class="algo">
<strong>`値の無毒化~algo$</strong>
⇒
要素の`値$fe ~SET `改行文字を剥ぐ$( 要素の`値$fe )
◎
The value sanitization algorithm is as follows: Strip newlines from the value.
</p>

<p class="note">注記：
`Url$st ／ `Email$st
型と違って、
`Tel$st 型は，特定0の構文を施行しない。
これは意図的である。
妥当な電話~番号は多様なので、
実施においては，電話~番号~欄は自由形にされる傾向にある。
特定0の形式を施行する必要がある~systemでは、
`pattern$a 属性や `setCustomValidity()$m ~methodを利用して，~client側の中に検証の仕組みを~hookすることが奨励される。
◎
Unlike the URL and Email types, the Telephone type does not enforce a particular syntax. This is intentional; in practice, telephone number fields tend to be free-form fields, because there are a wide variety of valid phone numbers. Systems that need to enforce a particular format are encouraged to use the pattern attribute or the setCustomValidity() method to hook into the client-side validation mechanism.
</p>

<div class="bookkeeping">
`Tel^bk

<p>
`value$m ~IDL属性は、
`値~mode$iになる。
</p>

◎
The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, dirname, list, maxlength, minlength, pattern, placeholder, readonly, required, and size content attributes; list, selectionStart, selectionEnd, selectionDirection, and value IDL attributes; select(), setRangeText(), and setSelectionRange() methods.
◎
The value IDL attribute is in mode value.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, checked, colorspace, formaction, formenctype, formmethod, formnovalidate, formtarget, height, max, min, multiple, popovertarget, popovertargetaction, src, step, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, valueAsDate, and valueAsNumber IDL attributes; stepDown() and stepUp() methods.
</div>

					</section>
					<section id="url-state-(type=url)">
<h6 title="URL state (type=url)">4.10.5.1.4. `Url^st 状態（ `type=url^c ）</h6>

<p>
`Url$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the URL state, the rules in this section apply.
</p>

<p>
要素は、
その`値$feにて与えられる単独の`絶対~URL$を編集するための~controlを`表現-$する。
◎
The input element represents a control for editing a single absolute URL given in the element's value.
</p>

<p>
要素が`変異-可能$feな場合、
~UAは：
◎
If the element is mutable,＼
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
`値$feが表現する~URLを変更する
◎
the user agent should allow the user to change the URL represented by its value.＼
</li>
	<li>
<p>
次を利用者に許容してもヨイ
⇒
`値$feを［
`妥当$urlな`絶対~URL$
］でない文字列に設定する
◎
User agents may allow the user to set the value to a string that is not a valid absolute URL,＼
</p>

<p>
利用者がそれを行った場合、
`値$feが常に`妥当$urlな`絶対~URL$になるよう，
利用者が手入力した文字を自動的に~escapeしてもヨイ
（それが~~実在しない~URLで，利用者が~UI内で編集している場合でも）。
◎
but may also or instead automatically escape characters entered by the user so that the value is always a valid absolute URL (even if that isn't the actual value seen and edited by the user in the interface).＼
</p>
	</li>
	<li>
次を利用者に許容するベキである
⇒
`値$feを空~文字列に設定する
◎
User agents should allow the user to set the value to the empty string.＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
`値$feの中へ`改行文字$を挿入する
◎
User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value.
</li>
</ul>

<p>
`value$a 属性に指定する値は、［
空~文字列／`絶対~URL$を与える`前後~空白~可の妥当な~URL$
］でなければナラナイ。
◎
The value attribute, if specified and not empty, must have a value that is a valid URL potentially surrounded by spaces that is also an absolute URL.
</p>

<div class="algo">
<strong>`値の無毒化~algo$</strong>
⇒
要素の`値$fe ~SET `前後の~ASCII空白~列を剥ぐ$( `改行文字を剥ぐ$( 要素の`値$fe ) )
◎
The value sanitization algorithm is as follows: Strip newlines from the value, then strip leading and trailing ASCII whitespace from the value.
</div>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`型~不一致の難あり$になる
⇒
その`値$feは空~文字列でも`妥当$urlな`絶対~URL$でもない
◎
Constraint validation: While the value of the element is neither the empty string nor a valid absolute URL, the element is suffering from a type mismatch.
</p>

<div class="bookkeeping">
`Url^bk

<p>
`value$m ~IDL属性は、
`値~mode$iになる。
</p>

◎
The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, dirname, list, maxlength, minlength, pattern, placeholder, readonly, required, and size content attributes; list, selectionStart, selectionEnd, selectionDirection, and value IDL attributes; select(), setRangeText(), and setSelectionRange() methods.
◎
The value IDL attribute is in mode value.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, checked, colorspace, formaction, formenctype, formmethod, formnovalidate, formtarget, height, max, min, multiple, popovertarget, popovertargetaction, src, step, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, valueAsDate, and valueAsNumber IDL attributes; stepDown() and stepUp() methods.
</div>

<div class="example">
<p>
文書が次の~markupを包含していて：
◎
If a document contained the following markup:
</p>

`Url-1^xCode

<p>
利用者が
"<kbd>spec.w</kbd>"
と打込んだとき、
~UAも利用者が近過去に
`https://url.spec.whatwg.org/#url-parsing^c,
`https://streams.spec.whatwg.org/^c
を訪問したことを見出した場合、
描画は次の様になるであろう：
◎
...and the user had typed "spec.w", and the user agent had also found that the user had visited https://url.spec.whatwg.org/#url-parsing and https://streams.spec.whatwg.org/ in the recent past, then the rendering might look like this:
</p>

<figure>
<figcaption id="_dgm-sample-url">
上端の~text~boxには、
左端から ~icon, ~text `spec.^l, ~cursorと続き，右端には~drop-down~buttonがある。
その下の~drop-down~boxには、
6 個の~URLを包含していて，うち最初の 4 個の右には 灰色に霞んだ~labelがある。
~drop-down~boxの右端には，他にも可用な値があることを指示する~scrollbarがある。
◎
A text box with an icon on the left followed by the text "spec.w" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URLs on the left, with the first four having grayed out labels on the right; and a scrollbar to the right of the drop down box, indicating further values are available.
</figcaption></figure>

<p>
この見本の最初の 4 個の~URLは、
作者が指定した~list内の~URLのうち，利用者が手入力した~textに合致するものからなり、
`実装定義$な何らかの方式で~sortされている
（例えば，利用者が~URLを指す~~頻度に基づいて）。
~UAは、
自身の知識を利用して，利用者が~scheme~~成分を省略しても値が~URLになるよう，~domain名に対し~intelligentな照合を遂行していることに注意。
◎
The first four URLs in this sample consist of the four URLs in the author-specified list that match the text the user has entered, sorted in some implementation-defined manner (maybe by how frequently the user refers to those URLs). Note how the UA is using the knowledge that the values are URLs to allow the user to omit the scheme part and perform intelligent matching on the domain name.
</p>

<p>
最後の 2 個の~URLは
（~scrollbarが指示するように，おそらくもっと多くの~URLも可用である）、
~UAの~session履歴~dataに合致するものとして~~示されている。
この~dataは，~pageの~DOMからは可用にはされない。
この事例では、
~UAは，それらの値に供する~titleはない。
◎
The last two URLs (and probably many more, given the scrollbar's indications of more values being available) are the matches from the user agent's session history data. This data is not made available to the page DOM. In this particular case, the UA has no titles to provide for those values.
</p>
</div>

					</section>
					<section id="email-state-(type=email)">
<h6 title="Email state (type=email)">4.10.5.1.5. `Email^st 状態（ `type=email^c ）</h6>

<p>
`Email$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Email state, the rules in this section apply.
</p>

<p>
`Email$st 状態が値をどう演算するかは、
`multiple$a 属性が指定されたかどうかに依存する。
◎
How the Email state operates depends on whether the multiple attribute is specified or not.
</p>

<dl class="switch">
	<dt>
要素に `multiple$a 属性が指定されなかった場合：
◎
When the multiple attribute is not specified on the element
</dt>
	<dd>
<p>
要素は、
その`値$feにて与えられる~email~addressを編集するための~controlを`表現-$する。
◎
The input element represents a control for editing an email address given in the element's value.
</p>

<p>
要素が`変異-可能$feな場合、
~UAは：
◎
If the element is mutable,＼
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
`値$feが表現する~email~addressを変更する
◎
the user agent should allow the user to change the email address represented by its value.＼
</li>
	<li>
次を利用者に許容してもヨイ
⇒
`値$feを［
`妥当な~email~address$でない文字列
］に設定する
◎
User agents may allow the user to set the value to a string that is not a valid email address.＼
</li>
	<li>
利用者は単独の~email~addressを供するものと期待するので、
それに沿う方式で動作するベキである。
◎
The user agent should act in a manner consistent with expecting the user to provide a single email address.＼
</li>
	<li>
次を利用者に許容するベキである
⇒
`値$feを空~文字列に設定する
◎
User agents should allow the user to set the value to the empty string.＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
`値$feの中へ`改行文字$を挿入する
◎
User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value.＼
</li>
	<li>
`値$feを［
表示-／編集-
］用に変形してもヨイ
— 特に、［
`値$feの~domain~label内の~punycode
］と［
表示における~IDN
］とを相互に変換するベキである。
◎
User agents may transform the value for display and editing; in particular, user agents should convert punycode in the domain labels of the value to IDN in the display and vice versa.
</li>
</ul>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`不良~入力の難あり$になる
⇒
~UIが~punycodeに変換できない入力を表現している
◎
Constraint validation: While the user interface is representing input that the user agent cannot convert to punycode, the control is suffering from bad input.
</p>

<p>
`value$a 属性に指定する値は、
次のいずれかでなければナラナイ
⇒＃
空~文字列／
`妥当な~email~address$
◎
The value attribute, if specified and not empty, must have a value that is a single valid email address.
</p>

<div class="algo">
<strong>`値の無毒化~algo$</strong>
⇒
要素の`値$fe ~SET `前後の~ASCII空白~列を剥ぐ$( `改行文字を剥ぐ$( 要素の`値$fe ) )
◎
The value sanitization algorithm is as follows: Strip newlines from the value, then strip leading and trailing ASCII whitespace from the value.
</div>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`型~不一致の難あり$になる
⇒
その`値$feは空~文字列でも`妥当な~email~address$でもない
◎
Constraint validation: While the value of the element is neither the empty string nor a single valid email address, the element is suffering from a type mismatch.
</p>

	</dd>

	<dt>
要素に `multiple$a 属性が指定された場合：
◎
When the multiple attribute is specified on the element
</dt>
	<dd>
<p>
要素は、
その`値~群$feにて与えられる一連の~email~addressを［
追加-／除去-／編集-
］するための~controlを`表現-$する。
◎
The input element represents a control for adding, removing, and editing the email addresses given in the element's values.
</p>

<p>
要素が`変異-可能$feな場合、
~UAは：
◎
If the element is mutable,＼
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
`値~群$feが表現する~email~addressたちを［
追加-／除去-／編集-
］する
◎
the user agent should allow the user to add, remove, and edit the email addresses represented by its values.＼
</li>
	<li>
次を利用者に許容してもヨイ
⇒
`値$feたちが成す~list内の個々の値を［
`妥当な~email~address$でない文字列
］に設定する
◎
User agents may allow the user to set any individual value in the list of values to a string that is not a valid email address,＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
`値$feたちが成す~list内の個々の値を［
文字 `002C^U `,^smb ／
`改行文字$
］を包含する文字列に設定する
◎
but must not allow users to set any individual value to a string containing U+002C COMMA (,), U+000A LINE FEED (LF), or U+000D CARRIAGE RETURN (CR) characters.＼
</li>
	<li>
次を利用者に許容するベキである
⇒
要素の`値~群$feを成す~addressすべてを除去する
◎
User agents should allow the user to remove all the addresses in the element's values.＼
</li>
	<li>
`値~群$feを［
表示-／編集-
］用に変形してもヨイ
— 特に、［
`値$feを成す~domain~label内の~punycode
］と［
表示における~IDN
］とを相互に変換するベキである。
◎
User agents may transform the values for display and editing; in particular, user agents should convert punycode in the domain labels of the value to IDN in the display and vice versa.
</li>
</ul>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`不良~入力の難あり$になる
⇒
~UI内のある~email~address値が［
`002C^U `,^smb を包含している／
~punycodeに変換できない入力を表現している
］
◎
Constraint validation: While the user interface describes a situation where an individual value contains a U+002C COMMA (,) or is representing input that the user agent cannot convert to punycode, the control is suffering from bad input.
</p>

<div class="algo">
<p>
~UAは、
利用者が要素の`値~群$fe【！`値$feたち】を変更する度に，次の手続きを走らすモノトスル：
◎
Whenever the user changes the element's values, the user agent must run the following steps:
</p>
<ol>
	<li>
%~token群 ~LET « »
◎
↓</li>
	<li>
要素の`値~群$fe【！`値$feたち】を成す
~EACH( %~token )
に対し
⇒
%~token群 に次の結果を`付加する$
⇒
`前後の~ASCII空白~列を剥ぐ$( %~token )
◎
Let latest values be a copy of the element's values.
◎
Strip leading and trailing ASCII whitespace from each value in latest values.
</li>
	<li>
要素の`値$fe ~SET %~token群 を `002C^U `,^smb で`連結する$
◎
Let the element's value be the result of concatenating all the values in latest values, separating each value from the next by a single U+002C COMMA character (,), maintaining the list's order.
</li>
</ol>
</div>

<p>
`value$a 属性に指定する値は、
`妥当な~email~address~list$でなければナラナイ。
◎
The value attribute, if specified, must have a value that is a valid email address list.
</p>

<div class="algo">
<p>
<strong>`値の無毒化~algo$</strong>
◎
The value sanitization algorithm is as follows:
</p>
<ol>
	<li>
%~token群 ~LET `~commaで分割する$( 要素の`値$fe )
◎
Split on commas the element's value,＼
</li>
	<li>
%~token群 内の
~EACH( %~token )
を次の結果に置換する
⇒
`前後の~ASCII空白~列を剥ぐ$( %~token )
◎
strip leading and trailing ASCII whitespace from each resulting token, if any, and＼
</li>
	<li>
要素の`値~群$fe ~SET %~token群
（場合によっては空になり，各~tokenも場合によっては空~文字列になる）
◎
let the element's values be the (possibly empty) resulting list of (possibly empty) tokens, maintaining the original order.
</li>
	<li>
要素の`値$fe ~SET %~token群 を `002C^U `,^smb で`連結する$
◎
Let the element's value be the result of concatenating the element's values, separating each value from the next by a single U+002C COMMA character (,), maintaining the list's order.
</li>
</ol>
</div>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`型~不一致の難あり$になる
⇒
その`値$feは`妥当な~email~address~list$でない
◎
Constraint validation: While the value of the element is not a valid email address list, the element is suffering from a type mismatch.
</p>
	</dd>
</dl>

<p>
`multiple$a 属性が［
設定-／除去-
］されたときは、
~UAは，`値の無毒化~algo$を走らすモノトスル。
◎
When the multiple attribute is set or removed, the user agent must run the value sanitization algorithm.
</p>

<p>
`妥当な~email~address@
は、
次の~ABNFによる `email^P 生成規則に合致する文字列である。
この~ABNFの文字~集合は、
~Unicodeとする。
この~ABNFは、
RFC 1123 に述べられる拡張を実装する。
`ABNF$r
`RFC5322$r
`RFC1034$r
`RFC1123$r
◎
A valid email address is a string that matches the email production of the following ABNF, the character set for which is Unicode. This ABNF implements the extensions described in RFC 1123. [ABNF] [RFC5322] [RFC1034] [RFC1123]
</p>

<div>
<pre class="bnf">
email
	= 1*( atext / "." ) "@" label *( "." label )
label
	= let-dig [ [ ldh-str ] let-dig ]
</pre>
<p>
ここで：
</p>
<ul>
	<li>
`label^P の長さは、
`RFC 1034 § 3.5＠~RFCx/rfc1034#section-3.5$
により， 63 文字までに制限される。
</li>
	<li>
`atext^P は、
`RFC 5322 § 3.2.3＠~RFCx/rfc5322#section-3.2.3$
にて定義される。
</li>
	<li>
`let-dig^P, `ldh-str^P は、
`RFC 1034 § 3.5＠~RFCx/rfc1034#section-3.5$
にて定義される。
</li>
</ul>

<pre lang="en" class="_en">
email         = 1*( atext / "." ) "@" label *( "." label )
label         = let-dig [ [ ldh-str ] let-dig ]  ; limited to a length of 63 characters by RFC 1034 section 3.5
atext         = &lt; as defined in RFC 5322 section 3.2.3 &gt;
let-dig       = &lt; as defined in RFC 1034 section 3.5 &gt;
ldh-str       = &lt; as defined in RFC 1034 section 3.5 &gt;
</pre>
</div>

<p class="note">注記：
この要件は、
~email~addressの構文を定義している RFC 5322 に対する`故意的な違反$である。
それは厳密~過ぎると同時に（文字 `@^l より前の部分），
曖昧~過ぎでもあり（文字 `@^l より後の部分）、
ここでの実用には甘~過ぎる
（ほとんどの利用者にとって馴染みのない方式で［
~comment／空白~文字／引用符付き文字列
］が許容されている）。
◎
This requirement is a willful violation of RFC 5322, which defines a syntax for email addresses that is simultaneously too strict (before the "@" character), too vague (after the "@" character), and too lax (allowing comments, whitespace characters, and quoted strings in manners unfamiliar to most users) to be of practical use here.
</p>

<div class="note">

<p>注記：
次の［
~JS／~perl
］に互換な正規表現は、
上の定義の実装を与える：
◎
The following JavaScript- and Perl-compatible regular expression is an implementation of the above definition.
</p>

<pre>~RxpEmail</pre>
</div>

<p>
`妥当な~email~address~list@
は、
各~tokenが`妥当な~email~address$であるような，`~commaで分離された~token集合$である。
実装は、
`妥当な~email~address~list$から~tokenたちが成す~listを得するときは、
`~commaで分割-$するモノトスル。
◎
A valid email address list is a set of comma-separated tokens, where each token is itself a valid email address. To obtain the list of tokens from a valid email address list, an implementation must split the string on commas.
</p>

<div class="bookkeeping">
`Email^bk

<p>
`value$m ~IDL属性は、
`値~mode$iになる。
</p>

◎
The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, dirname, list, maxlength, minlength, multiple, pattern, placeholder, readonly, required, and size content attributes; list and value IDL attributes; select() method.
◎
The value IDL attribute is in mode value.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, checked, colorspace, formaction, formenctype, formmethod, formnovalidate, formtarget, height, max, min, popovertarget, popovertargetaction, src, step, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; setRangeText(), setSelectionRange(), stepDown() and stepUp() methods.
</div>

					</section>
					<section id="password-state-(type=password)">
<h6 title="Password state (type=password)">4.10.5.1.6. `Password^st 状態（ `type=password^c ）</h6>

<p>
`Password$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Password state, the rules in this section apply.
</p>

<p>
要素は、
その`値$feを編集するための
一行の素な~text~controlを`表現-$する。
~UAは、
その値を［
利用者~以外の者が見れないよう遮る
］ベキである。
◎
The input element represents a one line plain text edit control for the element's value. The user agent should obscure the value so that people other than the user cannot see it.
</p>

<p>
要素が`変異-可能$feな場合、
~UAは：
◎
If the element is mutable,＼
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
`値$feを編集する
◎
its value should be editable by the user.＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
`値$feの中へ`改行文字$を挿入する
◎
User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value.
</li>
</ul>

<p>
`value$a 属性に指定する値は、
`改行文字$を含んではナラナイ。
◎
The value attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.
</p>

<p class="algo">
<strong>`値の無毒化~algo$</strong>
⇒
要素の`値$fe ~SET `改行文字を剥ぐ$( 要素の`値$fe )
◎
The value sanitization algorithm is as follows: Strip newlines from the value.
</p>

<div class="bookkeeping">
`Password^bk

<p>
`value$m ~IDL属性は、
`値~mode$iになる。
</p>

◎
The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, dirname, maxlength, minlength, pattern, placeholder, readonly, required, and size content attributes; selectionStart, selectionEnd, selectionDirection, and value IDL attributes; select(), setRangeText(), and setSelectionRange() methods.
◎
The value IDL attribute is in mode value.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, checked, colorspace, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, min, multiple, popovertarget, popovertargetaction, src, step, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, list, valueAsDate, and valueAsNumber IDL attributes; stepDown() and stepUp() methods.
</div>

					</section>
					<section id="date-state-(type=date)">
<h6 title="Date state (type=date)">4.10.5.1.7. `Date^st 状態（ `type=date^c ）</h6>

<p>
`Date$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Date state, the rules in this section apply.
</p>

<p>
要素は、
その`値$feを［
特定の`日付$を表現する文字列
］に設定するための~controlを`表現-$する。
◎
The input element represents a control for setting the element's value to a string representing a specific date.
</p>

<p>
要素が`変異-可能$feな場合、
~UAは：
◎
If the element is mutable,＼
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
`値$feが表現する`日付$
— 値に`日付~文字列を構文解析する$を適用して得されるそれ —
を変更する
◎
the user agent should allow the user to change the date represented by its value, as obtained by parsing a date from it.＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
`値$feを［
空~文字列, `妥当な日付~文字列$
］以外に設定する
◎
User agents must not allow the user to set the value to a non-empty string that is not a valid date string.＼
</li>
	<li>
`日付$を選択するための~UIを供する場合は、
`値$feを［
利用者の選択を表現している`妥当な日付~文字列$
］に設定するモノトスル。
◎
If the user agent provides a user interface for selecting a date, then the value must be set to a valid date string representing the user's selection.＼
</li>
	<li>
次を利用者に許容するベキである
⇒
`値$feを空~文字列に設定する
◎
User agents should allow the user to set the value to the empty string.
</li>
</ul>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`不良~入力の難あり$になる
⇒
~UI内の入力を`妥当な日付~文字列$に変換できない
◎
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid date string, the control is suffering from bad input.
</p>

<p class="note" id="_date-note1">注記：
［
日付／時刻／実数
］用の~form~controlに対する，入力~形式と提出~形式との相違に関する論点は、
`§ 序論＠~FORMSintro#input-author-notes$
を見よ。
また、
~form~controlの地域化に関しては，
`§ 実装~上の注記＠#input-impl-notes$
を見よ。
◎
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.
</p>

<p>
`value$a 属性に指定する値は、［
空~文字列／`妥当な日付~文字列$
］でなければナラナイ。
◎
The value attribute, if specified and not empty, must have a value that is a valid date string.
</p>

<div class="algo">
<strong>`値の無毒化~algo$</strong>
⇒
~IF［
要素の`値$feは`妥当な日付~文字列$でない
］
⇒
要素の`値$fe ~SET 空~文字列
◎
The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.
</div>

<p>
［
`min$a ／ `max$a
］属性に指定する値は、
`妥当な日付~文字列$でなければナラナイ。

◎
The min attribute, if specified, must have a value that is a valid date string. The max attribute, if specified, must have a value that is a valid date string.
</p>

<p>
`step$a 属性は日t数で表出される。
`~step倍率$は
86400000（ 24 ~MUL 60 ~MUL 60 ~MUL 1000 ）とする
（これは、
他の~algoにて 日t数を~milli秒t数に変換するときに利用される）。
`既定の~step$は 1 日tとする。
◎
The step attribute is expressed in days. The step scale factor is 86,400,000 (which converts the days to milliseconds, as used in the other algorithms). The default step is 1 day.
</p>

<p>
要素が`~step不一致の難あり$のときは、
~UAは
⇒
そうならなくなるよう，要素の`値$feを最も近い`日付$に丸めてもヨイ。
◎
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest date for which the element would not suffer from a step mismatch.
</p>

<div class="algo">
<p>
<strong>`文字列から実数に変換する$</strong>
~algoは、
所与の
( 文字列 %入力 )
に対し：
◎
The algorithm to convert a string to a number, given a string input, is as follows:＼
</p>
<ol>
	<li>
%日付 ~LET `日付~文字列を構文解析する$( %入力 )
◎
If parsing a date from input＼
</li>
	<li>
~IF［
%日付 ~EQ `失敗^i
］
⇒
~RET `~error^i
◎
results in an error, then return an error;＼
</li>
	<li>
~RET ［
1970-01-01 ~UTC午前 0 時
（値 `1970-01-01T00:00:00.0Z^l が表現する時刻）
から %日付 における~UTC午前 0 時まで
］に経過した~milli秒t数
— 閏~秒tは無視して
◎
otherwise, return the number of milliseconds elapsed from midnight UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z") to midnight UTC on the morning of the parsed date, ignoring leap seconds.
</li>
</ol>
</div>

<p class="algo">
<strong>`実数から文字列に変換する$</strong>
~algoは、
所与の
( 実数 %入力 )
に対し
⇒
~RET 次を表現する`妥当な日付~文字列$
⇒
［
1970-01-01 ~UTC午前 0 時
（値 `1970-01-01T00:00:00.0Z^l が表現する時刻）
］から %入力 ~milli秒t後~現在の~UTC`日付$
◎
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid date string that represents the date that, in UTC, is current input milliseconds after midnight UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z").
</p>

<div class="algo">
<p>
<strong>`文字列から~Date~objに変換する$</strong>
~algoは、
所与の
( 文字列 %入力 )
に対し：
◎
The algorithm to convert a string to a Date object, given a string input, is as follows:＼
</p>
<ol>
	<li>
%日付 ~LET `日付~文字列を構文解析する$( %入力 )
◎
If parsing a date from input＼
</li>
	<li>
~IF［
%日付 ~EQ `失敗^i
］
⇒
~RET `~error^i
◎
results in an error, then return an error;＼
</li>
	<li>
~RET `新たな~Date~obj$( %日付 における~UTC午前 0 時 )
◎
otherwise, return a new Date object representing midnight UTC on the morning of the parsed date.
</li>
</ol>
</div>

<p class="algo">
<strong>`~Date~objから文字列に変換する$</strong>
~algoは、
所与の
( `Date$I ~obj %入力 )
に対し
⇒
~RET 次を表現する`妥当な日付~文字列$
⇒
%入力 が表現する~UTC時間帯による時刻~現在の`日付$
◎
The algorithm to convert a Date object to a string, given a Date object input, is as follows: Return a valid date string that represents the date current at the time represented by input in the UTC time zone.
</p>

<div id="only-contemporary-times" class="note">
<p>注記：
`Date$st 状態
（および，後続な節にて述べる，日付／時刻に関係する他の状態）
は、［
現今の暦に相対的な精確な日時t
］を確立できない値を手入力するために意図されるものではない。
例えば、
“ビッグバンの 1 ~milli秒t後”,
“ジュラ紀の~~早期”,
“紀元前 250 年~頃の冬”
などの時刻には不適切になる。
◎
The Date state (and other date- and time-related states described in subsequent sections) is not intended for the entry of values for which a precise date and time relative to the contemporary calendar cannot be established. For example, it would be inappropriate for the entry of times like "one millisecond after the big bang", "the early part of the Jurassic period", or "a winter around 250 BCE".
</p>

<p>
~Gregorian暦の導入~以前の日付の入力~用には、
作者には， `Date$st 状態
（および，後続な節にて述べる日時tに関係する他の状態）
を利用しないことが奨励される。
~UAには、
日時tを，より早期から~Gregorian暦へ変換するための~supportは要求されないので。
また、
手動で行うよう利用者に依頼することは，利用者にとって~~過度な負担になるので。
（~Gregorian暦が~~導入された時期は，国ごとに
— 16 世紀の途中から 20 世紀の初め頃までにわたり —
まちまちなので、
これは，複雑になる）。
作者は，代わりに、
`select$e 要素と `Number$st 状態にある要素を利用して，
木目細かな入力~controlを供することが奨励される。
◎
For the input of dates before the introduction of the Gregorian calendar, authors are encouraged to not use the Date state (and the other date- and time-related states described in subsequent sections), as user agents are not required to support converting dates and times from earlier periods to the Gregorian calendar, and asking users to do so manually puts an undue burden on users. (This is complicated by the manner in which the Gregorian calendar was phased in, which occurred at different times in different countries, ranging from partway through the 16th century all the way to early in the 20th.) Instead, authors are encouraged to provide fine-grained input controls using the select element and input elements with the Number state.
</p>
</div>

<div class="bookkeeping">
`Date^bk

【！＊原文 files 抜け】

<p>
`value$m ~IDL属性は、
`値~mode$iになる。
</p>

◎
The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, readonly, required, and step content attributes; list, value, valueAsDate, and valueAsNumber IDL attributes; select(), stepDown(), and stepUp() methods.
◎
The value IDL attribute is in mode value.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, checked, colorspace, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, popovertarget, popovertargetaction, size, src, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, selectionStart, selectionEnd, and selectionDirection IDL attributes; setRangeText(), and setSelectionRange() methods.
</div>

					</section>
					<section id="month-state-(type=month)">
<h6 title="Month state (type=month)">4.10.5.1.8. `Month^st 状態（ `type=month^c ）</h6>

<p>
`Month$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Month state, the rules in this section apply.
</p>

<p>
要素は、
その`値$feを［
特定の`年月t$を表現する文字列
］に設定するための~controlを`表現-$する。
◎
The input element represents a control for setting the element's value to a string representing a specific month.
</p>

<p>
要素が`変異-可能$feな場合、
~UAは：
◎
If the element is mutable,＼
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
`値$feが表現する`年月t$
— 値に`年月t文字列を構文解析する$を適用して得されるそれ —
を変更する
◎
the user agent should allow the user to change the month represented by its value, as obtained by parsing a month from it.＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
`値$feを［
空~文字列, `妥当な年月t文字列$
］以外に設定する
◎
User agents must not allow the user to set the value to a non-empty string that is not a valid month string.＼
</li>
	<li>
`年月t$を選択するための~UIを供する場合は、
`値$feを［
利用者の選択を表現している`妥当な年月t文字列$
］に設定するモノトスル。
◎
If the user agent provides a user interface for selecting a month, then the value must be set to a valid month string representing the user's selection.＼
</li>
	<li>
次を利用者に許容するベキである
⇒
`値$feを空~文字列に設定する
◎
User agents should allow the user to set the value to the empty string.
</li>
</ul>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`不良~入力の難あり$になる
⇒
~UI内の入力を`妥当な年月t文字列$に変換できない
◎
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid month string, the control is suffering from bad input.
</p>

<p class="note">注記：
<a href="#_date-note1">`Date^st 状態の注記</a>も見よ。
◎
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.
</p>

<p>
`value$a 属性に指定する値は、［
空~文字列／`妥当な年月t文字列$
］でなければナラナイ。
◎
The value attribute, if specified and not empty, must have a value that is a valid month string.
</p>

<div class="algo">
<strong>`値の無毒化~algo$</strong>
⇒
~IF［
要素の`値$feは`妥当な年月t文字列$でない
］
⇒
要素の`値$fe ~SET 空~文字列
◎
The value sanitization algorithm is as follows: If the value of the element is not a valid month string, then set it to the empty string instead.
</div>

<p>
［
`min$a ／ `max$a
］属性に指定する値は、
`妥当な年月t文字列$でなければナラナイ。
◎
The min attribute, if specified, must have a value that is a valid month string. The max attribute, if specified, must have a value that is a valid month string.
</p>

<p>
`step$a 属性は月t数で表出される。
`~step倍率$は 1 とする
（~algoは月t数を利用するので 変換は必要ない）。
`既定の~step$は 1 ヶ月tとする。
◎
The step attribute is expressed in months. The step scale factor is 1 (there is no conversion needed as the algorithms use months). The default step is 1 month.
</p>

<p>
要素が`~step不一致の難あり$のときは、
~UAは
⇒
そうならなくなるよう，要素の`値$feを最も近い`年月t$に丸めてもヨイ。
◎
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest month for which the element would not suffer from a step mismatch.
</p>

<div class="algo">
<p>
<strong>`文字列から実数に変換する$</strong>
~algoは、
所与の
( 文字列 %入力 )
に対し：
◎
The algorithm to convert a string to a number, given a string input, is as follows:＼
</p>
<ol>
	<li>
%年月t ~LET `年月t文字列を構文解析する$( %入力 )
◎
If parsing a month from input＼
</li>
	<li>
~IF［
%年月t ~EQ `失敗^i
］
⇒
~RET `~error^i
◎
results in an error, then return an error;＼
</li>
	<li>
~RET ［
1970 年 1 月 から %年月t まで
］の月t~数
◎
otherwise, return the number of months between January 1970 and the parsed month.
</li>
</ol>
</div>

<p class="algo">
<strong>`実数から文字列に変換する$</strong>
~algoは、
所与の
( 実数 %入力 )
に対し
⇒
~RET 次を表現する`妥当な年月t文字列$
⇒
1970 年 1 月から %入力 月t~数だけ経過した`年月t$
◎
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid month string that represents the month that has input months between it and January 1970.
</p>

<div class="algo">
<p>
<strong>`文字列から~Date~objに変換する$</strong>
~algoは、
所与の
( 文字列 %入力 )
に対し：
◎
The algorithm to convert a string to a Date object, given a string input, is as follows:＼
</p>
<ol>
	<li>
%年月t ~LET `年月t文字列を構文解析する$( %入力 )
◎
If parsing a month from input＼
</li>
	<li>
~IF［
%年月t ~EQ `失敗^i
］
⇒
~RET `~error^i
◎
results in an error, then return an error;＼
</li>
	<li>
~RET `新たな~Date~obj$( %年月t における最初の日tの~UTC午前 0 時 )
◎
otherwise, return a new Date object representing midnight UTC on the morning of the first day of the parsed month.
</li>
</ol>
</div>

<p class="algo">
<strong>`~Date~objから文字列に変換する$</strong>
~algoは、
所与の
( `Date$I ~obj %入力 )
に対し
⇒
~RET 次を表現する`妥当な年月t文字列$
⇒
%入力 が表現する~UTC時間帯による`年月t$現在
◎
The algorithm to convert a Date object to a string, given a Date object input, is as follows: Return a valid month string that represents the month current at the time represented by input in the UTC time zone.
</p>

<div class="bookkeeping">
`Month^bk

<p>
`value$m ~IDL属性は、
`値~mode$iになる。
</p>

◎
The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, readonly, required, and step content attributes; list, value, valueAsDate, and valueAsNumber IDL attributes; select(), stepDown(), and stepUp() methods.
◎
The value IDL attribute is in mode value.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, checked, colorspace, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, popovertarget, popovertargetaction, size, src, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, and selectionDirection IDL attributes; setRangeText(), and setSelectionRange() methods.
</div>

					</section>
					<section id="week-state-(type=week)">
<h6 title="Week state (type=week)">4.10.5.1.9. `Week^st 状態（ `type=week^c ）</h6>

<p>
`Week$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Week state, the rules in this section apply.
</p>

<p>
要素は、
その`値$feを［
特定の`年週t$を表現する文字列
］に設定するための~controlを`表現-$する。
◎
The input element represents a control for setting the element's value to a string representing a specific week.
</p>

<p>
要素が`変異-可能$feな場合、
~UAは：
◎
If the element is mutable,＼
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
`値$feが表現する`年週t$
— 値に`年週t文字列を構文解析する$を適用して得されるそれ —
を変更する
◎
the user agent should allow the user to change the week represented by its value, as obtained by parsing a week from it.＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
`値$feを［
空~文字列, `妥当な年週t文字列$
］以外に設定する
◎
User agents must not allow the user to set the value to a non-empty string that is not a valid week string.＼
</li>
	<li>
`年週t$を選択するための~UIを供する場合は、
`値$feを［
利用者の選択を表現している`妥当な年週t文字列$
］に設定するモノトスル。
◎
If the user agent provides a user interface for selecting a week, then the value must be set to a valid week string representing the user's selection.＼
</li>
	<li>
次を利用者に許容するベキである
⇒
利用者が`値$feを空~文字列に設定する
◎
User agents should allow the user to set the value to the empty string.
</li>
</ul>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`不良~入力の難あり$になる
⇒
~UI内の入力を`妥当な年週t文字列$に変換できない
◎
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid week string, the control is suffering from bad input.
</p>

<p class="note">注記：
<a href="#_date-note1">`Date^st 状態の注記</a>も見よ。
◎
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.
</p>

<p>
`value$a 属性に指定する値は、［
空~文字列／`妥当な年週t文字列$
］でなければナラナイ。
◎
The value attribute, if specified and not empty, must have a value that is a valid week string.
</p>

<div class="algo">
<strong>`値の無毒化~algo$</strong>
⇒
~IF［
要素の`値$feは`妥当な年週t文字列$でない
］
⇒
要素の`値$fe ~SET 空~文字列
◎
The value sanitization algorithm is as follows: If the value of the element is not a valid week string, then set it to the empty string instead.
</div>

<p>
［
`min$a ／ `max$a
］属性に指定する値は、
`妥当な年週t文字列$でなければナラナイ。
◎
The min attribute, if specified, must have a value that is a valid week string. The max attribute, if specified, must have a value that is a valid week string.
</p>

<p>
`step$a 属性は週t数で表出される。
`~step倍率$は 
604800000 = ( 7 ~MUL 24 ~MUL 60 ~MUL 60 ~MUL 1000 )
とする
（これは、
他の~algoにて 週t数を~milli秒t数に変換するときに利用される）。
`既定の~step$は 1 週tとする。
`既定の~step基底$は
−259200000 = ( −1 ~MUL 72 ~MUL 60 ~MUL 60 ~MUL 1000 )
（ 1970 週年tの第 1 週tの開始 = 1970 年の初頭から 72 ~~時間~前）
とする。
◎
The step attribute is expressed in weeks. The step scale factor is 604,800,000 (which converts the weeks to milliseconds, as used in the other algorithms). The default step is 1 week. The default step base is −259,200,000 (the start of week 1970-W01).
</p>

<p>
要素が`~step不一致の難あり$のときは、
~UAは
⇒
そうならなくなるよう，要素の`値$feを最も近い`年週t$に丸めてもヨイ。
◎
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest week for which the element would not suffer from a step mismatch.
</p>

<div class="algo">
<p>
<strong>`文字列から実数に変換する$</strong>
~algoは、
所与の
( 文字列 %入力 )
に対し：
◎
The algorithm to convert a string to a number, given a string input, is as follows:＼
</p>
<ol>
	<li>
%年週t ~LET `年週t文字列を構文解析する$( %入力 )
◎
If parsing a week string from input＼
</li>
	<li>
~IF［
%年週t ~EQ `失敗^i
］
⇒
~RET `~error^i
◎
results in an error, then return an error;＼
</li>
	<li>
~RET ［
1970-01-01 ~UTC午前 0 時
（値 `1970-01-01T00:00:00.0Z^l が表現する時刻）
から %年週t における月曜の~UTC午前 0 時まで
］に経過した~milli秒数
— 閏~秒tは無視して
◎
otherwise, return the number of milliseconds elapsed from midnight UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z") to midnight UTC on the morning of the Monday of the parsed week, ignoring leap seconds.
</li>
</ol>
</div>

<p class="algo">
<strong>`実数から文字列に変換する$</strong>
~algoは、
所与の
( 実数 %入力 )
に対し
⇒
~RET 次を表現する`妥当な年週t文字列$
⇒
1970-01-01 ~UTC午前 0 時
（値 `1970-01-01T00:00:00.0Z^l が表現する時刻）
から %入力 ~milli秒t後~現在の~UTC`年週t$
◎
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid week string that represents the week that, in UTC, is current input milliseconds after midnight UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z").
</p>

<div class="algo">
<p>
<strong>`文字列から~Date~objに変換する$</strong>
~algoは、
所与の
( 文字列 %入力 )
に対し：
◎
The algorithm to convert a string to a Date object, given a string input, is as follows:＼
</p>
<ol>
	<li>
%年週t ~LET `年週t文字列を構文解析する$( %入力 )
◎
If parsing a week from input＼
</li>
	<li>
~IF［
%年週t ~EQ `失敗^i
］
⇒
~RET `~error^i
◎
results in an error, then return an error;＼
</li>
	<li>
~RET `新たな~Date~obj$( %年週t における月曜の~UTC午前 0 時 )
◎
otherwise, return a new Date object representing midnight UTC on the morning of the Monday of the parsed week.
</li>
</ol>
</div>

<p class="algo">
<strong>`~Date~objから文字列に変換する$</strong>
~algoは、
所与の
( `Date$I ~obj %入力 )
に対し
⇒
~RET 次を表現する`妥当な年週t文字列$
⇒
［
~UTC時間帯における%入力 現在
］の時刻が表現する`年週t$
◎
The algorithm to convert a Date object to a string, given a Date object input, is as follows: Return a valid week string that represents the week current at the time represented by input in the UTC time zone.
</p>

<div class="bookkeeping">
`Week^bk

<p>
`value$m ~IDL属性は、
`値~mode$iになる。
</p>

◎
The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, readonly, required, and step content attributes; list, value, valueAsDate, and valueAsNumber IDL attributes; select(), stepDown(), and stepUp() methods.
◎
The value IDL attribute is in mode value.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, checked, colorspace, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, popovertarget, popovertargetaction, size, src, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, and selectionDirection IDL attributes; setRangeText(), and setSelectionRange() methods.
</div>

					</section>
					<section id="time-state-(type=time)">
<h6 title="Time state (type=time)">4.10.5.1.10. `Time^st 状態（ `type=time^c ）</h6>

<p>
`Time$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Time state, the rules in this section apply.
</p>

<p>
要素は、
その`値$feを［
特定の`時刻$を表現する文字列
］に設定するための~controlを`表現-$する。
◎
The input element represents a control for setting the element's value to a string representing a specific time.
</p>

<p>
要素が`変異-可能$feな場合、
~UAは：
◎
If the element is mutable,＼
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
`値$feが表現する`時刻$
— 値に`時刻~文字列を構文解析する$を適用して得されるそれ —
を変更する
◎
the user agent should allow the user to change the time represented by its value, as obtained by parsing a time from it.＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
`値$feを［
空~文字列, `妥当な時刻~文字列$
］以外に設定する
◎
User agents must not allow the user to set the value to a non-empty string that is not a valid time string.＼
</li>
	<li>
`時刻$を選択するための~UIを供する場合は、
`値$feを［
利用者の選択を表現している`妥当な時刻~文字列$
］に設定するモノトスル。
◎
If the user agent provides a user interface for selecting a time, then the value must be set to a valid time string representing the user's selection.＼
</li>
	<li>
次を利用者に許容するベキである
⇒
`値$feを空~文字列に設定する
◎
User agents should allow the user to set the value to the empty string.
</li>
</ul>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`不良~入力の難あり$になる
⇒
~UI内の入力を`妥当な時刻~文字列$に変換できない
◎
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid time string, the control is suffering from bad input.
</p>

<p class="note">注記：
<a href="#_date-note1">`Date^st 状態の注記</a>も見よ。
◎
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.
</p>

<p>
`value$a 属性に指定する値は、［
空~文字列／`妥当な時刻~文字列$
］でなければナラナイ。
◎
The value attribute, if specified and not empty, must have a value that is a valid time string.
</p>

<div class="algo">
<strong>`値の無毒化~algo$</strong>
⇒
~IF［
要素の`値$feは`妥当な時刻~文字列$でない
］
⇒
要素の`値$fe ~SET 空~文字列
◎
The value sanitization algorithm is as follows: If the value of the element is not a valid time string, then set it to the empty string instead.
</div>

<p>
~controlは`周期的範囲$になる。
◎
The form control has a periodic domain.
</p>

<p>
［
`min$a ／ `max$a
］属性に指定する値は、
`妥当な時刻~文字列$でなければナラナイ。
◎
The min attribute, if specified, must have a value that is a valid time string. The max attribute, if specified, must have a value that is a valid time string.
</p>

<p>
`step$a 属性は秒t数で表出される。
`~step倍率$は 1000 とする
（これは、
他の~algoにて 秒t数を~milli秒t数に変換するときに利用される）。
`既定の~step$は 60 秒tとする。
◎
The step attribute is expressed in seconds. The step scale factor is 1000 (which converts the seconds to milliseconds, as used in the other algorithms). The default step is 60 seconds.
</p>

<p>
要素が`~step不一致の難あり$のときは、
~UAは
⇒
そうならなくなるよう，要素の`値$feを最も近い`時刻$に丸めてもヨイ。
◎
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest time for which the element would not suffer from a step mismatch.
</p>

<div class="algo">
<p>
<strong>`文字列から実数に変換する$</strong>
~algoは、
所与の
( 文字列 %入力 )
に対し：
◎
The algorithm to convert a string to a number, given a string input, is as follows:＼
</p>
<ol>
	<li>
%時刻 ~LET `時刻~文字列を構文解析する$( %入力 )
◎
If parsing a time from input＼
</li>
	<li>
~IF［
%時刻 ~EQ `失敗^i
］
⇒
~RET `~error^i
◎
results in an error, then return an error;＼
</li>
	<li>
~RET 同じ日tの中で［
午前 0 時から %時刻 現在まで
］に経過した~milli秒t数
◎
otherwise, return the number of milliseconds elapsed from midnight to the parsed time on a day with no time changes.
</li>
</ol>
</div>

<p class="algo">
<strong>`実数から文字列に変換する$</strong>
~algoは、
所与の
( 実数 %入力 )
に対し
⇒
~RET 次を表現する`妥当な時刻~文字列$
⇒
同じ日tの中で，午前 0 時から %入力 ~milli秒t経過した`時刻$
◎
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid time string that represents the time that is input milliseconds after midnight on a day with no time changes.
</p>

<div class="algo">
<p>
<strong>`文字列から~Date~objに変換する$</strong>
~algoは、
所与の
( 文字列 %入力 )
に対し：
◎
The algorithm to convert a string to a Date object, given a string input, is as follows:＼
</p>
<ol>
	<li>
%時刻 ~LET `時刻~文字列を構文解析する$( %入力 )
◎
If parsing a time from input＼
</li>
	<li>
~IF［
%時刻 ~EQ `失敗^i
］
⇒
~RET `~error^i
◎
results in an error, then return an error;＼
</li>
	<li>
~RET `新たな~Date~obj$( ~UTC 1970-01-01 における %時刻 現在 )
◎
otherwise, return a new Date object representing the parsed time in UTC on 1970-01-01.
</li>
</ol>
</div>

<p class="algo">
<strong>`~Date~objから文字列に変換する$</strong>
~algoは、
所与の
( `Date$I ~obj %入力 )
に対し
⇒
~RET 次を表現する`妥当な時刻~文字列$
⇒
%入力 が表現する~UTC`時刻$ 成分
◎
The algorithm to convert a Date object to a string, given a Date object input, is as follows: Return a valid time string that represents the UTC time component that is represented by input.
</p>

<div class="bookkeeping">
`Time^bk

<p>
`value$m ~IDL属性は、
`値~mode$iになる。
</p>

◎
The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, readonly, required, and step content attributes; list, value, valueAsDate, and valueAsNumber IDL attributes; select(), stepDown(), and stepUp() methods.
◎
The value IDL attribute is in mode value.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, checked, colorspace, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, popovertarget, popovertargetaction, size, src, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, and selectionDirection IDL attributes; setRangeText(), and setSelectionRange() methods.
</div>

					</section>
					<section id="local-date-and-time-state-(type=datetime-local)">
<h6 title="Local Date and Time state (type=datetime-local)">4.10.5.1.11. `Datetime-local^st 状態（ `type=datetime-local^c ）</h6>

<p>
`Datetime-local$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Local Date and Time state, the rules in this section apply.
</p>

<p>
要素は、
その`値$feを［
偏差~情報を伴わない`局所的~日時t$を表現する文字列
］に設定するための~controlを`表現-$する。
◎
The input element represents a control for setting the element's value to a string representing a local date and time, with no time-zone offset information.
</p>

<p>
要素が`変異-可能$feな場合、
~UAは：
◎
If the element is mutable,＼
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
`値$feが表現する`局所的~日時t$
— 値に`局所的~日時t文字列を構文解析する$を適用して得されるそれ —
を変更する
◎
the user agent should allow the user to change the date and time represented by its value, as obtained by parsing a date and time from it.＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
`値$feを［
空~文字列, `妥当な正規化-済み局所的~日時t文字列$
］以外に設定する
◎
User agents must not allow the user to set the value to a non-empty string that is not a valid normalized local date and time string.＼
</li>
	<li>
`局所的~日時t$を選択するための~UIを供する場合は、
`値$feを［
利用者の選択を表現している`妥当な正規化-済み局所的~日時t文字列$
］に設定するモノトスル。
◎
If the user agent provides a user interface for selecting a local date and time, then the value must be set to a valid normalized local date and time string representing the user's selection.＼
</li>
	<li>
次を利用者に許容するベキである
⇒
`値$feを空~文字列に設定する
◎
User agents should allow the user to set the value to the empty string.
</li>
</ul>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`不良~入力の難あり$になる
⇒
~UI内の入力を`妥当な正規化-済み局所的~日時t文字列$に変換できない
◎
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid normalized local date and time string, the control is suffering from bad input.
</p>

<p class="note">注記：
この状態にも
<a href="#_date-note1">`Date^st 状態の注記</a>
が該当する。
◎
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.
</p>

<p>
`value$a 属性に指定する値は、［
空~文字列／`妥当な局所的~日時t文字列$
］でなければナラナイ。
◎
The value attribute, if specified and not empty, must have a value that is a valid local date and time string.
</p>

<div class="algo">
<p>
<strong>`値の無毒化~algo$</strong>：
</p>
<ol>
	<li>
~IF［
要素の`値$feは`妥当な局所的~日時t文字列$である
］
⇒
要素の`値$fe ~SET 同じ日時tを表現する`妥当な正規化-済み局所的~日時t文字列$
</li>
	<li>
~ELSE
⇒
要素の`値$fe ~SET 空~文字列
</li>
</ol>
◎
The value sanitization algorithm is as follows: If the value of the element is a valid local date and time string, then set it to a valid normalized local date and time string representing the same date and time; otherwise, set it to the empty string instead.
</div>

<p>
［
`min$a ／ `max$a
］属性に指定する値は、
`妥当な局所的~日時t文字列$でなければナラナイ。
◎
The min attribute, if specified, must have a value that is a valid local date and time string. The max attribute, if specified, must have a value that is a valid local date and time string.
</p>

<p>
`step$a 属性は秒t数で表出される。
`~step倍率$は 1000 とする
（これは、
他の~algoにて 秒t数を~milli秒t数に変換するときに利用される）。
`既定の~step$ は 60 秒tとする。
◎
The step attribute is expressed in seconds. The step scale factor is 1000 (which converts the seconds to milliseconds, as used in the other algorithms). The default step is 60 seconds.
</p>

<p>
要素が`~step不一致の難あり$のときは、
~UAは
⇒
そうならなくなるよう，要素の`値$feを最も近い`局所的~日時t$に丸めてもヨイ。
◎
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest local date and time for which the element would not suffer from a step mismatch.
</p>

<div class="algo">
<p>
<strong>`文字列から実数に変換する$</strong>
~algoは、
所与の
( 文字列 %入力 )
に対し：
◎
The algorithm to convert a string to a number, given a string input, is as follows:＼
</p>
<ol>
	<li>
%局所的~日時t ~LET `局所的~日時t文字列を構文解析する$( %入力 )
◎
If parsing a date and time from input＼
</li>
	<li>
~IF［
%局所的~日時t ~EQ `失敗^i
］
⇒
~RET `~error^i
◎
results in an error, then return an error;＼
</li>
	<li>
~RET ［
1970-01-01 午前 0 時
（値 `1970-01-01T00:00:00.0^l が表現する時刻）
から %局所的~日時t まで
］に経過した~milli秒t数
— 閏~秒tは無視して
◎
otherwise, return the number of milliseconds elapsed from midnight on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0") to the parsed local date and time, ignoring leap seconds.
</li>
</ol>
</div>

<p class="algo">
<strong>`実数から文字列に変換する$</strong>
~algoは、
所与の
( 実数 %入力 )
に対し
⇒
~RET 次を表現する，`妥当な正規化-済み局所的~日時t文字列$
⇒
［
1970-01-01 午前 0 時
（値 `1970-01-01T00:00:00.0^l が表現する時刻）
］から %入力 ~milli秒 後の日時t
◎
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid normalized local date and time string that represents the date and time that is input milliseconds after midnight on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0").
</p>

<p class="note">注記：
§ `Date$st 状態の`歴史的な日付に関する注記＠#only-contemporary-times$を見よ。
◎
See the note on historical dates in the Date state section.
</p>

<div class="bookkeeping">
`Datetime-local^bk

<p>
`value$m ~IDL属性は、
`値~mode$iになる。
</p>

◎
The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, readonly, required, and step content attributes; list, value, and valueAsNumber IDL attributes; select(), stepDown(), and stepUp() methods.
◎
The value IDL attribute is in mode value.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, checked, colorspace, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, popovertarget, popovertargetaction, size, src, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, and valueAsDate IDL attributes; setRangeText(), and setSelectionRange() methods.
</div>

<div class="example">
<p>
次の例に、
航空便予約~appの一部を示す。
この~appは、
`Datetime-local$st `状態$にある要素を利用して，所与の日時tを 選択された空港の時間帯において解釈する。
◎
The following example shows part of a flight booking application. The application uses an input element with its type attribute set to datetime-local, and it then interprets the given date and time in the time zone of the selected airport.
</p>

`Datetime-local-1^xCode
</div>

					</section>
					<section id="number-state-(type=number)">
<h6 title="Number state (type=number)">4.10.5.1.12. `Number^st 状態 (`type=number^c ）</h6>

<a id="number-state"></a>

<p>
`Number$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Number state, the rules in this section apply.
</p>

<p>
要素は、
その`値$feを［
実数を表現する文字列
］に設定するための~controlを`表現-$する。
◎
The input element represents a control for setting the element's value to a string representing a number.
</p>

<p>
要素が`変異-可能$feな場合、
~UAは：
◎
If the element is mutable,＼
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
`値$feが表現する実数
— `浮動小数点数として構文解析する$( 当の値 ) から得されるそれ —
を変更する
◎
the user agent should allow the user to change the number represented by its value, as obtained from applying the rules for parsing floating-point number values to it.＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
`値$feを［
空~文字列, `妥当な浮動小数点数$
］以外に設定する
◎
User agents must not allow the user to set the value to a non-empty string that is not a valid floating-point number.＼
</li>
	<li>
数を選択するための~UIを供する場合は、
`値$feを［
利用者の選択に対する`浮動小数点数として最良な表現$
］に設定するモノトスル。
◎
If the user agent provides a user interface for selecting a number, then the value must be set to the best representation of the number representing the user's selection as a floating-point number.＼
</li>
	<li>
次を利用者に許容するベキである
⇒
`値$feを空~文字列に設定する
◎
User agents should allow the user to set the value to the empty string.
</li>
</ul>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`不良~入力の難あり$になる
⇒
~UI内の入力を`妥当な浮動小数点数$に変換できない
◎
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid floating-point number, the control is suffering from bad input.
</p>

<p class="note">注記：
この仕様は、
~UAが利用する~UIは定義しない。
~UA~vendorには、
利用者の必要性に応えるには何が最良になるか，考慮することが奨励される。
例えば、
~Persian／~Arabic 市場~向けの~UAは，
~Persian／~Arabic
による数量-入力を~supportすることもあろう。
【！Similarly, a user agent designed for Romans might display the value in Roman numerals rather than in decimal; or (more realistically) 】
あるいは~French市場向けに設計された~UAは、
3 桁ごとにピリオドで分離して，小数点に~commaを用いて
【！with apostrophes between thousands and commas before the decimals】
値を表示し，利用者がその方式で手入力することを許容し得る。
（いずれにせよ，内部的には、
上述した提出に要求される形式に変換しつつ。）
◎
This specification does not define what user interface user agents are to use; user agent vendors are encouraged to consider what would best serve their users' needs. For example, a user agent in Persian or Arabic markets might support Persian and Arabic numeric input (converting it to the format required for submission as described above). Similarly, a user agent designed for Romans might display the value in Roman numerals rather than in decimal; or (more realistically) a user agent designed for the French market might display the value with apostrophes between thousands and commas before the decimals, and allow the user to enter a value in that manner, internally converting it to the submission format described above.
</p>

<p>
`value$a 属性に指定する値は、［
空~文字列／`妥当な浮動小数点数$
］でなければナラナイ。
◎
The value attribute, if specified and not empty, must have a value that is a valid floating-point number.
</p>

<div class="algo">
<strong>`値の無毒化~algo$</strong>
⇒
~IF［
要素の`値$feは`妥当な浮動小数点数$でない
］
⇒
要素の`値$fe ~SET 空~文字列
◎
The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to the empty string instead.
</div>

<p>
［
`min$a ／ `max$a
］属性に指定する値は、
`妥当な浮動小数点数$でなければナラナイ。
◎
The min attribute, if specified, must have a value that is a valid floating-point number. The max attribute, if specified, must have a value that is a valid floating-point number.
</p>

<p>
`~step倍率$は 1 とする。
`既定の~step$は 1 とする
（ `~step基底$が整数ならば、
整数~値~以外を選択することは，利用者に許容されなくなる）。
◎
The step scale factor is 1. The default step is 1 (allowing only integers to be selected by the user, unless the step base has a non-integer value).
</p>

<p>
要素が`~step不一致の難あり$のときは、
~UAは
⇒
そうならなくなるよう，要素の`値$feを最も近い数に丸めてもヨイ。
そのような数が 2 個あるときには、
~UAには，正な無限大に近い方を選ぶことが奨励される。
◎
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest number for which the element would not suffer from a step mismatch. If there are two such numbers, user agents are encouraged to pick the one nearest positive infinity.
</p>

<p class="algo">
<strong>`文字列から実数に変換する$</strong>
~algoは、
所与の
( 文字列 %入力 )
に対し
⇒
~RET `浮動小数点数として構文解析する$( %入力 ) の結果に応じて
⇒＃
`失敗^i ならば `~error^i ／
~ELSE_ その結果
◎
The algorithm to convert a string to a number, given a string input, is as follows: If applying the rules for parsing floating-point number values to input results in an error, then return an error; otherwise, return the resulting number.
</p>

<p class="algo">
<strong>`実数から文字列に変換する$</strong>
~algoは、
所与の
( 実数 %入力 )
に対し
⇒
~RET %入力 を表現する`妥当な浮動小数点数$
◎
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid floating-point number that represents input.
</p>

<div class="bookkeeping">
`Number^bk

<p>
`value$m ~IDL属性は、
`値~mode$iになる。
</p>

◎
The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, placeholder, readonly, required, and step content attributes; list, value, and valueAsNumber IDL attributes; select(), stepDown(), and stepUp() methods.
◎
The value IDL attribute is in mode value.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, checked, colorspace, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, popovertarget, popovertargetaction, size, src, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, and valueAsDate IDL attributes; setRangeText(), and setSelectionRange() methods.
</div>

<div class="example">
<p>
数量-入力~controlの用例：
◎
Here is an example of using a numeric input control:
</p>

`Number-1^xCode

<p>
上述したように、
~UAは，利用者の地域的~形式による数量-入力も~supportし得る
— 上述した，提出に要求される形式に変換しつつ。
これには次の取扱いも含まれ得る：
~group化~分離子（ "872,000,000,000" など）／
各種 10 進~分離子（ "3,99" vs "3.99" など） ／
地域的な数字の利用（ ~Arabic, ~Devanagari, ~Persian, ~Thai など）。
◎
As described above, a user agent might support numeric input in the user's local format, converting it to the format required for submission as described above. This might include handling grouping separators (as in "872,000,000,000") and various decimal separators (such as "3,99" vs "3.99") or using local digits (such as those in Arabic, Devanagari, Persian, and Thai).
</p>
</div>

<p id="when-number-is-not-appropriate" class="note">注記：
`Number$st `状態$は，~~数字のみからなるが、
厳密には数とは言えない入力~用には，適切でない。
例えば、
~credit-card番号や US 郵便番号には不適切になる。
この`状態$を利用するかどうか決定する単純な仕方は、
その入力~controlが
例えば “増減~button” ~UIを備えることがイミを成すかどうか，考えることである。
~credit-card番号における誤りは、
最後の 1 桁であろうが，全桁が不正なときと同じく小さな間違いではない。
なので、
増減~buttonで~credit-card番号を選択することは，利用者にとってイミを成さない。
増減~button~UIが適切になるならば、
この`状態$は，おそらく的確な~~選択になる
（場合によっては `inputmode$a か `pattern$a 属性も伴わせて）。
◎
The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=number is to consider whether it would make sense for the input control to have a spinbox interface (e.g. with "up" and "down" arrows). Getting a credit card number wrong by 1 in the last digit isn't a minor mistake, it's as wrong as getting every digit incorrect. So it would not make sense for the user to select a credit card number using "up" and "down" buttons. When a spinbox interface is not appropriate, type=text is probably the right choice (possibly with an inputmode or pattern attribute).
</p>

					</section>
					<section id="range-state-(type=range)">
<h6 title="Range state (type=range)">4.10.5.1.13. `Range^st 状態（ `type=range^c ）</h6>

<p>
`Range$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Range state, the rules in this section apply.
</p>

<p>
要素は、［
その`値$feを，実数を表現する文字列に設定する
］ための~controlを`表現-$する
— ただし、
その正確な値は重要でなく，~UAは `Number$st 状態のときより単純な~UIを供するものとされる。
◎
The input element represents a control for setting the element's value to a string representing a number, but with the caveat that the exact value is not important, letting UAs provide a simpler interface than they do for the Number state.
</p>

<p>
要素が`変異-可能$feな場合、
~UAは：
◎
If the element is mutable,＼
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
`値$feが表現する実数
— `浮動小数点数として構文解析する$( 当の値 ) から得されるそれ —
を変更する
◎
the user agent should allow the user to change the number represented by its value, as obtained from applying the rules for parsing floating-point number values to it.＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
`値$feを［
`妥当な浮動小数点数$でない文字列
］に設定する
◎
User agents must not allow the user to set the value to a string that is not a valid floating-point number.＼
</li>
	<li>
実数を選択するための~UIを供する場合は、
`値$feを`浮動小数点数として最良な表現$に設定するモノトスル。
◎
If the user agent provides a user interface for selecting a number, then the value must be set to a best representation of the number representing the user's selection as a floating-point number.＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
`値$feを空~文字列に設定する
◎
User agents must not allow the user to set the value to the empty string.
</li>
</ul>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`不良~入力の難あり$になる
⇒
~UI内の入力を`妥当な浮動小数点数$に変換できない
◎
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid floating-point number, the control is suffering from bad input.
</p>

<p>
`value$a 属性に指定する値は、
`妥当な浮動小数点数$でなければナラナイ。
◎
The value attribute, if specified, must have a value that is a valid floating-point number.
</p>

<div class="algo">
<strong>`値の無毒化~algo$</strong>
⇒
~IF［
要素の`値$feは`妥当な浮動小数点数$でない
］
⇒
要素の`値$fe ~SET `既定~値$に対する`浮動小数点数として最良な表現$
◎
The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to the best representation, as a floating-point number, of the default value.
</div>

<p>
`既定~値@
は、［
`最大$ ~LT `最小$ならば`最小$ ／
~ELSE_ `最小$と`最大$の平均
］とする。
◎
The default value is the minimum plus half the difference between the minimum and the maximum, unless the maximum is less than the minimum, in which case the default value is the minimum.
</p>

<p class="trans-note">【
`既定の最小$が定義されているので（下記）、
`最小$が −∞ になることはない。
`最大$についても同様。
】</p>

<p>
~UAは、
要素の`値$feが：
◎
↓</p>
<ul>
	<li>
`~underflowの難あり$のときは
⇒
`値$feを［
`最小$に対する`浮動小数点数として最良な表現$
］に設定するモノトスル。
◎
When the element is suffering from an underflow, the user agent must set the element's value to the best representation, as a floating-point number, of the minimum.
</li>
	<li>
`~overflowの難あり$のときは
⇒
［
`最大$ ~GTE `最小$
］ならば，`値$feを［
`最大$を表現する`妥当な浮動小数点数$
］に設定するモノトスル。
◎
When the element is suffering from an overflow, if the maximum is not less than the minimum, the user agent must set the element's value to a valid floating-point number that represents the maximum.
</li>
	<li>
`~step不一致の難あり$のときは
⇒
`値$feを［
そうならなくなるような実数 %V
］のうち［
%V ~GTE `最小$
］~AND［［
`最大$ ~LT `最小$
］~OR［
%V ~LTE `最大$
］］を満たすものがあるならば、
それらのうち［
`値$feに最も近い実数であって，そのような実数が 2 つあるときは正な無限大に近い方
］に丸めるモノトスル。
◎
When the element is suffering from a step mismatch, the user agent must round the element's value to the nearest number for which the element would not suffer from a step mismatch, and which is greater than or equal to the minimum, and, if the maximum is not less than the minimum, which is less than or equal to the maximum, if there is a number that matches these constraints. If two numbers match these constraints, then user agents must use the one nearest to positive infinity.
</li>
</ul>

<p class="example">
例えば、
~markup
`&lt;input&nbsp;type="range"&nbsp;min=0&nbsp;max=100&nbsp;step=20&nbsp;value=50&gt;^c
による範囲~controlに対する結果の初期~値は 60 になる。
◎
For example, the markup &lt;input type="range" min=0 max=100 step=20 value=50&gt; results in a range control whose initial value is 60.
</p>

<div class="example">
<p>
`list$a 属性による自動補完~listを利用する範囲~controlの例。
これは、
~controlの範囲~内に とりわけ重要な値がある場合に，有用になり得る
— ~~調製済みな光量~levelや，速度~controlとして利用されるときの代表的な速度~制限sなど。
次の~markup片に対し：
◎
Here is an example of a range control using an autocomplete list with the list attribute. This could be useful if there are values along the full range of the control that are especially important, such as preconfigured light levels or typical speed limits in a range control used as a speed control. The following markup fragment:
</p>

`Range-1^xCode

<p>
次の~stylesheetが適用されるとする：
◎
...with the following style sheet applied:
</p>

<pre class="lang-css">
input {
  writing-mode: vertical-lr;
  height: 75px;
  width: 49px;
  background: #D5CCBB;
  color: black;
}
</pre>

<p>
描画は次に似たものになるであろう：
◎
...might render as:
</p>

<figure>
<figcaption id="_dgm-sample-range">
縦方向~slider~control。
その首な色は黒, 背景はベージュにされている。
~sliderの両端には 長めに~~描かれる目盛りがあり，中心周りには 3 個の短めの目盛りがある。
◎
A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint.
</figcaption></figure>

<p>
~UAは、
~stylesheetで指定された `height^p, `width^p ~propの比から~controlの方位を決定することに注意。
色も類似に~stylesheetから導出される。
しかしながら，目盛りは、
~markupから導出される。
特に、
`step$a 属性は 目盛りの配置に影響していない
— ~UAは、
作者が各 `option^e に指定した値のみを利用して それを裁定して，それから
両端に長めの目盛りを追加する。
◎
Note how the UA determined the orientation of the control from the ratio of the style-sheet-specified height and width properties. The colors were similarly derived from the style sheet. The tick marks, however, were derived from the markup. In particular, the step attribute has not affected the placement of tick marks, the UA deciding to only use the author-specified completion values and then adding longer tick marks at the extremes.
</p>

<p>
妥当でない値 `++50^c は無視されることにも注意。
◎
Note also how the invalid value ++50 was ignored.
</p>
</div>

<div class="example">
<p>
別の例として、
次の~markup片を考える：
◎
For another example, consider the following markup fragment:
</p>

`Range-2^xCode

<p>
~UAは、
種々の仕方で表示できる。
一例として：
◎
A user agent could display in a variety of ways, for instance:
</p>

<figure>
<figcaption id="_dgm-sample-range-2a">
~dialとして
◎
As a dial.
</figcaption></figure>

<p>
あるいは：
◎
Or, alternatively, for instance:
</p>

<figure>
<figcaption id="_dgm-sample-range-2b">
目盛りを伴う長い横方向~sliderとして。
◎
As a long horizontal slider with tick marks.
</figcaption></figure>

<p>
~UAは、
~stylesheetに与えられた寸法に基づいて どれを表示するか選べる。
これは、［
横幅の相違にかかわらず，目盛りに対し同じ解像度を保守する
］ことを許容する。
◎
The user agent could pick which one to display based on the dimensions given in the style sheet. This would allow it to maintain the same resolution for the tick marks, despite the differences in width.
</p>
</div>

<div class="example">
<p>
最後に、
~label付きの値を 2 つ伴う範囲~controlの例：
◎
Finally, here is an example of a range control with two labeled values:
</p>

`Range-3^xCode

<p>
~controlを縦方向に描く~styleであれば、
次に似た見かけになるであろう：
◎
With styles that make the control draw vertically, it might look as follows:
</p>

<figure>
<figcaption id="_dgm-sample-range-labels">
縦方向~slider~control。
2 個の目盛り
— 上端近くの 'High', 下端近くの 'Low' —
がある
◎
A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'.
</figcaption></figure>
</div>

<p class="note">注記：
この状態においては、
利用者の入力中でも，範囲と~stepの拘束が施行されるので、
値を空~文字列に設定する仕方はない。
◎
In this state, the range and step constraints are enforced even during user input, and there is no way to set the value to the empty string.
</p>

<p>
`min$a 属性に指定する値は、
`妥当な浮動小数点数$でなければナラナイ。
`既定の最小$は 0 とする。
`max$a 属性に指定する値は、
`妥当な浮動小数点数$でなければナラナイ。
`既定の最大$は 100 とする。
◎
The min attribute, if specified, must have a value that is a valid floating-point number. The default minimum is 0. The max attribute, if specified, must have a value that is a valid floating-point number. The default maximum is 100.
</p>

<p>
`~step倍率$は 1 とする。
`既定の~step$は 1 とする
（ `min$a 属性が整数でない値にされない限り，許容される値は整数に限られるようになる）。
◎
The step scale factor is 1. The default step is 1 (allowing only integers, unless the min attribute has a non-integer value).
</p>

<p class="algo">
<strong>`文字列から実数に変換する$</strong>
~algoは、
所与の
( 文字列 %入力 )
に対し
⇒
~RET `浮動小数点数として構文解析する$( %入力 ) の結果に応じて
⇒＃
`失敗^i ならば `~error^i ／
~ELSE_ その結果
◎
The algorithm to convert a string to a number, given a string input, is as follows: If applying the rules for parsing floating-point number values to input results in an error, then return an error; otherwise, return the resulting number.
</p>

<p class="algo">
<strong>`実数から文字列に変換する$</strong>
~algoは、
所与の
( 実数 %入力 )
に対し
⇒
~RET %入力 に対する`浮動小数点数として最良な表現$
◎
The algorithm to convert a number to a string, given a number input, is as follows: Return the best representation, as a floating-point number, of input.
</p>

<div class="bookkeeping">
`Range^bk

<p>
`value$m ~IDL属性は、
`値~mode$iになる。
</p>

◎
The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, and step content attributes; list, value, and valueAsNumber IDL attributes; stepDown() and stepUp() methods.
◎
The value IDL attribute is in mode value.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, checked, colorspace, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, popovertarget, popovertargetaction, readonly, required, size, src, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, and valueAsDate IDL attributes; select(), setRangeText(), and setSelectionRange() methods.
</div>

					</section>
					<section id="color-state-(type=color)">
<h6 title="Color state (type=color)">4.10.5.1.14. `Color^st 状態（ `type=color^c ）</h6>

<p>
`Color$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Color state, the rules in this section apply.
</p>

<p>
要素は、
その`値$feを［
~CSS色の直列化を表現する文字列
］に設定するための~color-well~control†を`表現-$する。
◎
The input element represents a color well control, for setting the element's value to a string representing the serialization of a CSS color.
</p>

<p class="trans-note">【†
現在~選定された色のみが表示される小さな~boxで，
~click等により色~pickerが表示されるような類の~control。
】</p>

<p class="note">注記：
この状態にあるときは，選ばれる~CSS色は常にあるので、
末端-利用者が値を空~文字列に設定する仕方はない。
◎
In this state, there is always a CSS color picked, and there is no way for the end user to set the value to the empty string.
</p>

<p>
`alpha@a
属性は，`真偽-属性$であり、
在るならば，次を指示する
⇒
末端-利用者は，当の~CSS色の~alpha成分を操作できるので、
当の色は全部的に不透明になるとは限らない。
◎
The alpha attribute is a boolean attribute. If present, it indicates the CSS color's alpha component can be manipulated by the end user and does not have to be fully opaque.
</p>

<p>
`colorspace@a
属性は、
直列化された~CSS色の色~空間を指示することに加え，
~CSS色の選定-用に欲される~UIを~hintする。
この属性は，`列挙d属性$であり、
次に挙げる~keyword, とり得る状態, それらの対応付けが定義される：
◎
The colorspace attribute indicates the color space of the serialized CSS color. It also hints at the desired user interface for selecting a CSS color. It is an enumerated attribute with the following keywords and states:
</p>

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

<tr><td>`limited-srgb@v
<td>`制限された~sRGB@st
<td>当の~CSS色は、
`srgb$v 色~空間へ変換され，
成分ごとに 8 ~bitに制限される
— 例： `#123456^v や `color(srgb 0 1 0 / 0.5)^v

<tr><td>`display-p3@v
<td>`~Display-P3@st
<td>当の~CSS色は、
`display-p3＠~CSSCOLOR#valdef-color-display-p3$v 色~空間へ変換される
— 例： `color(display-p3 1.84 -0.19 0.72 / 0.6)^v
</tbody></table>

◎
Keyword｜State｜Brief description
limited-srgb｜Limited sRGB｜The CSS color is converted to the 'srgb' color space and limited to 8-bits per component, e.g., "#123456" or "color(srgb 0 1 0 / 0.5)".
display-p3｜Display P3｜The CSS color is converted to the 'display-p3' color space, e.g., "color(display-p3 1.84 -0.19 0.72 / 0.6)".
</div>

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

<p>
要素の［
`alpha$a ／ `colorspace$a
］属性が変更されたときは、
~UAは，次を走らすモノトスル
⇒
`~color-well~control色を更新する$( 当の要素 )
◎
Whenever the element's alpha or colorspace attributes are changed, the user agent must run update a color well control color given the element.
</p>

<p>
要素 %要素 が`変異-可能$feな場合、
~UAは：
◎
If the element is mutable,＼
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
%要素 の`値$feが表現する色を変更する
— 次で得されるとおりに
⇒
`~CSS色~値を構文解析する$( %要素 の`値$fe, %要素 )
◎
the user agent should allow the user to change the color represented by its value, as obtained from parsing it.＼
</li>
	<li>
次を利用者に許容しないモノトスル
⇒
%要素 の`値$feを［
次が満たされなくなる文字列
］に設定する
⇒
%要素 の`値$fe ~EQ `~color-well~control色を更新する$( %要素 )
◎
User agents must not allow the user to set the value to a string that running update a color well control color for the element would not set it to.＼
</li>
	<li>
~CSS色を選定するための~UIを供する場合は、
%要素 の`値$feを次の結果に設定するモノトスル
⇒
`~color-well~control色を直列化する$( %要素, 利用者が選定した色 )
◎
If the user agent provides a user interface for selecting a CSS color, then the value must be set to the result of serializing a color well control color given the element and the end user's selection.
</li>
</ul>

<div class="algo">
<p>
そのような要素 %要素 用の`~input作動化の挙動$は
⇒
`適用-可能なら~pickerを示す$( %要素 )
◎
The input activation behavior for such an element element is to show the picker, if applicable, for element.
</p>
</div>

<p>
<strong>拘束~検証</strong>
⇒
要素 %要素 は、
その`値$fe %値 が次を満たしている間は，`不良~入力の難あり$になる
⇒
［
%値 ~NEQ 空~文字列
］~AND［
`~CSS色~値を構文解析する$( %値, %要素 ) ~EQ `失敗^i
］
◎
Constraint validation: While the element's value is not the empty string and parsing it returns failure, the control is suffering from bad input.
</p>

<p>
`value$a 属性に指定する値は、［
空~文字列／~CSS色
］でなければナラナイ。
◎
The value attribute, if specified and not the empty string, must have a value that is a CSS color.
</p>

<div class="algo">
<strong>`値の無毒化~algo$</strong>
⇒
`~color-well~control色を更新する$( 当の要素 )
◎
The value sanitization algorithm is as follows: Run update a color well control color for the element.
</div>

<div class="algo">
<p>
`~color-well~control色を更新する@
~algoは、
所与の
( 要素 %要素 )
に対し：
◎
To update a color well control color, given an element element:
</p>
<ol>
	<li>
~Assert：
%要素 は `Color$st `状態$にある `input$e 要素である。
◎
Assert: element is an input element whose type attribute is in the Color state.
</li>
	<li>
%色 ~LET `~CSS色~値を構文解析する$( %要素 の`値$fe, %要素 )
◎
Let color be the result of parsing element's value.
</li>
	<li>
~IF［
%色 ~EQ `失敗^i
］
⇒
%色 ~SET `不透明な黒$
◎
If color is failure, then set color to opaque black.
</li>
	<li>
%要素 の`値$fe ~SET `~color-well~control色を直列化する$( %要素, %色 )
◎
Set element's value to the result of serializing a color well control color given element and color.
</li>
</ol>
</div>

<div class="algo">
<p>
`~color-well~control色を直列化する@
~algoは、
所与の
( 要素 %要素, ~CSS色 %色 )
に対し：
◎
To serialize a color well control color, given an element element and a CSS color color:
</p>
<ol>
	<li>
~Assert：
%要素 は `Color$st `状態$にある `input$e 要素である。
◎
Assert: element is an input element whose type attribute is in the Color state.
◎
↓ Let htmlCompatible be false.
</li>
	<li>
~IF［
%要素 は `alpha$a 属性を有さない
］
⇒
%色 の~alpha成分 ~SET 全部的に不透明
◎
If element's alpha attribute is not specified, then set color's alpha component to be fully opaque.
</li>
	<li>
<p>
%要素 の `colorspace$a 属性の状態に応じて：
◎
↓</p>
		<ul class="switch">
			<li>
<p>
`制限された~sRGB$st：
◎
If element's colorspace attribute is in the Limited sRGB state:
</p>
				<ol>
					<li>
%色 ~SET %色 を `srgb$v 色~空間へ`変換-＠~CSSCOLOR#color-conversion$した結果
◎
Set color to color converted to the 'srgb' color space.
</li>
					<li>
%色 の各~成分を範囲 0 以上 255 以下の`最も近い整数に丸める$【！~CSSVAL#combine-integers】
◎
Round each of color's components so they are in the range 0 to 255, inclusive. Components are to be rounded towards +∞.
</li>
					<li>
<p>
~IF［
%要素 は `alpha$a 属性を有さない
］
⇒
~RET `~HTMLに互換な直列化が要請される$下で %色 を`直列化-＠~CSSCOLOR#serializing-color-values$した結果
◎
If element's alpha attribute is not specified, then set htmlCompatible to true.
</p>

<p class="note">
~color-well~controlの~~過去~versionとの互換性を得るため、
これは，意図的に異なる直列化-法を利用する。
◎
This intentionally uses a different serialization path for compatibility with an earlier version of the color well control.
◎
↓ Otherwise, set color to color converted to using the 'color()' function.
</p>
					</li>
				</ol>
			</li>
			<li>
`~Display-P3$st
⇒
%色 ~SET %色 を `display-p3＠~CSSCOLOR#valdef-color-display-p3$v 色~空間へ`変換-＠~CSSCOLOR#color-conversion$した結果
◎
Otherwise:
• Assert: element's colorspace attribute is in the Display P3 state.
• Set color to color converted to the 'display-p3' color space.
</li>
		</ul>
	</li>
	<li>
<p>
%色 ~SET %色 を `color()＠~CSSCOLOR#color-function$v 関数~形へ変換した結果
</p>
<p class="trans-note">【
原文は， `~Display-P3$st の場合に この段を適用していないが、
`display-p3^v 色~空間に属する色を直列化するためには，
必然的に `color()^v 関数を利用することになる。
】</p>
◎
↑</li>
	<li>
~RET %色 を`直列化-＠~CSSCOLOR#serializing-color-values$した結果
◎
Return the result of serializing color.＼
↑ If htmlCompatible is true, then do so with HTML-compatible serialization requested.
</li>
</ol>
</div>

<div class="bookkeeping">
`Color^bk

<p>
`value$m ~IDL属性は、
`値~mode$iになる。
</p>

◎
The following common input element content attributes and IDL attributes apply to the element: alpha, autocomplete, colorspace, and list content attributes; list and value IDL attributes; select() method.
◎
The value IDL attribute is in mode value.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, max, maxlength, min, minlength, multiple, pattern, placeholder, popovertarget, popovertargetaction, readonly, required, size, src, step, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, valueAsDate and, valueAsNumber IDL attributes; setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods.
</div>

					</section>
					<section id="checkbox-state-(type=checkbox)">
<h6 title="Checkbox state (type=checkbox)">4.10.5.1.15. `Checkbox^st 状態（ `type=checkbox^c ）</h6>

<p>
`Checkbox$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Checkbox state, the rules in this section apply.
</p>

<p>
要素は、
その`~check有りか$feを表現する
2 状態をとり得る~controlを`表現-$する。
~controlは、
要素の`~check有りか$feが［
~T ならば肯定的~選択／
~F ならば否定的~選択
］を表現する。
要素の `indeterminate$m ~IDL属性 ~EQ ~T の場合、
~controlの選択は、
~controlが第三の不定な状態にあるかのように，遮られるベキである。
◎
The input element represents a two-state control that represents the element's checkedness state. If the element's checkedness state is true, the control represents a positive selection, and if it is false, a negative selection. If the element's indeterminate IDL attribute is set to true, then the control's selection should be obscured as if the control was in a third, indeterminate, state.
</p>

<p class="note">注記：
要素の `indeterminate$m ~IDL属性が ~T に設定されてようが，
~control自体は 決して真の 3 状態をとり得る~controlにはならない。
この~IDL属性は、
第三の状態があるかのような外観を与えるのみである。
◎
The control is never a true tri-state control, even if the element's indeterminate IDL attribute is set to true. The indeterminate IDL attribute only gives the appearance of a third state.
</p>

<div class="algo">
<p>
要素~用の`~input作動化の挙動$は、
次に従う：
◎
The input activation behavior is to run the following steps:
</p>
<ol>
	<li>
~IF［
要素は`接続されて$いない
］
⇒
~RET
◎
If the element is not connected, then return.
</li>
	<li>
`入力~eventを発火する$( 要素, `input$et )
◎
Fire an event named input at the element with the bubbles and composed attributes initialized to true.
</li>
	<li>
`入力~eventを発火する$( 要素, `change$et )
◎
Fire an event named change at the element with the bubbles attribute initialized to true.
</li>
</ol>
</div>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`欠落である難あり$になる
⇒
［
`要求される欄$である
］~AND［
その`~check有りか$fe ~EQ ~F
］
◎
Constraint validation: If the element is required and its checkedness is false, then the element is suffering from being missing.
</p>

<dl class="domintro">
	<dt>%input.`indeterminate$m [ = %値 ]</dt>
	<dd>
<p>
被~設定-時には、
現在の値が可視でなくなるように，
`Checkbox$st ~controlの描画を上書きする。
◎
When set, overrides the rendering of checkbox controls so that the current value is not visible.
</p>

	</dd>
</dl>

<div class="bookkeeping">
`Checkbox^bk

<p>
`value$m ~IDL属性は、
`既定か~on~mode$iになる。
◎
The value IDL attribute is in mode default/on.
</p>

◎
The following common input element content attributes and IDL attributes apply to the element: checked, and required content attributes; checked and value IDL attributes.
◎
The value IDL attribute is in mode default/on.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, autocomplete, colorspace, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, popovertarget, popovertargetaction, readonly, size, src, step, and width.
◎
The following IDL attributes and methods do not apply to the element: files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods.
</div>

					</section>
					<section id="radio-button-state-(type=radio)">
<h6 title="Radio Button state (type=radio)">4.10.5.1.16. `Radio^st 状態（ `type=radio^c ）</h6>

<p>
`Radio$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Radio Button state, the rules in this section apply.
</p>

<p>
要素は、
`Radio$st 状態にある他の要素と一緒に`~radio~button~group$を形成し，
それらのうち一つに限り［
その`~check有りか$fe ~EQ ~T 
］を満たすような~controlを`表現-$する。
~controlは、
要素の`~check有りか$feに応じて［
~T ならば この~group内で選択されている ／
~F ならば選択されていない
］ことを表現する。
◎
The input element represents a control that, when used in conjunction with other input elements, forms a radio button group in which only one control can have its checkedness state set to true. If the element's checkedness state is true, the control represents the selected control in the group, and if it is false, it indicates a control in the group that is not selected.
</p>

<p>
`Radio$st `状態$にある要素 %要素 が属する
`~radio~button~group@
は：
◎
The radio button group that contains an input element a also contains＼
</p>
<ul>
	<li>
<p>
%要素 は［
`name$a 属性を有していて，その値 %~group名 ~NEQ 空~文字列
］ならば、［
~AND↓ を満たす要素
］たちが成す集合になる
（特に， %要素 も含まれる）：
◎
all the other input elements b that fulfill all of the following conditions:
</p>
		<ul>
			<li>
`Radio$st `状態$にある
◎
The input element b's type attribute is in the Radio Button state.
</li>
			<li>
その`~form所有者$ ~EQ %要素 の`~form所有者$
（ ~NULL の場合も含む）
◎
Either a and b have the same form owner, or they both have no form owner.
</li>
			<li>
%要素 と同じ`~tree$内にある
◎
Both a and b are in the same tree.
</li>
			<li>
`name$a 属性を有していて，その値 ~EQ %~group名
◎
They both have a name attribute, their name attributes are not empty, and the value of a's name attribute equals the value of b's name attribute.
</li>
		</ul>
	</li>
	<li>
他の場合は空~集合とする。
【他所を簡潔に述べるため、この訳では，そのように定義されるものと見なす。】
◎
↑</li>
</ul>

<p>
要素が属する`~radio~button~group$は、
空でないならば，他にも別の要素を含んでいなければナラナイ。
◎
A tree must not contain an input element whose radio button group contains only that element.
</p>

<div class="algo">
<p>
要素に対し，次のいずれかが生じたときは、
その直後の時点で［
要素の`~check有りか$fe ~EQ ~T
］ならば，［
その時点で要素が属する`~radio~button~group$
］を成す他のすべての要素の`~check有りか$feを ~F に設定するモノトスル：
◎
When any of the following phenomena occur, if the element's checkedness state is true after the occurrence, the checkedness state of all the other elements in the same radio button group must be set to false:
</p>
<ul>
	<li>
`~check有りか$feが ~T に変化したとき
（理由が何であれ）。
◎
The element's checkedness state is set to true (for whatever reason).
</li>
	<li>
<p>
要素が属する`~radio~button~group$が変化したとき
— これは、
要素に対し次が生じたときに生じる：
</p>
		<ul>
			<li>
`name$a 属性が［
設定-／変更-／除去-
］されたとき
</li>
			<li>
`~form所有者$が変化したとき
</li>
			<li>
`型~変化が通達された＠#signal-a-type-change$とき
</li>
			<li>
`接続された$とき
</li>
		</ul>
◎
The element's name attribute is set, changed, or removed.
◎
The element's form owner changes.
◎
A type change is signalled for the element.
◎
The element becomes connected.
</li>
</ul>
</div>

<div class="algo">
<p>
要素~用の`~input作動化の挙動$は、
次に従う：
◎
The input activation behavior is to run the following steps:
</p>
<ol>
	<li>
~IF［
要素は`接続されて$いない
］
⇒
~RET
◎
If the element is not connected, then return.
</li>
	<li>
`入力~eventを発火する$( 要素, `input$et )
◎
Fire an event named input at the element with the bubbles and composed attributes initialized to true.
</li>
	<li>
`入力~eventを発火する$( 要素, `change$et )
◎
Fire an event named change at the element with the bubbles attribute initialized to true.
</li>
</ol>
</div>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`欠落である難あり$になる
⇒
それが属する`~radio~button~group$は次を満たす
⇒
［
それを成す ある要素は`要求される欄$である
］~AND［
それを成す どの要素も［
その`~check有りか$fe ~EQ ~F
］を満たす
］
◎
Constraint validation: If an element in the radio button group is required, and all of the input elements in the radio button group have a checkedness that is false, then the element is suffering from being missing.
</p>

<div class="example">
<p>
次の例の "クロ" は、
何らかの理由で［
`要求される欄$であるが`不能化され$feる
］ように指定されている：
◎
The following example, for some reason, has specified that puppers are both required and disabled:
</p>

`Radio-1^xCode

<p>
利用者が "シロ" を選択しないまま この~formを提出しようとした場合、
どちらの `input$e 要素も`欠落である難あり$になる
— `~radio~button~group$内には`要求される欄$（すなわち，最初のもの）が在り、
この~groupを成すどの要素も［
その`~check有りか$fe ~EQ ~F
］を満たすので。
◎
If the user tries to submit this form without first selecting "Doggo", then both input elements will be suffering from being missing, since an element in the radio button group is required (viz. the first element), and both of the elements in the radio button group have a false checkedness.
</p>

<p>
他方、
利用者が "シロ" を選択してから~formを提出した場合、
どちらの `input$e 要素も，`欠落である難あり$にはならない
— この~group内には、
`要求される欄$が在る一方で，他にも［
`~check有りか$fe ~NEQ ~F
］を満たすものが在るので。
◎
On the other hand, if the user selects "Doggo" and then submits the form, then neither input element will be suffering from being missing, since while one of them is required, not all of them have a false checkedness.
</p>
</div>

<p class="note">注記：
`~radio~button~group$を成す どの~radio~buttonも~checkされていない場合、
~UIにおいても，当の~groupを成す それらは，初期~時から~checkされないままになる
— 当の~groupを成すいずれかが（利用者または~scriptにより）~checkされるまでは。
◎
If none of the radio buttons in a radio button group are checked, then they will all be initially unchecked in the interface, until such time as one of them is checked (either by the user or by script).
</p>

<div class="bookkeeping">
`Radio^bk

<p>
`value$m ~IDL属性は、
`既定か~on~mode$iになる。
◎
The value IDL attribute is in mode default/on.
</p>

◎
The following common input element content attributes and IDL attributes apply to the element: checked and required content attributes; checked and value IDL attributes.
◎
The value IDL attribute is in mode default/on.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, autocomplete, colorspace, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, popovertarget, popovertargetaction, readonly, size, src, step, and width.
◎
The following IDL attributes and methods do not apply to the element: files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods.
</div>

					</section>
					<section id="file-upload-state-(type=file)">
<h6 title="File Upload state (type=file)">4.10.5.1.17. `File^st 状態（ `type=file^c ）</h6>

<p>
`File$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the File Upload state, the rules in this section apply.
</p>

<p>
要素は、
`選択された~file~list@
を`表現-$する。
~list内の各~fileは，その［
~filename, 型, ~data内容
］からなる。
◎
The input element represents a list of selected files, each file consisting of a filename, a file type, and a file body (the contents of the file).
</p>

<p>
~filenameは，`~path成分$を包含しないようにするモノトスル
— 利用者が~directory階層~全体を選択しようが，複数の~directoryから同じ名前を伴う複数の~fileを選択しようが。
`File$st 状態の目的においては、
`~path成分@
は，~filename内の文字 `005C^U `\^smb で分離される部位である
【？】
。
◎
Filenames must not contain path components, even in the case that a user has selected an entire directory hierarchy or multiple files with the same name from different directories. Path components, for the purposes of the File Upload state, are those parts of filenames that are separated by U+005C REVERSE SOLIDUS character (\) characters.
</p>

<p>
`multiple$a 属性が設定されない限り，`選択された~file~list$内の~fileは 1 個までにするモノトスル。
◎
Unless the multiple attribute is set, there must be no more than one file in the list of selected files.
</p>

<div class="algo">
<p>
そのような要素 %要素 用の`~input作動化の挙動$は
⇒
`適用-可能なら~pickerを示す$( %要素 )
◎
The input activation behavior for such an element element is to show the picker, if applicable, for element.
</p>
</div>

<div>
<p>
要素が`変異-可能$feな場合、
~UAは：
</p>
<ul>
	<li>
次を利用者に許容するベキである
⇒
~list内の~fileを他の仕方で変更する
— 例：
~drag＆~dropにより~fileたちを［
追加する／除去する
］など。
</li>
	<li class="algo">
利用者がそれを行ったときは、
次を走らすモノトスル
⇒
要素~用に`~file選択を更新する$()
</li>
</ul>
◎
If the element is mutable, the user agent should allow the user to change the files on the list in other ways also, e.g., adding or removing files by drag-and-drop.＼
When the user does so, the user agent must update the file selection for the element.
</div>

<p>
要素が`変異-可能$feでない場合、
~UAは，次を利用者に許容しないモノトスル
⇒
`選択された~file~list$を変更する
◎
If the element is not mutable, the user agent must not allow the user to change the element's selection.
</p>

<div class="algo">
<p>
所与の要素 %要素 用に
`~file選択を更新する@
~algoは
⇒
`要素~taskを~queueする$( `利用者ヤリトリ~task~source$, %要素, 次の手続き )
◎
To update the file selection for an element element:
• Queue an element task on the user interaction task source given element and＼
</p>
<div class="algo">
<p>
手続きは：
◎
the following steps:
</p>
<ol>
	<li>
%要素 の`選択された~file~list$を，利用者の選択を表現するように更新する
◎
Update element's selected files so that it represents the user's selection.
</li>
	<li>
`入力~eventを発火する$( %要素, `input$et )
◎
Fire an event named input at the input element, with the bubbles and composed attributes initialized to true.
</li>
	<li>
`入力~eventを発火する$( %要素, `change$et )
◎
Fire an event named change at the input element, with the bubbles attribute initialized to true.
</li>
</ol>
</div>
</div>

<p>
<strong>拘束~検証</strong>
⇒
要素が次を満たしている間は、
`欠落である難あり$になる
⇒
［
`要求される欄$である
］~AND［
その`選択された~file~list$は空である
］
◎
Constraint validation: If the element is required and the list of selected files is empty, then the element is suffering from being missing.
</p>

<hr>

<p>
`accept@a
属性により、
どの~file型が受容されるかについての~hintを~UAに供せる。
◎
The accept attribute may be specified to provide user agents with a hint of what file types will be accepted.
</p>

<p>
この属性に指定する値は、
`~commaで分離された~token集合$であって，その各~tokenは`~ASCII大小無視$で次のいずれかに合致する文字列でなければナラナイ：
◎
If specified, the attribute must consist of a set of comma-separated tokens, each of which must be an ASCII case-insensitive match for one of the following:
</p>

<dl>
	<dt>
`audio/*^l
◎
The string "audio/*"
</dt>
	<dd>
音響~fileが受容されることを指示する。
◎
Indicates that sound files are accepted.
</dd>

	<dt>
`video/*^l
◎
The string "video/*"
</dt>
	<dd>
動画~fileが受容されることを指示する。
◎
Indicates that video files are accepted.
</dd>

	<dt>
`image/*^l
◎
The string "image/*"
</dt>
	<dd>
画像~fileが受容されることを指示する。
◎
Indicates that image files are accepted.
</dd>

	<dt>
`~parameterを伴わない妥当な~MIME型~文字列$
◎
A valid MIME type string with no parameters
</dt>
	<dd>
その型の~fileが受容されることを指示する。
◎
Indicates that files of the specified type are accepted.
</dd>

	<dt>
最初の文字 ~EQ `002E^U `.^smb
◎
A string whose first character is a U+002E FULL STOP character (.)
</dt>
	<dd>
その~file拡張子を伴う~fileが受容されることを指示する。
◎
Indicates that files with the specified file extension are accepted.
</dd>
</dl>

<p>
どの 2 つの~tokenも、
`~ASCII大小無視$で互いに合致してはナラナイ
（すなわち，重複は許容されない）。
~UAは、
属性から~tokenたちが成す~listを得するときは，その値を`~commaで分割-$するモノトスル。
◎
The tokens must not be ASCII case-insensitive matches for any of the other tokens (i.e. duplicates are not allowed). To obtain the list of tokens from the attribute, the user agent must split the attribute value on commas.
</p>

<p>
~UAは、
この属性の値を［
汎用~file~pickerよりも適切な~UI
］を表示するために利用してもヨイ。
一例として、
次に挙げる選択肢を利用者に提供することもできる：
◎
User agents may use the value of this attribute to display a more appropriate user interface than a generic file picker. For instance,＼
</p>
<ul>
	<li>
値 `image/*^l が与えられたなら、
局所的~cameraを利用したり，利用者に写真集から写真を選択してもらう。
◎
given the value image/*, a user agent could offer the user the option of using a local camera or selecting a photograph from their photo collection;＼
</li>
	<li>
値 `audio/*^l が与えられたなら、
~headset~microphoneを利用して~clipを録音する。
◎
given the value audio/*, a user agent could offer the user the option of recording a clip using a headset microphone.
</li>
</ul>

<p>
~UAは、［
これらの~tokenのいずれかにより受容されない~file
］を利用者が選択するのを防止するベキである。
◎
User agents should prevent the user from selecting files that are not accepted by one (or more) of these tokens.
</p>

<p class="note">注記：
特定の形式による~dataを~~期待する作者には、［
~MIME型，それに対応する拡張子
］どちらも指定することが奨励される。
◎
Authors are encouraged to specify both any MIME types and any corresponding extensions when looking for data in a specific format.
</p>

<div class="example">
<p>
例えば、
Microsoft Word 文書を Open Document Format ~fileに変換する~appを考える。
Microsoft Word 文書の ~MIME型や拡張子には多様なものがあるので、
~siteは次のように いくつかを~listできる：
◎
For example, consider an application that converts Microsoft Word documents to Open Document Format files. Since Microsoft Word documents are described with a wide variety of MIME types and extensions, the site can list several, as follows:
</p>

`File-1^xCode

<p>
［
~file拡張子のみを利用して~file型を述べる~platform
］においては、
ここに~listされた拡張子を利用して許容される文書を絞込みつつ、
~systemが~MIME型~登録~表t
— ~MIME型を~systemで利用している拡張子に対応付けるもの —
を備えているならば，それに基づいて他にも許容される拡張子を決定できる。
類似に，［
各~文書に~filenameや拡張子は付与しないが，内部的には~MIME型を付与する~system
］においては、
~MIME型を利用して許容される~fileを選びつつ、
~systemが拡張子~登録~表t
— 既知な拡張子を~systemで利用している~MIME型に対応付けるもの —
を備えているならば，~listされた拡張子を利用して他にも許容される~MIME型を決定できる。

◎
On platforms that only use file extensions to describe file types, the extensions listed here can be used to filter the allowed documents, while the MIME types can be used with the system's type registration table (mapping MIME types to extensions used by the system), if any, to determine any other extensions to allow. Similarly, on a system that does not have filenames or extensions but labels documents with MIME types internally, the MIME types can be used to pick the allowed files, while the extensions can be used if the system has an extension registration table that maps known extensions to MIME types used by the system.
</p>
</div>

<p class="warning">
拡張子は、
多義的になる傾向にある
（例えば、
拡張子 `.dat^l を利用する形式は，いくつあるかわからず、
利用者は概して，~fileを
— それが Microsoft Word 文書でなくとも —
ごく容易に `.doc^l 拡張子に改称し得る）。
また、
~MIME型にも依拠できない傾向にある
（例：
多くの形式は、
正式に型が登録されておらず，実施における~MIME型は何種類もある）。
作者は，そのことに留意して、
~clientから受取った~dataは，通例通り用心深く扱うベキである
— 利用者が敵対的でなかろうが，~UAが `accept$a 属性の要件を全部的に順守していようが、
期待される形式でないかもしれないので。
◎
Extensions tend to be ambiguous (e.g. there are an untold number of formats that use the ".dat" extension, and users can typically quite easily rename their files to have a ".doc" extension even if they are not Microsoft Word documents), and MIME types tend to be unreliable (e.g. many formats have no formally registered types, and many formats are in practice labeled using a number of different MIME types). Authors are reminded that, as usual, data received from a client should be treated with caution, as it may not be in an expected format even if the user is not hostile and the user agent fully obeyed the accept attribute's requirements.
</p>

<div id="fakepath-srsly" class="example">

<p>
歴史的な理由から、
`value$m ~IDL属性は，~filenameに文字列 `C:\fakepath\^l を接頭する。
一部の旧来の~UAは、
実際に全部的な~pathを含めていた
（それは、
~securityの脆弱性であった）。
そのため、
`value$m ~IDL属性から~filenameを後方-互換な仕方で得することは，自明でない。
次の関数は、
~filenameを~~相応に互換な方式で抽出する：
◎
For historical reasons, the value IDL attribute prefixes the filename with the string "C:\fakepath\". Some legacy user agents actually included the full path (which was a security vulnerability). As a result of this, obtaining the filename from the value IDL attribute in a backwards-compatible way is non-trivial. The following function extracts the filename in a suitably compatible manner:
</p>

<pre class="lang-js">
function extractFilename(%path) {
  if (%path.substr(0, 12) == "C:\\fakepath\\")
    return %path.substr(12); // <span class="comment">現代の~browser</span>
  var %x;
  %x = %path.lastIndexOf('/');
  if (%x &gt;= 0) // <span class="comment">Unix に基づく~path</span>
    return %path.substr(%x + 1);
  %x = %path.lastIndexOf('\\');
  if (%x &gt;= 0) // <span class="comment">Windows に基づく~path</span>
    return %path.substr(%x + 1);
  return %path; // <span class="comment">単に~filenameのみ</span>
}
</pre>
<!-- 
// modern browser
// Unix-based path
// Windows-based path
// just the filename
-->

<p>
これは、
次のように利用できる：
◎
This can be used as follows:
</p>

<pre class="lang-html">
&lt;p&gt;&lt;input type=filename=image onchange="updateFilename(this.value)"&gt;&lt;/p&gt;
&lt;p&gt;あなたが選んだ~filenameは： &lt;span id="filename"&gt;(none)&lt;/span&gt;&lt;/p&gt;
&lt;script&gt;
 function updateFilename(%path) {
   var %name = extractFilename(%path);
   document.getElementById('filename').textContent = %name;
 }
&lt;/script&gt;
</pre>
<!-- The name of the file you picked is: -->
</div>

<hr>

<div class="bookkeeping">
`File^bk

<p>
`value$m ~IDL属性は、
`~filename~mode$iになる。
</p>

<p>
要素の `value$a 属性は、
省略されなければナラナイ。
</p>

◎
The following common input element content attributes and IDL attributes apply to the element: accept, multiple, and required content attributes; files and value IDL attributes; select() method.
◎
The value IDL attribute is in mode filename.
◎
The input and change events apply.
◎
The following content attributes must not be specified and do not apply to the element: alpha, alt, autocomplete, checked, colorspace, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, pattern, popovertarget, popovertargetaction, placeholder, readonly, size, src, step, and width.
◎
The element's value attribute must be omitted.
◎
The following IDL attributes and methods do not apply to the element: checked, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods.
</div>

					</section>
					<section id="submit-button-state-(type=submit)">
<h6 title="Submit Button state (type=submit)">4.10.5.1.18. `Submit^st 状態（ `type=submit^c ）</h6>

<p>
`Submit$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Submit Button state, the rules in this section apply.
</p>

<p>
◎追跡路
要素は、
作動化-時に~formを提出する~buttonを`表現-$する。
~buttonの~labelは、［
要素が `value$a 属性を有するならば その属性の値 ／
~ELSE_ “提出する” に似た何かを意味する`実装定義$な文字列
］になるモノトスル。
要素は、
`~button$であり，また `提出-~button$でもある。
◎
(This is a tracking vector.)
The input element represents a button that, when activated, submits the form. If the element has a value attribute, the button's label must be the value of that attribute; otherwise, it must be an implementation-defined string that means "Submit" or some such. The element is a button, specifically a submit button.
</p>

<p class="note" id="_button-fingerprinting">注記：
~buttonの横幅は、
指紋収集され得るような少しばかりの情報を漏洩し得る
— 既定の~labelは`実装定義$であり、
~buttonの横幅は，概してその~labelに依存するので。
この情報は、［
~UA／利用者の~locale
］の識別情報に強く相関される見込みが高い。
◎
Since the default label is implementation-defined, and the width of the button typically depends on the button's label, the button's width can leak a few bits of fingerprintable information. These bits are likely to be strongly correlated to the identity of the user agent and the user's locale.
</p>

<div class="algo">
<p>
要素 %要素 用の`~input作動化の挙動$は、
所与の
( %~event )
に対し，次に従う：
◎
The element's input activation behavior given event is as follows:
</p>
<ol>
	<li>
~IF［
%要素 の`~form所有者$ ~EQ ~NULL
］~OR［
%要素 の`~node文書$は`全部的に作動中$でない
］
⇒
~RET
◎
If the element does not have a form owner, then return.
◎
If the element's node document is not fully active, then return.
</li>
	<li>
%利用者-関与i ~LET `~event用の~naviに対する利用者-関与i$( %~event )
◎
↓</li>
	<li>
`~formを提出する$( %要素 の`~form所有者$, %要素, %利用者-関与i )
◎
Submit the element's form owner from the element with userInvolvement set to event's user navigation involvement.
</li>
</ol>
</div>

<p>
次に挙げる属性は、
`~form提出用の属性$である
⇒
`formaction$a,
`formenctype$a,
`formmethod$a,
`formnovalidate$a,
`formtarget$a
◎
The formaction, formenctype, formmethod, formnovalidate, and formtarget attributes are attributes for form submission.
</p>

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

<div class="bookkeeping">
`Submit^bk

<p>
`value$m ~IDL属性は、
`既定~mode$iになる。
</p>

◎
The following common input element content attributes and IDL attributes apply to the element: dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, popovertarget, and popovertargetaction content attributes; value IDL attribute.
◎
The value IDL attribute is in mode default.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, autocomplete, checked, colorspace, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods.
◎
The input and change events do not apply.
</div>

					</section>
					<section id="image-button-state-(type=image)">
<h6 title="Image Button state (type=image)">4.10.5.1.19. `Image^st 状態（ `type=image^c ）</h6>

<p>
`Image$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Image Button state, the rules in this section apply.
</p>

<p>
要素は、
それにより［
利用者が座標を選択して~formを提出できる画像 ／
あるいは代替として 利用者が~formを提出できる~button
］を`表現-$する。
要素は`~button$であり，`提出-~button$でもある。
◎
The input element represents either an image from which a user can select a coordinate and submit the form, or alternatively a button from which the user can submit the form. The element is a button, specifically a submit button.
</p>

<p class="note">注記：
要素~用の座標を成す［
x ／ y
］成分は、
~controlの名前に［
`.x^l ／ `.y^l
］を付加して導出される 2 個の~entryとして，
`~form提出の間＠~HTMLforms#constructing-the-form-data-set$に~serverへ送信される。
◎
The coordinate is sent to the server during form submission by sending two entries for the element, derived from the name of the control but with ".x" and ".y" appended to the name with the x and y components of the coordinate respectively.
</p>

<hr>

<p>
画像は
`src@a
属性により与えられる。
この属性は、
指定されなければナラナイ
— 加えて、
指定する値は ~AND↓ を満たさなければナラナイ：
◎
The image is given by the src attribute. The src attribute must be present, and＼
</p>
<ul>
	<li>
`前後~空白~可の妥当かつ空でない~URL$を包含する
◎
must contain a valid non-empty URL potentially surrounded by spaces＼
</li>
	<li>
ヤリトリありでない画像~資源を参照している
— ~animate化されていてもヨイが、
~pageをめくるような~UIを備えるもの, ~scriptで動かすものは除く。
◎
referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.
</li>
</ul>

<p>
以下に
“除外される~UA”
を除き、
~UAは，
“必要が生じた時点”
で要素の
“画像を~fetchする”
モノトスル：
◎
↓</p>
<ul>
	<li>
<p>
“必要が生じた時点”
とは、
次のいずれかが生じたときを意味する：
</p>
		<ul>
			<li>
要素が `src$a 属性を有している下で，
要素の`状態$が `Image$st 以外から `Image$st に変化したとき
（要素の作成-時も含まれる）
</li>
			<li>
要素が `Image$st `状態$にある下で，
要素の `src$a 属性が別の値に［
設定-／変更-
］されたとき
</li>
		</ul>
<p>
ただし、
~UAが同じ画像への~fetchをすでに試みていた場合は除く
— 具体的には
⇒
要素が過去のある時点で、
`Image$st `状態$にあって，そのときの `src$a 属性の値が，前項のいずれかが生じた後のそれと同じである場合
</p>

◎
When any of the these events occur
• the input element's type attribute is first set to the Image Button state (possibly when the element is first created), and the src attribute is present
• the input element's type attribute is changed back to the Image Button state, and the src attribute is present, and its value has changed since the last time the type attribute was in the Image Button state
• the input element's type attribute is in the Image Button state, and the src attribute is set or changed
</li>
	<li>
<p>
“除外される~UA”
とは、
次のいずれかを意味する：
</p>
		<ul>
			<li>
画像を~supportしていない
</li>
			<li>
画像の~supportは不能化されている
</li>
			<li>
画像をその場（ `on demand^en ）で~fetchすることにしている
</li>
		</ul>

<p class="trans-note">【
“その場” とは，［
画像が実際の呈示に必要になることが判明する時点まで，画像の~fetchingを先送りする
］ことを意味すると思われるが、
その挙動は，ここには述べられていない。
】</p>

◎
then unless the user agent cannot support images, or its support for images has been disabled, or the user agent only fetches images on demand,＼
</li>
	<li class="algo">
<p>
“画像を~fetchする” ための手続きは：
◎
↑↓ or the src attribute's value is the empty string, run these steps:
</p>
		<ol>
			<li>
%要素 ~LET 当の `input$e 要素
◎
↓</li>
			<li>
%文書 ~LET %要素 の`~node文書$
◎
↓</li>
			<li>
<p>
（次に従って画像~URLを検査する）：
</p>
				<ol>
					<li>
%src ~LET %要素 の `src$a 属性の値
</li>
					<li>
~IF ［
%src ~EQ 空~文字列
］
⇒
~RET
</li>
					<li>
%~URL ~LET `~URLを符号化法の下で相対的に構文解析する$( %src, %文書 )
</li>
					<li>
~IF［
%~URL ~EQ `失敗^i
］
⇒
~RET
</li>
				</ol>
◎
Let url be the result of encoding-parsing a URL given the src attribute's value, relative to the element's node document.
◎
If url is failure, then return.
</li>
			<li>
%要請 ~LET 新たな`要請$
— その
⇒＃
`~URL$rq ~SET %~URL,
`~client$rq ~SET %文書 に`関連な設定群~obj$,
`行先$rq ~SET `image^l,
`起動元~種別$rq ~SET `input^l,
`資格証~mode$rq ~SET `include^l,
`~URL資格証を利用するか$rq ~SET ~T
◎
Let request be a new request whose URL is url, client is the element's node document's relevant settings object, destination is "image", initiator type is "input", credentials mode is "include", and whose use-URL-credentials flag is set.
</li>
			<li>
<p>
%要請 を`~fetchする$
— 次を与える下で：
◎
Fetch request, with＼
</p>
				<ul>
					<li class="algo">
<p>
`応答の本体~終了~時の処理n$i ~SET 所与の
( `応答$ %応答 )
に対し，次を走らす手続き：
</p>
						<ol>
							<li>
%~event型 ~LET ［
次が満たされるならば `load$et ／
~ELSE_ `error$et
］
⇒
画像は（成功裡に~downloadされ，）`可用$である
</li>
							<li>
<p>
`要素~taskを~queueする$( `利用者ヤリトリ~task~source$, %要素, 次の手続き )
</p>
<div class="algo">
手続きは
⇒
`~eventを発火する$( %要素, %~event型 )
</div>
							</li>
						</ol>
◎
processResponseEndOfBody set to the following steps given response response:
• If the download was successful and the image is available, queue an element task on the user interaction task source given the input element to fire an event named load at the input element.
• Otherwise, if the fetching process fails without a response from the remote server, or completes but the image is not a valid or supported image, then queue an element task on the user interaction task source given the input element to fire an event named error on the input element.
</li>
				</ul>
			</li>
		</ol>

<p>
画像の~fetchingは、［
上で【！defined below】 %要請 を~fetchする間に
【`~fetch~taskを~queueする$手続きにより】
`~network用~task~source$から`~queueされ$る`~task$
］を走らすときまで，
%要素 の`~node文書$の`~load~eventを遅延-$するモノトスル。
◎
Fetching the image must delay the load event of the element's node document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.
</p>

	</li>
</ul>

<div class="p">
<p>
画像が
`可用@
であるとは、
~AND↓ が満たされることをいう：
</p>
<ul>
	<li>
~network~errorを伴わずに得された
</li>
	<li>
画像の型は、
~UAが~supportする型である
</li>
	<li>
その型の妥当な画像である
</li>
</ul>
◎
If the image was successfully obtained, with no network errors, and the image's type is a supported image type, and the image is a valid image of that type, then the image is said to be available.＼
</div>

<p>
画像が完全に~downloadされる前にこれが満たされる場合、［
画像を~fetchする間に`~network用~task~source$から`~queueされ$た各`~task$
］は、
画像の呈示を適切に更新するモノトスル。
◎
If this is true before the image is completely downloaded, each task that is queued by the networking task source while the image is being fetched must update the presentation of the image appropriately.
</p>

<p class="trans-note">【
したがって、
画像の描画-可能な~dataが一部でも得られていれば，`可用$とされ得ることになる。
その場合でも，定義に従えば、
~network~errorにより~downloadが中断された時点で`可用$でないとされることになる（？）が、
その場合の `load^et ／ `error^et ~eventの取扱いがはっきしりない
（両者とも発火するのか？ ~UAが`可用$かそうでないかを確定させた時点で片方だけ発火するのか？）。
】</p>

<p>
~UAは、
画像の型を決定するときには，［
公式的な型【！<var>official type</var>】【`給された~MIME型$】として
画像に結付けられた`~Content-Type~metadata$（ `Content-Type^h ~header ） %内容~型 を与える下で，
`画像を特定的に~sniffするための規則$を適用する
］ベキである。
これらの規則が適用されない場合、
%内容~型 が画像の型を与えるモノトスル。
◎
The user agent should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image's associated Content-Type headers.
</p>

<p>
~UAは、
要素が参照している資源に対しては：
◎
↓</p>

<ul >
	<li>
画像でないものを~supportしないモノトスル。
◎
User agents must not support non-image resources with the input element.＼
</li>
	<li>
画像~内に実行-可能な~code埋込まれていても，
それを走らせないモノトスル。
【例：~SVG内の `script^e 要素】
◎
User agents must not run executable code embedded in the image resource.＼
</li>
	<li>
複数~pageからなる場合は、
最初の~pageのみを表示するモノトスル。
◎
User agents must only display the first page of a multipage resource.＼
</li>
	<li>
ヤリトリありな流儀で動作することを許容しないモノトスル。
◎
User agents must not allow the resource to act in an interactive fashion, but＼
</li>
	<li>
~animationがあれば尊守するベキである。
◎
should honor any animation in the resource.
</li>
</ul>

<hr>

<p>
`alt@a
属性は、
画像を利用できない利用者や~UA用に，~textな~labelを~button用に供する。
要素は、
この属性を有してなければナラナイ。
その値は、［
画像を可用にできない場合に等価な~buttonになるような，空でない適切な~label
］を与える文字列でなければナラナイ。
◎
The alt attribute provides the textual label for the button for users and user agents who cannot use the image. The alt attribute must be present, and must contain a non-empty string giving the label that would be appropriate for an equivalent button if the image was unavailable.
</p>

<p>
要素は、
`寸法~属性$を~supportする。
◎
The input element supports dimension attributes.
</p>

<hr>

<p>
要素は、
次のいずれかを`表現-$する：
◎
↓</p>
<ul>
	<li>
<p>
次が満たされるならば、
`src$a 属性が指定する画像から`座標を選定する$ための~control
⇒
［
要素は `src$a 属性を有する
］~AND［
画像は`可用$であって，~UAは その画像を表示するように環境設定されている
］
◎
If the src attribute is set, and the image is available and the user agent is configured to display that image, then the element represents a control for selecting a coordinate from the image specified by the src attribute.＼
</p>

<p>
加えて，要素が`変異-可能$feならば、
~UAは，次を利用者に許容するベキである
⇒
この`座標を選定する$
◎
In that case, if the element is mutable, the user agent should allow the user to select this coordinate.
</p>
	</li>
	<li>
他の場合、
`alt$a 属性が与える~labelを伴う提出-~button。
◎
Otherwise, the element represents a submit button whose label is given by the value of the alt attribute.
</li>
</ul>

<div class="algo">
<p>
要素~用の`~input作動化の挙動$は、
所与の
( %~event )
に対し，次に従う：
◎
The element's input activation behavior is as follows:
</p>
<ol>
	<li>
~IF［
要素の`~form所有者$ ~EQ ~NULL
］
⇒
~RET
◎
If the element does not have a form owner, then return.
</li>
	<li>
~IF［
要素の`~node文書$は`全部的に作動中$でない
］
⇒
~RET
◎
If the element's node document is not fully active, then return.
</li>
	<li>
<p>
~IF［
利用者は、
座標を明示的に選択しながら，~controlを作動化した
］
⇒
要素の`選定された座標$ ~SET その座標
◎
If the user activated the control while explicitly selecting a coordinate, then set the element's selected coordinate to that coordinate.
</p>

<p class="note">注記：
これがアリになるのは、
上で要旨した条件
— 要素が座標を選択する~controlを`表現-$するとき —
の下に限られる。
そうであっても、
利用者は，座標を明示的に選択することなく~controlを作動化するかもしれない。
◎
This is only possible under the conditions outlined above, when the element represents a control for selecting such a coordinate. Even then, the user might activate the control without explicitly selecting a coordinate.
</p>
	</li>
	<li>
%利用者-関与i ~LET `~event用の~naviに対する利用者-関与i$( %~event )
◎
↓</li>
	<li>
`~formを提出する$( 要素の`~form所有者$, 要素, %利用者-関与i )
◎
Submit the element's form owner from the element with userInvolvement set to event's user navigation involvement.
</li>
</ol>
</div>

<p>
要素の
`選定された座標@
は、
~AND↓ を満たす実数 ( %x, %y ) を表現する 2 個の`妥当な整数$からなり，
初期~時は ( 0, 0 ) になるとする：
◎
The element's selected coordinate consists of an x-component and a y-component. It is initially (0, 0).＼
</p>
<ul>
	<li>
( %x, %y ) は、
要素の画像の座標~空間における位置を表現する。
◎
The coordinates represent the position relative to the edge of the element's image,＼
</li>
	<li>
座標~空間は、
画像の左上隅を~~原点とし，
( %x, %y ) の正な方向は ( 右方, 下方 ) とする。
◎
with the coordinate space having the positive x direction to the right, and the positive y direction downwards.
</li>
	<li>
− ( 左端~border幅 ~PLUS 左端~padding幅 )
~LTE %x ~LTE
( 横幅 ~PLUS 右端~border幅 ~PLUS 右端~padding幅 )
◎
The x-component must be a valid integer representing a number x in the range −(borderleft+paddingleft) ≤ x ≤ width+borderright+paddingright, where width is the rendered width of the image, borderleft is the width of the border on the left of the image, paddingleft is the width of the padding on the left of the image, borderright is the width of the border on the right of the image, and paddingright is the width of the padding on the right of the image, with all dimensions given in CSS pixels.
</li>
	<li>
− ( 上端~border幅 ~PLUS 上端~padding幅 )
~LTE %y ~LTE
( 縦幅 ~PLUS 下端~border幅 ~PLUS 下端~padding幅 )
◎
The y-component must be a valid integer representing a number y in the range −(bordertop+paddingtop) ≤ y ≤ height+borderbottom+paddingbottom, where height is the rendered height of the image, bordertop is the width of the border above the image, paddingtop is the width of the padding above the image, borderbottom is the width of the border below the image, and paddingbottom is the width of the padding below the image, with all dimensions given in CSS pixels.
</li>
</ul>

<p>
ここで，すべての寸法（〜幅）は、
実際に描画された画像の `~CSS~pixel$数による寸法を表すとする。
◎
Where a border or padding is missing, its width is zero CSS pixels.
</p>

<hr>

<p>
次に挙げる属性は、
`~form提出用の属性$である
⇒
`formaction$a,
`formenctype$a,
`formmethod$a,
`formnovalidate$a,
`formtarget$a
◎
The formaction, formenctype, formmethod, formnovalidate, and formtarget attributes are attributes for form submission.
</p>

<dl class="domintro">
	<dt>%image.`width$m [ = %value ]</dt>
	<dt>%image.`height$m [ = %value ]</dt>
	<dd>
これらの属性は、［
実際に描画された画像の寸法が既知であれば それ ／
他の場合は 0
］を返す。
◎
These attributes return the actual rendered dimensions of the image, or 0 if the dimensions are not known.
</dd>
	<dd>
いずれも、
設定して，対応する内容~属性を変更できる。
◎
They can be set, to change the corresponding content attributes.
</dd>
</dl>

<div class="bookkeeping">
`Image^bk

<p>
`value$m ~IDL属性は、
`既定~mode$iになる。
</p>

<p>
要素の `value$a 属性は、
省略されなければナラナイ。
</p>

◎
The following common input element content attributes and IDL attributes apply to the element: alt, formaction, formenctype, formmethod, formnovalidate, formtarget, height, popovertarget, popovertargetaction, src, and width content attributes; value IDL attribute.
◎
The value IDL attribute is in mode default.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, autocomplete, checked, colorspace, dirname, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, and step.
◎
The element's value attribute must be omitted.
◎
The following IDL attributes and methods do not apply to the element: checked, files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods.
◎
The input and change events do not apply.
</div>

<p class="note">注記：
この状態の挙動を成す多くの側面は、
`img$e 要素の挙動に類似する。
読者には、
その節も読むことが奨励される。
同じ要件の多くが，より詳細に述べられているので。
◎
Many aspects of this state's behavior are similar to the behavior of the img element. Readers are encouraged to read that section, where many of the same requirements are described in more detail.
</p>

<div class="example">
<p>
次の~formがあるとする：
◎
Take the following form:
</p>

`Image-1^xCode

<p>
利用者が画像の 座標 ( 127,40 ) を~clickした場合、
~formを提出するときに利用される~URLは，
`process.cgi?where.x=127&amp;where.y=40^l になる。
◎
If the user clicked on the image at coordinate (127,40) then the URL used to submit the form would be "process.cgi?where.x=127&amp;where.y=40".
</p>

<p>
（この例では、
利用者が，~mapではなく "所在~listを示す" と~labelされた~buttonを見ていて，それを~clickした場合には、
~mapから選ぶ代わりに，~serverに所在たちが成す~listを示すようにして、
そこからから選ぶものと見做されている。）
◎
(In this example, it's assumed that for users who don't see the map, and who instead just see a button labeled "Show location list", clicking the button will cause the server to show a list of locations to pick from instead of the map.)
</p>
</div>

					</section>
					<section id="reset-button-state-(type=reset)">
<h6 title="Reset Button state (type=reset)">4.10.5.1.20. `Reset^st 状態（ `type=reset^c ）</h6>

<p>
`Reset$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Reset Button state, the rules in this section apply.
</p>

<p>
◎追跡路
要素は、［
作動化-時に~formを再設定する~button
］を`表現-$する。
~buttonの~labelは、［
要素が `value$a 属性を有するならば その属性の値 ／
~ELSE_ “再設定する” に似た何かを意味する`実装定義$な文字列
］になるモノトスル。
要素は`~button$である。
◎
(This is a tracking vector.)
The input element represents a button that, when activated, resets the form. If the element has a value attribute, the button's label must be the value of that attribute; otherwise, it must be an implementation-defined string that means "Reset" or some such. The element is a button.
</p>

<p class="note">注記：
`Reset^st 状態も、
<a href="#_button-fingerprinting">`Submit^st 状態と同様に</a>
指紋収集の対象にされ得る。
◎
Since the default label is implementation-defined, and the width of the button typically depends on the button's label, the button's width can leak a few bits of fingerprintable information. These bits are likely to be strongly correlated to the identity of the user agent and the user's locale.
</p>

<div class="algo">
<p>
要素~用の`~input作動化の挙動$は、
次に従う
⇒
~IF［
要素の`~form所有者$ ~NEQ ~NULL
］~AND［
要素の`~node文書$は`全部的に作動中$である
］
⇒
`~formを再設定する$( 要素の`~form所有者$ )
◎
The element's input activation behavior is as follows:
• If the element does not have a form owner, then return.
• If the element's node document is not fully active, then return.
• Reset the form owner from the element.
</p>
</div>

<p>
<strong>拘束~検証</strong>
⇒
`拘束~検証の対象外$。
◎
Constraint validation: The element is barred from constraint validation.
</p>

<div class="bookkeeping">
`Reset^bk

<p>
`value$m ~IDL属性は、
`既定~mode$iになる。
</p>

◎
The value IDL attribute applies to this element and is in mode default.
◎
The following common input element content attributes apply to the element: popovertarget and popovertargetaction.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, autocomplete, checked, colorspace, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods.
◎
The input and change events do not apply.
</div>
					</section>
					<section id="button-state-(type=button)">
<h6 title="Button state (type=button)">4.10.5.1.21. `Button^st 状態（ `type=button^c ）</h6>

<p>
`Button$st `状態$にある `input$e 要素に対しては、
この節の規則が適用される。
◎
When an input element's type attribute is in the Button state, the rules in this section apply.
</p>

<p>
要素は、
既定の挙動を伴わない~buttonを`表現-$する。
~buttonの~labelは、
`value$a 属性にて供されなければナラナイ
— 空~文字列でもヨイ。
~buttonの~labelは、［
要素が `value$a 属性を有するならば その値 ／
~ELSE_ 空~文字列
］になるモノトスル。
要素は`~button$である。
◎
The input element represents a button with no default behavior. A label for the button must be provided in the value attribute, though it may be the empty string. If the element has a value attribute, the button's label must be the value of that attribute; otherwise, it must be the empty string. The element is a button.
</p>

<p>
要素~用の`~input作動化の挙動$はない。
◎
The element has no input activation behavior.
</p>

<p>
<strong>拘束~検証</strong>
⇒
`拘束~検証の対象外$。
◎
Constraint validation: The element is barred from constraint validation.
</p>

<div class="bookkeeping">
`Button^bk

<p>
`value$m ~IDL属性は、
`既定~mode$iになる。
</p>

◎
The value IDL attribute applies to this element and is in mode default.
◎
The following common input element content attributes apply to the element: popovertarget and popovertargetaction.
◎
The following content attributes must not be specified and do not apply to the element: accept, alpha, alt, autocomplete, checked, colorspace, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, and width.
◎
The following IDL attributes and methods do not apply to the element: checked, files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods.
◎
The input and change events do not apply.
</div>

					</section>
				</section>
				<section id="input-impl-notes">
<h5 title="Implementation notes regarding localization of form controls">4.10.5.2. ~form~controlの地域化に関する実装~上の注意</h5>

◎非規範的

<p>
［
日付／時刻／実数
］~controlにおいて，利用者に示される形式は、
~form提出に利用される形式に独立である。
◎
The formats shown to the user in date, time, and number controls is independent of the format used for form submission.
</p>

<p>
~browserには、［
`input$e 要素の`言語$が含意する, または
利用者が選好する
］~localeの表記規約に則って［
日付／時刻／実数
］を呈示する~UIを利用することが奨励される。
~pageの~localeを利用すれば、
~pageが供する~dataとの一貫性は確保されることになる。
◎
Browsers are encouraged to use user interfaces that present dates, times, and numbers according to the conventions of either the locale implied by the input element's language or the user's preferred locale. Using the page's locale will ensure consistency with page-provided data.
</p>

<p class="example">
例えば、
ある~American英語の~pageが
"`Cirque De Soleil show was going to be showing on^en <mark>02/03</mark>"
【“〜公演は2月3日から開幕”】
と~~宣伝していて，利用者の~browserが~British英語~localeを利用するように環境設定されている場合、
チケット購入の日付~pickerには日付 "<mark>03/02</mark>" としか示されず、
利用者にとって紛らわしくなる
【利用者は、常識的には，［当の~pageは，その~locale（言語＋地域）の利用者~向けである］と見なす下で日付を解釈するであろう】
。
~pageの~localeを利用すれば、
その日付は世界中どこでも同じ形式で呈示されることが確保される。
（もちろん，利用者が 1 ヶ月後に到着する羽目になる~riskは依然としてあるが、
そのような文化的~相違について行えることは，この程度に限られる…）
◎
For example, it would be confusing to users if an American English page claimed that a Cirque De Soleil show was going to be showing on 02/03, but their browser, configured to use the British English locale, only showed the date 03/02 in the ticket purchase date picker. Using the page's locale would at least ensure that the date was presented in the same format everywhere. (There's still a risk that the user would end up arriving a month late, of course, but there's only so much that can be done about such cultural differences...)
</p>

				</section>
				<section id="common-input-element-attributes">
<h5 title="Common input element attributes">4.10.5.3. `input^e 要素に共通な属性</h5>

<p>
これらの属性は、
`状態$に対する定義にて，当の属性が`適用される$ものと宣言されているものに限り，要素に`適用される$。
`適用されない$場合、
~UAは，以下に与える各種
要件や定義
に関わらず，当の属性を`無視-$するモノトスル。
◎
These attributes only apply to an input element if its type attribute is in a state whose definition declares that the attribute applies. When an attribute doesn't apply to an input element, user agents must ignore the attribute, regardless of the requirements and definitions below.
</p>

					<section id="the-maxlength-and-minlength-attributes">
<h6 title="The maxlength and minlength attributes">4.10.5.3.1. `maxlength^a, `minlength^a 属性</h6>

<p>
`maxlength@a
／
`minlength@a
属性は、
`適用される$ならば，［
<a href="~HTMLforms#attr-fe-minlength">~form~control `minlength^a 属性</a> ／
<a href="~HTMLforms#attr-fe-maxlength">~form~control `maxlength^a 属性</a>
］になる。
◎
The maxlength attribute, when it applies, is a form control maxlength attribute.
◎
The minlength attribute, when it applies, is a form control minlength attribute.
</p>

<p>
%L を要素の`値に許容される最大~長さ$とするとき、［
%L ~NEQ ε
］ならば，［
要素の `value$a 属性の値の`長さ$ ~LTE %L
］でなければナラナイ。
◎
If the input element has a maximum allowed value length, then the length of the value of the element's value attribute must be less than or equal to the element's maximum allowed value length.
</p>

<div class="example">
<p>
~message用~clientの~text手入力を，ある恣意的な固定的な文字~数に制約して、
この媒体を通した会話は簡素で，~~堅い~~論説などは~~抑制するよう強制する例：
◎
The following extract shows how a messaging client's text entry could be arbitrarily restricted to a fixed number of characters, thus forcing any conversation through this medium to be terse and discouraging intelligent discourse.
</p>

`input-impl-notes-1^xCode
</div>

<div class="example">
<p>
~passwordの最小~長さを与える例：
◎
Here, a password is given a minimum length:
</p>

`input-impl-notes-2^xCode
</div>

					</section>
					<section id="the-size-attribute">
<h6 title="The size attribute">4.10.5.3.2. `size^a 属性</h6>

<p>
`size@a
属性は、
利用者が要素の`値$feを編集している間に見れるような，~UAによる視覚-描画における文字~数を与える。
◎
The size attribute gives the number of characters that, in a visual rendering, the user agent is to allow the user to see while editing the element's value.
</p>

<p>
`size$a 属性に指定する値は、
0 でない`妥当な負でない整数$でなければナラナイ。
◎
The size attribute, if specified, must have a value that is a valid non-negative integer greater than zero.
</p>

<p>
属性が在る場合、
~UAは，［
`負でない整数として構文解析する$( 当の属性の値 ) の結果 ~GT 0
］ならば［
結果の文字~数~以上が可視になる
］ことを確保するベキである。
◎
If the attribute is present, then its value must be parsed using the rules for parsing non-negative integers, and if the result is a number greater than zero, then the user agent should ensure that at least that many characters are visible.
</p>

<p>
`size$m ~IDL属性は、
`正な整数のみに制限され$，
`既定の値$は 20 とする。
◎
The size IDL attribute is limited to only positive numbers and has a default value of 20.
</p>

					</section>
					<section id="the-readonly-attribute">
<h6 title="The readonly attribute">4.10.5.3.3. `readonly^a 属性</h6>

<p>
`readonly@a
属性は、
`真偽-属性$であり、
利用者が~form~controlを編集できるか否かを制御する。
この属性を有する要素は、
`変異-可能$feでなくなる。
◎
The readonly attribute is a boolean attribute that controls whether or not the user can edit the form control. When specified, the element is not mutable.
</p>

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

<div class="note">
<p>注記：
一般に、
`readonly$a （読専）を伴う~controlは，依然として機能し得る一方で、
`disabled$a （不能化）を伴う~controlは，可能化されるまでは~controlとして機能しないことにおいて相違する。
これは、
この仕様の他所にて，`不能化され$feる概念を指す規範的~要件とともに より詳細に記される
（例えば、
要素~用の`作動化の挙動$／
`~focus可能な区画$になるかどうか／
`~entry~listを構築する$とき）。
不能化された~controlにおける利用者-ヤリトリに関係する他の挙動
— ~textを選択したり複製できるかどうかなど —
は、
この標準では定義されない。
◎
The difference between disabled and readonly is that read-only controls can still function, whereas disabled controls generally do not function as controls until they are enabled. This is spelled out in more detail elsewhere in this specification with normative requirements that refer to the disabled concept (for example, the element's activation behavior, whether or not it is a focusable area, or when constructing the entry list). Any other behavior related to user interaction with disabled controls, such as whether text can be selected or copied, is not defined in this standard.
</p>

<p>
読専になれるものは，~text~controlに限られる
— 他の~control（~checkboxや~buttonなど）には、［
読専であること, 不能化されていること
］の間に有用な~~区別はなく，
`readonly$a 属性は`適用されない$。
◎
Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply.
</p>
</div>

<div class="example">
<p>
次の例では、
既存の品番は改変できないが、
新たな製品を表現している行（その品番は~~未入力）との一貫性を得るため，~formの一部として表示される。
◎
In the following example, the existing product identifiers cannot be modified, but they are still displayed as part of the form, for consistency with the row representing a new product (where the identifier is not yet filled in).
</p>

`readonly-attribute-1^xCode
</div>

					</section>
					<section id="the-required-attribute">
<h6 title="The required attribute">4.10.5.3.4. `required^a 属性</h6>

<p>
`required@a
属性は`真偽-属性$である。
この属性を有する要素は、
`要求される欄@
になる。
◎
The required attribute is a boolean attribute. When specified, the element is required.
</p>

<div class="p">
<p>
<strong>拘束~検証</strong>
⇒
要素が ~AND↓ を満たしている間は、
`欠落である難あり$になる：
</p>
<ul>
	<li>
`要求される欄$である
</li>
	<li>
その `value$m ~IDL属性は、
`適用される$, かつ`値~mode$iである
</li>
	<li>
`変異-可能$feである
</li>
	<li>
その`値$fe ~EQ 空~文字列
</li>
</ul>
◎
Constraint validation: If the element is required, and its value IDL attribute applies and is in the mode value, and the element is mutable, and the element's value is the empty string, then the element is suffering from being missing.
</div>

<div class="example">
<p>
次の~formには、
~email~address用と~password用に`要求される欄$がある。
また， 3 個目の欄もあり、
~password欄と同じ~passwordを打込んだときに限り，妥当と見なされる。
◎
The following form has two required fields, one for an email address and one for a password. It also has a third field that is only considered valid if the user types the same password in the password field and this third field.
</p>

`required-attribute-1^xCode
</div>

<div class="example">
<p>
~radio~buttonに対しては、
`required$a 属性は，［
それが属する`~radio~button~group$を成す いずれかの~radio~buttonが選択されている
］ときに限り満たされる。
したがって，次の例では、
`要求される欄$だけでなく，どの~radio~buttonも~checkできる：
◎
For radio buttons, the required attribute is satisfied if any of the radio buttons in the group is selected. Thus, in the following example, any of the radio buttons can be checked, not just the one marked as required:
</p>

`required-attribute-2^xCode

<p>
`~radio~button~group$を成す要素たちが`要求される欄$であるか否かについての混同を避けるため、
作者には，この属性をこの~groupを成すすべての~radio~buttonに指定することが奨励される。
一般に，作者には、［
~radio~button~groupを成す どの~controlも初期~時に~checkされていない
］ことを避けることが奨励される。
そのような~UIは、
利用者が元に戻せないので，一般に拙いものと見なされる。
◎
To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. Indeed, in general, authors are encouraged to avoid having radio button groups that do not have any initially checked controls in the first place, as this is a state that the user cannot return to, and is therefore generally considered a poor user interface.
</p>
</div>

					</section>
					<section id="the-multiple-attribute">
<h6 title="The multiple attribute">4.10.5.3.5. `multiple^a 属性</h6>

<p>
`multiple@a
属性は、
利用者が複数の値を指定できるかどうかを指示する`真偽-属性$である。
◎
The multiple attribute is a boolean attribute that indicates whether the user is to be allowed to specify more than one value.
</p>

<div class="example">
<p>
~email~clientの "宛先" 欄に複数の~email~addressも受容させる例：
◎
The following extract shows how an email client's "To" field could accept multiple email addresses.
</p>

`multiple-attribute-1^xCode

<p>
利用者の連絡先~database内に 2 人の友人［
"Spider-Man" （~address "spider@parker.example.net" ）,
"Scarlet Witch" （~address "scarlet@avengers.example.net" ）
］がある場合、
利用者が "s" と打込んだとき，~UAは これらの 2 人の~email~addressを利用者に示唆するであろう。
◎
If the user had, amongst many friends in their user contacts database, two friends "Spider-Man" (with address "spider@parker.example.net") and "Scarlet Witch" (with address "scarlet@avengers.example.net"), then, after the user has typed "s", the user agent might suggest these two email addresses to the user.
</p>

<figure>
<a id="_dgm-sample-email-1"></a>
</figure>

<p>
~pageはまた、
~siteからの 利用者の連絡先~databaseにも~linkさせれる：
◎
The page could also link in the user's contacts database from the site:
</p>

`multiple-attribute-2^xCode

<p>
利用者は、
この~text~controlの中へ
"<kbd>bob@example.net</kbd>"
を手入力したとして、
"<kbd>a</kbd>" 【！ ＊"s"？】から開始される 2 個目の~email~addressを打込み始めたとする。
~UAは、
先に言及した 2 人の友人に加え，
`datalist$e 要素~内に与えられている値［
"astrophy@...", "astronomy@..."
］も示すであろう。
◎
Suppose the user had entered "bob@example.net" into this text control, and then started typing a second email address starting with "s". The user agent might show both the two friends mentioned earlier, as well as the "astrophy" and "astronomy" values given in the datalist element.
</p>

<figure>
<a id="_dgm-sample-email-2"></a>
</figure>
</div>

<div class="example">
<p>
~email~clientの "添付" 欄に，複数の~fileも~upload用に受容させる例：
◎
The following extract shows how an email client's "Attachments" field could accept multiple files for upload.
</p>

`multiple-attribute-3^xCode
</div>

					</section>
					<section id="the-pattern-attribute">
<h6 title="The pattern attribute">4.10.5.3.6. `pattern^a 属性</h6>

<p>
`pattern@a
属性は、
正規表現を指定する。
~controlの`値$fe
— あるいは、
［
要素が `multiple$a 属性を有する
］~AND［
要素の`状態$に `multiple$a 属性は`適用される$
］ならば，~controlの`値~群$fe —
は、
この正規表現と突き合わせて検査されることになる。
◎
The pattern attribute specifies a regular expression against which the control's value, or, when the multiple attribute applies and is set, the control's values, are to be checked.
</p>

<p>
この属性に指定する値は、［
~JS `Pattern$P<sub><code>[+UnicodeSetsMode, +N]</code></sub> 生成規則
］に合致しなければナラナイ。
◎
If specified, the attribute's value must match the JavaScript Pattern[+UnicodeSetsMode, +N] production.
</p>

<div class="algo">
<p>
%要素 の
`~compile済み~patternによる正規表現@
は、［
~JS `RegExp$c ~obj／ ε （存在しない）
］であり，次に従って決定される：
◎
The compiled pattern regular expression of an input element, if it exists, is a JavaScript RegExp object. It is determined as follows:
</p>
<ol>
	<li>
~IF［
%要素 は `pattern$a 属性を有していない
］
⇒
~RET ε
◎
If the element does not have a pattern attribute specified, then return nothing. The element has no compiled pattern regular expression.
</li>
	<li>
%~pattern ~LET %要素 の `pattern$a 属性の値
◎
Let pattern be the value of the pattern attribute of the element.
</li>
	<li>
%~regexp完了 ~LET `RegExpCreate$jA( %~pattern, `v^l )
◎
Let regexpCompletion be RegExpCreate(pattern, "v").
</li>
	<li>
<p>
~IF［
%~regexp完了 は`中途完了$である
］
⇒
~RET ε
◎
If regexpCompletion is an abrupt completion, then return nothing. The element has no compiled pattern regular expression.
</p>

<p class="note">注記：
~debug法を援助するため、
~UAには，この~errorを開発者~console内に~logすることが奨励される。
◎
User agents are encouraged to log this error in a developer console, to aid debugging.
</p>
	</li>
	<li>
%起点付き~pattern ~LET 次を順に`連結する$
⇒＃
"<code class="literal">^(?:</code>",
%~pattern,
"<code class="literal">)$</code>"
◎
Let anchoredPattern be the string "^(?:", followed by pattern, followed by ")$".
</li>
	<li>
~RET ~NOABRUPT `RegExpCreate$jA( %起点付き~pattern, `v^l )
◎
Return ! RegExpCreate(anchoredPattern, "v").
</li>
</ol>

<div class="note">
<p>注記：
この手続きの背後にある理由は、
`pattern$a 属性の値に対し
— それを ただ直に利用する代わりに —
次の両面を確保するよう求まれることにある：
◎
The reasoning behind these steps, instead of just using the value of the pattern attribute directly, is twofold.＼
</p>
<ul>
	<li>
文字列と照合するとき，正規表現の［
始端／終端
］は文字列の［
始端／終端
］を起点にすること。
◎
First, we want to ensure that when matched against a string, the regular expression's start is anchored to the start of the string and its end to the end of the string.＼
</li>
	<li>
正規表現が自立的な形として妥当になること
— ［
前／後
］を起点［
"<code class="literal">^(?:</code>" ／
"<code class="literal">)$</code>"
］で括った後でしか妥当にならなくなる代わりに。
◎
Second, we want to ensure that the regular expression is valid in standalone form, instead of only becoming valid after being surrounded by the "^(?:" and ")$" anchors.
</li>
</ul>
</div>
</div>

<div class="algo">
<p>
文字列 %入力 が `RegExp$c ~obj %~regexp に
`合致して@
いるとは、
次を満たされることをいう
⇒
~NOABRUPT `RegExpBuiltinExec$jA( %~regexp, %入力 ) ~NEQ ~NULL
◎
A RegExp object regexp matches a string input, if ! RegExpBuiltinExec(regexp, input) is not null.
</p>
</div>

<div class="p">

<p>
<strong>拘束~検証</strong>
⇒
要素が ~AND↓ を満たしている間は、
`~pattern不一致の難あり$になる：
</p>
<ul>
	<li>
その`値$fe ~NEQ 空~文字列
</li>
	<li>
その`~compile済み~patternによる正規表現$ ~NEQ ε
</li>
	<li>
<p>
~OR↓：
</p>
		<ul>
			<li>
［
下に与える条件を満たさない
］~AND［
その`値$feは正規表現に`合致して$いない
］
</li>
			<li>
［
下に与える条件を満たす
］~AND［
その`値~群$feを成す ある値【！each of】は正規表現に`合致して$いない
］
</li>
		</ul>
<p>
ここでの条件は
⇒
`multiple$a 属性を有していて，それは要素の現在の`状態$に`適用される$
</p>
	</li>
</ul>
◎
Constraint validation: If the element's value is not the empty string, and either the element's multiple attribute is not specified or it does not apply to the input element given its type attribute's current state, and the element has a compiled pattern regular expression but that regular expression does not match the element's value, then the element is suffering from a pattern mismatch.
◎
Constraint validation: If the element's value is not the empty string, and the element's multiple attribute is specified and applies to the input element, and the element has a compiled pattern regular expression but that regular expression does not match each of the element's values, then the element is suffering from a pattern mismatch.
</div>

<p>
作者は、
要素に `pattern$a 属性を指定する場合は，~patternの記述を与える
`title@a
属性も与えるベキである。
~UAは、
`title^a 属性が在るならば その内容を［
~patternに合致していないことを利用者に伝えるとき, その他の相応しい時機
］に利用してもヨイ
— ~controlが`~focusを得た$とき~tooltipに示す／
支援技術により読み上げるなど。
◎
When an input element has a pattern attribute specified, authors should include a title attribute to give a description of the pattern. User agents may use the contents of this attribute, if it is present, when informing the user that the pattern is not matched, or at any other suitable time, such as in a tooltip or read out by assistive technology when the control gains focus.
</p>

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

`pattern-attribute-1^xCode

<p>
~UAは、
次のような~alertを表示することもできる：
◎
...could cause the UA to display an alert such as:
</p>

<p><samp>部品~番号は、
先頭の数字に 3 個の大文字を続けます。この欄が不正な間は、
~formを提出できません。</samp>
◎
A part number is a digit followed by three uppercase letters.
You cannot submit this form when the field is incorrect.
</p>
</div>

<p>
~controlが `pattern$a 属性を有する下で，
`title$a 属性を利用する場合、
それは，~patternについて述べていなければナラナイ。
利用者が~controlを埋めることを支援するものである限り，追加的な情報も含めれる。
さもなければ、
支援技術は損なわれることになる。
◎
When a control has a pattern attribute, the title attribute, if used, must describe the pattern. Additional information could also be included, so long as it assists the user in filling in the control. Otherwise, assistive technology would be impaired.
</p>

<p class="example">
一例として， `title^a 属性が~controlの~caption
— 例えば “誕生日” であったとする —
を包含していた場合、
支援技術は，次の様な何かを言う結果になるが、
これでは有用にならない
⇒
<samp>あなたが手入力した~textは、
要求される~patternに合致しません。誕生日</samp>
◎
For instance, if the title attribute contained the caption of the control, assistive technology could end up saying something like The text you have entered does not match the required pattern. Birthday, which is not useful.
</p>

<p>
~UAは、
~errorでない状況においても `~titleG$a を示してヨイ
（例えば、
~controlを~hoverしたときに~tooltipとして）。
なので，作者は、
`title$a を［
~errorが必ず生じているかのような文面
］にしないよう気を付けるべきである。
◎
UAs may still show the title in non-error situations (for example, as a tooltip when hovering over the control), so authors should be careful not to word titles as if an error has necessarily occurred.
</p>

					</section>
					<section id="the-min-and-max-attributes">
<h6 title="The min and max attributes">4.10.5.3.7. `min^a, `max^a 属性</h6>

<p>
~form~controlには、
利用者が供せる値の範囲を制限するような，明示的な拘束が適用されるものもある。
そのような範囲は，通常は連続的になるが、
`周期的範囲@
にもなり得る
— その事例では、
~controlがとり得る最も幅広な範囲は有限であり、
作者は，その中に境界をまたぐような明示的な範囲を指定できる。
◎
Some form controls can have explicit constraints applied limiting the allowed range of values that the user can provide. Normally, such a range would be linear and continuous. A form control can have a periodic domain, however, in which case the form control's broadest possible range is finite, and authors can specify explicit ranges within it that span the boundaries.
</p>

<p class="example">
特定的には、
`Time$st 状態にある~controlの最も幅広な範囲は，午前 0 時から次の午前 0 時~直前まで（ 24 ~~時間 ）になるが、
作者は、
連続的な範囲（ 午後 9 時 〜 午後 11 時など）のみならず，午前 0 時をまたぐ不連続な範囲（ 午後 11 〜 午前 1 時など）も設定できる。
◎
Specifically, the broadest range of a type=time control is midnight to midnight (24 hours), and authors can set both continuous linear ranges (such as 9pm to 11pm) and discontinuous ranges spanning midnight (such as 11pm to 1am).
</p>

<p>
`min@a
／
`max@a
属性は、
要素に許容される値の範囲を指示する。
◎
The min and max attributes indicate the allowed range of values for the element.
</p>

<p>
それらの構文は、
`状態$ごとに，それを定義する節にて定義される。
◎
Their syntax is defined by the section that defines the type attribute's current state.
</p>

<div class="algo">
<p>
要素の
`最小@
は、
次を遂行した結果とする：
</p>
<ol>
	<li>
<p>
~IF［
要素は `min$a 属性を有する
］：
</p>
		<ol>
			<li>
%結果 ~LET `文字列から実数に変換する$( `min$a 属性の値 )
</li>
			<li>
~IF［
%結果 ~NEQ `~error^i
］
⇒
~RET %結果
</li>
		</ol>
	</li>
	<li>
~RET 要素の現在の`状態$は
`既定の最小@
を定義して［
いるならば それ ／
いないならば −∞ （どの実数よりも小さい値）
］
</li>
</ol>
◎
If the element has a min attribute, and the result of applying the algorithm to convert a string to a number to the value of the min attribute is a number, then that number is the element's minimum; otherwise, if the type attribute's current state defines a default minimum, then that is the minimum; otherwise, the element has no minimum.
</div>

<p>
`min$a 属性は、
`~step基底$も定義する。
◎
The min attribute also defines the step base.
</p>

<div class="algo">
<p>
要素の
`最大@
は、
次を遂行した結果とする：
</p>
<ol>
	<li>
<p>
~IF［
要素は `max$a 属性を有する
］：
</p>
		<ol>
			<li>
%結果 ~LET `文字列から実数に変換する$( `max$a 属性の値 )
</li>
			<li>
~IF［
%結果 ~NEQ `~error^i
］
⇒
~RET %結果
</li>
		</ol>
	</li>
	<li>
~RET 要素の現在の`状態$は
`既定の最大@
を定義して［
いるならば それ ／
いないならば +∞ （どの実数よりも大きい値）
］
</li>
</ol>
◎
If the element has a max attribute, and the result of applying the algorithm to convert a string to a number to the value of the max attribute is a number, then that number is the element's maximum; otherwise, if the type attribute's current state defines a default maximum, then that is the maximum; otherwise, the element has no maximum.
</div>

<p class="trans-note">【
［
最小~用の値 −∞,
最大~用の値 +∞
］は、
要件の記述を簡潔にするために，この訳に導入したもの
（原文では、単に “なし” ）。
】</p>

<p>
要素は、
次を満たさなければナラナイ
⇒
［
`周期的範囲$である
］~OR［
その`最小$【！#attr-input-min】 ~LTE その`最大$【！#attr-input-max】
］
◎
If the element does not have a periodic domain, the max attribute's value (the maximum) must not be less than the min attribute's value (its minimum).
</p>

<p class="note">注記：
この条件を満たさない要素は、
`値$feを有する限り，［
`~underflowの難あり$か`~overflowの難あり$
］になる。
◎
If an element that does not have a periodic domain has a maximum that is less than its minimum, then so long as the element has a value, it will either be suffering from an underflow or suffering from an overflow.
</p>

<p>
次を満たす要素は、
`範囲は裏返されて@
いるとされる
⇒
［
`周期的範囲$である
］~AND［
`最大$ ~LT `最小$
］
◎
An element has a reversed range if it has a periodic domain and its maximum is less than its minimum.
</p>

<p>
次を満たす要素は、
`範囲~制限がある@
とされる
⇒
［
`最大$ ~NEQ +∞
］~OR［
`最小$ ~NEQ −∞
］
◎
An element has range limitations if it has a defined minimum or a defined maximum.
</p>

<p>
<strong>拘束~検証</strong>：
◎
↓</p>
<ul>
	<li>
<p>
要素が ~AND↓ を満たしている間は、
`~underflowの難あり$になる：
</p>
		<ul>
			<li>
`範囲は裏返されて$いない
</li>
			<li>
`文字列から実数に変換する$( その`値$fe ) ~NEQ `~error^i
</li>
			<li>
前項の結果 ~LT その`最小$【！#attr-input-min】
</li>
		</ul>
◎
Constraint validation: When the element has a minimum and does not have a reversed range, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and the number obtained from that algorithm is less than the minimum, the element is suffering from an underflow.
</li>
	<li>
<p>
要素が ~AND↓ を満たしている間は、
`~overflowの難あり$になる：
</p>
		<ul>
			<li>
`範囲は裏返されて$いない
</li>
			<li>
`文字列から実数に変換する$( その`値$fe ) ~NEQ `~error^i
</li>
			<li>
その`最大$【！#attr-input-max】 ~LT 前項の結果
</li>
		</ul>
◎
Constraint validation: When the element has a maximum and does not have a reversed range, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and the number obtained from that algorithm is more than the maximum, the element is suffering from an overflow.
</li>
	<li>
<p>
要素が ~AND↓ を満たしている間は、
`~underflowの難あり$であると同時に`~overflowの難あり$になる：
</p>
		<ul>
			<li>
`範囲は裏返されて$いる
</li>
			<li>
`文字列から実数に変換する$( その`値$fe ) ~NEQ `~error^i
</li>
			<li>
その`最大$【！#attr-input-max】 ~LT 前項の結果 ~LT その`最小$【！#attr-input-min】
</li>
		</ul>
◎
Constraint validation: When an element has a reversed range, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and the number obtained from that algorithm is more than the maximum and less than the minimum, the element is simultaneously suffering from an underflow and suffering from an overflow.
</li>
</ul>

<div class="example">
<p>
次の日付~controlは、
入力を 1980 年より前の日付に制限する：
◎
The following date control limits input to dates that are before the 1980s:
</p>

`min-max-attribute-1^xCode
</div>

<div class="example">
<p>
次の数~controlは、
入力を正整数に制限する：
◎
The following number control limits input to whole numbers greater than zero:
</p>

`min-max-attribute-2^xCode
</div>

<div class="example">
<p>
次の時刻~controlは、
入力を［
午後 9 時 〜 午前 6 時
］の間に生する分t~数に制限し，午前 0 時を既定にする：
◎
The following time control limits input to those minutes that occur between 9pm and 6am, defaulting to midnight:
</p>

`min-max-attribute-3^xCode
</div>

					</section>
					<section id="the-step-attribute">
<h6 title="The step attribute">4.10.5.3.8. `step^a 属性</h6>

<p>
`step@a
属性は、
許容される値を制限することにより，［
`値$fe／`値~群$fe
］に期待される（かつ要求される）粒度を指示する。
以下に述べる属性の処理では、
`既定の~step@,
`~step倍率@
が
— および，一部の事例では
`既定の~step基底@
も —
利用される。
これらは、
`状態$ごとに，それを定義する節にて定義される。
◎
The step attribute indicates the granularity that is expected (and required) of the value or values, by limiting the allowed values. The section that defines the type attribute's current state also defines the default step, the step scale factor, and in some cases the default step base, which are used in processing the attribute as described below.
</p>

<p class="trans-note">【
［
既定の~step, ~step倍率
］どちらも、
定義されるならば，正な実数。
】</p>

<div class="p">
<p>
`step$a 属性に指定する値は、
~OR↓ を満たさなければナラナイ：
</p>
<ul>
	<li>
［
`妥当な浮動小数点数$である
］~AND［
`浮動小数点数として構文解析する$( 当の値 ) の結果 ~GT 0
］
</li>
	<li>
`~ASCII大小無視$で文字列 `any^l に合致する
</li>
</ul>
◎
The step attribute, if specified, must either have a value that is a valid floating-point number that parses to a number that is greater than zero, or must have a value that is an ASCII case-insensitive match for the string "any".
</div>

<div class="algo">
<p>
`step$a 属性 %属性 は、
要素に
`許容される値~step@
を供する
— それは、
次に従って得られる［
実数／ ε （無し）
］である：
◎
The attribute provides the allowed value step for the element, as follows:
</p>
<ol>
	<li>
~IF［
%属性 は要素に`適用されない$【！`適用される$でない】
］
⇒
~RET ε
◎
If the attribute does not apply, then there is no allowed value step.
</li>
	<li>
~IF［
要素は %属性 を有さない
］
⇒
~RET `既定の~step$ ~MUL `~step倍率$
◎
Otherwise, if the attribute is absent, then the allowed value step is the default step multiplied by the step scale factor.
</li>
	<li>
~IF［
%属性 の値 は`~ASCII大小無視$で文字列 `any^l に合致する
］
⇒
~RET ε
◎
Otherwise, if the attribute's value is an ASCII case-insensitive match for the string "any", then there is no allowed value step.
</li>
	<li>
%~step ~LET `浮動小数点数として構文解析する$( %属性 の値 )
◎
↓</li>
	<li>
~IF［
%~step ~EQ `失敗^i
］~OR［
%~step ~LTE 0
］
⇒
~RET `既定の~step$ ~MUL `~step倍率$
◎
Otherwise, if the rules for parsing floating-point number values, when they are applied to the attribute's value, return an error, zero, or a number less than zero, then the allowed value step is the default step multiplied by the step scale factor.
</li>
	<li>
~RET %~step ~MUL `~step倍率$
◎
Otherwise, the allowed value step is the number returned by the rules for parsing floating-point number values when they are applied to the attribute's value, multiplied by the step scale factor.
</li>
</ol>
</div>

<div class="algo">
<p>
`~step基底@
は、
次の~algoが返す値である：
◎
The step base is the value returned by the following algorithm:
</p>
<ol>
	<li>
~IF［
要素は `min$a 内容~属性を有する
］~AND［
`文字列から実数に変換する$( 属性の値 ) ~NEQ `~error^i
］
⇒
~RET その結果
◎
If the element has a min content attribute, and the result of applying the algorithm to convert a string to a number to the value of the min content attribute is not an error, then return that result.
</li>
	<li>
~IF［
要素は `value$a 内容~属性を有する
］~AND［
`文字列から実数に変換する$( 属性の値 ) ~NEQ `~error^i
］
⇒
~RET その結果
◎
If the element has a value content attribute, and the result of applying the algorithm to convert a string to a number to the value of the value content attribute is not an error, then return that result.
</li>
	<li>
~IF［
要素の`状態$に`既定の~step基底$は定義されている
］
⇒
~RET それ
◎
If a default step base is defined for this element given its type attribute's state, then return it.
</li>
	<li>
~RET 0
◎
Return zero.
</li>
</ol>
</div>

<div>
<p>
<strong>拘束~検証</strong>
⇒
要素が ~AND↓ を満たしている間は、
`~step不一致の難あり$になる：
</p>
<ul>
	<li>
その`許容される値~step$ ~NEQ ε
</li>
	<li>
次の結果 ~NEQ `~error^i
⇒
`文字列から実数に変換する$( その`値$fe )
</li>
	<li>
( `~step基底$ ~MINUS 前項の結果 )
は，その`許容される値~step$の整数倍でない
</li>
</ul>
◎
Constraint validation: When the element has an allowed value step, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and that number subtracted from the step base is not an integral multiple of the allowed value step, the element is suffering from a step mismatch.
</div>

<div class="example">
<p>
次の範囲~controlは、
0 以上 1 以下の範囲に入る値に限り受容し，
その範囲~内で 256 ~stepを許容する：
◎
The following range control only accepts values in the range 0..1, and allows 256 steps in that range:
</p>

`step-attribute-1^xCode
</div>

<div class="example">
<p>
次の~controlは、［
ある 1 日tの中の任意の時刻を任意の（例えば 1000 分の 1 秒より細かい）~~精度で選択する
］ことを許容する：
◎
The following control allows any time in the day to be selected, with any accuracy (e.g. thousandth-of-a-second accuracy or more):
</p>

`step-attribute-2^xCode

<p>
時刻~controlの~~精度は、
通常は 1 分tに制限される。
◎
Normally, time controls are limited to an accuracy of one minute.
</p>
</div>

					</section>
					<section id="the-list-attribute">
<h6 title="The list attribute">4.10.5.3.9. `list^a 属性</h6>

<p>
`list@a
属性は、［
利用者に示唆される定義済み選択肢を~listする要素
］を識別するために利用される。
◎
The list attribute is used to identify an element that lists predefined options suggested to the user.
</p>

<p>
この属性に指定する値は、
同じ`文書~tree内$にある `datalist$e 要素の`~ID$を与えていなければナラナイ。
◎
If present, its value must be the ID of a datalist element in the same tree.
</p>

<div class="p">
<p>
`示唆~source要素@
は、
~AND↓ を満たす要素は［
在るならば それ／
無いならば ε
］とする。
</p>
<ul>
	<li>
`文書~tree内$の要素のうち［
`~ID$ ~EQ `list$a 属性の値
］を満たすもののうち，`~tree順序$で最初の要素である
【すなわち、 `document.getElementById( ID )^m が返す要素。】
</li>
	<li>
`datalist$e 要素である
</li>
</ul>
◎
The suggestions source element is the first element in the tree in tree order to have an ID equal to the value of the list attribute, if that element is a datalist element. If there is no list attribute, or if there is no element with that ID, or if the first element with that ID is not a datalist element, then there is no suggestions source element.
</div>

<p>
［
`示唆~source要素$ ~NEQ ε
］の場合、
~UAは：
◎
If there is a suggestions source element, then,＼
</p>
<ul>
	<li>
要素の`値$feを編集することを利用者に許容しているときは、［
利用されている~controlの型に相応しい方式
］で［
`示唆~source要素$が表現する示唆
］を利用者に提供するベキである。
◎
when the user agent is allowing the user to edit the input element's value, the user agent should offer the suggestions represented by the suggestions source element to the user in a manner suitable for the type of control used.＼
</li>
	<li>
適切になる場合は、
示唆の［
`~label$opt, `値$opt
］を利用して，利用者~向けの示唆を識別するベキである。
◎
If appropriate, the user agent should use the suggestion's label and value to identify the suggestion to the user.
</li>
	<li>
示唆の個数が多い場合、［
`示唆~source要素$が表現する示唆のうち，最も関連なもの
］に限り含めるよう絞込むことが奨励される
（例：利用者の入力に基づいて）。
精確な閾値は定義されないが、
4 〜 7 個くらいに抑えるのが適度であろう。
◎
User agents are encouraged to filter the suggestions represented by the suggestions source element when the number of suggestions is large, including only the most relevant ones (e.g. based on the user's input so far). No precise threshold is defined, but capping the list at four to seven values is reasonable.＼
</li>
	<li>
<p>
利用者からの入力に基づいて絞込むときは、
示唆の［
`~label$opt, `値$opt
］両者の中で合致するものを探索するベキである。
入力の変動がこの照合~処理nにどう影響するかを考慮するベキである：
◎
If filtering based on the user's input, user agents should search within both the label and value of the suggestions for matches.＼
</p>
		<ul>
			<li>
~Unicode正規化は、
適用するベキである
— ~keyboardや入力に特有な仕組みが異なることにより，下層の~Unicode符号位置~並びが異なっても、
照合~処理nには干渉しないよう。
◎
User agents should consider how input variations affect the matching process. Unicode normalization should be applied so that different underlying Unicode code point sequences, caused by different keyboard- or input-specific mechanisms, do not interfere with the matching process.＼
</li>
			<li>
文字大小の変動は無視するベキである
— そのためには、
言語に特有な文字大小~対応付けが要求され得る。
例えば `CHARMODNORM$r を見よ。
◎
Case variations should be ignored, which may require language-specific case mapping. For examples of these, see Character Model for the World Wide Web: String Matching.＼
</li>
			<li>
他の照合~特能を供してもヨイ
— 少数の~~具体例を挙げるなら、［
形が異なる仮名（あるいは漢字）を合致させる【旧字体と新字体など】／
発音区別符を無視する／
綴りの誤りを正す
］など。
◎
User agents may also provide other matching features: for illustration, a few examples include matching different forms of kana to each other (or to kanji), ignoring accents, or applying spelling correction. [CHARMODNORM]
</li>
		</ul>
	</li>
</ul>

<div class="example">
<p>
次の~text欄では、
~JS関数の種別を選べる：
◎
This text field allows you to choose a type of JavaScript function.
</p>

`list-attribute-1^xCode

<p>
上述の示唆に従う~UAにおいては、［
`~label$opt, `値$opt
］どちらも示される：
◎
For user agents that follow the above suggestions, both the label and value would be shown:
</p>

<figure>
<figcaption id="_dgm-sample-datalist">
~text~boxの右端には~drop-down~buttonがあり，その下に~drop-down~boxがある。
~boxは、
左端に 6 個の値からなる~list, 右端に 6 個の~labelからなる~listを包含している。
◎
A text box with a drop down button on the right hand side; with, below, a drop down box containing a list of the six values the left and the six labels on the right.
</figcaption></figure>

<p>
ここで，
"<kbd>arrow</kbd>" または "<kbd>=&gt;</kbd>"
と打込むと、
この~listは，~labelに
"arrow function" ／ "async arrow function"
を伴う~entryに絞込まれる。
"<kbd>generator</kbd>" または "<kbd>*</kbd>"
と打込むと、
~labelに
"generator function" ／ "async generator function"
を伴う~entryに絞込まれる。
◎
Then, typing "arrow" or "=&gt;" would filter the list to the entries with labels "arrow function" and "async arrow function". Typing "generator" or "*" would filter the list to the entries with labels "generator function" and "async generator function".
</p>
</div>

<p class="note">注記：
~~通例と同じく、
~UAは，［
特定0の［
要件, 利用者の事情
］の組み合わせに応じて，どれが~UIにおいて適切になるか
］について裁定を為してかまわない。
しかしながら、
これは，歴史的に［
実装者, ~web開発者, 利用者~等
］にとって混同の元になる~~領域なので、
上述は “〜するベキ” 示唆として与えられている。
◎
As always, user agents are free to make user interface decisions which are appropriate for their particular requirements and for the user's particular circumstances. However, this has historically been an area of confusion for implementers, web developers, and users alike, so we've given some "should" suggestions above.
</p>

<p>
利用者が ある示唆を選択したとき，
その`値$opt %値 を~UAがどう取扱うかは、
要素が複数の値を受容するかどうかに依存する：
◎
How user selections of suggestions are handled depends on whether the element is a control accepting a single value only, or whether it accepts multiple values:
</p>

<dl class="switch">
	<dt>
要素は `multiple$a 属性を有さない場合
◎
If the element does not have a multiple attribute specified or＼
</dt>
	<dt>
要素には `multiple$a 属性は`適用されない$場合
◎
if the multiple attribute does not apply
</dt>
	<dd>
要素の`値$feを %値 に設定するモノトスル
— 利用者~自身が %値 を手入力したかのように。
◎
When the user selects a suggestion, the input element's value must be set to the selected suggestion's value, as if the user had written that value themself.
</dd>

	<dt>
［
要素は `Email$st `状態$にある
］~AND［
要素は `multiple$a 属性を有する
］場合：
◎
If the element's type attribute is in the Email state and the element has a multiple attribute specified
</dt>
	<dd>
<p>
次のいずれかを行うモノトスル
— 利用者~自身が それを行ったかのように：
◎
When the user selects a suggestion, the user agent must either＼
</p>
		<ul>
			<li>
要素の`値~群$feに［
%値 を値にとる新たな~entry
］を追加する。
◎
add a new entry to the input element's values, whose value is the selected suggestion's value,＼
</li>
			<li>
要素の`値~群$feを成す既存の~entryの値を %値 に変更する。
◎
or change an existing entry in the input element's values to have the value given by the selected suggestion's value,＼
</li>
		</ul>
<p>
どちらの挙動が適用されるかは、
`実装定義$な方式で，~UIに依存する。
◎
↑ as if the user had themself added an entry with that value, or edited an existing entry to be that value.＼
Which behavior is to be applied depends on the user interface in an implementation-defined manner.
</p>
	</dd>
</dl>

<hr>

<p>
`list$a 属性が`適用されない$場合、
`示唆~source要素$は無い。
◎
If the list attribute does not apply, there is no suggestions source element.
</p>

<div class="example">
<p>
何らかの示唆を提供する~URL欄の例：
◎
This URL field offers some suggestions.
</p>

`list-attribute-2^xCode

<p>
利用者の履歴から 他の~URLを示すこともあり得る
— それは~UAに委ねられる。
◎
Other URLs from the user's history might show also; this is up to the user agent.
</p>
</div>

<div class="example">
<p>
以下の例は、
自動補完~list特能を利用する~formを，旧来の~UAでも有用に退化するように設計する方法をデモる。
◎
This example demonstrates how to design a form that uses the autocompletion list feature while still degrading usefully in legacy user agents.
</p>

<p>
自動補完~listが単なる援助で，内容には重要でない場合、
単純に［
子 `option$e 要素を伴う `datalist$e 要素
］を利用することで十分になる。
旧来の~UAで値が描画されるのを防止するためには、
それらは，~inlineではなく `~valueO$a 属性の内側に置かれる必要がある。
◎
If the autocompletion list is merely an aid, and is not important to the content, then simply using a datalist element with children option elements is enough. To prevent the values from being rendered in legacy user agents, they need to be placed inside the value attribute instead of inline.
</p>

`list-attribute-3^xCode

<p>
しかしながら，旧来の~UAでも それらの値を示す必要がある場合、
`datalist$e 要素の内側に~fallback内容を置ける
— 次のように：
◎
However, if the values need to be shown in legacy UAs, then fallback content can be placed inside the datalist element, as follows:
</p>

`list-attribute-4^xCode

<p>
~fallback内容は、
`datalist$e を~supportしない~UAに限って示されることになる。
他方，各~選択肢（ `option^e ）は、
`datalist$e 要素の子でなくても，すべての~UAから検出されることになる。
◎
The fallback content will only be shown in UAs that don't support datalist. The options, on the other hand, will be detected by all UAs, even though they are not children of the datalist element.
</p>

<p>
`datalist$e  要素~内に利用された `option$e 要素が `selected$a 属性を有する場合、
旧来の~UAにおいては，既定では その `option$e が選択されることになるが
（それは `select$e 要素に影響するので）、
`datalist$e を~supportする~UAにおいては，
`input$e 要素に対する効果は無いことに注意。
◎
Note that if an option element used in a datalist is selected, it will be selected by default by legacy UAs (because it affects the select element), but it will not have any effect on the input element in UAs that support datalist.
</p>
</div>

					</section>
					<section id="the-placeholder-attribute">
<h6 title="The placeholder attribute">4.10.5.3.10. `placeholder^a 属性</h6>

<p>
`placeholder@a
属性は、
<em>短い</em> ~hint（または単語や短い句）
— ~controlが値を有さないとき，利用者を援助する~dataとして意図される~hint —
を表現する。
この~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. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.
</p>

<p>
`placeholder$a 属性は `label$e の代替として利用されるベキでない。
より長い~hintや他の助言的~textには、
`~titleG$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>
`~titleG$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 ~EQ 空~文字列
］のときは，この~hintを
— その`改行文字を剥いで＠~INFRA#strip-newlines$から —
利用者に呈示するベキである
— とりわけ、
~controlが`~focus$されていないときには。
◎
User agents should present this hint to the user, after having stripped newlines from it, when the element's value is the empty string, especially if the control is not focused.
</p>

<p>
~UAは、
~controlが `autofocus$a 属性の結果として~focusされたときは，
この~hintを示すベキである
— 通常の`~focus$時には、
この~hintを利用者に示さない~UAであっても。
この事例では、［
~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>

<div class="example">
<p>
`placeholder$a 属性を利用する~email環境設定~UIの例：
◎
Here is an example of a mail configuration user interface that uses the placeholder attribute:
</p>

`placeholder-attribute-1^xCode
</div>

<div class="example">
<p>
~controlの内容は双方向的ではなくとも，
`placeholder$a 属性の値を双方向的にする必要がある状況においては、
~Unicodeの双方向-~algo整形~文字を利用できる：
◎
In situations where the control's content has one directionality but the placeholder needs to have a different directionality, Unicode's bidirectional-algorithm formatting characters can be used in the attribute value:
</p>

<pre class="lang-html">
&lt;input name=t1 type=tel placeholder="<mark>&amp;#x202B;</mark>&thinsp;<bdo dir="rtl">&#1585;&#1602;&#1605;&nbsp;&#1575;&#1604;&#1607;&#1575;&#1578;&#1601;&nbsp;1</bdo>&thinsp;<mark>&amp;#x202E;</mark>"&gt;
&lt;input name=t2 type=tel placeholder="<mark>&amp;#x202B;</mark>&thinsp;<bdo dir="rtl">&#1585;&#1602;&#1605;&nbsp;&#1575;&#1604;&#1607;&#1575;&#1578;&#1601;&nbsp;2</bdo>&thinsp;<mark>&amp;#x202E;</mark>"&gt;
</pre>

<p>
同じ例を、
~inlineな~Arabicに代えて数量-文字~参照を利用して，もう少し明確に記すなら：
◎
For slightly more clarity, here's the same example using numeric character references instead of inline Arabic:
</p>

`placeholder-attribute-3^xCode
</div>

					</section>
				</section>
				<section id="common-input-element-apis">
<h5 title="Common input element APIs">4.10.5.4.  `input^e 要素に共通な~API</h5>

<dl class="domintro">
	<dt>%input.`value$m [ = %value ]</dt>
	<dd>
現在の~controlの`値$feを返す。
◎
Returns the current value of the form control.
</dd>
	<dd>
設定して，値を変更できる。
◎
Can be set, to change the value.
</dd>
	<dd>
`File$st ~controlに対しては、
空~文字列~以外の値に設定されたときは， `InvalidStateError$E 例外を投出する。
◎
Throws an "InvalidStateError" DOMException if it is set to any value other than the empty string when the control is a file upload control.
</dd>

	<dt>%input.`checked$m [ = %value ]</dt>
	<dd>
~controlの現在の `~check有りか$feを返す。
◎
Returns the current checkedness of the form control.
</dd>
	<dd>
設定して，`~check有りか$feを変更できる。
◎
Can be set, to change the checkedness.
</dd>

	<dt>%input.`files$m [ = %files ]</dt>
	<dd>
~controlにて`選択された~file~list$を表現する `FileList$I ~objを返す。
◎
Returns a FileList object listing the selected files of the form control.
</dd>
	<dd>
~controlが `File$st ~controlでない場合、
~NULLを返す。
◎
Returns null if the control isn't a file control.
</dd>
	<dd>
`FileList$I ~objに設定して
— 具体的には、
~drag＆~drop演算の結果など —
この~form~controlの`選択された~file~list$を変更できる。
◎
Can be set to a FileList object to change the selected files of the form control. For instance, as the result of a drag-and-drop operation.
</dd>

	<dt>%input.`valueAsDate$m [ = %value ]</dt>
	<dd>
適用-可能なら，~controlの`値$feを表現する `Date$I ~objを返す。
他の場合、
~NULLを返す。
◎
Returns a Date object representing the form control's value, if applicable; otherwise, returns null.
</dd>
	<dd>
設定して，値を変更できる。
◎
Can be set, to change the value.
</dd>
	<dd>
~controlが［
日付／時刻
］に基づくものでない場合、
`InvalidStateError$E 例外を投出する。
◎
Throws an "InvalidStateError" DOMException if the control isn't date- or time-based.
</dd>

	<dt>%input.`valueAsNumber$m [ = %value ]</dt>
	<dd>
適用-可能なら，~controlの`値$feを表現する数を返す。
他の場合、
~NaN を返す。
◎
Returns a number representing the form control's value, if applicable; otherwise, returns NaN.
</dd>
	<dd>
設定して，値を変更できる。
~NaN を設定すると，下層の値は空~文字列に設定されることになる。
◎
Can be set, to change the value. Setting this to NaN will set the underlying value to the empty string.
</dd>
	<dd>
~controlが日付／時刻に基づくものでも数量-でもない場合、
`InvalidStateError$E 例外を投出する。
◎
Throws an "InvalidStateError" DOMException if the control is neither date- or time-based nor numeric.
</dd>

	<dt>%input.`stepUp([ n ])$m</dt>
	<dt>%input.`stepDown([ n ])$m</dt>
	<dd>
~form~controlの`値$feに
( ( `step$a 属性が与える値 ) ~MUL %n ) 
を加減算する。
%n に対する既定の値は 1 である。
◎
Changes the form control's value by the value given in the step attribute, multiplied by n. The default value for n is 1.
</dd>
	<dd>
~controlが日付／時刻に基づくものでも数量-でもない, または
`step$a 属性の値が `any^l の場合、
`InvalidStateError$E 例外を投出する。
◎
Throws "InvalidStateError" DOMException if the control is neither date- or time-based nor numeric, or if the step attribute's value is "any".
</dd>

	<dt>%input.`list$m</dt>
	<dd>
`list$a 属性で指示される `datalist$e 要素を返す。
◎
Returns the datalist element indicated by the list attribute.
</dd>

	<dt>%input.`showPicker()$m</dt>
	<dd>
%input 用に適用-可能な~pickerがあれば、
利用者が値を選択できるよう，それを示す。
◎
Shows any applicable picker UI for input, so that the user can select a value.
</dd>
	<dd>
%input は`~pickerを~support$しない場合、
この~methodは何もしない。
◎
If input does not support a picker, this method does nothing.
</dd>
	<dd>
%input が`変異-可能$feでない場合、
`InvalidStateError$E 例外が投出される。
◎
Throws an "InvalidStateError" DOMException if input is not mutable.
</dd>
	<dd>
`一過な作動化を有して$いない間に~callされた場合、
`NotAllowedError$E 例外が投出される。
◎
Throws a "NotAllowedError" DOMException if called without transient user activation.
</dd>
	<dd>
%input が非同一-生成元 `iframe$e の内側にある場合、
%input は［
`File$st ／ `Color$st
］`状態$にある場合を除き，
`SecurityError$E 例外が投出される。
◎
Throws a "SecurityError" DOMException if input is inside a cross-origin iframe, unless input is in the File Upload or Color states.
</dd>
</dl>

<p>
`value@m
~IDL属性は、
要素の`値$feを操作することを~scriptに許容する。
その挙動は、
この属性が属する~modeに応じて定義される：
◎
The value IDL attribute allows scripts to manipulate the value of an input element. The attribute is in one of the following modes, which define its behavior:
</p>
<dl class="switch">
	<dt>
`値~mode@i
◎
value
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET コレの現在の`値$fe
◎
On getting, return the current value of the element.
</dd>
	<dd class="algo">
<p>
設定子~手続きは：
◎
On setting:
</p>
		<ol>
			<li>
%旧~値 ~LET コレの`値$fe
◎
Let oldValue be the element's value.
</li>
			<li>
コレの`値$fe ~SET 所与の値
◎
Set the element's value to the new value.
</li>
			<li>
コレの`値は~dirtyか$fe ~SET ~T
◎
Set the element's dirty value flag to true.
</li>
			<li>
コレの現在の`状態$に`値の無毒化~algo$は定義されているならば、
コレに対し，それを呼出す
◎
Invoke the value sanitization algorithm, if the element's type attribute's current state defines one.
</li>
			<li>
<p>
~IF［
（`値の無毒化~algo$を適用した後の）コレの`値$fe ~NEQ %旧~値
］~AND［
~controlは`~text手入力~cursor位置$を有する
］：
◎
If the element's value (after applying the value sanitization algorithm) is different from oldValue, and the element has a text entry cursor position,＼
</p>
				<ol>
					<li>
`~text手入力~cursor位置$を終端へ移動する
◎
move the text entry cursor position to the end of the text control,＼
</li>
					<li>
選択された~textを未選択にする
◎
unselecting any selected text and＼
</li>
					<li>
コレの`選択~方向を設定する$( `none^l )
◎
resetting the selection direction to "none".
</li>
				</ol>
			</li>
		</ol>
	</dd>

	<dt>
`既定~mode@i
◎
default
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET コレは `value$a 内容~属性を［
有するならば その値 ／
有さないならば 空~文字列
］
◎
On getting, if the element has a value content attribute, return that attribute's value; otherwise, return the empty string.
↓</dd>
	<dd class="algo">
<p>
設定子~手続きは、
コレの `value$a 内容~属性を所与の値に設定する
◎
On setting, set the value of the element's value content attribute to the new value.
</dd>

	<dt>
`既定か~on~mode@i
◎
default/on
</dt>
	<dd>
次を除いて，`既定~mode$iと同じにふるまう
⇒
取得子~手続きは、
コレは `value$a 内容~属性を有さないならば文字列 `on^l を返す
◎
On getting, if the element has a value content attribute, return that attribute's value; otherwise, return the string "on".
◎
On setting, set the value of the element's value content attribute to the new value.
</dd>

	<dt>
`~filename~mode@i
◎
filename
</dt>
	<dd class="algo" id="fakepath-orly">
<p>
取得子~手続きは：
</p>
		<ol>
			<li>
~IF［
`選択された~file~list$は空でない
］
⇒
~RET 次の並びからなる文字列
⇒＃
`C:\fakepath\^l,
~list内の最初の~fileの名前
</li>
			<li>
~RET 空~文字列
</li>
		</ol>
◎
On getting, return the string "C:\fakepath\" followed by the name of the first file in the list of selected files, if any, or the empty string if the list is empty.
</dd>
	<dd class="algo">
<p>
設定子~手続きは：
</p>
		<ol>
			<li>
~IF［
所与の値 ~NEQ 空~文字列
］
⇒
~THROW `InvalidStateError$E
</li>
			<li>
`選択された~file~list$を空にする
</li>
		</ol>
◎
On setting, if the new value is the empty string, empty the list of selected files; otherwise, throw an "InvalidStateError" DOMException.
</dd>
	<dd class="note">注記：
この "fakepath" 要件は、
歴史における残念な~~出来事である。
更なる情報は、
<a href="#fakepath-srsly">§ `File^st 状態の例</a>
を見よ。
◎
This "fakepath" requirement is a sad accident of history. See the example in the File Upload state section for more information.
</dd>
	<dd class="note">注記：
`~path成分$は，`選択された~file~list$内の~filenameには許可されないので、
`\fakepath\^l が ~path成分に誤認されることはない。
◎
Since path components are not permitted in filenames in the list of selected files, the "\fakepath\" cannot be mistaken for a path component.
</dd>
</dl>

<p>
`checked@m
~IDL属性は、
要素の`~check有りか$feを操作することを~scriptに許容する：
◎
The checked IDL attribute allows scripts to manipulate the checkedness of an input element.＼
</p>
<ul>
	<li class="algo">
その取得子~手続きは
⇒
~RET コレの現在の`~check有りか$fe
◎
On getting, it must return the current checkedness of the element; and＼
</li>
	<li class="algo">
<p>
その設定子~手続きは：
</p>
		<ol>
			<li>
コレの`~check有りか$fe ~SET 所与の値
</li>
			<li>
コレの`~check有無は~dirtyか$ ~SET ~T
</li>
		</ol>
◎
on setting, it must set the element's checkedness to the new value and set the element's dirty checkedness flag to true.
</li>
</ul>

<p>
`files@m
~IDL属性は、
要素の`選択された~file~list$へ~accessすることを~scriptに許容する：
◎
The files IDL attribute allows scripts to access the element's selected files.
</p>
<ul>
	<li class="algo">
<p>
その取得子~手続きは：
</p>
		<ol>
			<li>
~IF［
この~IDL属性はコレに`適用されない$
］
⇒
~RET ~NULL
</li>
			<li>
~RET 現在の`選択された~file~list$を表現する `FileList$I ~obj
`FILEAPI$r
— `選択された~file~list$が変更されない限り、
毎回~同じ~objを返すモノトスル。
</li>
		</ol>
◎
On getting, if the IDL attribute applies, it must return a FileList object that represents the current selected files. The same object must be returned until the list of selected files changes. If the IDL attribute does not apply, then it must instead return null. [FILEAPI]
</li>
	<li class="algo">
<p>
その設定子~手続きは：
◎
On setting, it must run these steps:
</p>
		<ol>
			<li>
~IF［
この~IDL属性はコレに`適用されない$
］~OR［
所与の値 ~EQ ~NULL
］
⇒
~RET
◎
If the IDL attribute does not apply or the given value is null, then return.
</li>
			<li>
コレの`選択された~file~list$ ~SET 所与の値
◎
Replace the element's selected files with the given value.
</li>
		</ol>
	</li>
</ul>

<p>
`valueAsDate@m
~IDL属性は、
要素の`値$feを日付として解釈した結果を表現する：
◎
The valueAsDate IDL attribute represents the value of the element, interpreted as a date.
</p>
<ul>
	<li class="algo">
<p>
その取得子~手続きは：
◎
On getting,＼
</p>
		<ol>
			<li>
~IF［
この~IDL属性はコレに`適用されない$
］
⇒
~RET ~NULL
◎
if the valueAsDate attribute does not apply, as defined for the input element's type attribute's current state, then return null.＼
</li>
			<li>
%結果 ~LET `文字列から~Date~objに変換する$( コレの`値$fe )
◎
Otherwise, run the algorithm to convert a string to a Date object defined for that state to the element's value;＼
</li>
			<li>
~IF［
%結果 ~NEQ `~error^i
］
⇒
~RET %結果
◎
if the algorithm returned a Date object, then return it,＼
</li>
			<li>
~RET ~NULL
◎
otherwise, return null.
</li>
		</ol>
	</li>
	<li class="algo">
<p>
その設定子~手続きは：
◎
On setting,＼
</p>
		<ol>
			<li>
~IF［
この~IDL属性はコレに`適用されない$
］
⇒
~THROW `InvalidStateError$E
◎
if the valueAsDate attribute does not apply, as defined for the input element's type attribute's current state, then throw an "InvalidStateError" DOMException;＼
</li>
			<li>
<p>
所与の値に応じて：
</p>
				<dl class="switch">
					<dt>~NULL</dt>
					<dt>~NaN 時刻~値を表現する `Date$I ~objである</dt>
					<dd>
コレの`値$fe ~SET 空~文字列
</dd>

					<dt>他の `Date$I ~objである</dt>
					<dd>
コレの`値$fe ~SET `~Date~objから文字列に変換する$( 所与の値 )
</dd>

					<dt>その他</dt>
					<dd>
~THROW `TypeError$E
</dd>
				</dl>

◎
otherwise, if the new value is not null and not a Date object throw a TypeError exception; otherwise, if the new value is null or a Date object representing the NaN time value, then set the value of the element to the empty string; otherwise, run the algorithm to convert a Date object to a string, as defined for that state, on the new value, and set the value of the element to the resulting string.
</li>
		</ol>
	</li>
</ul>

<p>
`valueAsNumber@m
~IDL属性は、
要素の`値$feを実数として解釈した結果を表現する：
◎
The valueAsNumber IDL attribute represents the value of the element, interpreted as a number.
</p>
<ul>
	<li class="algo">
<p>
その取得子~手続きは：
◎
On getting,＼
</p>
		<ol>
			<li>
~IF［
この~IDL属性はコレに`適用されない$
］
⇒
~RET ~NaN
◎
if the valueAsNumber attribute does not apply, as defined for the input element's type attribute's current state, then return a Not-a-Number (NaN) value.＼
</li>
			<li>
%結果 ~LET `文字列から実数に変換する$( コレの`値$fe )
◎
Otherwise, run the algorithm to convert a string to a number defined for that state to the element's value;＼
</li>
			<li>
~IF［
%結果 ~NEQ `~error^i
］
⇒
~RET %結果
◎
if the algorithm returned a number, then return it,＼
</li>
			<li>
~RET ~NaN
◎
otherwise, return a Not-a-Number (NaN) value.
</li>
		</ol>
	</li>
	<li class="algo">
<p>
その設定子~手続きは：
◎
On setting,＼
</p>
		<ol>
			<li>
~IF［
所与の値 ~IN { `-Infinity^c, `Infinity^c }
］
⇒
~THROW `TypeError$E
◎
if the new value is infinite, then throw a TypeError exception.＼
</li>
			<li>
~IF［
この~IDL属性はコレに`適用されない$
］
⇒
~THROW `InvalidStateError$E
◎
Otherwise, if the valueAsNumber attribute does not apply, as defined for the input element's type attribute's current state, then throw an "InvalidStateError" DOMException.＼
</li>
			<li>
コレの`値$fe ~SET 所与の値に応じて
⇒＃
~NaN ならば 空~文字列 ／
~ELSE_ `実数から文字列に変換する$( 所与の値 )
◎
Otherwise, if the new value is a Not-a-Number (NaN) value, then set the value of the element to the empty string. Otherwise, run the algorithm to convert a number to a string, as defined for that state, on the new value, and set the value of the element to the resulting string.
</li>
		</ol>
	</li>
</ul>

<div class="algo">
<p>
［
`stepDown(n)@m
／
`stepUp(n)@m
］~method手続きは：
◎
The stepDown(n) and stepUp(n) methods, when invoked, must run the following algorithm:
</p>
<ol>
	<li>
~IF［
この~methodはコレに`適用されない$
］
⇒
~THROW `InvalidStateError$E
◎
If the stepDown() and stepUp() methods do not apply, as defined for the input element's type attribute's current state, then throw an "InvalidStateError" DOMException.
</li>
	<li>
( %値~step, %~step基底, %最小, %最大 ) ~LET コレの
( `許容される値~step$, `~step基底$, `最小$, `最大$ )
◎
↓</li>
	<li>
~IF［
%値~step ~EQ ε
］
⇒
~THROW `InvalidStateError$E
◎
If the element has no allowed value step, then throw an "InvalidStateError" DOMException.
</li>
	<li>
%符号 ~LET 呼出された~methodに応じて
⇒＃
`stepDown()$m ならば −1 ／
`stepUp()$m ならば 1
◎
↓</li>
	<li>
%S ~LET すべての整数 %N に対する［
%~step基底 ~PLUS %値~step ~MUL %N
］からなる実数の集合
◎
↓</li>
	<li>
~IF［［
%最小 ~LTE %V ~LTE %最大
］を満たす値 %V ~IN %S は無い
］
⇒
~RET
◎
If the element has a minimum and a maximum and the minimum is greater than the maximum, then return.
◎
If the element has a minimum and a maximum and there is no value greater than or equal to the element's minimum and less than or equal to the element's maximum that, when subtracted from the step base, is an integral multiple of the allowed value step, then return.
</li>
	<li>
%値 ~LET `文字列から実数に変換する$( コレの`値$fe )
◎
If applying the algorithm to convert a string to a number to the string given by the element's value does not result in an error, then let value be the result of that algorithm.＼
</li>
	<li>
~IF［
%値 ~EQ `~error^i
］
⇒
%値 ~SET 0
◎
Otherwise, let value be zero.
</li>
	<li>
%旧~値 ~LET %値
◎
Let valueBeforeStepping be value.
</li>
	<li>
<p >
~IF［
%値 ~NIN %S
］
⇒
%値 ~SET ［
%V ~MUL %符号 ~GT %値 ~MUL %符号
］を満たす %V ~IN %S のうち， %値 に最も近い値 
</p>

<p class="trans-note">【
引数 %n は無視されることになる。
】</p>
◎
If value subtracted from the step base is not an integral multiple of the allowed value step, then set value to the nearest value that, when subtracted from the step base, is an integral multiple of the allowed value step, and that is less than value if the method invoked was the stepDown() method, and more than value otherwise.
</li>
	<li>
<p>
~ELSE
⇒
%値 ~INCBY %符号 ~MUL %値~step ~MUL %n
◎
Otherwise (value subtracted from the step base is an integral multiple of the allowed value step):
◎
• Let n be the argument.
◎
• Let delta be the allowed value step multiplied by n.
◎
• If the method invoked was the stepDown() method, negate delta.
◎
• Let value be the result of adding delta to value.
</li>
	<li>
~IF［
%値 ~LT %最小
］
⇒
%値 ~SET ［
%V ~GTE %最小
］を満たす %V ~IN %S のうち，最小な値
◎
If the element has a minimum, and value is less than that minimum, then set value to the smallest value that, when subtracted from the step base, is an integral multiple of the allowed value step, and that is more than or equal to that minimum.
</li>
	<li>
~IF［
%値 ~GT %最大
］
⇒
%値 ~SET ［
%V ~LTE %最大
］を満たす %V ~IN %S のうち，最大な値
◎
If the element has a maximum, and value is greater than that maximum, then set value to the largest value that, when subtracted from the step base, is an integral multiple of the allowed value step, and that is less than or equal to that maximum.
</li>
	<li>
<p>
~IF［
%値 ~MUL %符号 ~LT %旧~値 ~MUL %符号
］
⇒
~RET
◎
If either the method invoked was the stepDown() method and value is greater than valueBeforeStepping, or the method invoked was the stepUp() method and value is less than valueBeforeStepping, then return.
</p>

<div class="example">
<p>
この段は、
次の例にて要素の `stepUp()$m ~methodを呼出しても
要素の`値$feは変化しないことを確保する。
◎
This ensures that invoking the stepUp() method on the input element in the following example does not change the value of that element:
</p>

<pre class="lang-html">
&lt;input type=number value=1 max=0&gt;
</pre>
</div>

<p class="trans-note">【
%n ~LT 0 の場合も、
（無視されないならば）`値$feは変化しないことになる。
】</p>

	</li>
	<li>
コレの`値$fe ~SET `実数から文字列に変換する$( %値 )
◎
Let value as string be the result of running the algorithm to convert a number to a string, as defined for the input element's type attribute's current state, on value.
◎
Set the value of the element to value as string.
</li>
</ol>
</div>

<div class="algo">
`list@m
取得子~手続きは
⇒
~RET ［
現在の`示唆~source要素$ ~NEQ ε ならば それ ／
~ELSE_ ~NULL
］
◎
The list IDL attribute must return the current suggestions source element, if any, or null otherwise.
</div>

<hr>

<div class="algo">
<p>
［
`showPicker()@m
／
`HTMLSelectElement$I の
`showPicker()＠#dom-select-showpicker@m
］~method手続きは：
◎
The HTMLInputElement showPicker() and HTMLSelectElement showPicker() method steps are:
</p>
<ol>
	<li>
~IF［
コレは`変異-可能$feでない
］
⇒
~THROW `InvalidStateError$E
◎
If this is not mutable, then throw an "InvalidStateError" DOMException.
</li>
	<li>
<p>
~IF［
コレに`関連な設定群~obj$の
( `生成元$enV, `~top-level生成元$enV )
は`同一-生成元$でない
］：
◎
If this's relevant settings object's origin is not same origin with this's relevant settings object's top-level origin,＼
</p>
		<ol>
			<li>
~IF［
コレは `input$e 要素である
］~AND［
コレの`状態$ ~IN { `File$st, `Color$st }
］
⇒
何もしない
◎
↓</li>
			<li>
~ELSE
⇒
~THROW `SecurityError$E
◎
and this is a select element, or this's type attribute is not in the File Upload state or Color state, then throw a "SecurityError" DOMException.
</li>
		</ol>

<p class="note">注記：
歴史的な理由から、［
`File$st ／ `Color$st
］状態にある入力に対しては，この検査は免除される
— それらの`~input作動化の挙動$は、
自身の~pickerも示すことに加え，生成元~検査により防護されたことも決してない。
◎
File and Color inputs are exempted from this check for historical reason: their input activation behavior also shows their pickers, and has never been guarded by an origin check.
</p>
	</li>
	<li>
~IF［
コレに`関連な大域~obj$は`一過な作動化を有して$いない
］
⇒
~THROW `NotAllowedError$E
◎
If this's relevant global object does not have transient activation, then throw a "NotAllowedError" DOMException.
</li>
	<li>
~IF［
コレは `select$e 要素である
］~AND［
コレは`具現化されて$いない
］
⇒
~THROW `NotAllowedError$E
◎
If this is a select element, and this is not being rendered, then throw a "NotSupportedError" DOMException.
</li>
	<li>
`適用-可能なら~pickerを示す$( コレ )
◎
Show the picker, if applicable, for this.
</li>
</ol>
</div>

<div class="algo">
<p>
`適用-可能なら~pickerを示す@
~algoは、
所与の
( ［
`input$e ／ `select$e
］要素 %要素 )
に対し：
◎
To show the picker, if applicable for an input or select element element:
</p>
<ol>
	<li>
~IF［
%要素 に`関連な大域~obj$は`一過な作動化を有して$いない
］
⇒
~RET
◎
If element's relevant global object does not have transient activation, then return.
</li>
	<li>
~IF［
%要素 は`変異-可能$feでない
］
⇒
~RET
◎
If element is not mutable, then return.
</li>
	<li>
`利用者-作動化を消費する$( %要素 に`関連な大域~obj$ )
◎
Consume user activation given element's relevant global object.
</li>
	<li>
~IF［
%要素 は`~pickerを~support$しない
］
⇒
~RET
◎
If element does not support a picker, then return.
</li>
	<li>
<p>
~IF［
%要素 は `input$e 要素である
］~AND［
%要素 は `File$st `状態$にある
］
⇒
次の手続きを`並列的$に走らす
◎
If element is an input element and element's type attribute is in the File Upload state, then run these steps in parallel:
</p>

<div class="algo">
<p>
手続きは：
◎
↑</p>
		<ol>
			<li>
任意選択で
⇒
この~algoの実行に先立つ この~algoの別の実行があれば，それらが終了されるまで待機する
◎
Optionally, wait until any prior execution of this algorithm has terminated.
</li>
			<li>
%退けられたか ~LET `~WebDriver-BiDi~file~dialogが開かれた＠~WEBDRIVER-BIDI#webdriver-bidi-file-dialog-opened$( %要素 )
◎
Let dismissed be the result of WebDriver BiDi file dialog opened with element.
</li>
			<li>
<p>
~IF［
%退けられたか ~EQ ~F
］：
◎
If dismissed is false:
</p>
				<ol>
					<li>
<p>
何らかの~fileを指定するよう利用者に要請する~promptを表示する：
◎
Display a prompt to the user requesting that the user specify some files.＼
</p>
						<ul>
							<li>
%要素 が `multiple$a 属性を有さない場合、
複数個の~fileを選択し得ないようにするモノトスル。
◎
If the multiple attribute is not set on element, there must be no more than one file selected;＼
</li>
							<li>
他の場合、
選択される個数に上限は無い。
◎
otherwise, any number may be selected.＼
</li>
						</ul>
<p>
~fileは、
~filesystemから得られるものに限らず，その場で作成されることもある
— 例：
利用者の機器に接続された~cameraから撮られた~~写真など。
◎
Files can be from the filesystem or created on the fly, e.g., a picture taken from a camera connected to the user's device.
</p>
					</li>
					<li>
利用者が選択を為すまで待機する
◎
Wait for the user to have made their selection.
</li>
				</ol>
			</li>
			<li>
<p>
~IF［
%退けられたか ~EQ ~T
］~OR［
利用者は、
自身の選択を変更することなく~promptを退けた
］
⇒
`要素~taskを~queueする$( `利用者ヤリトリ~task~source$, %要素, 次の手続き )
◎
If dismissed is true or if the user dismissed the prompt without changing their selection, then queue an element task on the user interaction task source given element to＼
</p>
<div class="algo">
手続きは
⇒
`~eventを発火する$( %要素, `cancel$et )
— 次のように初期化して
⇒＃
`bubbles$m 属性 ~SET ~T
◎
fire an event named cancel at element, with the bubbles attribute initialized to true.
</div>
			</li>
			<li>
~ELSE
⇒
%要素 用に`~file選択を更新する$()
◎
Otherwise, update the file selection for element.
</li>
		</ol>
</div>

<p class="note">注記：
すべての~UI仕様と同じく、
~UAには、
これらの要件をどう解釈するかにおいて，それなりの自由度がある。
上の~textは、
利用者が［
~promptを退ける，選択を変更する
］のうち片方だけ行うことを含意するが、
この標準は，これら各アリ性を特定の~UI要素へ対応付けるよう義務付けることはない。
例えば、
~UAは，［
1 個以上の~fileが選択されていた下で，
“取消” ~buttonが~clickされた
］とき［
0 個の~fileを選択するような選択の変更
］として解釈するかもしれない
— その場合、
`input$et, `change$et を発火することになる。
あるいは、
そのような~clickを［
選択を変更しないまま退けた
］ものと解釈するかもしれない
— その場合、
`cancel$et ~eventを発火することになる。
類似に，［
それまで選択されていたものと同じ~file群を選択し直す
］ことを［
退けたもの, 選択の変更
］どちらとして数えるかは、
~UAに委ねられる。
◎
As with all user interface specifications, user agents have a good deal of freedom in how they interpret these requirements. The above text implies that a user either dismisses the prompt or changes their selection; exactly one of these will be true. But the mapping of these possibilities to specific user interface elements is not mandated by the standard. For example, a user agent might interpret clicking the "Cancel" button when files were previously selected as a change of selection to select zero files, thus firing input and change. Or it might interpret such a click as a dismissal that leaves the selection unchanged, thus firing cancel. Similarly, it's up to the user agent whether re-selecting the same files as were previously selected counts as a dismissal, or as a change of selection.
</p>
	</li>
	<li>
<p>
~ELSE：
◎
Otherwise,＼
</p>
		<ul>
			<li>
~UAは、
利用者が当の~controlとヤリトリするときには，［
%要素 用の値を選択するための関連な~UI
］を自身が通常に行う仕方で示すベキである。
◎
the user agent should show the relevant user interface for selecting a value for element, in the way it normally would when the user interacts with the control.
</li>
			<li>
そのような~UIを示すときは、［
所与の`状態$にある %要素 がどう挙動するか
］に関して［
この仕様の関連な各部にて言明された要件
］を尊重するモノトスル。
（例えば、
様々な節が，結果の`値$feを成す文字列に対する制約を述べる。）
◎
When showing such a user interface, it must respect the requirements stated in the relevant parts of the specification for how element behaves given its type attribute state. (For example, various sections describe restrictions on the resulting value string.)
</li>
			<li>
この段には、
副作用があり得る
— 以前に，この~algoにより示された他の~pickerを閉じるなど。
（これが~file~pickerを閉じる場合、
前~段に従って，［
`input$et ／ `change$et
］~eventか `cancel$et ~eventを発火するよう導くことになる。）
◎
This step can have side effects, such as closing other pickers that were previously shown by this algorithm. (If this closes a file selection picker, then per the above that will lead to firing either input and change events, or a cancel event.)
</li>
		</ul>
	</li>
</ol>
</div>

				</section>
				<section id="common-input-element-events">
<h5 title="Common event behaviors">4.10.5.5. ~eventに共通な挙動</h5>

<p>
［
`input$et ／ `change$et
］~eventは、
`適用される$ならば
（ `input$e 要素のうち［
`~button$, および `Hidden$st `状態$にあるもの
］を除くすべてに該当する），
利用者が~controlとヤリトリしたことを指示するために発火される：
◎
When the input and change events apply (which is the case for all input controls other than buttons and those with the type attribute in the Hidden state), the events are fired to indicate that the user has interacted with the control.＼
</p>
<ul>
	<li>
`input$et ~eventは、
利用者が~controlの~dataを改変する度に発火される。
◎
The input event fires whenever the user has modified the data of the control.＼
</li>
	<li>
`change$et ~eventは、［
値を~commitすることが当の~controlにてイミを成すならば そのとき ／
~ELSE_  ~controlが`~focusを失う$とき
］に発火される。
◎
The change event fires when the value is committed, if that makes sense for the control, or else when the control loses focus.＼
</li>
</ul>

<p>
すべての事例において、
`input$et ~eventは，対応する `change$et ~event（もしあれば）より先に生じる。
◎
In all cases, the input event comes before the corresponding change event (if any).
</p>

<div class="p">
<p>
これらの~eventを `input$e 要素
— 以下 %要素 —
に配送する規則は：
</p>
<ul>
	<li>
<p>
当の~eventは %要素 に`適用されない$場合、
定義されない（当の~eventは配送されない）。
</p>

<p class="trans-note">【
［
`Hidden$st ／ `Reset$st ／ `Image$st ／ `Button$st
］`状態$にあるものが該当する。
】</p>
	</li>
	<li>
他の場合， %要素 の`状態$に`~input作動化の挙動$は定義されているならば、
それを定義する各~節にて，与えられる。
（［
`Checkbox$st ／ `Radio$st ／ `File$st
］`状態$にあるものが該当する。）
</li>
	<li>
他の場合、
以下に与えられる…
</li>
</ul>

◎
When an input element has a defined input activation behavior, the rules for dispatching these events, if they apply, are given in the section above that defines the type attribute's state. (This is the case for all input controls with the type attribute in the Checkbox state, the Radio Button state, or the File Upload state.)
◎
For input elements without a defined input activation behavior,＼
↑ but to which these events apply,＼
</div>

<p>
…他の場合，~UAは、
%要素 用の~UIに応じて，以下に従うモノトスル：
◎
↑↓</p>

<dl class="switch">
	<dt>
当の~UIは［
ヤリトリあり（中間的）な操作, 明示的な~commit動作
］どちらも孕む場合：
◎
and for which the user interface involves both interactive manipulation and an explicit commit action, then＼
</dt>
	<dd class="algo">
<p>
利用者が %要素 の`値$feを変更したときは、
次を遂行する
⇒
`要素~taskを~queueする$( `利用者ヤリトリ~task~source$, %要素, 次の手続き )
◎
when the user changes the element's value, the user agent must queue an element task on the user interaction task source given the input element to＼
</p>
<div class="algo">
手続きは
⇒
`入力~eventを発火する$( %要素, `input$et )
◎
fire an event named input at the input element, with the bubbles and composed attributes initialized to true, and＼
</div>
	</dd>
	<dd class="algo">
<p>
利用者が %要素 にて変更を~commitしたときは、
次を遂行する
⇒
`要素~taskを~queueする$( `利用者ヤリトリ~task~source$, %要素, 次の手続き )
◎
any time the user commits the change, the user agent must queue an element task on the user interaction task source given the input element to＼
</p>
<div class="algo">
<p>
手続きは：
</p>
		<ol>
			<li>
%要素 の`利用者~妥当性$ ~SET ~T
</li>
			<li>
`入力~eventを発火する$( %要素, `change$et )
</li>
		</ol>
◎
set its user validity to true and＼
fire an event named change at the input element, with the bubbles attribute initialized to true.
</div>
	</dd>
	<dd class="example">
中間的な操作も~commit動作を孕むような~UIの例として、
~sliderを利用する `Range$st ~controlが~pointing装置で操作されているときが挙げられる。
`input$et ~eventは、
利用者が~controlのつまみを~dragしている間，位置が変化する度に発火される。
`change$et ~eventは、
利用者がつまみを離して特定の値を~commitしたときに限り，発火される。
◎
An example of a user interface involving both interactive manipulation and a commit action would be a Range controls that use a slider, when manipulated using a pointing device. While the user is dragging the control's knob, input events would fire whenever the position changed, whereas the change event would only fire when the user let go of the knob, committing to a specific value.
</dd>

	<dt>
当の~UIは［
明示的な~commit動作
］のみを孕む場合：
◎
For input elements without a defined input activation behavior, but to which these events apply, and for which the user interface involves an explicit commit action but no intermediate manipulation, then＼
</dt>
	<dd class="algo">
<p>
利用者が %要素 の`値$feの変更を~commitする度に，次を遂行する
⇒
`要素~taskを~queueする$( `利用者ヤリトリ~task~source$, %要素, 次の手続き )
◎
any time the user commits a change to the element's value, the user agent must queue an element task on the user interaction task source given the input element to＼
</p>
<div class="algo">
<p>
手続きは：
</p>
		<ol>
			<li>
`入力~eventを発火する$( %要素, `input$et )
</li>
			<li>
`入力~eventを発火する$( %要素, `change$et )
</li>
		</ol>
◎
first fire an event named input at the input element, with the bubbles and composed attributes initialized to true,＼
and then fire an event named change at the input element, with the bubbles attribute initialized to true.
</div>
	</dd>
	<dd class="example">
~commit動作を伴う~UIの例として、
色環を~~出現させる単独の~buttonからなる `Color$st ~controlが挙げられる
— その~dialogが閉じられたときに限り，`値$feが変化する場合、
それは明示的な~commit動作になる。
他方、
~controlを操作するに伴い色もヤリトリありに変化する場合、
~commit動作は生じないこともある。
【~dialogが開きっぱなしのときなど。】
◎
An example of a user interface with a commit action would be a Color control that consists of a single button that brings up a color wheel: if the value only changes when the dialog is closed, then that would be the explicit commit action. On the other hand, if manipulating the control changes the color interactively, then there might be no commit action.
</dd>
	<dd class="example">
~commit動作を伴う~UIの別の例として、
`Date$st ~controlであって，利用者による［
~text入力, ~drop-down暦からの選択
］の両方を許容するものが挙げられる
— ~text入力には，明示的な~commit段がないこともある一方、
~drop-down暦から日付を選択してから その~drop-downを退けることは，~commit動作になる。
◎
Another example of a user interface with a commit action would be a Date control that allows both text-based user input and user selection from a drop-down calendar: while text input might not have an explicit commit step, selecting a date from the drop down calendar and then dismissing the drop down would be a commit action.
</dd>

	<dt>
当の~UIは［
中間的な操作
］のみを孕む場合：
◎
For input elements without a defined input activation behavior, but to which these events apply,＼
</dt>
	<dd class="algo">
<p>
利用者が %要素 の`値$feを明示的な~commit動作を伴わずに変更する度に，
次を遂行する
⇒
`要素~taskを~queueする$( `利用者ヤリトリ~task~source$, %要素, 次の手続き )
◎
any time the user causes the element's value to change without an explicit commit action, the user agent must queue an element task on the user interaction task source given the input element to＼
</p>

<div class="algo">
手続きは
⇒
`入力~eventを発火する$( %要素, `input$et )
◎
fire an event named input at the input element, with the bubbles and composed attributes initialized to true.＼
</div>

<p>
対応する `change$et ~eventがあれば、
~controlが`~focusを失う$とき発火されることになる。
◎
The corresponding change event, if any, will be fired when the control loses focus.
</p>
	</dd>
	<dd class="example">
利用者が要素の`値$feを変更する例として、
利用者が［
~text~controlの中で
打込む／新たな値を~pasteする／編集を~undoする
］などが挙げられる。
利用者-ヤリトリは、
値を変更しないこともある
— 例えば、
空な~text~control内で <kbd>delete</kbd> ~UIkeyを叩いたり，~control内のある~textを~clipboardからの~textで置換したが，たまたま正確に同じ~textであったときなど。
◎
Examples of a user changing the element's value would include the user typing into a text control, pasting a new value into the control, or undoing an edit in that control. Some user interactions do not cause changes to the value, e.g., hitting the "delete" key in an empty text control, or replacing some text in the control with text from the clipboard that happens to be exactly the same text.
</dd>
	<dd class="example">
利用者が~commit段を伴わずに要素の`値$feを変更する別の例として、
利用者が~slider形の `Range$st ~controlに`~focus$してから，~keyboardでヤリトリすることが挙げられる。
◎
A Range control in the form of a slider that the user has focused and is interacting with using a keyboard would be another example of the user changing the element's value without a commit step.
</dd>
</dl>

<p>
`~task$が `input$et ~eventだけを発火する事例では、
~UAは，その`要素~taskを~queueする$前に［
利用者-ヤリトリに相応しい間
］待機してもヨイ
— 例えば、［
~keystrokeごとに~eventを発火し続ける
］ことなく［
利用者が手を止めたときに限り発火する
］よう，［
例えば 100 ~milli秒t間，~UIkeyが叩かれずにいるとき
］まで待機することもできる。
◎
In the case of tasks that just fire an input event, user agents may wait for a suitable break in the user's interaction before queuing the tasks; 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.
</p>

<div class="algo">
<p>
~UAは、
要素 %要素 の`値$feを利用者に利するよう変更する場合には
（例：~formを予め埋めておく特能の一部として），
次を遂行するモノトスル
⇒
`要素~taskを~queueする$( `利用者ヤリトリ~task~source$, %要素, 次の手続き )
◎
When the user agent is to change an input element's value on behalf of the user (e.g. as part of a form prefilling feature), the user agent must queue an element task on the user interaction task source given the input element to＼
</p>
<div class="algo">
<p>
手続きは：
◎
↑</p>
<ol>
	<li>
当の変更に則って %要素 の`値$feを更新する
◎
first update the value accordingly,＼
</li>
	<li>
`入力~eventを発火する$( %要素, `input$et )
◎
then fire an event named input at the input element, with the bubbles and composed attributes initialized to true,＼
</li>
	<li>
`入力~eventを発火する$( %要素, `change$et )
◎
then fire an event named change at the input element, with the bubbles attribute initialized to true.
</li>
</ol>
</div>
</div>

<p class="note">注記：
これらの~eventは、
~scriptが~form~controlの値に加えた変更に呼応して発火されることはない。
（これは、
~scriptが，利用者が操作している~controlに呼応して，各~form~controlの値を更新し易くするためである
— ~scriptは、
無限~loopを避けるために 自身による変更を ふるい~~落とす必要がなくなるので。）
◎
These events are not fired in response to changes made to the values of form controls by scripts. (This is to make it easier to update the values of form controls in response to the user manipulating the controls, without having to then filter out the script's own changes to avoid an infinite loop.)
</p>

<p class="note">注記：
これらの~eventは、
~browserが`持続された状態を復旧する$一部として~form~controlの値を変更したときも，
発火されない。
◎
These events are also not fired when the browser changes the values of form controls as part of state restoration during navigation.
</p>

				</section>
			</section>
</main>