[1] [DFN[[RUBYB[フォームコントロール]@en[form control]]]]は、 [[フォーム]]の構成要素のひとつです。[[利用者]]は、 [[フォームコントロール]]を通じて[[フォーム]]と[RUBYB[[[対話]]][interact]]します。 [11] 次の[[要素]]があります。 [FIG(short list)[ [24] [[フォームコントロール]] - [CODE(HTMLe)@en[[[input]]]] - [CODE(HTMLe)@en[[[output]]]] - [CODE(HTMLe)@en[[[select]]]] - [CODE(HTMLe)@en[[[textarea]]]] - [CODE(HTMLe)@en[[[button]]]] ]FIG] ;; [25] 次の[[要素]]は[[フォームコントロール]]では''ありません'': - [CODE(HTMLe)@en[[[form]]]] - [CODE(HTMLe)@en[[[label]]]] - [CODE(HTMLe)@en[[[datalist]]]] - [CODE(HTMLe)@en[[[option]]]] - [CODE(HTMLe)@en[[[optgroup]]]] - [CODE(HTMLe)@en[[[fieldset]]]] ;; [2] 仕様書: - [[HTML 4]] ([[Web Forms 1.0]]) --[CITE[17.2 Controls]] --[CITE[18.2.3 Intrinsic events]] [3] :制御子の[DFN[[RUBYB[名前][name]]]]:制御子の名前は [CODE(HTMLa)[[[name]]]] 属性で指定します。制御子名の適用範囲は当該フォームです。 :制御子の[DFN[[RUBYB[初期値][initial value]]]]: 制御子の初期値は、普通 [CODE(HTMLa)[[[value]]]] 属性で指定します。 :制御子の[DFN[[RUBYB[現在値][current value]]]]: 制御子の現在値は、最初初期値ですが、 利用者や[[スクリプト]]が変更できます。 [4] [[Web Forms 1.0]] では、次の種類の制御子が定義されています。 : [RUBYB[ボタン][button]] : ボタンは、活性化されると何らかの動作を行います。 [[提出]]ボタン、[[再設定]]ボタン、押しボタンの3種類があります。 [CODE(HTMLe)[[[input]]]] 要素型または [CODE(HTMLe)[[[input]]]] 要素型の要素で定義します。 : [RUBYB[チェック箱][checkbox]] : 入・切の状態から選びます。 [CODE(HTMLe)[[[input]]]] 要素型の要素で定義します。 : [RUBYB[ラジオ・ボタン][radio button]]: 複数の選択肢から1つを選びます。 [CODE(HTMLe)[[[input]]]] 要素型の要素で定義します。 : [RUBYB[メニュー][menu]]: 複数の選択肢から1つを選びます。 [CODE(HTMLe)[[[select]]]] 要素型の要素で定義します。 : [RUBYB[文章入力][text input]]: 文章を入力します。単一行の [CODE(HTMLe)[[[input]]]] と複数行の [CODE(HTMLe)[[[textarea]]]] があります。 : [RUBYB[ファイル選択][file select]]: ファイルを選択します。 [CODE(HTMLe)[[[input]]]] 要素型の要素で定義します。 : [RUBYB[隠し][hidden]]制御子: レンダリングしない制御子です。 [CODE(HTMLe)[[[input]]]] 要素型の要素で定義します。 : [RUBYB[物体][object]]制御子: 一般の物体です。 [CODE(HTMLe)[[[object]]]] 要素型の要素で定義します。 [[#comment]] ** フォーム外の制御子 [5] 制御子に使う要素型は、通常 [CODE(HTMLe)[[[form]]]] 内でフォーム制御子を作成するために使いますが、 [[利用者界面]]を作成するためにフォーム外で使うこともできます。 但し、フォーム外の制御子は[[成功]]しません。 [SRC[HTML 4 17.2.1]] [6] 制御子要素 ([CODE(HTMLe)[input]], [CODE(HTMLe)[select]], [CODE(HTMLe)[button]], [CODE(HTMLe)[textarea]], [CODE(HTMLe)[label]]) はフォーム外では [[GUI]] を補うために使うことができます。 [SRC[HTML 4 18.2.3]] ([CODE(HTMLe)[fieldset]] は?) [[#comment]] ** 実装 [[#comment]] *** フォーム制御子と他の文書の部分との統合 [7] 多くの [[Webブラウザ]]では、フォーム制御子にその [[GUI]] 環境の標準の制御子を使用したり、非常によく似せていたりします。 [8] 古い [[Webブラウザ]]はフォーム制御子の部分とその他の部分のレンダリングや操作性をうまく統一できていませんでした。 例えば [[WinIE 3]] は文書の他の部分 [WEAK[(画面に収まっていない部分も含みます。)]] の読込みとレンダリングが済んでからフォーム制御子を [[Windows]] 標準のものを使って追加していました。 このため長い文書は読み終わるまでフォームに関する操作を[[利用者]]が行うことができませんでしたし、 みっともないことにフォーム制御子が画面表示に追加される直前に一瞬、 表示領域の左上隅 [WEAK[(座標原点に相当します。)]] にこれから配置される制御子が表示されたりもしました。 [9] [[Netscape Navigator 2]] ([[Windows 95]] 版) はフォーム制御子に [[Windows]] 標準のものを使っていましたが、例えば文章入力制御子の[[文脈メニュー]] [WEAK[([[鼠]]の[[補助ボタン]]の[[かちっ]]により出てくるメニュー)]] を表示している間に頁の遷移が行われると制御子は破棄されてそのメニューだけが取り残されてしまい、 何の操作もできなくなって Netscape Navigator 自体を終了するまで[[画面]]の最前面 [WEAK[(他のプログラムの[[窓]]よりも前)]] に居座り続けました。 (Netscape 側の制御子の処理に問題があったのか、 Windows 側で不具合があったのかはわかりませんが・・・。) [10] [[WinIE 6]] や [[Gecko]] [WEAK[(環境や版にもよります。)]] などの [[Webブラウザ]]では [[CSS]] による指定がフォーム制御子では反映されないことがあったりします。 この問題の背景にはその環境の標準のフォーム制御子を利用することによって生じる制限があると思われます。 元々フォーム制御子は[[利用者界面]]としての性質が強く、 [[著者]]がどこまで制御できるべきかという問題があります。 [[Webブラウザ]]の実装に使われる [[GUI]] toolkit の類が提供している機能も様々です。 [[CSS 2]] もフォーム制御子のレンダリングに関しては触れていません [WEAK[([[CSS 3]] は扱っています)]]。 * 関連 [26] [[form-associated element]] も参照。 * 歴史 [12] [CITE@en[Why styling form controls with CSS is problematic | 456 Berea Street]] ([[Roger Johansson]] 著, [TIME[2007-05-25 09:29:14 +09:00]] 版) ([[名無しさん]] [WEAK[2007-05-25 00:32:37 +00:00]]) [13] [CITE@en-GB-x-Hixie[Web Forms 2.0]] ([TIME[2009-01-05 20:07:15 +09:00]] 版) [14] [CITE['''['''whatwg''']''' Should a textarea outside of a document be immutable?]] ([TIME[2012-06-14 09:13:58 +09:00]] 版) [15] [CITE[IRC logs: freenode / #whatwg / 20140130]] ( ([TIME[2014-01-31 19:24:34 +09:00]] 版)) [FIG(quote)[ [FIGCAPTION[ [16] [CITE@en[Bug 28137 – Currency form input types]] ([TIME[2015-03-05 21:40:21 +09:00]] 版) ]FIGCAPTION] > I think we're probably best off having people use custom elements for this. ]FIG] [17] [CITE@en[Editorial: text field → text control]] ([[annevk]]著, [TIME[2016-07-19 02:03:08 +09:00]]) [18] [CITE@en[CSS Form Styling Module Level 1]] ([TIME[2016-10-18 03:33:44 +09:00]]) [19] [CITE@en['''['''shadow-styling''']''' Named parts, styling built-in form controls, and shadow styling (was Re: Goals for Shadow DOM review)]] ([[Edward O'Connor]]著, [TIME[2014-02-21 07:40:09 +09:00]]) [20] [CITE@en[Require autofilling to not discriminate against shadow DOM]] ([[domenic]]著, [TIME[2016-12-08 07:22:41 +09:00]]) [FIG(quote)[ [FIGCAPTION[ [21] [CITE@en[Avoiding the Not Secure Warning in Chrome  |  Web  |  Google Developers]] ([TIME[2016-12-22 00:35:57 +09:00]]) ]FIGCAPTION] > To ensure that the Not Secure warning is not displayed for your pages, you must ensure that all forms containing elements and any inputs detected as credit card fields are present only on secure origins. ]FIG] [22] [CITE@en['''['''css-display''']''' Make form controls and replaced elements behave like 'd…]] ([[fantasai]]著, [TIME[2017-03-09 09:24:26 +09:00]]) [23] [CITE@en['''['''css-display''']''' Use HTML definition of “submittable element” since that…]] ([[fantasai]]著, [TIME[2017-03-09 09:34:32 +09:00]]) [27] [CITE@en[Fix form inheritance behavior for autocapitalize]] ([[rlanday]]著, [TIME[2018-01-25 08:58:12 +09:00]]) [28] [CITE@en[942341 - "top:0" for abspos content in a fieldset is no longer at the top of the (breaking e.g. the Mozillians "edit" page)]] ([TIME[2018-05-02 13:46:31 +09:00]]) [29] [CITE@en[Do not inherit text-transform (et al.) on form controls]] ([[jugglinmike]]著, [TIME[2019-08-29 19:14:53 +09:00]]) [30] [CITE@en[Do not inherit text-transform (et al.) on form controls by jugglinmike · Pull Request #4672 · whatwg/html]] ([TIME[2020-01-12 17:07:23 +09:00]]) [31] [CITE@en[Inhibiting text-transform in form fields · Issue #1310 · whatwg/html]] ([TIME[2020-01-12 17:07:47 +09:00]]) [32] [CITE@en[Rendering section applies CSS properties to form controls where behavior is (currently) undefined · Issue #4676 · whatwg/html]] ([TIME[2020-01-12 17:09:06 +09:00]])