path: root/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html

---
title: 古いブラウザーでの HTML フォーム
slug: Learn/Forms/HTML_forms_in_legacy_browsers
tags:
  - Example
  - Forms
  - Guide
  - HTML
  - Intermediate
  - Web
translation_of: Learn/Forms/HTML_forms_in_legacy_browsers
---
<p>{{LearnSidebar}}</p>

<p>ウェブ開発者は誰でも、ウェブが自分たちにとって非常に厳しい場所であることを、すぐに (時には痛みを伴って) 学びます。最悪の災いは古いブラウザーです。「古いブラウザー」というと、 Safari や古いバージョンの Internet Explorer を思い浮かべますが、それだけではありません。モバイルの世界では、古い Android スマホや iPhone のように、ブラウザーも OS もアップデートできない場合、アップデートされない純正ブラウザーも古いブラウザーです。</p>

<p>この荒れた環境に対応するのも仕事のうちです。幸いなことに、知っておくと古いブラウザーによる問題のほとんどを解決することができる秘訣があります。また、 HTML5 の {{htmlelement('input')}} 型は、対応していなくても失敗はしません。 <code>type=text</code> で代替されます。</p>

<h2 id="Learn_about_the_issues">問題について知る</h2>

<p>一般的なパターンを理解するには、ブラウザーのドキュメントを読むことが役立ちます。 <a href="/">MDN</a> でこの記事を読んでいるのであれば、始めるのにふさわしい場所にいます。使用したい要素 (または DOM インタフェース) の対応状況を確認するだけです。 MDN には、ウェブページで使用できるほとんどの要素、プロパティ、API の互換性一覧表が用意されています。他にも驚くほど役に立つリソースがあります。</p>

<h3 id="Browser_vendor_documentation">ブラウザベンダーのドキュメント</h3>

<ul>
 <li>Mozilla: ここが適切な場所ですので、 MDN を参照してください。/li>
 <li>Microsoft: <a href="https://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx" rel="external">Internet Explorer Standards Support Documentation</a></li>
 <li>WebKit: このエンジンにはいくつかの異なるエディションが存在するため、やや複雑です。
  <ul>
   <li><a href="https://www.webkit.org/blog/" rel="external">The WebKit blog</a> や <a href="https://planet.webkit.org/" rel="external">Planet WebKit</a> は、 WebKit のコア開発者による最良の記事を集約しています。</li>
   <li><a href="https://www.chromestatus.com/features">Chrome platform status site</a> も重要です。</li>
   <li><a href="https://developer.apple.com/technologies/safari/" rel="external">Apple のウェブサイト</a>も同様です。</li>
  </ul>
 </li>
</ul>

<h2 id="Make_things_simple">物事をシンプルにする</h2>

<p><a href="/ja/docs/Learn/Forms">HTML フォーム</a>では複雑なやり取りが行われるため、シンプルに保つという経験則があり、「<a href="https://ja.wikipedia.org/wiki/KISS%E3%81%AE%E5%8E%9F%E5%89%87">KISS の原則</a>」とも呼ばれています。フォームを「よりかっこよく」あるいは「高機能に」したい場合はたくさんありますが、効率的なフォームの作成はデザインや技術の問題ではありません。むしろ、シンプルさ、直感性、そしてユーザーとの対話のしやすさが重要なのです。 <a href="https://www.uxforthemasses.com/forms-usability/" rel="external">forms usability on UX For The Masses</a> のチュートリアルがこれをよく説明しています。</p>

<h3 id="Graceful_degradation_is_web_developers_best_friend">グレイスフルデグラデーションはウェブ開発者の最大の味方</h3>

<p><a href="https://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/" rel="external">グレイスフルデグラデーションとプログレッシブエンハンスメント</a>は、様々なブラウザーに同時に対応することにより、優れたものを作ることができる開発パターンです。新しいブラウザーで何かを構築した場合、古いブラウザーでも同じ方法または別な方法で動作するのであれば、グレイスフルデグラデーションが実施できていることになります。</p>

<p>HTML フォームに関する例をいくつか見ていきましょう。</p>

<h4 id="HTML_input_types">HTML の入力型</h4>

<p>HTML5 で追加された入力型は、劣化の仕方が高度に予測可能であるため、古いブラウザーでもすべて使用可能です。ブラウザーにとって未知の {{htmlattrxref("type","input")}} 属性の値が {{HTMLElement("input")}} 要素にあった場合、その値が <code>text</code> であったかのように代替されます。</p>

<pre class="brush: html">&lt;label for="myColor"&gt;
  Pick a color
  &lt;input type="color" id="myColor" name="color"&gt;
&lt;/label&gt;</pre>

<table>
 <thead>
  <tr>
   <th scope="col" style="text-align: center;">対応済み</th>
   <th scope="col" style="text-align: center;">未対応</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th style="text-align: center;"><img alt="Screen shot of the color input on Chrome for Mac OSX" src="color-fallback-chrome.png"></th>
   <th style="text-align: center;"><img alt="Screen shot of the color input on Firefox for Mac OSX" src="color-fallback-firefox.png"></th>
  </tr>
 </tbody>
</table>

<h4 id="Form_buttons">フォームのボタン</h4>

<p>HTML フォームでボタンを定義する方法は 2 つあります。</p>

<ul>
 <li>{{HTMLElement("input")}} 要素の {{htmlattrxref("type","input")}} 属性に <code>button</code>、<code>submit</code>、<code>reset</code>、<code>image</code> のいずれかの値に設定したもの</li>
 <li>{{HTMLElement("button")}} 要素</li>
</ul>

<h5 id="HTMLElementinput">{{HTMLElement("input")}}</h5>

<p>{{HTMLElement("input")}} 要素は、要素セレクターを使用して CSS を適用したい場合に少し難しくなることがあります。</p>

<pre class="brush: html">&lt;input type="button" value="click me"&gt;</pre>

<p>すべての input から境界線を削除する場合、ボタンについてのみ既定の外見に戻すことができるでしょうか？</p>

<pre class="brush: css">input {
  /* この規則は、input 要素で定義するボタンを含む、境界線を持つ入力型の
  既定のレンダリングを無効にします */
  border: 1px solid #CCC;
}
input[type="button"] {
  /* これでは既定のレンダリングを復元できません */
  border: none;
}
input[type="button"] {
  /* これでも復元できません。実際、どのブラウザーでもできる標準の方法はありませ */
  border: auto;
  border: initial;
}
input[type="button"] {
  /* 対応していれば、これが既定のレンダリングに戻す最も近い方法です。 */
  border: revert;
}</pre>

<p>詳しくは、CSS のグローバル値である {{cssxref('revert')}} を参照してください。</p>

<h5 id="HTMLElementbutton">{{HTMLElement("button")}}</h5>

<p>{{HTMLElement("button")}} 要素は 2 つの問題に悩まされていましたが、すでに解決しました。</p>

<ul>
 <li>古いバージョンの Internet Explorer では、クリックされたときに、 {{HTMLElement("button")}} 要素の開始タグと終了タグの間にある HTML コンテンツが、 {{htmlattrxref("value","button")}} 属性の内容の代わりに送信されるというバグがありました。これは、ユーザーがどのボタンをクリックしたかによってデータ処理が決まる場合など、その値を送信する必要がある場合にのみ問題となっていました。</li>
 <li>一部のとても古いブラウザーは <code>submit</code> を {{htmlattrxref("type","button")}} 属性の既定値として使用していませんでした。すべての現在のブラウザーでは解決していますが、 {{htmlattrxref("type","button")}} 属性を常に {{HTMLElement("button")}} 要素に設定することを推奨します。</li>
</ul>

<pre class="brush: html">&lt;!-- ボタンをクリックすると "A" ではなく "&lt;em&gt;Do A&lt;/em&gt;" を送信する場合があります --&gt;
&lt;button type="submit" name="IWantTo" value="A"&gt;
  &lt;em&gt;Do A&lt;/em&gt;
&lt;/button&gt;</pre>

<p>プロジェクトの制約に基づいて、どちらの解決策を選択するかはあなた次第です。</p>

<h3 id="Let_go_of_CSS">CSS を手放そう</h3>

<p>HTML フォームの大きな問題の一つは、 CSS によるフォームウィジェットのスタイル付けです。フォームコントロールの外観は、ブラウザーや OS に依存します。例えば、 color 型の入力は、 Safari、Chrome、Firefox のそれぞれのブラウザーによって外見が異なりますが、カラーピッカーのウィジェットは、OSのネイティブカラーピッカーを開くため、端末上のどのブラウザーでも同じになります。</p>

<p>一般に、フォームコントロールの既定の外観は変更しない方が良いと考えられています。というのも、 1 つの CSS プロパティの値を変更すると、一部の入力型は変更されますが、他の入力型は変更されないからです。例えば、 <code>input { font-size: 2rem; }</code> と宣言した場合、 <code>number</code>、<code>date</code>、<code>text</code> には影響がありますが、 <code>color</code> や <code>range</code> には影響しません。プロパティを変更すると、予期せぬ形でウィジェットの外観に影響を与えることがあります。例えば、 <code>[value] { background-color: #ccc; }</code> は、 <code>value</code> 属性を持つすべての {{HTMLElement("input")}} を対象としていますが、 {{HTMLElement("meter")}} の背景色や境界線の角の丸めを変更すると、ブラウザーによって異なる予期せぬ結果になる可能性があります。 {{cssxref('appearance', 'appearance: none;')}} と宣言してブラウザーのスタイルを削除することもできますが、一般的には目的を達成できません。すべてのスタイルが失われ、訪問者が慣れ親しんだ既定のルック＆フィールが削除されるからです。</p>

<p>まとめるとすると、フォームコントロールのウィジェットに CSS でスタイル付けすることで、予測できない副作用が発生することがあります。だからやめましょう。 <a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">フォームウィジェット向けプロパティ実装状況一覧</a>の記事の複雑さからもわかるように、非常に難しいのです。テキスト要素に多少の調整 (サイズやフォントの色など) を行うことはまだ可能でも、必ず副作用が発生します。最良の方法は、 HTML フォームウィジェットにスタイルをまったく適用しないことです。しかし、周囲のアイテムになら、どれでも適用することはできます。また、どうしてもフォームウィジェットの既定のスタイルを変更しなければならない場合は、スタイルガイドを定義して、すべてのフォームコントロールの一貫性を確保し、ユーザーの使い勝手を損なわないようにしてください。また、 <a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls">JavaScript でのウィジェットの再構築</a>など、難しいテクニックを検討することもできます。しかし、その場合は、<a href="https://www.smashingmagazine.com/2011/11/03/but-the-client-wants-ie-6-support/" rel="external">そのような愚かな要求をするクライアントに請求すること</a>をためらってはいけません。</p>

<h2 id="Feature_detection_and_polyfills"">機能検出とポリフィル</h2>

<p>CSS や JavaScript は素晴らしい技術ですが、古いブラウザーで壊れないようにすることが重要です。ターゲットとしているブラウザーで完全に対応していない機能を使用する前には、機能検出を行う必要があります。</p>

<h3 id="CSS_feature_detection">CSS の機能検出</h3>

<p>置き換えられたフォームコントロールウィジェットをスタイル付けする前に、 {{cssxref('@supports')}} を使用してその機能にブラウザーが対応しているかどうかをチェックすることができます。</p>

<pre class="brush: css">@supports (appearance: none) {
 input[type="search"] {
   appearance: none;
   /* restyle the search input */
 }</pre>

<p>{{cssxref('appearance')}} プロパティは、要素をプラットフォームのネイティブのスタイルで表示したり、 <code>none</code> の値を指定することで、既定のプラットフォームのネイティブベースのスタイルを削除したりするために使用されます。</p>

<h3 id="Unobtrusive_JavaScript">控えめな JavaScript</h3>

<p>最大の問題のひとつは、API が利用できるかどうかです。そのため、「控えめな」 JavaScript によって取り組むことベストプラクティスであると考えられています。これは、2 つの要件によって定義される開発パターンです。</p>

<ul>
 <li>構造と動作を厳密に分割する。</li>
 <li>コードが動作しない場合でも、コンテンツや基本的な機能はアクセス可能かつ利用可能のままでなければならない。</li>
</ul>

<p><a href="https://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript" rel="external">The principles of unobtrusive JavaScript</a> (原文は Peter-Paul Koch 氏によって Dev.Opera.com 向けに記述され、現在は Docs.WebPlatform.org に移動しました) で、これらのアイデアを明快に説明しています。</p>

<h3 id="The_Modernizr_library">Modernizr ライブラリー</h3>

<p>欠けている API を提供することで、すばらしい "ポリフィル" が大きな助けになるケースが多数あります。<a href="https://remysharp.com/2010/10/08/what-is-a-polyfill/" rel="external">ポリフィル</a>は、古いブラウザにおける機能性の "穴を埋める" 小さな JavaScript コードです。ポリフィルは任意の機能のサポート状況を改善するために使用できますが、JavaScript 向けに使用するのは CSS や HTML 向けより低リスクです。JavaScript が動作しない可能性は多数あります(ネットワークの問題、スクリプトの競合 など)。しかし JavaScript については、控えめな JavaScript を念頭に置いて取り組む場合はポリフィルが欠けたとしても、重大な問題にはなりません。</p>

<p>欠けている API に対してポリフィルを適用する最善の方法は、<a href="https://modernizr.com" rel="external">Modernizr</a> ライブラリー、およびそこからスピンオフしたプロジェクトである <a href="https://yepnopejs.com" rel="external">YepNope</a> を使用することです。Modernizr は、機能が利用できるかを確認して適宜対応を行えるようにするためのライブラリーです。YepNope は、条件付きで読み込みを行うライブラリーです。</p>

<p>例を示します。</p>

<pre class="brush: js">Modernizr.load({
  // ブラウザーが HTML5 のフォーム検証 API に対応しているかを確認します
  test : Modernizr.formvalidation,

  // ブラウザーが対応していない場合は、以下のポリフィルを読み込みます
  nope : form-validation-API-polyfill.js,

  // どの場合でも、API に依存するコアアプリのファイルを読み込みます
  both : app.js,

  // 両方のファイルを読み込んだら、アプリを初期化するためにこの関数を呼び出します
  complete : function () {
    app.init();
  }
});</pre>

<p>Modernizr チームは<a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills" rel="external">すばらしいポリフィルのリスト</a>を管理しています。必要なポリフィルを選びましょう。</p>

<div class="note">
<p><strong>注:</strong> Modernizr は、控えめな JavaScript や グレイスフルでグラデーションのテクニックに取り組むことを支援するためのすばらしい機能を搭載しています。<a href="https://modernizr.com/docs/" rel="external">Modernizr のドキュメント</a>をご覧ください。</p>
</div>

<h3 id="Pay_attention_to_performance">パフォーマンスに注意を払う</h3>

<p>Modernizr のようなスクリプトはパフォーマンスを非常に意識していますが、200 キロバイトのポリフィルをロードすると、アプリケーションのパフォーマンスに影響を与えます。これは、古いブラウザーでは特に重要です。古いブラウザーの多くは JavaScript エンジンが非常に遅く、ポリフィルをすべて実行するとユーザーに負担がかかります。パフォーマンスはそれ自体が問題ですが、古いブラウザーはとても敏感です。基本的に古いブラウザーは遅く、ポリフィルが増えれば増えるほど、より多くの JavaScript を処理しなければなりません。つまり、新しいブラウザーに比べて二重に負担がかかるのです。古いブラウザーでコードをテストし、実際にどのように動作するかを確認してください。すべてのブラウザでまったく同じ機能を使うよりも、一部の機能を削除したほうがユーザーの使い勝手が向上することもあります。最後になりましたが、常にエンドユーザーのことを考えてください。</p>

<h2 id="Conclusion">おわりに</h2>

<p>このように、ブラウザーや OS における既定のフォームコントロールの外観を考慮することは重要です。これらの問題に対処するためのテクニックは数多くありますが、そのすべてをマスターすることは、この記事の範囲を超えています。大前提として、既定の実装を変更することに価値があるかどうかを検討してから挑戦してください。</p>

<p>この <a href="/ja/docs/Learn/Forms">HTML フォームガイド</a>のすべての記事を読んでいれば、フォームの使用に慣れているはずです。新しいテクニックやヒントを見つけた場合は、ガイドの改善にご協力ください。</p>

<h2 id="See_also">関連情報</h2>

<h3 id="Learning_path">学習経路</h3>

<ul>
 <li><a href="/ja/docs/Learn/Forms/Your_first_form">初めての HTML フォーム</a></li>
 <li><a href="/ja/docs/Learn/Forms/How_to_structure_a_web_form">HTML フォームの構築方法</a></li>
 <li><a href="/ja/docs/Learn/Forms/Basic_native_form_controls">ネイティブのフォームウィジェット</a></li>
 <li><a href="/ja/docs/Learn/Forms/HTML5_input_types">HTML5 の入力型</a></li>
 <li><a href="/ja/docs/Learn/Forms/Other_form_controls">高度なフォームコントロール</a></li>
 <li><a href="/ja/docs/Learn/Forms/UI_pseudo-classes">UI 擬似クラス</a></li>
 <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">HTML フォームへのスタイル設定</a></li>
 <li><a href="/ja/docs/Learn/Forms/Form_validation">フォームデータの検証</a></li>
 <li><a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li>
</ul>

<h3 id="Advanced_Topics">高度なトピック</h3>

<ul>
<li><a href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li>
 <li><a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls">カスタムフォームウィジェットの作成方法</a></li>
 <li><a href="/ja/docs/Learn/Forms/HTML_forms_in_legacy_browsers">古いブラウザーでの HTML フォーム</a></li>
 <li><a href="/ja/docs/Learn/Forms/Advanced_form_styling">HTML フォームへの高度なスタイル設定</a></li>
 <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">フォームウィジェット向けプロパティ実装状況一覧</a></li>
</ul>