diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/learn/forms | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/learn/forms')
22 files changed, 9718 insertions, 0 deletions
diff --git a/files/ja/learn/forms/advanced_styling_for_html_forms/index.html b/files/ja/learn/forms/advanced_styling_for_html_forms/index.html new file mode 100644 index 0000000000..1d04415369 --- /dev/null +++ b/files/ja/learn/forms/advanced_styling_for_html_forms/index.html @@ -0,0 +1,556 @@ +--- +title: HTML フォームへの高度なスタイル設定 +slug: Learn/Forms/Advanced_styling_for_HTML_forms +tags: + - Advanced + - CSS + - Forms + - HTML + - Web + - ガイド + - 例 +translation_of: Learn/Forms/Advanced_form_styling +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/Styling_web_forms", "Learn/Forms/UI_pseudo-classes", "Learn/Forms")}}</div> + +<p class="summary">本記事では、スタイル設定が難しい一部の(不良なものと劣悪なもの)フォームコントロールで CSS を使用する方法を見ていきます。<a href="/ja/docs/HTML/Forms/Styling_HTML_forms" title="HTML/Forms/Styling_HTML_forms">前の記事</a>で見たように、テキストフィールドやボタンでの CSS 使用はまったく問題がありません。ここからは、HTML フォームへのスタイル設定の闇の部分を見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシーと、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML">HTML</a> と <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/First_steps">CSS</a> の基本的な理解。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>フォームのどの部分をスタイル設定するのが難しいのか、またなぜなのかを理解する。そこをカスタマイズするのに何ができるかを学ぶ。</td> + </tr> + </tbody> +</table> + +<p>始める前に、2 種類の HTML フォームウィジェットについておさらいしましょう:</p> + +<p><strong>不良</strong>: スタイルの設定が難しく複雑なトリックが必要であり、時に CSS3 の高度な知識が必要である要素:</p> + +<ul> + <li>チェックボックスとラジオボタン</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> +</ul> + +<p><strong>劣悪</strong>: いくつかの要素は CSS でスタイル設定できません。これらが含まれます:</p> + +<ul> + <li>ドロップダウンウィジェットを作成する要素、{{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("datalist")}}を含む</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>のような日付関連コントロール</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/range"><input type="range"></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code></li> + <li>{{HTMLElement("progress")}} and {{HTMLElement("meter")}}</li> +</ul> + +<h2 id="appearance_controlling_OS-level_styling" name="appearance_controlling_OS-level_styling">見た目: OS レベルのスタイル制御</h2> + +<p>前の記事では歴史的に、ウェブフォームのスタイル設定は OS で行われており、それがこのコントロールの見た目のカスタマイズの問題の一部となっていました。</p> + +<p>{{cssxref("appearance")}} プロパティは OS やシステムレベルでウェブフォームのスタイル設定を制御する方法としてい作成されました。不運なことに、そのプロパティの元々の実装の動作はブラウザー間で大きく異なっており、そんなに便利ではありませんでした。最近の実装ではもっと動作が一貫してきており、十分興味深く、それは Chromium-ベースのブラウザー (Chrome, Opera, Edge), Safari, Firefox のいずれも <code>-webkit-</code> のプレフィックスつきバージョン (<code>-webkit-appearance</code>)をサポートしています。Firefox は、ウェブ開発者の大半が <code>-webkit-</code> プレフィックスバージョンをサポート使っていて互換性が良いため、このように決めました。</p> + +<p>リファレンスページを見ると <code>-webkit-appearance</code> の多くの値がありますが、最も便利で、おそらく唯一使うのは <code>none</code> です。これはあらゆるコントロールがシステムレベルのスタイル設定するのをできるだけ防止して、CSS を用いた独自のスタイル設定をできるようにします。</p> + +<p>例えば、次のコントロールを見てみます:</p> + +<pre class="brush: html notranslate"><form> + <p> + <label for="search">search: </label> + <input id="search" name="search" type="search"> + </p> + <p> + <label for="text">text: </label> + <input id="text" name="text" type="text"> + </p> + <p> + <label for="date">date: </label> + <input id="date" name="date" type="datetime-local"> + </p> + <p> + <label for="radio">radio: </label> + <input id="radio" name="radio" type="radio"> + </p> + <p> + <label for="checkbox">checkbox: </label> + <input id="checkbox" name="checkbox" type="checkbox"> + </p> + <p><input type="submit" value="submit"></p> + <p><input type="button" value="button"></p> +</form></pre> + +<p>次の CSS を適用してシステムレベルのスタイル設定を削除します。</p> + +<pre class="brush: css notranslate">input { + -webkit-appearance: none; + appearance: none; +}</pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>: プレフィックスつきのプロパティを使っているときでも、両方の定義を常に入れておくのが良いです — プレフィックス付きとなしと。プレフィックスつきのものは通常は"作業中"を意味するため、将来のブラウザーベンダーはプレフィックスを落とすよう合意することもあるでしょう。上記のコードではそのような結末となった将来でも耐用できます。</p> +</div> + +<p>下記の例ではあなたのシステムでどのように見えるかを示します — デフォルトでは左で、上記の CSS が適用されると右です (その他のシステムでテストしたい場合は<a href="https://mdn.github.io/learning-area/html/forms/styling-examples/appearence-tester.html">ここも探してください</a>)。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/appearence-tester.html", '100%', 400)}}</p> + +<p>たいていの場合、効果は枠線を除去し、CSS でのスタイル設定を少し簡単にしますが、それは本質できありません。いくつかの場合 — 検索やラジオボタン/チェックボックスでは、もっと便利です。これを見ていきましょう。</p> + +<h3 id="Taming_search_boxes" name="Taming_search_boxes">検索ボックスを変更する</h3> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code> は基本的に単なるテキスト入力のため、なぜ <code>appearance: none;</code> が便利なのでしょうか? 答えは macOS での Chromium ベースのブラウザーでは、検索ボックスはスタイル設定の制限があります — 例えば <code>height</code> や <code>font-size</code> を自在に調整できません。この理由は macOS以外の <a href="https://www.wired.com/2013/04/blink/">Chrome ブラウザーはもう WebKit レンダリングエンジンを使っていません</a> 、これは既定では、いくつかのフォームコントロールで Aqua の見た目が有効です。Aqua が有効だと、いくつかのフォームコントロールは <a href="https://webkit.org/blog/28/buttons/">scalable</a> となりません。</p> + +<p>これは デフォルトの Aqua を無効にする <code>appearance: none;</code>で修正できます:</p> + +<pre class="brush: css notranslate">input[type="search"] { + -webkit-appearance: none; + appearance: none; +}</pre> + +<p>下記の例では、2 つのスタイル設定された検索ボックスが見えます。右のものは <code>appearance: none;</code> が適用され、左はそうでありません。macOS Chrome で見ると左のものは正しいサイズでないように見えます。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/search-appearence.html", '100%', 200)}}</p> + +<p>興味深いことに、検索フィールドで border/background をセットしてもこの問題を解決できます、なぜならそれも Aqua を<a href="https://webkit.org/blog/28/buttons/">無効化</a>や "破壊する" からです。下記のスタイル設定された検索ボックスは <code>appearance: none;</code> が適用されていませんが、前の例と同じ macOS Chrome の問題に悩まされていません。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/styled-search.html", '100%', 200)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 検索フィールドでは、Edge と Chrome で入力がフォーカスされないときに "x" の削除アイコンが消えるが、Safari では残ることに気づくこともあるでしょう。CSS で消すには、<code>input[type="search"]::-webkit-search-cancel-button { display: none; }</code>を使用できますが、フォーカス時のアイコンも取り除き、見た目が元に戻らないようです。</p> +</div> + +<h3 id="Check_boxes_and_radio_buttons" name="Check_boxes_and_radio_buttons">チェックボックスとラジオボタン</h3> + +<p>チェックボックスやラジオボタンのスタイリングは難しい場合があります。たとえば、チェックボックスやラジオボタンのサイズはデフォルトのデザインの変更が意図されておらず、ブラウザーで試してみると非常に異なる反応を示します。</p> + +<p id="A_simple_test_case">例えば、シンプルなテストケースを考えてみます:</p> + +<pre class="brush: html notranslate"><span><input type="checkbox"></span></pre> + +<pre class="brush: css notranslate">span { + display: inline-block; + background: red; +} + +input[type=checkbox] { + width : 100px; + height: 100px; +}</pre> + +<p>さまざまなブラウザーでの処理方法は以下のとおりです:</p> + +<table> + <thead> + <tr> + <th scope="col">ブラウザー</th> + <th scope="col">描画結果</th> + </tr> + </thead> + <tbody> + <tr> + <td>Firefox 71 (macOS)</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/15671/firefox-mac-checkbox.png" style="height: 118px; width: 120px;"></td> + </tr> + <tr> + <td>Firefox 57 (Windows 10)</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/15691/firefox-windows-checkbox.png" style="height: 115px; width: 113px;"></td> + </tr> + <tr> + <td>Chrome 77 (macOS), Safari 13, Opera</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/15676/chrome-mac-checkbox.png" style="height: 117px; width: 116px;"></td> + </tr> + <tr> + <td>Chrome 63 (Windows 10)</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/15681/chrome-windows-checkbox.png" style="height: 117px; width: 120px;"></td> + </tr> + <tr> + <td>Internet Explorer 11 (Windows 10)</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/15696/ie11-checkbox.png" style="height: 112px; width: 119px;"></td> + </tr> + <tr> + <td>Edge 16 (Windows 10)</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/15686/edge-checkbox.png" style="height: 118px; width: 119px;"></td> + </tr> + </tbody> +</table> + +<h4 id="ラジオボタンチェックボックスで_appearance_none_を使う">ラジオボタン/チェックボックスで appearance: none を使う</h4> + +<p>これまで見てきたように、チェックボックスやラジオボタンのデフォルトの見た目を {{cssxref('appearance')}}<code>:none;</code> で削除できます。この HTML の例を見てみましょう：</p> + +<pre class="brush: html notranslate"><form> + <fieldset> + <legend>Fruit preferences</legend> + + <p> + <label> + <input type="checkbox" name="fruit-1" value="cherry"> + I like cherry + </label> + </p> + <p> + <label> + <input type="checkbox" name="fruit-2" value="banana" disabled> + I can't like banana + </label> + </p> + <p> + <label> + <input type="checkbox" name="fruit-3" value="strawberry"> + I like strawberry + </label> + </p> + </fieldset> +</form></pre> + +<p>さて、カスタムチェックボックスデザインでこれらのスタイルを設定しましょう。元のチェックボックスを解除することから始めましょう：</p> + +<pre class="brush: css notranslate">input[type=checkbox] { + -webkit-appearance: none; + appearance: none; +}</pre> + +<p>{{cssxref(":checked")}} と {{cssxref(":disabled")}} 擬似クラスを使用して、状態の変化に合わせてカスタムチェックボックスの外観を変更します：</p> + +<pre class="brush: css notranslate">input[type=checkbox] { + position: relative; + width: 1em; + height: 1em; + border: 1px solid gray; + /* Adjusts the position of the checkboxes on the text baseline */ + vertical-align: -2px; + /* Set here so that Windows' High-Contrast Mode can override */ + color: green; +} + +input[type=checkbox]::before { + content: "✔"; + position: absolute; + font-size: 1.2em; + right: 0; + top: -0.3em; + visibility: hidden; +} + +input[type=checkbox]:checked::before { + /* Use `visibility` instead of `display` to avoid recalculating layout */ + visibility: visible; +} + +input[type=checkbox]:disabled { + border-color: black; + background: #ddd; + color: gray; +}</pre> + +<p>こうした疑似クラスなどは、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">次の記事</a>で見つけられますが、上記は次のことをしています:</p> + +<ul> + <li><code>:checked</code> — チェックボックス (やラジオボタン) がチェックされた状態にあります — ユーザーがクリック/有効化しています。</li> + <li><code>:disabled</code> — チェックボックス (やラジオボタン) が無効な状態にあります — 操作することができますせん.</li> +</ul> + +<p>実際の結果が表示されます。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/checkboxes-styled.html", '100%', 200)}}</p> + +<p>もっと理解できるよう別の例もあります:</p> + +<ul> + <li><a href="https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html">Styled radio buttons</a>: カスタムラジオボタンスタイル設定。</li> + <li><a href="https://mdn.github.io/learning-area/html/forms/toggle-switch-example/">Toggle switch example</a>: トグルスイッチのようなチェックボックス。</li> +</ul> + +<p>{{cssxref("appearance")}} や をサポートしていないブラウザーでこれらのチェックボックスを表示できます。カスタムデザインは失われますが、チェックボックスのままに見えて使用できます。</p> + +<div class="blockIndicator note"> +<p><strong>注記</strong>: Internet Explorer はどのバージョンの <code>appearance</code> もサポートしませんが、<code>input[type=checkbox]::-ms-check</code> にて IE のみチェックボックスをターゲットにできます。この手法は、<code>-ms-<em><strong>check</strong></em></code> という名前にもかかわらず、ラジオボタンでも機能します。</p> +</div> + +<h2 id="劣悪な要素に何ができるか">"劣悪な"要素に何ができるか?</h2> + +<p>今度は"劣悪な"コントロールに注目しましょう — これは完全にスタイル設定するのが本当に難しいものです。簡単にいうと、これはドロップダウンボックス、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/color">color</a></code> や <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> のような複合コントロールタイプ、フィードバック — {{HTMLElement("progress")}} や {{HTMLElement("meter")}}のような指向性コントロールです。</p> + +<p>問題は、要素はブラウザー同士でいろいろな既定の見た目があって、それにスタイル設定できても、内部のいくつかはスタイル設定できないことです。</p> + +<p>別のルック＆フィールに生きる準備がある場合、サイズ変更が一貫していて、background-colors のような単一スタイル設定、システムレベルのスタイル設定を除去できる見た目を使うシンプルなスタイル設定を持って逃げることもできます。</p> + +<p>例を見てみましょう、たくさんの"劣悪な" フォーム機能をつぎつぎに表示しています:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/ugly-controls.html", '100%', 750)}}</p> + +<p>この例では下記の CSS を適用しています:</p> + +<pre class="brush: css notranslate">body { + font-family: 'Josefin Sans', sans-serif; + margin: 20px auto; + max-width: 400px; +} + +form > div { + margin-bottom: 20px; +} + +select { + -webkit-appearance: none; + appearance: none; +} + +.select-wrapper { + position: relative; +} + +.select-wrapper::after { + content: "▼"; + font-size: 1rem; + top: 6px; + right: 10px; + position: absolute; +} + +button, label, input, select, progress, meter { + display: block; + font-family: inherit; + font-size: 100%; + padding: 0; + margin: 0; + box-sizing: border-box; + width: 100%; + padding: 5px; + height: 30px; +} + +input[type="text"], input[type="datetime-local"], input[type="color"], select { + box-shadow: inset 1px 1px 3px #ccc; + border-radius: 5px; +} + +label { + margin-bottom: 5px; +} + +button { + width: 60%; + margin: 0 auto; +}</pre> + +<div class="blockIndicator note"> +<p><strong>注記</strong>: 多数のブラウザーで同時にこの例をテストしたい場合、<a href="https://mdn.github.io/learning-area/html/forms/styling-examples/ugly-controls.html">live版をここで見つけてください</a> (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/styling-examples/ugly-controls.html">ソースコードも見てください</a>)。</p> + +<p>また JavaScript をページに追加してコントロール自身の下にあるファイルピッカー自身で選択されたファイルを一覧しているのを心に留めておいてください。これは <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/file#Examples"><input type="file"></a></code> リファレンスページの例を簡単にしたバージョンです。</p> +</div> + +<p>見ていくうちに、この見た目がモダンブラウザーのようになっていくのが上手になるでしょう。</p> + +<p>すべてのコントロールとそのラベルに対してグローバルな CSS の正規化を適用し、サイズを同様にして、親のフォントを適用するなどを行っています。これは前の記事で述べたようなことです:</p> + +<pre class="brush: css notranslate">button, label, input, select, progress, meter { + display: block; + font-family: inherit; + font-size: 100%; + padding: 0; + margin: 0; + box-sizing: border-box; + width: 100%; + padding: 5px; + height: 30px; +}</pre> + +<p>コントロールに統一した影と角丸も与えて、意味のあるようにします:</p> + +<pre class="brush: css notranslate">input[type="text"], input[type="datetime-local"], input[type="color"], select { + box-shadow: inset 1px 1px 3px #ccc; + border-radius: 5px; +}</pre> + +<p>範囲や、プログレスバーや、メーターはコントロールエリアの周りに美しくないボックスができるだけなので、意味はありません。</p> + +<p>これらのコントロールタイプそれぞれの仕様と、ハイライトの難しさをこれからお話ししましょう。</p> + +<h3 id="Selects_and_datalists" name="Selects_and_datalists">Select とデータリスト</h3> + +<p>モダンブラウザーでは、select とデータリストは一般的に、デフォルトからルック＆フィールを大きく変えたくないようにスタイル設定する場合、悪くないものです。</p> + +<p>これまで boxe を、とても統一されて一貫した見た目にしてきました。とにかくデータリストコントロールは <code><input type="text"></code> なので、問題にならないことがわかっています。</p> + +<p>2 つのものが多少問題をはらんでいます。まず最初に、select がドロップダウンであることを示す "矢印" アイコンは、ブラウザーによって異なります。また select ボックスのサイズを増やしたり、変更したりすると、醜くなりがちです。これを修正するため、例では最初に旧友の <code>appearance: none</code> を使ってアイコンを除去しています:</p> + +<pre class="brush: css notranslate">select { + -webkit-appearance: none; + appearance: none; +}</pre> + +<p>次に生成されたコンテンツを使って独自のアイコンを作成します。コントロールの周りに特別なラッパーを置いていて、その理由は<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/::before">::before</a></code>/<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/::after">::after</a></code> が <code><select></code> 要素では動作しなしためです (これは生成されたコンテンツが要素がフォーマットするボックスに対し相対的に配置されますが、フォーム入力は置換された要素 — 表示がブラウザーによって生成されて順番に配置されるもの — として動作するので、1 つもないためです):</p> + +<pre class="brush: html notranslate"><div class="select-wrapper"><select id="select" name="select"> + <option>Banana</option> + <option>Cherry</option> + <option>Lemon</option> +</select></div></pre> + +<p>次に生成されたコンテンツを使って小さな下向き矢印を作り、正しい場所にポジショニングします:</p> + +<pre class="brush: css notranslate">.select-wrapper { + position: relative; +} + +.select-wrapper::after { + content: "▼"; + font-size: 1rem; + top: 6px; + right: 10px; + position: absolute; +}</pre> + +<p>2 つ目のもう少し有名な問題は、<code><select></code> ボックスをクリックして開いたときに出てくる、オプションを含んだボックスを制御できないことです。オプションが親でセットされたフォントを継承していないのに気づくでしょう。また余白スペースや色のようなものも一貫してセットできません。例えば、Firefox では<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/option"><option></a></code> 要素に <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/color">color</a></code> と <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/background-color">background-color</a></code> を適用できますが、Chrome ではそうなりません。どちらも余白スペース (例 <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/padding">padding</a></code>)を適用できません。同じことはデータリスト用に出てくるオートコンプリートのリストにも当てはまります。</p> + +<p>本当にオプションをスタイル設定する必要がある場合、カスタムコントロールを生成するライブラリを使用するか、独自のカスタムコントロールを作成するかのどちらかが必要で、あるいは <code>multiple</code>属性を使う select の場合、これはページ上に出てくるすべてのオプションを作成し、この特殊な問題を避けることができます:</p> + +<pre class="brush: html notranslate"><select id="select" name="select" multiple> + ... +</select></pre> + +<p>もちろんこれでも進めているデザインにはフィットしないこともありますが、注目に値します!</p> + +<h3 id="Date_input_types" name="Date_input_types">日付入力タイプ</h3> + +<p>日付/時間の入力タイプ (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code>, <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/time">time</a></code>, <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/week">week</a></code>, <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/month">month</a></code>) にはすべて同じ重大な関連した問題があります。実際のボックスはテキスト入力と同じくスタイル設定が容易であり、デモ内で得たものの見た目は良いです。</p> + +<p>しかし、コントロールの内部パーツ (例 日付をピックアップするのに使うポップアップカレンダー、値を増減するスピナー) はまったくスタイル設定できず、<code>appearence: none;</code>を使ってスタイルを除去できません。スタイル設定に完全なコントロールが必要な場合、カスタムコントロールを生成するライブラリを使うか、自分で作らねばなりません。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ここでも<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/number"><input type="number"></a></code> は触れる価値があります — これにも値を増減するスピナーがあるので、同じ問題に悩まさされます。しかし、<code>number</code> タイプを使った場合にデータは簡単に集められて、単に <code>text</code> 入力を (あるいはモバイルブラウザーで数字キーパッドを表示するのに <code>tel</code> を) 代わりに使うのも簡単です</p> +</div> + +<h3 id="Range_input_types" name="Range_input_types">Range 入力タイプ</h3> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/range"><input type="range"></a></code> はスタイル設定が煩わしいです。下記のようなものを使ってデフォルトのスライダートラックを完全に削除してカスタムスタイル (ここでは、薄い赤のトラック)に置き換えます:</p> + +<pre class="brush: css notranslate">input[type="range"] { + appearance: none; + -webkit-appearance: none; + background: red; + height: 2px; + padding: 0; + outline: 1px solid transparent; +}</pre> + +<p>しかし、range コントロールのドラッグハンドルをカスタマイズするのはとても難しいです — range のスタイル設定を完全完全にコントロールするには、その中に複数の非標準な、ブラウザー固有の疑似要素も含んだ、複雑な CSS コードが必要です。<a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">Styling Cross-Browser Compatible Range Inputs with CSS</a> で必要なものを細かく書くための CSS トリックを確認します。</p> + +<h3 id="Color_input_types" name="Color_input_types">Color 入力タイプ</h3> + +<p>color 入力タイプはそこまでひどくないです。サポートされたブラウザーでは、単に小さな枠のある単色のブロックを提供します。</p> + +<p>枠を削除して、色のブロックだけにするには、次のようにします:</p> + +<pre class="brush: css notranslate">input[type="color"] { + border: 0; + padding: 0; +}</pre> + +<p>しかし、カスタムソリューションは大きく異るようにする唯一の方法です。</p> + +<h3 id="File_input_types" name="File_input_types">ファイル入力タイプ</h3> + +<p>ファイル入力タイプは通常は OK です — 例で見てきたように、ページの残りの部分に問題なくフィットする何かを作るのはとても簡単です — コントロールの一部分でもある出力行は、入力にそう指示している場合は親のフォントを継承して、カスタムリストに名前やサイズをお好みでスタイル設定できます; 結局は作っています。</p> + +<p>ファイルピッカーの唯一の問題は、ファイルピッカーを開くボタンは完全にスタイル設定できないことです— サイズや色設定は不可能で、別のフォントすら指定できません。</p> + +<p>この回避法は、フォームコントロールに関連するラベルがある場合、ラベルをクリックするとコントロールがアクティブになるという事実を利用します。つまり実際のフォーム入力を次のように隠します:</p> + +<pre class="brush: css notranslate">input[type="file"] { + height: 0; + padding: 0; + opacity: 0; +}</pre> + +<p>次にボタンのように動作するラベルをスタイル設定し、そのラベルが押された時にファイルピッカーが期待通り開くようにします:</p> + +<pre class="brush: css notranslate">label[for="file"] { + box-shadow: 1px 1px 3px #ccc; + background: linear-gradient(to bottom, #eee, #ccc); + border: 1px solid rgb(169, 169, 169); + border-radius: 5px; + text-align: center; + line-height: 1.5; +} + +label[for="file"]:hover { + background: linear-gradient(to bottom, #fff, #ddd); +} + +label[for="file"]:active { + box-shadow: inset 1px 1px 3px #ccc; +}</pre> + +<p>上記の CSS スタイル設定の結果は、下記のライブ実行の例で見ることができます (<a href="https://mdn.github.io/learning-area/html/forms/styling-examples/styled-file-picker.html">styled-file-picker.html</a> のライブと、<a href="https://wiki.developer.mozilla.org/enhttps://github.com/mdn/learning-area/blob/master/html/forms/styling-examples/styled-file-picker.html-US/docs/">ソースコード</a>も見てください)。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/styled-file-picker.html", '100%', 200)}}</p> + +<h3 id="Meters_and_progress_bars" name="Meters_and_progress_bars">メーターとプログレスバー</h3> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/meter"><meter></a></code> と <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/progress"><progress></a></code> は多くの中で最悪かもしれません。前の例で見たように、希望する幅にだいたい正確に設定できました。しかしそれを超えると、どんな方法でもスタイル設定が本当に難しいです。高さの設定をお互いに、ブラウザー間で一貫して処理できず、背景は色付けできるものの、前面のバーはできず、<code>appearance: none</code> を設定すると良くならず、より悪くなります。</p> + +<p>スタイル設定を制御したい場合は、この機能のカスタムソリューションを作ったり、<a href="http://kimmobrunfeldt.github.io/progressbar.js/#examples">progressbar.js</a> のようなサードパーティのソリューションを使うのは簡単です。</p> + +<h2 id="The_road_to_nicer_forms_useful_libraries_and_polyfills" name="The_road_to_nicer_forms_useful_libraries_and_polyfills">よりよいフォームへの道: 役に立つライブラリとポリフィル</h2> + +<p>すでにいくつか見てきたように、"劣悪な"コントロールを完全にコントロールしたい場合は、JavaScript に頼るしかありません。<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットをビルドする方法</a>の記事では、独自のフォームウィジェットを作成する方法を見ていきますが、そこには役に立つ便利なライブラリがいくつかあります。</p> + +<ul> + <li><a href="http://sprawsm.com/uni-form/" rel="external">Uni-form</a> はフォームマークアップを標準化し、CSS でスタイリングするフレームワークです。jQuery で使用すると、いくつかの追加機能も提供されますが、これはオプションです</li> + <li><a href="http://formalize.me/" rel="external">Formalize</a> は、フォームの正規化とカスタマイズを支援する共通の JavaScript フレームワーク (jQuery、Dojo、YUI など) の拡張です</li> + <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external">Niceforms</a> はスタンドアロンの JavaScript メソッドで、ウェブフォームを完全にカスタマイズできます。あなたは、組み込みのテーマのいくつかを使用することも、独自のテーマを作成することもできます</li> +</ul> + +<p>次のライブラリはフォームだけではありませんが、HTML フォームを処理するための非常に興味深い機能を備えています：</p> + +<ul> + <li><a href="http://jqueryui.com/" rel="external">jQuery UI</a> には日付ピッカーなどのカスタマイズ可能なウィジェットが用意されています (アクセシビリティに特に注意してください)</li> + <li><a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="external">Twitter Bootstrap</a> はフォームを正規化するのに役立ちます</li> + <li><a href="https://afarkas.github.io/webshim/demos/" rel="external">WebShim</a> は、ブラウザーの HTML5 サポートに対処するのに役立つ巨大なツールです。ウェブフォームの部分は本当に役に立ちます</li> +</ul> + +<p>CSS と JavaScript には副作用があることに注意してください。したがって、それらのライブラリのいずれかを使用することを選択した場合は、スクリプトが失敗した場合に備えて、堅牢なフォールバック HTML を用意する必要があります。スクリプトが失敗する理由はたくさんあります。特にモバイル環境では、これらのケースを可能な限り最善に処理するようにウェブサイトやアプリケーションを設計する必要があります。</p> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事の最後に到達しましたが、重要な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Test_your_skills:_Advanced_styling">Test your skills: Advanced styling</a> を見てください。心に留めておくこととして、この評価シリーズでの質問は、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">次の記事</a>の知識も前提していてるので、試す前にその記事に取り組むとよいかもしれません。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>HTML フォームで CSS を使用するのはまだ困難ですが、しばしばそれらを回避する方法があります。クリーンでユニバーサルな解決方法はありませんが、最新のブラウザーでは新しい可能性があります。今のところ、最良の解決策は、HTML フォームウィジェットに適用されたときに異なるブラウザーが CSS をサポートする方法の詳細を学ぶことです。</p> + +<p>このガイドの次の記事では、モダンブラウザーでさまざまな状態のフォームをスタイル設定できるさまざまな <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">UI 疑似クラス</a>を見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/Forms/Styling_web_forms", "Learn/Forms/UI_pseudo-classes", "Learn/Forms")}} </p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めての HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">古いブラウザーでの HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Property_compatibility_table_for_form_widgets">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">Advanced Topics</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form controls</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> +</ul> diff --git a/files/ja/learn/forms/form_validation/index.html b/files/ja/learn/forms/form_validation/index.html new file mode 100644 index 0000000000..ea6887ba21 --- /dev/null +++ b/files/ja/learn/forms/form_validation/index.html @@ -0,0 +1,840 @@ +--- +title: クライアント側のフォームデータ検証 +slug: Learn/Forms/Form_validation +tags: + - HTML + - Intermediate + - JavaScript + - Web + - ウェブ + - ガイド + - フォーム + - フォーム検証 + - 中級者向け + - 例 +translation_of: Learn/Forms/Form_validation +--- +<div> +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div> +</div> + +<p>データをサーバーへ送信する前に、必須のフォームコントロールが記入され、すべてのフォームコントロールが正しい書式で記入されていることを保証することが重要です。この<strong>クライアント側フォーム</strong><ruby><strong>検証</strong><rp>（</rp><rt>validation</rt><rp>）</rp></ruby>は、送信されるデータが様々なフォームコントロールで指定されている要件を満たしていることを保証します。この記事では、クライアント側フォーム検証の基本概念と例を紹介します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>コンピューターリテラシー、適度な <a href="/ja/docs/Learn/HTML">HTML</a>、<a href="/ja/docs/Learn/CSS">CSS</a>、<a href="/ja/docs/Learn/JavaScript">JavaScript</a> の理解。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>フォーム検証とは何か、なぜ重要なのか、どのように実装するのかを理解すること。</td> + </tr> + </tbody> +</table> + +<p>クライアント側検証は最初のチェックであり、ユーザーの使い勝手を良くするために重要な機能ですクライアント側で不当なデータを捕捉することで、ユーザーはすぐに修正できます。無効なデータがサーバーに送られるて拒否されると、サーバーへ往復してユーザーにデータ修正するよう連絡することによってかなり時間を浪費します。</p> + +<p>しかし、クライアント側の検証はセキュリティ対策<em>とは考えられません</em>!アプリは常に<em>サーバー側でも</em>クライアント側と<strong>同様に</strong>送信されたデータのセキュリティをチェックします。なぜならクライアント側の検証は容易に回避することができて、悪意のユーザーは簡単に、サーバーへ不正なデータを送信できます。何が起こり得るかは <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトセキュリティ</a>を見てください。サーバー側検証はこのガイドの範囲を超えますが、覚えておいてください。</p> + +<h2 id="What_is_form_validation" name="What_is_form_validation">フォーム検証とは何か</h2> + +<p>有名なサイトの登録フォームに行き、データを求められている書式で入力しなかいと、フィードバックがあることに気づくでしょう。次のようなメッセージが表示されます。</p> + +<ul> + <li>「このフィールドは必須です」 (このフィールドが空欄にできない場合)</li> + <li>「電話番号は XXX-XXXX の形式で入力してください」 (あるデータフォーマットが必須の場合)</li> + <li>「有効なメールアドレスを入力してください」 (入力データが適切なフォーマットではない場合)</li> + <li>「パスワードは 8文字から 30文字の間で、1文字以上の大文字、記号、数字を含む必要があります。」 (特に詳しいデータフォーマットが必要な場合)</li> +</ul> + +<p>これは<strong>フォーム検証</strong>と呼ばれます。データを入力したとき、ブラウザー、またはウェブアプリケーションは、そのデータが正しい書式であり、アプリケーションに設定された制約に合っているかをチェックします。ブラウザーで行われる検証は<strong>クライアント側</strong>検証と、サーバー側で行われるものは<strong>サーバー側</strong>検証と呼ばれます。この章では、クライアント側検証に集中します。</p> + +<p>情報が正しい書式であれば、アプリケーションはデータのサーバーへの送信を許可し、(ふつうは) データベースに保存されます。正しい書式でなければ、何を修正する必要があるかを説明するメッセージを表示し、ユーザーに再入力させます。</p> + +<p>私たちはできるだけ簡単にフォームを埋めてもらいたいわけですが、なぜフォームを検証する必要があるのでしょうか？理由は主に三つあります。</p> + +<ul> + <li><strong>正しいデータを正しい書式で入力してほしい。</strong>ユーザーのデータが誤った形式で格納されたり、ユーザーが正しい情報を入力しなかったり、省略したりすると、アプリケーションが正しく動作しないからです。</li> + <li><strong>ユーザーのデータを保護したい。</strong>ユーザーに安全なパスワードを入力させることで、アカウント情報を保護しやすくなります。</li> + <li><strong>自分たちを守りたい。</strong>悪意のあるユーザーが保護のないフォームを悪用して、そのフォームを一部に持つアプリケーションに危害を加える方法がたくさんあります。(<a href="/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトセキュリティ</a>を参照してください)。<br> + {{warning("クライアントからサーバーに渡されたデータを信用しないでください。フォームが正しく検証を行い、クライアント側で悪意のある入力を防いでいるとしても、悪意のあるユーザーはネットワークリクエストを改ざんすることができます。")}}</li> +</ul> + +<h2 id="Different_types_of_form_validation" name="Different_types_of_form_validation">様々な種類のフォーム検証</h2> + +<p>ウェブで見かけるフォーム検証には二つの種類があります。</p> + +<ul> + <li><strong>クライアント側検証</strong>は、データがサーバーへ送信される前にブラウザー内で行われる検証です。これはすぐに反応を返せるので、サーバー側検証よりもユーザーに親切です。これはさらに分類できます。</li> + <li><strong>JavaScript</strong> 検証は JavaScript を使ってコーディングされるものです。これは完全にカスタマイズ可能ですが、すべて作成する(かライブラリを使う)必要があります。</li> +</ul> + +<h2 id="Using_built-in_form_validation" name="Using_built-in_form_validation">内蔵フォーム検証の利用</h2> + +<p><a href="/ja/docs/HTML/HTML5">HTML5</a> のフォーム制御の機能の一つに JavaScript に頼らない多くのユーザーデータの検証があります。これはフォーム要素の validation属性を使って行います。これまで多くを見てきましたが、まとめ直すと:</p> + +<ul> + <li><code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code>: 属性は値が入力されているべきかどうかを指定します。</li> + <li><code><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></code> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>属性: データ長の最小値と最大値を指定します。</li> + <li><code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code>属性: 値の最小値と最大値を指定します。</li> + <li><code>type</code> 属性: その入力データが数値や、E メールアドレスや、特定の指定型かを指定します。</li> + <li><code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性: データが指定された<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>にマッチするかどうかを指定します。</li> +</ul> + +<p>入力データをこの指定されたルールに基いて検証します。検証にパスすれば妥当で検証にパスしなければ妥当ではないと考えます。</p> + +<p>要素が妥当な場合は、次のようになります。</p> + +<ul> + <li>要素が CSS の {{cssxref(":valid")}} 疑似クラスに一致します。これにより、妥当な要素に特定のスタイルを適用することができます。</li> + <li>ユーザーがデータを送信しようとすると、ブラウザーは止めるものが他になければ（JavaScript など）、フォームを送信します。</li> +</ul> + +<p>要素が不正なときは、次のようになります。</p> + +<ul> + <li>要素が CSS の {{cssxref(":invalid")}} 疑似クラスに一致します。これにより、不正な要素に特定のスタイルを適用することができます。</li> + <li>ユーザーがデータを送信しようとすると、ブラウザーはフォームをブロックしてエラーメッセージを表示します。</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>注:</strong> サーバーへの送信を中断するエラーがいくつかあります。次のものが含まれます: {{domxref('validityState.badInput', 'badInput')}}、{{domxref('validityState.patternMismatch','patternMismatch')}}、{{domxref('validityState.rangeOverflow','rangeOverflow')}} または{{domxref('validityState.rangeUnderflow','underFlow')}}、{{domxref('validityState.stepMismatch','stepMismatch')}}、フォームの制御の {{domxref('validityState.tooLong','tooLong')}} または{{domxref('validityState.tooShort','tooShort')}}、{{domxref('validityState.typeMismatch','typeMismatch')}}、と 必要とされた値の{{domxref('validityState.valueMissing','valueMissing')}}、また {{domxref('validityState.customError','customError')}}も含まれる。</p> +</div> + +<h2 id="Validation_constraints_on_input_elements_—_starting_simple" name="Validation_constraints_on_input_elements_—_starting_simple">入力要素の制約の検証</h2> + +<p>この節では、これまで述べてきたいくつかの属性をテストします。</p> + +<h3 id="簡単な最初のファイル">簡単な最初のファイル</h3> + +<p>簡単な例から始めましょう。― 好きな果物を banana(バナナ)か cherry(サクランボ)から選べる入力欄があるとします。単純なテキストの {{HTMLElement("input")}} とそれに合わせたラベル、送信の {{htmlelement("button")}} から成ります。ソースコードは GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> で、ライブサンプルは次の通りです。</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">banana と cherry のどちらが好き?</label> + <input id="choose" name="i_like"> + <button>Submit</button> +</form></pre> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>{{EmbedLiveSample("Validation_constraints_on_input_elements", "100%", 80)}}</p> + +<p>始めるにあたって、ハードディスク内の新しいディレクトリーに <code>fruit-start.html</code> のコピーを作成してください。</p> + +<h3 id="The_required_attribute" name="The_required_attribute">required 属性</h3> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/required">required</a></code> 属性は、使うのがもっとも簡単な HTML5 の検証機能です。入力欄を必須にしたい場合は、この属性を使用して要素をマークすることができます。この属性が設定されていて、要素が {{cssxref(':required')}} にマッチすると、UI疑似クラスとフォームは送信されず、入力が空の場合のエラーメッセージが表示されるでしょう。空のままでは、この入力は不正とみなされ、{{cssxref(':invalid')}} 疑似クラスにマッチします。</p> + +<p>以下のように、<code>required</code> 属性を入力欄に追加しましょう。</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">banana と cherry のどちらが好き? (要入力)</label> + <input id="choose" name="i_like" required> + <button>Submit</button> +</form></pre> + +<p>このサンプルファイルの中に含まれている CSS も書いておきましょう。</p> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:invalid:required { + background-image: linear-gradient(to right, pink, lightgreen); +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>この CSS によって、入力が妥当でない場合には、入力を赤の破線で境界線を描きますが、入力が妥当な場合には、黒の直線で境界線を描きます。要求された値があり、値が妥当でないときは背景にグラディエーションを追加します。つぎの例の動作を確認しましょう。</p> + +<p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: この例は GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html">fruit-validation.html</a> で見ることができます (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html">ソースコード</a>も見てください)。</p> +</div> + +<p>値のないままフォームを送信してみましょう。妥当ではない入力がどのようにフォーカスされるか注意しましょう。デフォルトのエラーメッセージ("Please fill out this field") が表示され、フォームの送信を阻止します。</p> + +<p><code>required</code> 属性をサポートしている要素にこの属性がある場合、その要素に値があるかないかによって、要素が {{cssxref(':required')}} 疑似クラスに一致するかどうかが決まります。もし {{HTMLElement("input")}} に値がなければ、<code>input</code> は{{cssxref(':invalid')}} 疑似クラスに一致します。</p> + +<div class="blockIndicator note"> +<p>注意: よりよいユーザーエクスペリエンスのために、フォームのフィールドが必要なときにはユーザーに通知しましょう。これはユーザーエクスペリエンスだけに良いというわけではなく、WCAG <a href="/ja/docs/Learn/Accessibility">アクセシビリティ</a> ガイドラインで求められています。また、あなたが本当に必要とする場合にのみ必須にしましょう。例えばあなたは誰かの性別や肩書などの情報は本当に必要でしょうか?</p> +</div> + +<h3 id="Validating_against_a_regular_expression" name="Validating_against_a_regular_expression">正規表現での検証</h3> + +<p>もう一つとてもよく使われる機能は <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性で、値として<a href="/ja/docs/JavaScript/Guide/Regular_Expressions">正規表現</a>を取ります。正規表現 (regex) はテキスト文字列の中の文字の組み合わせに一致させるために使うことができ、フォームの検証には理想的です (JavaScript と同様に様々な利用ができます) 。</p> + +<p>正規表現はかなり複雑です。このモジュールでは正規表現のすべてを説明する意図はありません。いくつかの例を挙げますのでどのように動作するか基本的なアイディアを把握してください。</p> + +<ul> + <li><code>a</code> — <code>a</code> の 1文字に一致する (<code>b</code> や <code>aa</code> などではない)。</li> + <li><code>abc</code> — <code>a</code> と、その次の <code>b</code> と、その次の <code>c</code> の並びに一致する。</li> + <li><code>ab?c</code>— <code>a</code> と、その次にひとつだけ <code>b</code> があるかないかと、その次の <code>c</code> の並びに一致する ( <code>ac</code> または <code>abc</code>)</li> + <li><code>ab*c</code>— <code>a</code> と、その次に任意の数の <code>b</code> が続き、その次に <code>c</code> のある並びに一致する。( <code>ac</code> , <code>abc</code>, <code>abbbbbc</code>, 等)</li> + <li><code>a|b</code> — 一文字の <code>a</code> または <code>b</code> に一致する</li> + <li><code>abc|xyz</code> — <code>abc</code> の並びまたは <code>xyz</code> の並びに一致する。これは <code>abcxyz</code> や <code>a</code> や <code>y</code> などには一致しない。</li> +</ul> + +<p>正規表現には多くの組合せがあるので例はここまでとする。完全な一覧や多くの例は、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>ドキュメントを参照してください。</p> + +<p>使用例を実装しましょう。HTML を更新して <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性を追加しましょう:</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">banana と cherry のどちらが好き?</label> + <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry"> + <button>Submit</button> +</form></pre> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>これは下記の更新があります。次のものを使ってみてください:</p> + +<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html">fruit-pattern.html</a> でライブサンプルを見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">ソースコード</a>も見てください)</p> +</div> + +<p>この例では、{{HTMLElement("input")}} 要素は "banana"、"Banana"、"cherry" または "Cherry" という 4 つの文字列値のうち 1 つを受け付けます。正規表現は大文字小文字を区別しますが、中括弧にはさまれた"Aa"のパターンを使って小文字と同様に先頭が大文字のバージョンをサポートします。</p> + +<p>この時点で、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性の中の値を以前に見たいくつかの例と同じ値に変更してみて、入力欄が有効になるように入力する値がどのように影響するかを確認してください。自分で考えた値も書いてみて、どのようになるか確認しましょう。果物に関する値を可能にすれば、例が分かりやすくなります。</p> + +<p>もし {{HTMLElement("input")}} の空ではない値が正規表現パターンに一致しなかった場合、この <code>input</code> は {{cssxref(':invalid')}} 疑似クラスに一致します。</p> + +<div class="blockIndicator note"> +<p><strong>メモ:</strong> {{HTMLElement("input")}} 要素の型によっては、検証のために <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性が必要ないことがあります。例えば <code>email</code> 型を指定すると、入力された文字列を、妥当な形式のメールアドレスまたは、 <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 属性がある場合はカンマで区切られたメールアドレスのリストであることを確認する正規表現で検証します。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: {{HTMLElement("textarea")}} 要素は <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性に対応していません。</p> +</div> + +<h3 id="Constraining_the_length_of_your_entries" name="Constraining_the_length_of_your_entries">入力欄の長さの制約</h3> + +<p>あなたが、{{HTMLElement("input")}} または {{HTMLElement("textarea")}} によって作成してすべてのテキストフィールドで文字数を制限したいときには <a href="/ja/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> 属性が使用できます。フィールドが値をもっており、その文字数が <a href="/ja/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> の値より少ないか、文字数が <code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> の値より大きい場合は、フィールドは不正です。</p> + +<p>ブラウザーはよくテキストフィールドに期待している以上に入力させないことがあります。単に <code>maxlength</code> を使うよりも良いユーザーエクスペリエンスは、入力文字数のフィードバックを提供してサイズ以下でコンテンツを編集できるようにもしておくことです。例えば、Twitter の文字入力の制限があります。これは JavaScript と <a href="https://github.com/mimo84/bootstrap-maxlength"><code>maxlength</code> を使った解決策</a>の組合せで実現できます。</p> + +<h3 id="Constraining_the_values_of_your_entries" name="Constraining_the_values_of_your_entries">入力欄の値に制約を加える</h3> + +<p>数値のフィールド (例えば <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/number"><input type="number"></a></code>) の場合、<code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性によって入力に制限を加えられます。もしそのフィールドの値がこの範囲を超える場合、そのフィールドは妥当ではありません。</p> + +<p>他の例を見てみましょう。<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> ファイルの新しいコピーを作成してください。</p> + +<p>では、<code><body></code> 要素の中身を削除して、以下のように置き換えてください。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="choose">banana と cherry のどちらが好き?</label> + <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"> + </div> + <div> + <label for="number">どのくらい要ります?</label> + <input type="number" id="number" name="amount" value="1" min="1" max="10"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<ul> + <li>ここで、<code>text</code> フィールドには <code>minlength</code> 属性と <code>maxlength</code> 属性には 6 を指定しています。これは banana「バナナ」と cherry「さくらんぼ」の文字数と同じです。</li> + <li>またここでは、<code>number</code> フィールドに <code>min</code> 属性で 1 を <code>max</code> 属性で 10 を指定しました。この範囲外の数字の入力は妥当ではないと表示されます。ユーザーは矢印を使ってこの範囲外の値に増減できませんが、ユーザーが数字を手入力した場合はデータは不正となります。この数字は必須ではないので、値を除去すると妥当になります。</li> +</ul> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +} + +div { + margin-bottom: 10px; +}</pre> + +<p>例をライブで実行してみましょう。</p> + +<p>{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 100)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> でライブサンプルを見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">ソースコード</a>も見てください)</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code><input type="number"></code> （及び <code>range</code> や <code>date</code> のような他の型）は <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/step"><code>step</code></a> 属性を取ることもでき、入力コントロール（数値の増加・減少ボタンなど）を使用するときに上げ下げすることができる値の刻みを設定することができます。上の例では <code>step</code> 属性を入れていませんので、既定値の <code>1</code> となります。つまり 3.2 のような浮動小数でも、不正になります。</p> +</div> + +<h3 id="Full_example" name="Full_example">サンプル全体</h3> + +<p>HTML の内蔵検証機能の使い方を示す例の全体を示します。まずは HTML から:</p> + +<pre class="brush: html notranslate"><form> + <p> + <fieldset> + <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend> + <!-- While only one radio button in a same-named group can be selected at a time, + and therefore only one radio button in a same-named group having the "required" + attribute suffices in making a selection a requirement --> + <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label> + <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label> + </fieldset> + </p> + <p> + <label for="n1">How old are you?</label> + <!-- pattern 属性は number 型の入力欄を実装していないものの、pattern + 属性には対応しているブラウザー向けの代替策として動作できます。 + なお、pattern 属性に対応しているブラウザーでは、number 型の入力欄 + で使用すると暗黙に失敗します。 + ここでは代替策としての使い方のみです。--> + <input type="number" min="12" max="120" step="1" id="n1" name="age" + pattern="\d+"> + </p> + <p> + <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label> + <input type="text" id="t1" name="fruit" list="l1" required + pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range"> + <datalist id="l1"> + <option>Banana</option> + <option>Cherry</option> + <option>Apple</option> + <option>Strawberry</option> + <option>Lemon</option> + <option>Orange</option> + </datalist> + </p> + <p> + <label for="t2">What's your e-mail address?</label> + <input type="email" id="t2" name="email"> + </p> + <p> + <label for="t3">Leave a short message</label> + <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea> + </p> + <p> + <button>Submit</button> + </p> +</form></pre> + +<p>この HTML をスタイル設定する CSS は:</p> + +<pre class="brush: css notranslate">form { + font: 1em sans-serif; + max-width: 320px; +} + +p > label { + display: block; +} + +input[type="text"], +input[type="email"], +input[type="number"], +textarea, +fieldset { + width : 100%; + border: 1px solid #333; + box-sizing: border-box; +} + +input:invalid { + box-shadow: 0 0 5px 1px red; +} + +input:focus:invalid { + box-shadow: none; +}</pre> + +<p>これで次のようにレンダリングされます。</p> + +<p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p> + +<p>入力値と、それをサポートする入力タイプの制約に使える属性の完全なリストは、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">検証関連の属性</a>を見てください。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> でライブサンプルを見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">ソースコード</a>も見てください)</p> +</div> + +<h2 id="Validating_forms_using_JavaScript" name="Validating_forms_using_JavaScript">JavaScript を使用したフォーム検証</h2> + +<p>内蔵のエラーメッセージの見かけを制御したい場合や、HTML5 のフォーム検証に対応していないブラウザーに対処したい場合は、JavaScript を使用する必要があります。この節では、このようにするさまざまな方法を見ていきます。</p> + +<h3 id="The_HTML5_constraint_validation_API" name="The_HTML5_constraint_validation_API">HTML5 の制約検証 API</h3> + +<p>多くのブラウザーが <a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Constraint_validation">制約検証API</a> に対応しています。この API は各フォーム要素で使用できる一連のメソッドやプロパティで構成されています。</p> + +<ul> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/button"><button></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/fieldset"><fieldset></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> ( <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input"><input></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/output"><output></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/select"><select></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/textarea"><textarea></a></code> 要素を表現)</li> +</ul> + +<p id="Constraint_validation_API_properties">制約検証 API には、上記の要素で利用できる、次のプロパティがあります。</p> + +<ul> + <li><code>validationMessage</code>: コントロールが合格していない制約検証 (もしあれば) を説明するローカライズ済みのメッセージです。またはコントロールが制約の検証の対象ではない場合 (<code>willValidate</code> が <code>false</code>) または要素の値が制約に合格している場合は、空文字列です。</li> + <li><code>validity</code>: 要素の検証状態を説明する <code>ValidityState</code> オブジェクトです。取りうる検証状態の詳細は {{domxref("ValidityState")}}のリファレンスを参照してください。下記はよく使われるものを少し、一覧にしています: + <ul> + <li>{{domxref("ValidityState.patternMismatch", "patternMismatch")}}: 値が指定した {{htmlattrxref("pattern", "input")}}にマッチしない場合 <code>true</code> を、マッチする場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.tooLong", "tooLong")}}: {{htmlattrxref("maxlength", "input")}} 属性で指定した最大値より値が長い場合 <code>true</code> を、同じ長さ以下の場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.tooShort", "tooShort")}}: {{htmlattrxref("minlength", "input")}} 属性で指定した最小値より値が短い場合 <code>true</code> を、同じ長さ以上の場合<code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}}: {{htmlattrxref("max", "input")}} 属性で指定し最大値より値が大きい場合<code>true</code> を、同じ大きさ以下の場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}}CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}}: {{htmlattrxref("min", "input")}} 属性で指定し最小値より値が小さい場合<code>true</code> を、同じ大きさ以上の場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}}CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.typeMismatch", "typeMismatch")}}: 値が要求する文法でない場合 ({{htmlattrxref("type", "input")}} が <code>email</code> か <code>url</code> のとき)は <code>true</code> を、文法が正しい場合は <code>false</code> を返す。<code>true</code> なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li><code>valid</code>: 要素が検証制約をすべて満たす、ゆえに妥当とみなされる場合<code>true</code> を、いずれかの制約を満たさない場合 <code>false</code> を返す。true なら、要素は {{cssxref(":valid")}} CSS 擬似クラスにマッチする。そうでない場合は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li><code>valueMissing</code>: 要素に {{htmlattrxref("required", "input")}} 属性があって値がない場合は <code>true</code> を、そうでない場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + </ul> + </li> + <li><code>willValidate</code>: フォームが送信されるときに要素が検証される場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。</li> +</ul> + +<p id="Constraint_validation_API_methods">制約検証 API には、上記の要素で利用できる、次のメソッドがあります。</p> + +<ul> + <li><code>checkValidity()</code>: 要素の値で妥当性の問題がない場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。要素が不正である場合、このメソッドは要素で {<a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code> イベント</a>を発生させます。</li> + <li><code>setCustomValidity(<em>message</em>)</code>: 要素に独自のエラーメッセージを追加します。独自のエラーメッセージを設定すると、要素が不正であるとみなされる場合に指定したエラーが表示されます。これにより JavaScript で、標準の HTML5 制約検証 API で提供されるもの以外の検証不合格状態を作り出すことができます。ユーザーに問題を報告する際に、メッセージが表示されます。</li> +</ul> + +<h4 id="独自のエラーメッセージを実装する">独自のエラーメッセージを実装する</h4> + +<p>上記の HTML5 の検証制約の例で見てきたように、ユーザーが不正なフォームを送信しようとするたびにブラウザーはエラーメッセージを表示します。このメッセージを表示する方法は、ブラウザーにより異なります。</p> + +<p>これらの自動のメッセージには、2 つの欠点があります。</p> + +<ul> + <li> CSS でメッセージの表示方法を変更するための標準的な方法がありません。</li> + <li> メッセージはブラウザーのロケールに依存しており、ある言語のページでエラーメッセージが別の言語で表示されることがあり、これは下記の Firefox スクリーンショットで見ることができます。</li> +</ul> + +<p><img alt="Example of an error message with Firefox in French on an English page" src="https://wiki.developer.mozilla.org/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p> + +<p>これらのメッセージの外見やテキストを変更するには、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Constraint_validation" rel="external">制約検証 API</a> の最も一般的なユースケースです。この使用法を例で詳しく見てみましょう。</p> + +<p>いくつかの簡単な HTML で開始します (空の HTML ファイルにこれを入力します; もしよければ、<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> を基礎としてもいいでしょう):</p> + +<pre class="brush: html notranslate"><form> + <label for="mail">私にメールアドレスを教えてください:</label> + <input type="email" id="mail" name="mail"> + <button>Submit</button> +</form></pre> + +<p>このページに次の JavaScript を追加します:</p> + +<pre class="brush: js notranslate">const email = document.getElementById("mail"); + +email.addEventListener("input", function (event) { + if (email.validity.typeMismatch) { + email.setCustomValidity("I am expecting an e-mail address!"); + } else { + email.setCustomValidity(""); + } +});</pre> + +<p>ここでメールアドレス入力への参照を保管して、入力値が変更されるたびに制約コードが走るためのイベントリスナーを追加します。</p> + +<p>制約コードの中で、メールアドレス入力の <code>validity.typeMismatch</code> プロパティが <code>true</code>かどうか、つまり値がメールアドレスの形式のパターンにマッチしていないかを確認します。その場合、カスタムメッセージとともに <a href="https://wiki.developer.mozilla.org/ja/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> を呼び出して、フォームを送信するときに、送信が失敗してカスタムエラーメッセージが表示されます。</p> + +<p><code>validity.typeMismatch</code> が <code>false</code>の場合、空文字で <code>setCustomValidity()</code> メソッドを呼び出します。これは入力が妥当となり、フォームが送信されます。</p> + +<p>次のもので試すことができます:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: この例は GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html">custom-error-message.html</a> で見ることができます (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html">ソースコード</a>も見てください)。</p> +</div> + +<h4 id="Example_using_the_constraint_validation_API" name="Example_using_the_constraint_validation_API">制約検証 API の使用例</h4> + +<p>これまでほんとうに簡単な例を見てきましたので、少し複雑な独自の検証を作成するために API を使用する方法を見ていきましょう。</p> + +<p>始めに、HTML です。また、次のものに沿ってみてください:</p> + +<pre class="brush: html notranslate"><form novalidate> + <p> + <label for="mail"> + <span>メールアドレスを入力してください。</span> + <input type="email" id="mail" name="mail"> + <span class="error" aria-live="polite"></span> + </label> + </p> + <button>Submit</button> +</form></pre> + +<p>この簡単なフォームでは、ブラウザーの自動検証を無効にするために <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate">novalidate</a></code> 属性を使用しています。これで、検証を制御するためにスクリプトを使用できます。ただし、これは制約検証 API の対応や CSS の疑似クラス {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}}, {{cssxref(":out-of-range")}} の適用を無効にするわけではありません。つまり、データを送信する前にブラウザーが自動的なフォームの妥当性確認を行わないとしても、あなた自身で確認を行って、フォームの状態に応じたスタイル設定ができます。</p> + +<p>検証する入力は <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/email"><input type="email"></a></code>で、これは <code>required</code>(入力必須)で、8文字の <code>minlength</code> があります。これをわれわれのコードで確認して、それぞれカスタムエラーメッセージを表示させてみましょう。</p> + +<p><code><span></code>要素の中にエラーメッセージを表示させようとしています。 <code><span></code>にセットされた <a href="/ja/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> 属性は、スクリーンリーダーのような支援技術を使用している人々を含む皆に、独自のエラーメッセージを提示するようにします。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ここでの要点は、フォームに <code>novalidate</code> 属性をつけると、フォームがエラーメッセージのバブルを表示するのを停止して、その代わりDOM内にカスタムエラーメッセージを選択した方法で表示させられることです。</p> +</div> + +<p>この CSS はフォームの見栄えを少し良くして、入力データが無効なときの見た目のフィードバックを提供します。</p> + +<pre class="brush: css notranslate">/* これはサンプルの見栄えをよくするスタイルです */ +body { + font: 1em sans-serif; + width: 200px; + padding: 0; + margin : 0; +} + +p * { + display: block; +} + +input[type=email]{ + -webkit-appearance: none; + appearance: none; + + width: 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + box-sizing: border-box; +} + +/* これは不正なフィールド向けのスタイルです */ +input:invalid{ + border-color: #900; + background-color: #FDD; +} + +input:focus:invalid { + outline: none; +} + +/* これはエラーメッセージ向けのスタイルです */ +.error { + width : 100%; + padding: 0; + + font-size: 80%; + color: white; + background-color: #900; + border-radius: 0 0 5px 5px; + + box-sizing: border-box; +} + +.error.active { + padding: 0.3em; +}</pre> + +<p>以下の JavaScript コードは独自のエラー検証を制御します。</p> + +<pre class="brush: js notranslate">// DOM ノードの選択法はたくさんあります。ここではフォーム自体、メールアドレス +// 入力ボックス、そしてエラーメッセージを配置する span 要素を取得しています。 +const form = document.getElementsByTagName('form')[0]; + +const email = document.getElementById('mail'); +const error = document.querySelector('#mail + span.error'); + +email.addEventListener("input", function (event) { + // ユーザーが何かを入力するたびに、メールアドレスのフィールドが妥当かを + // 確認します。 + if (email.validity.valid) { + // エラーメッセージを表示している場合に、フィールドが妥当になれば + // エラーメッセージを取り除きます。 + error.innerHTML = ""; // メッセージの内容物をリセットします + error.className = "error"; // メッセージの表示状態をリセットします + } else { + // If there is still an error, show the correct error + showError(); + } +}); + +form.addEventListener("submit", function (event) { + // ユーザーがデータを送信しようとするたびに、メールアドレスの + // フィールドが妥当かをチェックします。 + if (!email.validity.valid) { + + // フィールドが妥当ではない場合、独自のエラーメッセージを + // 表示します。 + showError(); + // また、イベントをキャンセルしてフォームの送信を止めます。 + event.preventDefault(); + } +}); + +function showError() { + if(email.validity.valueMissing) { + // If the field is empty + // display the following error message. + emailError.textContent = 'You need to enter an e-mail address.'; + } else if(email.validity.typeMismatch) { + // If the field doesn't contain an email address + // display the following error message. + emailError.textContent = 'Entered value needs to be an e-mail address.'; + } else if(email.validity.tooShort) { + // If the data is too short + // display the following error message. + emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`; + } + + // Set the styling appropriately + emailError.className = 'error active'; +}</pre> + +<p>コメントがよく説明していますが、簡単にいうと:</p> + +<ul> + <li>入力値を変えるたびに、それが妥当なデータを含んでいるかをチェックします。その場合は表示されたエラーメッセージを削除します。データが不正の場合は、適当なエラーを表示する <code>showError()</code> を実行します。</li> + <li>フォームの送信を試すごとに、またデータが妥当かチェックします。その場合はフォームの送信を許可します。そうでない場合、適当なエラーを表示する <code>showError()</code> を実行し、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Event/preventDefault">preventDefault()</a></code>でフォーム送信を停止します。</li> + <li><code>showError()</code> 関数は、入力の <code>validity</code> オブジェクトのさまざまなプロパティを使ってエラーがどれかを決めて、適当なエラーメッセージを表示します。</li> +</ul> + +<p>こちらが実際の結果です。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html">detailed-custom-validation.html</a> に例があります(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html">ソースコード</a>見てください)</p> +</div> + +<p>制約検証 API はフォーム検証を制御するための強力なツールであり、HTML および CSS のみで検証を行うよりもはるかにユーザーインターフェイスをコントロールできます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: さらなる情報は、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証ガイド</a>と<a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Constraint_validation">制約検証 API</a> リファレンスを見てください。</p> +</div> + +<h3 id="Validating_forms_without_a_built-in_API" name="Validating_forms_without_a_built-in_API">組み込み API を使用しないフォーム検証</h3> + +<p>古いブラウザーや<a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets">カスタムコントロール</a>において、制約検証 API を使用できない （または使用したくない）ことがあるでしょう。このような場合でも、フォームを検証するために JavaScript が使用できます。フォームを検証には、実際のデータの検証よりもユーザーインターフェイスの疑問が多くなります。</p> + +<p>フォームを検証するために、あなたはいくつかの疑問を考えなければなりません。</p> + +<dl> + <dt>どのような検証を実施するべきか</dt> + <dd>どのようにデータを検証するかを決めなければなりません。文字列演算、型変換、正規表現など。これはあなた次第です。フォームのデータは常にテキストであり、スクリプトには常に文字列として渡されることを忘れないようにしてください。</dd> + <dt>フォームが妥当でない場合に何をするべきか</dt> + <dd>これは明らかにユーザーインターフェイスの問題です。フォームがどのように動作するかを決めなければなりません。どのような場合でもフォームのデータを送信しますか？エラー状態の入力欄を強調しますか？エラーメッセージを表示しますか？</dd> + <dt>ユーザーが不正なデータを修正することをどのように支援できるか</dt> + <dd>ユーザーの不満を軽減するためには、ユーザーに入力内容の修正を案内するために、できるだけ多くの役立つ情報を提供することがとても重要です。明確なエラーメッセージはもちろん、ユーザーが何を求められているか理解できるように前向きの提案をするべきです。フォーム検証のユーザーインターフェイスの要件について深く知りたいのであれば、ぜひ読むべきである有用な記事があります（英語）。 + <ul> + <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li> + <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li> + <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li> + <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li> + </ul> + </dd> +</dl> + +<h4 id="An_example_that_doesnt_use_the_constraint_validation_API" name="An_example_that_doesnt_use_the_constraint_validation_API">制約検証 API を使用しない例</h4> + +<p>これまでのことを説明するため、古いブラウザーでも動作するように前出のサンプルを作り直してみましょう。</p> + +<p>ご覧の通り、HTML はほとんど同じであり、HTML5 の validation機能を取り除いただけです</p> + +<pre class="brush: html notranslate"><form> + <p> + <label for="mail"> + <span>メールアドレスを入力してください。</span> + <input type="text" class="mail" id="mail" name="mail"> + <span class="error" aria-live="polite"></span> + </label> + <p> + <!-- 一部の古いブラウザーでは button 要素で、type 属性に明示的に + submit を設定する必要があります。--> + <button type="submit">Submit</button> +</form></pre> + +<p>同様に、CSS も大きく変更する必要はありません。{{cssxref(":invalid")}} 疑似クラスから実クラスへの変更と、Internet Explorer 6 で動作しない属性セレクターの使用を避けただけです。</p> + +<pre class="brush: css notranslate">/* これはサンプルの見栄えをよくするスタイルです */ +body { + font: 1em sans-serif; + padding: 0; + margin : 0; +} + +form { + max-width: 200px; +} + +p * { + display: block; +} + +input.mail { + -webkit-appearance: none; + + width: 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + box-sizing: border-box; +} + +/* これは不正なフィールド向けのスタイルです */ +input.invalid{ + border-color: #900; + background-color: #FDD; +} + +input:focus.invalid { + outline: none; +} + +/* これはエラーメッセージ向けのスタイルです */ +.error { + width : 100%; + padding: 0; + + font-size: 80%; + color: white; + background-color: #900; + border-radius: 0 0 5px 5px; + box-sizing: border-box; +} + +.error.active { + padding: 0.3em; +}</pre> + +<p>JavaScript コードでは大きな変更があり、多くの面倒な作業が必要です。</p> + +<pre class="brush: js notranslate">// 古いブラウザーで DOM ノードを選択する方法は少ない +const form = document.getElementsByTagName('form')[0]; +const email = document.getElementById('mail'); + +// 以下は DOM 内で次の兄弟要素にたどり着くための技です。 +// これは容易に無限ループになることがあるため、危険です。 +// 新しいブラウザーでは、element.nextElementSibling を使用しましょう。 +let error = email; +while ((error = error.nextSibling).nodeType != 1); + +// HTML5 仕様書より +const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; + +// 多くの古いブラウザーは addEventListener メソッドをサポートしていません。 +// 以下はこれを扱うためのシンプルな方法です。なお唯一の方法ではありません。 +function addEvent(element, event, callback) { + let previousEventCallBack = element["on"+event]; + element["on"+event] = function (e) { + const output = callback(e); + + // `false` を返すコールバックはコールバックチェーンを止めて、 + // イベントコールバックの実行を中断します。 + if (output === false) return false; + + if (typeof previousEventCallBack === 'function') { + output = previousEventCallBack(e); + if(output === false) return false; + } + } +}; + +// ここから検証制約の再構築ができます。 +// CSS の疑似クラスに頼ることはできないため、メールアドレスフィールドで +// valid/invalid クラスを明示的に設定しなければなりません。 +addEvent(window, "load", function () { + // ここで、フィールドが空かを確認しています (フィールドは必須入力ではありません) + // 空でなければ、内容部が適切な電子メールアドレスかを確認します。 + const test = email.value.length === 0 || emailRegExp.test(email.value); + + email.className = test ? "valid" : "invalid"; +}); + +// ユーザーがフィールドに入力したときに、何をするかを定義します。 +addEvent(email, "input", function () { + const test = email.value.length === 0 || emailRegExp.test(email.value); + if (test) { + email.className = "valid"; + error.innerHTML = ""; + error.className = "error"; + } else { + email.className = "invalid"; + } +}); + +// ユーザーがデータを送信しようとしたときに何をするかを定義します。 +addEvent(form, "submit", function () { + const test = email.value.length === 0 || emailRegExp.test(email.value); + + if (!test) { + email.className = "invalid"; + error.innerHTML = "I expect an e-mail, darling!"; + error.className = "error active"; + + // 一部の古いブラウザーは event.reventDefault() メソッドをサポートしていません。 + return false; + } else { + email.className = "valid"; + error.innerHTML = ""; + error.className = "error"; + } +});</pre> + +<p>結果は以下のようになります。</p> + +<p>{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 130)}}</p> + +<p>ご覧の通り、自分でで検証システムを構築するのは大変なことではありません。難しいのはクロスプラットフォームで、かつ作成するであろうあらゆるフォームで使用できる汎用的なものにすることです。フォーム検証を行うために利用できる、<a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a> のような多くのライブラリがあります。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>クライアント側のフォーム検証は、カスタムスタイル設定やエラーメッセージには複雑な JavaScript を必要としませんが、ユーザーについては注意深く考えることが必要です。ユーザーが正しいデータを入力できるよう支援することを、常に忘れないでください。最後に、以下のことを必ず行ってください。</p> + +<ul> + <li>明確なエラーメッセージを表示してください。</li> + <li>入力形式については寛容になってください。</li> + <li>どこでエラーが発生しているかを正確に示してください（特に大きなフォームで）。</li> +</ul> + +<p>フォームが正しく埋められたことをチェックしたら、送信することができます。次の<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">データ送信</a>でカバーします。</p> + +<p>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_1/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_1/index.html new file mode 100644 index 0000000000..1515dc573f --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_1/index.html @@ -0,0 +1,415 @@ +--- +title: 例 1 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_1 +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1 +--- +<p>これは、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する最初のコード例です。</p> + +<h2 id="Basic_state" name="Basic_state">Basic state</h2> + +<h3 id="Basic_state_HTML" name="Basic_state_HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="select"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> +</div></pre> + +<h3 id="Basic_state_CSS" name="Basic_state_CSS">CSS</h3> + +<pre class="brush: css notranslate">/* --------------- */ +/* Required Styles */ +/* --------------- */ + +.select { + position: relative; + display : inline-block; +} + +.select.active, +.select:focus { + box-shadow: 0 0 3px 1px #227755; + outline: none; +} + +.select .optList { + position: absolute; + top : 100%; + left : 0; +} + +.select .optList.hidden { + max-height: 0; + visibility: hidden; +} + +/* ------------ */ +/* Fancy Styles */ +/* ------------ */ + +.select { + font-size : 0.625em; /* 10px */ + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : 0.2em solid #000; /* 2px */ + border-radius : 0.4em; /* 4px */ + + box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ + + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + display : inline-block; + width : 100%; + overflow : hidden; + + white-space : nowrap; + text-overflow : ellipsis; + vertical-align: top; +} + +.select:after { + content : "▼"; + position: absolute; + z-index : 1; + height : 100%; + width : 2em; /* 20px */ + top : 0; + right : 0; + + padding-top : .1em; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + text-align : center; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; +} + +.select .optList { + z-index : 2; + + list-style: none; + margin : 0; + padding: 0; + + background: #f0f0f0; + border: .2em solid #000; + border-top-width : .1em; + border-radius: 0 0 .4em .4em; + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); + + -moz-box-sizing : border-box; + box-sizing : border-box; + + min-width : 100%; + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; +} + +.select .option { + padding: .2em .3em; +} + +.select .highlight { + background: #000; + color: #FFFFFF; +} +</pre> + +<h3 id="Result_for_basic_state">Result for basic state</h3> + +<div>{{ EmbedLiveSample('Basic_state', 120, 130) }}</div> + +<h2 id="Active_state" name="Active_state">Active state</h2> + +<h3 id="Active_state_HTML" name="Active_state_HTML">HTML</h3> + +<pre class="brush:html notranslate"><div class="select active"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> +</div></pre> + +<h3 id="Active_state_CSS" name="Active_state_CSS">CSS</h3> + +<pre class="brush:css notranslate">/* --------------- */ +/* Required Styles */ +/* --------------- */ + +.select { + position: relative; + display : inline-block; +} + +.select.active, +.select:focus { + box-shadow: 0 0 3px 1px #227755; + outline: none; +} + +.select .optList { + position: absolute; + top : 100%; + left : 0; +} + +.select .optList.hidden { + max-height: 0; + visibility: hidden; +} + +/* ------------ */ +/* Fancy Styles */ +/* ------------ */ + +.select { + font-size : 0.625em; /* 10px */ + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : 0.2em solid #000; /* 2px */ + border-radius : 0.4em; /* 4px */ + + box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ + + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + display : inline-block; + width : 100%; + overflow : hidden; + + white-space : nowrap; + text-overflow : ellipsis; + vertical-align: top; +} + +.select:after { + content : "▼"; + position: absolute; + z-index : 1; + height : 100%; + width : 2em; /* 20px */ + top : 0; + right : 0; + + padding-top : .1em; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + text-align : center; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; +} + +.select .optList { + z-index : 2; + + list-style: none; + margin : 0; + padding: 0; + + background: #f0f0f0; + border: .2em solid #000; + border-top-width : .1em; + border-radius: 0 0 .4em .4em; + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); + + -moz-box-sizing : border-box; + box-sizing : border-box; + + min-width : 100%; + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; +} + +.select .option { + padding: .2em .3em; +} + +.select .highlight { + background: #000; + color: #FFFFFF; +}</pre> + +<h3 id="Result_for_active_state">Result for active state</h3> + +<div>{{ EmbedLiveSample('Active_state', 120, 130) }}</div> + +<h2 id="Open_state" name="Open_state">Open state</h2> + +<h3 id="Open_state_HTML" name="Open_state_HTML">HTML</h3> + +<pre class="brush:html notranslate"><div class="select active"> + <span class="value">Cherry</span> + <ul class="optList"> + <li class="option highlight">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> +</div></pre> + +<h3 id="Open_state_CSS" name="Open_state_CSS">CSS</h3> + +<pre class="brush:css notranslate">/* --------------- */ +/* Required Styles */ +/* --------------- */ + +.select { + position: relative; + display : inline-block; +} + +.select.active, +.select:focus { + box-shadow: 0 0 3px 1px #227755; + outline: none; +} + +.select .optList { + position: absolute; + top : 100%; + left : 0; +} + +.select .optList.hidden { + max-height: 0; + visibility: hidden; +} + +/* ------------ */ +/* Fancy Styles */ +/* ------------ */ + +.select { + font-size : 0.625em; /* 10px */ + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : 0.2em solid #000; /* 2px */ + border-radius : 0.4em; /* 4px */ + + box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */ + + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + display : inline-block; + width : 100%; + overflow : hidden; + + white-space : nowrap; + text-overflow : ellipsis; + vertical-align: top; +} + +.select:after { + content : "▼"; + position: absolute; + z-index : 1; + height : 100%; + width : 2em; /* 20px */ + top : 0; + right : 0; + + padding-top : .1em; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + text-align : center; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; +} + +.select .optList { + z-index : 2; + + list-style: none; + margin : 0; + padding: 0; + + background: #f0f0f0; + border: .2em solid #000; + border-top-width : .1em; + border-radius: 0 0 .4em .4em; + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); + + -moz-box-sizing : border-box; + box-sizing : border-box; + + min-width : 100%; + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; +} + +.select .option { + padding: .2em .3em; +} + +.select .highlight { + background: #000; + color: #FFF; +}</pre> + +<h3 id="Result_for_open_state">Result for open state</h3> + +<div>{{ EmbedLiveSample('Open_state', 120, 130) }}</div> diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_2/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_2/index.html new file mode 100644 index 0000000000..7a547909ce --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_2/index.html @@ -0,0 +1,212 @@ +--- +title: 例 2 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_2 +tags: + - Forms + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2 +--- +<p>これは、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する2番目の例です。</p> + +<h2 id="JS" name="JS">JS</h2> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><form class="no-widget"> + <select name="myFruit"> + <option>Cherry</option> + <option>Lemon</option> + <option>Banana</option> + <option>Strawberry</option> + <option>Apple</option> + </select> + + <div class="select"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> + </div> +<form> +</pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: css notranslate">.widget select, +.no-widget .select { + position : absolute; + left : -5000em; + height : 0; + overflow : hidden; +} + +/* --------------- */ +/* Required Styles */ +/* --------------- */ + +.select { + position: relative; + display : inline-block; +} + +.select.active, +.select:focus { + box-shadow: 0 0 3px 1px #227755; + outline: none; +} + +.select .optList { + position: absolute; + top : 100%; + left : 0; +} + +.select .optList.hidden { + max-height: 0; + visibility: hidden; +} + +/* ------------ */ +/* Fancy Styles */ +/* ------------ */ + +.select { + font-size : 0.625em; /* 10px */ + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : 0.2em solid #000; /* 2px */ + border-radius : 0.4em; /* 4px */ + + box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ + + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + display : inline-block; + width : 100%; + overflow : hidden; + + white-space : nowrap; + text-overflow : ellipsis; + vertical-align: top; +} + +.select:after { + content : "▼"; + position: absolute; + z-index : 1; + height : 100%; + width : 2em; /* 20px */ + top : 0; + right : 0; + + padding-top : .1em; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + text-align : center; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; +} + +.select .optList { + z-index : 2; + + list-style: none; + margin : 0; + padding: 0; + + background: #f0f0f0; + border: .2em solid #000; + border-top-width : .1em; + border-radius: 0 0 .4em .4em; + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); + + -moz-box-sizing : border-box; + box-sizing : border-box; + + min-width : 100%; + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; +} + +.select .option { + padding: .2em .3em; +} + +.select .highlight { + background: #000; + color: #FFFFFF; +}</pre> + +<h3 id="JavaScript_コンテンツ">JavaScript コンテンツ</h3> + +<pre class="brush: js notranslate">window.addEventListener("load", function () { + var form = document.querySelector('form'); + + form.classList.remove("no-widget"); + form.classList.add("widget"); +});</pre> + +<h3 id="JS_の結果">JS の結果</h3> + +<p>{{ EmbedLiveSample('JS', 120, 130) }}</p> + +<h2 id="No_JS" name="No_JS">No JS</h2> + +<h3 id="HTML_コンテンツ_2">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><form class="no-widget"> + <select name="myFruit"> + <option>Cherry</option> + <option>Lemon</option> + <option>Banana</option> + <option>Strawberry</option> + <option>Apple</option> + </select> + + <div class="select"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> + </div> +<form></pre> + +<h3 id="CSS_コンテンツ_2">CSS コンテンツ</h3> + +<pre class="brush: css notranslate">.widget select, +.no-widget .select { + position : absolute; + left : -5000em; + height : 0; + overflow : hidden; +}</pre> + +<h3 id="No_JS_の結果">No JS の結果</h3> + +<p>{{ EmbedLiveSample('No_JS', 120, 130) }}</p> diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_3/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_3/index.html new file mode 100644 index 0000000000..ac3763cb80 --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_3/index.html @@ -0,0 +1,246 @@ +--- +title: 例 3 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_3 +tags: + - Forms + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 +--- +<p>これは、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する3番目の例です。</p> + +<h2 id="Change_states" name="Change_states">状態を変更する</h2> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><form class="no-widget"> + <select name="myFruit" tabindex="-1"> + <option>Cherry</option> + <option>Lemon</option> + <option>Banana</option> + <option>Strawberry</option> + <option>Apple</option> + </select> + + <div class="select" tabindex="0"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> + </div> +</form></pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: css notranslate">.widget select, +.no-widget .select { + position : absolute; + left : -5000em; + height : 0; + overflow : hidden; +} + +/* --------------- */ +/* Required Styles */ +/* --------------- */ + +.select { + position: relative; + display : inline-block; +} + +.select.active, +.select:focus { + box-shadow: 0 0 3px 1px #227755; + outline: none; +} + +.select .optList { + position: absolute; + top : 100%; + left : 0; +} + +.select .optList.hidden { + max-height: 0; + visibility: hidden; +} + +/* ------------ */ +/* Fancy Styles */ +/* ------------ */ + +.select { + font-size : 0.625em; /* 10px */ + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : 0.2em solid #000; /* 2px */ + border-radius : 0.4em; /* 4px */ + + box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ + + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + display : inline-block; + width : 100%; + overflow : hidden; + + white-space : nowrap; + text-overflow : ellipsis; + vertical-align: top; +} + +.select:after { + content : "▼"; + position: absolute; + z-index : 1; + height : 100%; + width : 2em; /* 20px */ + top : 0; + right : 0; + + padding-top : .1em; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + text-align : center; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; +} + +.select .optList { + z-index : 2; + + list-style: none; + margin : 0; + padding: 0; + + background: #f0f0f0; + border: .2em solid #000; + border-top-width : .1em; + border-radius: 0 0 .4em .4em; + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); + + -moz-box-sizing : border-box; + box-sizing : border-box; + + min-width : 100%; + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; +} + +.select .option { + padding: .2em .3em; +} + +.select .highlight { + background: #000; + color: #FFFFFF; +}</pre> + +<h3 id="JavaScript_コンテンツ">JavaScript コンテンツ</h3> + +<pre class="brush: js notranslate">// ------- // +// HELPERS // +// ------- // + +NodeList.prototype.forEach = function (callback) { + Array.prototype.forEach.call(this, callback); +} + +// -------------------- // +// Function definitions // +// -------------------- // + +function deactivateSelect(select) { + if (!select.classList.contains('active')) return; + + var optList = select.querySelector('.optList'); + + optList.classList.add('hidden'); + select.classList.remove('active'); +} + +function activeSelect(select, selectList) { + if (select.classList.contains('active')) return; + + selectList.forEach(deactivateSelect); + select.classList.add('active'); +}; + +function toggleOptList(select, show) { + var optList = select.querySelector('.optList'); + + optList.classList.toggle('hidden'); +} + +function highlightOption(select, option) { + var optionList = select.querySelectorAll('.option'); + + optionList.forEach(function (other) { + other.classList.remove('highlight'); + }); + + option.classList.add('highlight'); +}; + +// ------------- // +// Event binding // +// ------------- // + +window.addEventListener("load", function () { + var form = document.querySelector('form'); + + form.classList.remove("no-widget"); + form.classList.add("widget"); +}); + +window.addEventListener('load', function () { + var selectList = document.querySelectorAll('.select'); + + selectList.forEach(function (select) { + var optionList = select.querySelectorAll('.option'); + + optionList.forEach(function (option) { + option.addEventListener('mouseover', function () { + highlightOption(select, option); + }); + }); + + select.addEventListener('click', function (event) { + toggleOptList(select); + }, false); + + select.addEventListener('focus', function (event) { + activeSelect(select, selectList); + }); + + select.addEventListener('blur', function (event) { + deactivateSelect(select); + }); + }); +});</pre> + +<h3 id="結果">結果</h3> + +<p>{{ EmbedLiveSample('Change_states') }}</p> diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_4/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_4/index.html new file mode 100644 index 0000000000..51fa53c27a --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_4/index.html @@ -0,0 +1,296 @@ +--- +title: 例 4 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_4 +tags: + - Advanced + - Example + - Forms + - Guide + - HTML + - Web +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 +--- +<p>これは、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する4番目の例です。</p> + +<h2 id="Change_states" name="Change_states">状態を変更する</h2> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><form class="no-widget"> + <select name="myFruit"> + <option>Cherry</option> + <option>Lemon</option> + <option>Banana</option> + <option>Strawberry</option> + <option>Apple</option> + </select> + + <div class="select"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> + </div> +</form></pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: css notranslate">.widget select, +.no-widget .select { + position : absolute; + left : -5000em; + height : 0; + overflow : hidden; +} + +/* --------------- */ +/* Required Styles */ +/* --------------- */ + +.select { + position: relative; + display : inline-block; +} + +.select.active, +.select:focus { + box-shadow: 0 0 3px 1px #227755; + outline: none; +} + +.select .optList { + position: absolute; + top : 100%; + left : 0; +} + +.select .optList.hidden { + max-height: 0; + visibility: hidden; +} + +/* ------------ */ +/* Fancy Styles */ +/* ------------ */ + +.select { + font-size : 0.625em; /* 10px */ + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : 0.2em solid #000; /* 2px */ + border-radius : 0.4em; /* 4px */ + + box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ + + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + display : inline-block; + width : 100%; + overflow : hidden; + + white-space : nowrap; + text-overflow : ellipsis; + vertical-align: top; +} + +.select:after { + content : "▼"; + position: absolute; + z-index : 1; + height : 100%; + width : 2em; /* 20px */ + top : 0; + right : 0; + + padding-top : .1em; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + text-align : center; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; +} + +.select .optList { + z-index : 2; + + list-style: none; + margin : 0; + padding: 0; + + background: #f0f0f0; + border: .2em solid #000; + border-top-width : .1em; + border-radius: 0 0 .4em .4em; + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); + + -moz-box-sizing : border-box; + box-sizing : border-box; + + min-width : 100%; + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; +} + +.select .option { + padding: .2em .3em; +} + +.select .highlight { + background: #000; + color: #FFFFFF; +}</pre> + +<h3 id="JavaScript_コンテンツ">JavaScript コンテンツ</h3> + +<pre class="brush: js notranslate">// ------- // +// HELPERS // +// ------- // + +NodeList.prototype.forEach = function (callback) { + Array.prototype.forEach.call(this, callback); +} + +// -------------------- // +// Function definitions // +// -------------------- // + +function deactivateSelect(select) { + if (!select.classList.contains('active')) return; + + var optList = select.querySelector('.optList'); + + optList.classList.add('hidden'); + select.classList.remove('active'); +} + +function activeSelect(select, selectList) { + if (select.classList.contains('active')) return; + + selectList.forEach(deactivateSelect); + select.classList.add('active'); +}; + +function toggleOptList(select, show) { + var optList = select.querySelector('.optList'); + + optList.classList.toggle('hidden'); +} + +function highlightOption(select, option) { + var optionList = select.querySelectorAll('.option'); + + optionList.forEach(function (other) { + other.classList.remove('highlight'); + }); + + option.classList.add('highlight'); +}; + +function updateValue(select, index) { + var nativeWidget = select.previousElementSibling; + var value = select.querySelector('.value'); + var optionList = select.querySelectorAll('.option'); + + nativeWidget.selectedIndex = index; + value.innerHTML = optionList[index].innerHTML; + highlightOption(select, optionList[index]); +}; + +function getIndex(select) { + var nativeWidget = select.previousElementSibling; + + return nativeWidget.selectedIndex; +}; + +// ------------- // +// Event binding // +// ------------- // + +window.addEventListener("load", function () { + var form = document.querySelector('form'); + + form.classList.remove("no-widget"); + form.classList.add("widget"); +}); + +window.addEventListener('load', function () { + var selectList = document.querySelectorAll('.select'); + + selectList.forEach(function (select) { + var optionList = select.querySelectorAll('.option'); + + optionList.forEach(function (option) { + option.addEventListener('mouseover', function () { + highlightOption(select, option); + }); + }); + + select.addEventListener('click', function (event) { + toggleOptList(select); + }); + + select.addEventListener('focus', function (event) { + activeSelect(select, selectList); + }); + + select.addEventListener('blur', function (event) { + deactivateSelect(select); + }); + }); +}); + +window.addEventListener('load', function () { + var selectList = document.querySelectorAll('.select'); + + selectList.forEach(function (select) { + var optionList = select.querySelectorAll('.option'), + selectedIndex = getIndex(select); + + select.tabIndex = 0; + select.previousElementSibling.tabIndex = -1; + + updateValue(select, selectedIndex); + + optionList.forEach(function (option, index) { + option.addEventListener('click', function (event) { + updateValue(select, index); + }); + }); + + select.addEventListener('keyup', function (event) { + var length = optionList.length, + index = getIndex(select); + + if (event.keyCode === 40 && index < length - 1) { index++; } + if (event.keyCode === 38 && index > 0) { index--; } + + updateValue(select, index); + }); + }); +});</pre> + +<h3 id="結果">結果</h3> + +<p>{{ EmbedLiveSample('Change_states') }}</p> diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_5/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_5/index.html new file mode 100644 index 0000000000..4bad8016bb --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_5/index.html @@ -0,0 +1,289 @@ +--- +title: 例 5 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_5 +tags: + - Forms + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_5 +--- +<p>これが、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する最後の例です。</p> + +<h2 id="Change_states" name="Change_states">状態を変更する</h2> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><form class="no-widget"> + <select name="myFruit"> + <option>Cherry</option> + <option>Lemon</option> + <option>Banana</option> + <option>Strawberry</option> + <option>Apple</option> + </select> + + <div class="select" role="listbox"> + <span class="value">Cherry</span> + <ul class="optList hidden" role="presentation"> + <li class="option" role="option" aria-selected="true">Cherry</li> + <li class="option" role="option">Lemon</li> + <li class="option" role="option">Banana</li> + <li class="option" role="option">Strawberry</li> + <li class="option" role="option">Apple</li> + </ul> + </div> +</form></pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: css notranslate">.widget select, +.no-widget .select { + position : absolute; + left : -5000em; + height : 0; + overflow : hidden; +} + +/* --------------- */ +/* Required Styles */ +/* --------------- */ + +.select { + position: relative; + display : inline-block; +} + +.select.active, +.select:focus { + box-shadow: 0 0 3px 1px #227755; + outline: none; +} + +.select .optList { + position: absolute; + top : 100%; + left : 0; +} + +.select .optList.hidden { + max-height: 0; + visibility: hidden; +} + +/* ------------ */ +/* Fancy Styles */ +/* ------------ */ + +.select { + font-size : 0.625em; /* 10px */ + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : 0.2em solid #000; /* 2px */ + border-radius : 0.4em; /* 4px */ + + box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ + + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + display : inline-block; + width : 100%; + overflow : hidden; + + white-space : nowrap; + text-overflow : ellipsis; + vertical-align: top; +} + +.select:after { + content : "▼"; + position: absolute; + z-index : 1; + height : 100%; + width : 2em; /* 20px */ + top : 0; + right : 0; + + padding-top : .1em; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + text-align : center; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; +} + +.select .optList { + z-index : 2; + + list-style: none; + margin : 0; + padding: 0; + + background: #f0f0f0; + border: .2em solid #000; + border-top-width : .1em; + border-radius: 0 0 .4em .4em; + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); + + -moz-box-sizing : border-box; + box-sizing : border-box; + + min-width : 100%; + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; +} + +.select .option { + padding: .2em .3em; +} + +.select .highlight { + background: #000; + color: #FFFFFF; +}</pre> + +<h3 id="JavaScript_コンテンツ">JavaScript コンテンツ</h3> + +<pre class="brush: js notranslate">// ------- // +// HELPERS // +// ------- // + +NodeList.prototype.forEach = function (callback) { + Array.prototype.forEach.call(this, callback); +} + +// -------------------- // +// Function definitions // +// -------------------- // + +function deactivateSelect(select) { + if (!select.classList.contains('active')) return; + + var optList = select.querySelector('.optList'); + + optList.classList.add('hidden'); + select.classList.remove('active'); +} + +function activeSelect(select, selectList) { + if (select.classList.contains('active')) return; + + selectList.forEach(deactivateSelect); + select.classList.add('active'); +}; + +function toggleOptList(select, show) { + var optList = select.querySelector('.optList'); + + optList.classList.toggle('hidden'); +} + +function highlightOption(select, option) { + var optionList = select.querySelectorAll('.option'); + + optionList.forEach(function (other) { + other.classList.remove('highlight'); + }); + + option.classList.add('highlight'); +}; + +function updateValue(select, index) { + var nativeWidget = select.previousElementSibling; + var value = select.querySelector('.value'); + var optionList = select.querySelectorAll('.option'); + + optionList.forEach(function (other) { + other.setAttribute('aria-selected', 'false'); + }); + + optionList[index].setAttribute('aria-selected', 'true'); + + nativeWidget.selectedIndex = index; + value.innerHTML = optionList[index].innerHTML; + highlightOption(select, optionList[index]); +}; + +function getIndex(select) { + var nativeWidget = select.previousElementSibling; + + return nativeWidget.selectedIndex; +}; + +// ------------- // +// Event binding // +// ------------- // + +window.addEventListener("load", function () { + var form = document.querySelector('form'); + + form.classList.remove("no-widget"); + form.classList.add("widget"); +}); + +window.addEventListener('load', function () { + var selectList = document.querySelectorAll('.select'); + + selectList.forEach(function (select) { + var optionList = select.querySelectorAll('.option'), + selectedIndex = getIndex(select); + + select.tabIndex = 0; + select.previousElementSibling.tabIndex = -1; + + updateValue(select, selectedIndex); + + optionList.forEach(function (option, index) { + option.addEventListener('mouseover', function () { + highlightOption(select, option); + }); + + option.addEventListener('click', function (event) { + updateValue(select, index); + }); + }); + + select.addEventListener('click', function (event) { + toggleOptList(select); + }); + + select.addEventListener('focus', function (event) { + activeSelect(select, selectList); + }); + + select.addEventListener('blur', function (event) { + deactivateSelect(select); + }); + + select.addEventListener('keyup', function (event) { + var length = optionList.length, + index = getIndex(select); + + if (event.keyCode === 40 && index < length - 1) { index++; } + if (event.keyCode === 38 && index > 0) { index--; } + + updateValue(select, index); + }); + }); +}); +</pre> + +<h3 id="結果">結果</h3> + +<p>{{ EmbedLiveSample('Change_states') }}</p> diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/index.html new file mode 100644 index 0000000000..7bbd20b511 --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_widgets/index.html @@ -0,0 +1,901 @@ +--- +title: カスタムフォームコントロールの作成方法 +slug: Learn/Forms/How_to_build_custom_form_widgets +tags: + - Advanced + - Example + - Forms + - Guide + - HTML + - Web +translation_of: Learn/Forms/How_to_build_custom_form_controls +--- +<div>{{LearnSidebar}}</div> + +<p>HTML フォームで使用可能なコントロールだけでは十分でない場合が多くあります。例えば、{{HTMLElement("select")}} 要素のようなコントロールに<a href="/ja/docs/Advanced_styling_for_HTML_forms" title="Advanced_styling_for_HTML_forms">高度なスタイル設定を行いたい</a>場合や、独自の動作を提供したい場合は、あなた独自のコントロールを作成するしかありません。</p> + +<p>本記事では、そのようなコントロールの作り方を見ていきます。その目的のため、次の例に取り組みます: {{HTMLElement("select")}} 要素の再構築です。このほかに独自コントロール作成をどういう方法でするか、いつするか、またそれが意味をなすのかや、コントロール作成が必須なときに何に気をつけるべきかを扱います。</p> + +<div class="note"> +<p><strong>注記:</strong> ここではコントロールの構築に注目しており、汎用かつ再利用可能なコードの作成法は見ていきません。それには JavaScript の重要なコードや未知のコンテキストでの DOM 操作が組み合わされており、本記事の対象から外れます。</p> +</div> + +<h2 id="Design_structure_and_semantics" name="Design_structure_and_semantics">デザイン、構造、セマンティクス</h2> + +<p>カスタムコントロールを作成する前に、何をしたいかをはっきりと理解することから始めるべきです。これはあなたの貴重な時間を節約するでしょう。特に、コントロールの全状態を明確に定義することが重要です。これを行うには、状態や動作がよく知られている既存のコントロールからスタートするとよいでしょう。この結果、簡単に可能な限りの模倣を行えます。</p> + +<p>本記事の例では、{{HTMLElement("select")}} 要素を再構築します。以下が、私たちが実現したい成果です:</p> + +<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p> + +<p>このスクリーンショットでは、コントロールの主要な状態 3 つを示しています: 通常状態 (左)、アクティブ状態 (中央)、そして開いた状態 (右) です。</p> + +<p>動作の点では、ネイティブな HTML用要素を再作成します。このため、ネイティブ HTML要素と同様な動作や意味を持たせるべきです。独自のコントロールもネイティブコントロールと同様に、キーボードだけでなくマウスでも使用できるように、またスクリーンリーダーに理解できるようにしたいと考えます。コントロールがどのように各状態に達するかを定義することから始めましょう:</p> + +<dl> + <dt>コントロールは以下のときに通常状態になります:</dt> + <dd> + <ul> + <li>ページを読み込む</li> + <li>コントロールはアクティブであったが、ユーザーがコントロール以外のどこかをクリックした</li> + <li>コントロールはアクティブであったが、キーボードを使用して別のコントロールにフォーカスを移した (例 <kbd>Tab</kbd> キー)</li> + </ul> + </dd> + <dt>コントロールは以下のときにアクティブ状態になります:</dt> + <dd> + <ul> + <li>ユーザーがコントロール上でクリックする</li> + <li>ユーザーが Tab キーを押下して、コントロールがフォーカスを得る</li> + <li>コントロールが開いた状態で、ユーザーがコントロールをクリックする</li> + </ul> + </dd> + <dt>コントロールは以下のときに開いた状態になります:</dt> + <dd> + <ul> + <li>コントロールが開いた状態ではないときに、ユーザーがコントロールをクリックした</li> + </ul> + </dd> +</dl> + +<p>状態をどのように変えるかを理解したら、コントロールの値をどのように変えるかの定義が重要になります:</p> + +<dl> + <dt>以下のときに値が変わります:</dt> + <dd> + <ul> + <li>コントロールが開いた状態であるときに、ユーザーが選択肢をクリックする</li> + <li>コントロールがアクティブ状態であるときに、ユーザーが上下矢印キーを押下する</li> + </ul> + </dd> +</dl> + +<dl> + <dt>以下のときには値は変わりません:</dt> + <dd> + <ul> + <li>最初のオプションが選択済みのときに、ユーザーが上矢印をクリックする</li> + <li>最後のオプションが選択済みのときに、ユーザーが下矢印をクリックする</li> + </ul> + </dd> +</dl> + +<p>最後に、コントロールの選択肢がどのように動作するかを定義しましょう:</p> + +<ul> + <li>コントロールが開いているとき、選択されている選択肢は強調されます</li> + <li>マウスポインタが選択肢の上にあるときはその選択肢が強調され、また前に強調されていた選択肢は通常状態に戻ります</li> +</ul> + +<p>この例の用途としては、ここまでです。しかし注意深い読者の方は、いくつかの動作が欠けていることに気づくでしょう。例えば、コントロールが開いた状態であるときにユーザーが Tab キーを押すと何が起きると考えますか? その答えは... 何も起きません。正しい動作は明らかでしょうが、実際は私たちの仕様で定義されていないため、とても見逃されやすいのです。これは、コントロールの動作を設計する人と実装する人が異なるチーム環境で特に当てはまります。</p> + +<p>別のおもしろい例です: コントロールが開いた状態であるときに上下矢印キーを押すと何が起きるのでしょうか? こちらはやや難しくなります。アクティブ状態と開いた状態をまったく別のものと考えるなら、その答えはやはり "何も起きません" です。これは、開いた状態でのキーボードの作用を定義していないためです。一方、アクティブ状態と開いた状態が少し重なると考えるなら、値は替わるかもしれませんがそれに対応して選択肢が強調されることはないでしょう。繰り返しになりますが、これはコントロールが開いた状態の選択肢に対するキーボードの作用を定義していないためです (コントロールが開いた状態で何が起きるかだけを定義しており、その後がないためです)。</p> + +<p>もう少し突っ込んで考えてみます: エスケープキーはどうでしょう? <kbd>Esc</kbd> キーを押すと開いた select が閉じます。ネイティブの{{htmlelement('select')}}と同じ機能を提供する場合、キーボードやマウスやスクリーンリーダーへのタッチ、その他あらゆる入力デバイスまで、全てのユーザーにとっての select の動作と全く同じようにふるまうべきです。</p> + +<p>この例では欠けている仕様が明らかですので対処するでしょうが、めずらしい新たなコントロールでは真の問題になり得ます。標準要素では、{{htmlelement('select')}} もその 1 つですが、仕様の作成者は膨大な時間をかけて全てのユースケースの全ての入力デバイスの全ての操作を指定します。新コントロールの作成は簡単ではなく、特にそれが作成されたことのないものの場合は、どのような動作が正しいかについて、わずかなアイデアですら誰も持っていないため簡単ではないです。少なくとも select はこれまでやってきたため、どうふるまうかはわかっています!</p> + +<p>一般的に、新しい操作を設計するのは、標準を作成するに十分なリーチを持った、とても大きな産業プレイヤーだけの選択肢です。例えば、Apple は 2001年に iPod にスクロールホイールを導入しました。完全に新しい操作方法のデバイスを導入するのに成功するマーケットシェアがありましたが、たいていのデバイス会社はそうはいきません。</p> + +<p>新しいユーザーインタラクションを発明しないのがベストです。インタラクションを追加する場合、設計段階で時間を使うのが重要です。動作の定義が貧弱であったり定義もれがあったりした場合、いったんユーザーが使い始めると動作を再定義するのが非常に困難になると思われますので、設計段階に時間をかけることは賢明です。もし疑っているのでしたら、他の人に意見を聞きましょう。また予算を持っているのでしたら、<a href="http://en.wikipedia.org/wiki/Usability_testing" rel="external" title="http://en.wikipedia.org/wiki/Usability_testing">ユーザーテストの実施</a>をためらってはいけません。このプロセスは、UX デザインと呼ばれます。この点について詳しく学びたいのでしたら、以下の役に立つリソースをご覧になるとよいでしょう:</p> + +<ul> + <li><a href="http://www.uxmatters.com/" rel="external" title="http://www.uxmatters.com/">UXMatters.com</a></li> + <li><a href="http://uxdesign.com/" rel="external" title="http://uxdesign.com/">UXDesign.com</a></li> + <li><a href="http://uxdesign.smashingmagazine.com/" rel="external" title="http://uxdesign.smashingmagazine.com/">The UX Design section of SmashingMagazine</a></li> +</ul> + +<div class="note"> +<p><strong>注記: </strong>さらにほとんどのシステムでは、使用できる選択肢すべてを見るために {{HTMLElement("select")}} 要素を開く手段があります (これは {{HTMLElement("select")}} 要素をマウスでクリックするのと同じです)。これは Windows では <kbd>Alt</kbd> + <kbd>Down</kbd> キー で実現できますが、この例では実装しません。しかし、仕組みはすでに <code>click</code> イベント向けに実装されていますので、行うのは簡単です。</p> +</div> + +<h2 id="Defining_the_HTML_structure_and_semantics" name="Defining_the_HTML_structure_and_semantics">HTML の構造とセマンティクスの定義</h2> + +<p>コントロールの基本的な機能が決まりましたので、構築を始めるときが来ました。最初のステップはコントロールの HTML 構造の定義と、基本的なセマンティクスの付与です。こちらが、{{HTMLElement("select")}} 要素の再構築に必要な HTML です:</p> + +<pre class="brush: html notranslate"><!-- これはコントロールの中心的なコンテナです。 + tabindex 属性は、ユーザーがコントロールにフォーカスを当てられるようにするものです。 + これを JavaScript で設定する方がよいことは、後で見ていきます。--> +<div class="select" tabindex="0"> + + <!-- このコンテナは、コントロールの現在の値を表示するために使用します。--> + <span class="value">Cherry</span> + + <!-- このコンテナは、コントロールで使用できるすべての選択肢を包含します。 + これはリストですから、ul 要素を使用するとよいでしょう。--> + <ul class="optList"> + <!-- 各々の選択肢は表示される値だけを包含しており、フォームのデータで送信される + 実際の値を処理する方法は後で見ていきます。--> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> + +</div></pre> + +<p>クラス名の使い方に注目してください。これらは基盤となる実際の HTML とは関係なく、フォームに関するそれぞれの部分を示します。これは CSS や JavaScript を強固な HTML の構造と結びつけないようにするために重要であり、そのためにコントロールを扱うコードを壊すことなく、後から実装を変更することができます。例えば {{HTMLElement("optgroup")}} 要素と同等の機能を実装したい場合などです。</p> + +<p>クラス名は、しかしながら、意味のある値ではありません。現在の状態では、スクリーンリーダーのユーザーのみがリストを"見る"ことができます。ARIA セマンティクスを少し追加します。</p> + +<h2 id="Creating_the_look_and_feel_using_CSS" name="Creating_the_look_and_feel_using_CSS">CSS でルックアンドフィールを作成する</h2> + +<p>構造ができましたので、コントロールのデザインを始められます。カスタムコントロールを作成する上でのポイントは、望むとおりにコントロールへスタイルを設定できることです。そのために、CSS を 2 つの部分に分けます: ひとつはコントロールが {{HTMLElement("select")}} 要素のように動作するために欠かせない CSS ルールであり、もうひとつは希望する見た目にするための好みのスタイルで構成されます。</p> + +<h3 id="Required_styles" name="Required_styles">必須のスタイル</h3> + +<p>必須のスタイルは、コントロールの 3 つの状態を扱うために欠かせないものです。</p> + +<pre class="brush: css notranslate">.select { + /* 選択肢のリスト向けのポジショニングコンテキストを作成します; + adding this to .select{{cssxref(':focus-within')}} will be a better option when fully supported + */ + position: relative; + + /* コントロールをテキストフローの一部かつまとまった大きさにします */ + display : inline-block; +}</pre> + +<p>アクティブ状態であるコントロールのルックアンドフィールを定義するため、追加で <code>active</code> クラスが必要です。このコントロールはフォーカスを得ることができますので、同様に動作させるためにカスタムスタイルを {{cssxref(":focus")}} 疑似クラスにも適用します。</p> + +<pre class="brush: css notranslate">.select.active, +.select:focus { + outline: none; + + /* box-shadow プロパティは必須ではありませんが、これをデフォルト値として使用するのは + アクティブ状態を見えるようにするために重要です。自由に書き換えてください。*/ + box-shadow: 0 0 3px 1px #227755; +}</pre> + +<p>次に、選択肢のリストを扱いましょう:</p> + +<pre class="brush: css notranslate">/* .select セレクタは、私たちが定義するクラスがコントロールの内部にあることを + 確実にするためのシンタックスシュガーです。*/ +.select .optList { + /* 選択肢のリストが値の下部かつ HTML フローの外側に表示される + ようにします。*/ + position : absolute; + top : 100%; + left : 0; +}</pre> + +<p>選択肢のリストが隠れている状態を扱うための追加クラスも必要です。これはアクティブ状態と開いた状態で完全には一致しない相違点を扱うために必要です。</p> + +<pre class="brush: css notranslate">.select .optList.hidden { + /* これはアクセシブルな方法でリストを隠すための簡単な方法です。 + アクセシビリティについては最後に説明します。*/ + max-height: 0; + visibility: hidden; +}</pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 選択肢のリストに高さと幅を与えないように <code>transform: scale(1, 0)</code> も使えます。</p> +</div> + +<h3 id="Beautification" name="Beautification">美化</h3> + +<p>基本的な機能性を適切に置きましたので、戯れを始められます。以下は何ができるかの例であり、本記事の冒頭で示したスクリーンショットに一致するものです。とはいえ、自由に実験して何ができるかを見てみるとよいでしょう。</p> + +<pre class="brush: css notranslate">.select { + /* アクセシビリティのため、すべてのサイズは em 単位の値で表します + (ユーザーがテキストのみのモードでブラウザーのズーム機能を使用したときに、 + コントロールをリサイズ可能にします)。算出結果は、ほとんどのブラウザーで + デフォルト値である 1em == 16px を想定します。 + px から em への変換がわからない場合は http://riddle.pl/emcalc/ を試してください */ + font-size : 0.625em; /* この値 (10px) は、本コンテキストにおける新たなフォントサイズの em 単位値です。*/ + font-family : Verdana, Arial, sans-serif; + + box-sizing : border-box; + + /* 後で追加する下向き矢印のためのスペースが必要です */ + padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : .2em solid #000; /* 2px */ + border-radius : .4em; /* 4px */ + box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */ + + /* 最初の宣言は、線形グラデーションをサポートしないブラウザー向けのものです。*/ + background : #F0F0F0; + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + /* 値がコントロールの幅より大きくなる可能性があるため、コントロールの幅を + 変更しないようにすることが必要です。内容物がオーバーフローした場合は、 + 省略記号をつけるとよいでしょう。*/ + display : inline-block; + width : 100%; + overflow : hidden; + white-space : nowrap; + text-overflow: ellipsis; + vertical-align: top; +}</pre> + +<p>下向き矢印をデザインするための追加要素は不要です。代わりに {{cssxref(":after")}} 疑似要素を使用します。ただし、<code>select</code> クラスでシンプルな背景画像を使用することによる実装も可能です。</p> + +<pre class="brush: css notranslate">.select:after { + content : "▼"; /* Unicode 文字 U+25BC を使用します。http://www.utf8-chartable.de をご覧ください */ + position: absolute; + z-index : 1; /* これは、矢印が選択肢のリストに重ならないようにするために重要です */ + top : 0; + right : 0; + + box-sizing : border-box; + + height : 100%; + width : 2em; + padding-top : .1em; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; + text-align : center; +}</pre> + +<p>次に、選択肢のリストにスタイルを設定しましょう:</p> + +<pre class="brush: css notranslate">.select .optList { + z-index : 2; /* 選択肢のリストが下向き矢印より上になるよう、明示的に示します。*/ + + /* ul 要素のデフォルトスタイルを初期化します。*/ + list-style: none; + margin : 0; + padding: 0; + + box-sizing : border-box; + + /* 値の幅がコントロールの幅より小さい場合でも、選択肢のリストの幅が + コントロール自体と同じになるようにします。*/ + min-width : 100%; + + /* リストが長すぎる場合に、内容物が垂直方向にはみ出します (自動的に + 垂直スクロールバーを表示します) が、水平方向にはみ出しません + (幅を指定しないため、リストは自身の幅へ自動的に調整されます。 + それができない場合は、内容物が切り詰められます) 。*/ + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; + + border: .2em solid #000; /* 2px */ + border-top-width : .1em; /* 1px */ + border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */ + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */ + background: #f0f0f0; +}</pre> + +<p>選択肢向けに、ユーザーが選択しようとしている (あるいは選択した) 値を示せるようにするための <code>highlight</code> クラスを追加しなければなりません。</p> + +<pre class="brush: css notranslate">.select .option { + padding: .2em .3em; /* 2px 3px */ +} + +.select .highlight { + background: #000; + color: #FFFFFF; +}</pre> + +<p>これで、3 つの状態の結果は以下のようになります:</p> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">通常状態</th> + <th scope="col" style="text-align: center;">アクティブ状態</th> + <th scope="col" style="text-align: center;">開いた状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_1")}}</td> + <td>{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_1")}}</td> + <td>{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_1")}}</td> + </tr> + <tr> + <td colspan="3" style="text-align: center;"><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="HTML/Forms/How_to_build_custom_form_widgets/Example_1">ソースコードを確認する</a></td> + </tr> + </tbody> +</table> + +<h2 id="Bring_your_widget_to_life_with_JavaScript" name="Bring_your_widget_to_life_with_JavaScript">JavaScript でコントロールに命を吹き込む</h2> + +<p>デザインや構造の準備ができましたので、コントロールが実際に動作するようにするための JavaScript コードを記述できます。</p> + +<div class="warning"> +<p><strong>警告:</strong> 以下は教育目的のコードであり、そのままで使用するべきではありません。ご覧のとおり、さまざまな箇所に将来性のないものや古いブラウザーで動作しないものがあります。また、本番のコードでは最適化すべき冗長な箇所もあります。</p> +</div> + +<h3 id="Why_isnt_it_working" name="Why_isn't_it_working">なぜ動作しないのか?</h3> + +<p>始める前に、重要事項を覚えておくことが大切です: <strong>ブラウザー内の JavaScript は信頼できる技術ではありません</strong>。カスタムコントロールを作成するとき、すべてをつなぎ合わせるために必要であることから JavaScript に頼らなければならないでしょう。ところが、JavaScript をブラウザーで実行できない場合がいくつもあります:</p> + +<ul> + <li>ユーザーが JavaScript を無効にしている。これはもっともめずらしいケースです。ごく一部の人々は、今でも JavaScript を無効にしています。</li> + <li>スクリプトが読み込まれません。これはよくあるケースのひとつであり、特にネットワークの信頼性が低いモバイル環境で発生します。</li> + <li>スクリプトに不具合があります。この可能性は常に考慮すべきです。</li> + <li>スクリプトがサードパーティのスクリプトと競合しています。これは、トラッキングのスクリプトやユーザーが使用するブックマークレットとの間で発生する可能性があります。</li> + <li>スクリプトがブラウザーの拡張機能 (Firefox の <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external" title="https://addons.mozilla.org/fr/firefox/addon/noscript/">NoScript</a> 拡張機能や Chrome の <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external" title="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn">NotScripts</a> 拡張機能など) と競合したり、拡張機能の影響を受けたりしています。</li> + <li>ユーザーが古いブラウザーを使用しており、必要な機能のいずれかがサポートされていません。これは、最先端の API を使用するときに頻繁に発生します。</li> + <li>ユーザーは JavaScript が完全にダウンロード、解析、実行される前にコンテンツを操作します。</li> +</ul> + +<p>このようなリスクがあるため、JavaScript が動作しない場合に何が起きるかを注意深く考えることが重要です。この問題について詳しく扱うのは、スクリプトをどれだけ汎用および再利用可能にしたいかと密接に関わりますので本記事の範囲を外れますが、本サンプルでは基本的な部分について考えていきます。</p> + +<p>本記事の例では、JavaScript コードが実行されない場合に標準の {{HTMLElement("select")}} 要素にフォールバックします。われわれのコントロールと {{HTMLElement("select")}}を導入し、いずれが表示されるかは body 要素のり class に依存します。読み込みに成功したとき、body 要素の class がコントロールの関数をなす script により更新されます。</p> + +<p>これを実現するには、2 つのことが必要です。</p> + +<p>第一に、カスタムコントロールを使用する前に通常の {{HTMLElement("select")}} 要素を追加することが必要です。実際は、これは残りのフォームデータと共にカスタムコントロールのデータを送信できるようにするために必要です。詳しくは後述します。</p> + +<pre class="brush: html notranslate"><body class="no-widget"> + <form> + <select name="myFruit"> + <option>Cherry</option> + <option>Lemon</option> + <option>Banana</option> + <option>Strawberry</option> + <option>Apple</option> + </select> + + <div class="select"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> + </div> + </form> + +</body></pre> + +<p>第二に、不要な要素 (すなわち、スクリプトを実行する場合における "本物の" {{HTMLElement("select")}} 要素や、実行しない場合におけるカスタムコントロール) を隠せるようにするための新たなクラスが 2 つ必要です。デフォルトでは、HTML コードでカスタムコントロールを隠すことに注意してください。</p> + +<pre class="brush: css notranslate">.widget select, +.no-widget .select { + /* この CSS セレクタの基本的な意味は: + - body のクラスを "widget" に設定して、本物の {{HTMLElement("select")}} 要素を隠す + - または body のクラスを変更せずに "no-widget" のままにしておくことで、 + クラスが "select" である要素が隠される */ + position : absolute; + left : -5000em; + height : 0; + overflow : hidden; +}</pre> + +<p>この CSS は要素の 1 つを見えなくしますが、スクリーンリーダーからは利用できます。</p> + +<p>ここで、スクリプトを実行するか否かを判断するための JavaScript スイッチが必要になります。このスイッチはとても簡単です: ページを読み込むときにスクリプトを実行したら、<code>no-widget</code> クラスを削除して <code>widget</code> クラスを追加します。これにより {{HTMLElement("select")}} 要素やカスタムコントロールの可視性を切り替えます。</p> + +<pre class="brush: js notranslate">window.addEventListener("load", function () { + document.body.classList.remove("no-widget"); + document.body.classList.add("widget"); +});</pre> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">JS なし</th> + <th scope="col" style="text-align: center;">JS あり</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_2")}}</td> + <td>{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_2")}}</td> + </tr> + <tr> + <td colspan="2" style="text-align: center;"><a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="HTML/Forms/How_to_build_custom_form_widgets/Example_2">ソースコードを確認する</a></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注記:</strong> コードを本当に汎用かつ再利用可能にしたい場合はクラスを切り替えるのではなく、単に {{HTMLElement("select")}} 要素を隠すためのコントロールのクラスを追加して、ページ内にあるすべての {{HTMLElement("select")}} 要素の後ろにカスタムコントロールを表す DOM ツリーを動的に追加する方がはるかによいでしょう。</p> +</div> + +<h3 id="Making_the_job_easier" name="Making_the_job_easier">作業をより簡単に</h3> + +<p>作成しようとしているコードでは、必要な作業すべてのために標準の JavaScript と DOM API を使用するでしょう。ここで使用するつもりである機能は以下のとおりです:</p> + +<ol> + <li>{{domxref("element.classList","classList")}}</li> + <li>{{domxref("EventTarget.addEventListener","addEventListener")}}</li> + <li><code><a href="/ja/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code></li> + <li>{{domxref("element.querySelector","querySelector")}} および {{domxref("element.querySelectorAll","querySelectorAll")}}</li> +</ol> + +<p>これら特定機能を利用できるかに加えて、作業を始める前に残されている問題があります。{{domxref("element.querySelectorAll","querySelectorAll()")}} 関数が返すオブジェクトは <code><a href="/ja/docs/JavaScript/Reference/Global_Objects/Array" title="JavaScript/Reference/Global_Objects/Array">Array</a></code> ではなく {{domxref("NodeList")}} です。これは、<code>Array</code> オブジェクトは <code><a href="/ja/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> 関数をサポートしているが {{domxref("NodeList")}} はサポートしていないために重要な問題です。{{domxref("NodeList")}} は <code>Array</code> ととても似ており、また <code>forEach</code> はとても便利であることから、作業を楽にするため以下のように {{domxref("NodeList")}} で <code>forEach</code> をサポートさせることができます:</p> + +<pre class="brush: js notranslate">NodeList.prototype.forEach = function (callback) { + Array.prototype.forEach.call(this, callback); +}</pre> + +<p>古いブラウザーをサポートする必要がある場合、そのブラウザーがこうした機能をサポートしているか確かめてください。そうでない場合、リスト内を繰り返すか、ライブラリーや pollyfill を使う必要があります。</p> + +<h3 id="Building_event_callbacks" name="Building_event_callbacks">イベントコールバックを作成する</h3> + +<p>基盤が整いましたので、ユーザーがコントロールと対話するたびに使用されるすべての関数を定義し始めることができます。</p> + +<pre class="brush: js notranslate">// この関数は、カスタムコントロールを非アクティブにしたいときに使用します。 +// 引数は 1 つあります。 +// select : 非アクティブにする `select` クラスの DOM ノード +function deactivateSelect(select) { + + // コントロールがアクティブではないときは何もしません。 + if (!select.classList.contains('active')) return; + + // カスタムコントロールの選択肢のリストを取得することが必要です。 + var optList = select.querySelector('.optList'); + + // 選択肢のリストを閉じます。 + optList.classList.add('hidden'); + + // そして、カスタムコントロール自身を非アクティブにします。 + select.classList.remove('active'); +} + +// この関数は、ユーザーがコントロールをアクティブ/非アクティブにしたがっているときに使用します。 +// 引数は 2 つあります: +// select : アクティブにする `select` クラスの DOM ノード +// selectList : `select` クラスであるすべての DOM ノードのリスト +function activeSelect(select, selectList) { + + // コントロールがすでにアクティブであるときは何もしません。 + if (select.classList.contains('active')) return; + + // すべてのカスタムコントロールを非アクティブにすることが必要です。 + // deactivateSelect 関数は forEach コールバック関数の要件を + // すべて満たしていますので、仲介する無名関数を使用せずに + // 直接使用しています。 + selectList.forEach(deactivateSelect); + + // そして、指定されたコントロールをアクティブ状態にします。 + select.classList.add('active'); +} + +// この関数は、ユーザーが選択肢のリストを開く/閉じることを求めたときに使用します。 +// 引数は 1 つあります: +// select : 表示を切り替えるリストの DOM ノード +function toggleOptList(select) { + + // リストはコントロールから確保します。 + var optList = select.querySelector('.optList'); + + // リストのクラスを表示/非表示に切り替えます。 + optList.classList.toggle('hidden'); +} + +// この関数は、選択肢を強調したいときに使用します。 +// 引数は 2 つあります: +// select : 強調する選択肢を包含する `select` クラスの DOM ノード +// option : 強調する `option` クラスの DOM ノード +function highlightOption(select, option) { + + // カスタムコントロールで使用可能なすべての選択肢のリストを取得します。 + var optionList = select.querySelectorAll('.option'); + + // すべての選択肢から強調効果を取り除きます。 + optionList.forEach(function (other) { + other.classList.remove('highlight'); + }); + + // 適切な選択肢を強調します。 + option.classList.add('highlight'); +};</pre> + +<p>以上が、カスタムコントロールのさまざまな状態を制御するために必要なもののすべてです。</p> + +<p>次に、これらの関数と適切なイベントを関連づけます:</p> + +<pre class="brush: js notranslate">// ドキュメントが読み込まれたときのイベントの関連づけを制御します。 +window.addEventListener('load', function () { + var selectList = document.querySelectorAll('.select'); + + // 各々のコントロールは初期化が必要です。 + selectList.forEach(function (select) { + + // すべての `option` も同様です。 + var optionList = select.querySelectorAll('.option'); + + // ユーザーが選択肢にマウスポインタを乗せるたびに、その選択肢を強調します。 + optionList.forEach(function (option) { + option.addEventListener('mouseover', function () { + // 注記: 変数 `select` および `option` は、関数呼び出しのスコープ内でのみ + // 使用可能なクロージャです。 + highlightOption(select, option); + }); + }); + + // ユーザーが独自の select 要素でクリックするたびに + select.addEventListener('click', function (event) { + // 注記: 変数 `select` は、関数呼び出しのスコープ内でのみ + // 使用可能なクロージャです。 + + // 選択肢のリストの可視性を切り替えます。 + toggleOptList(select); + }); + + // コントロールが再びフォーカスを得た場合 + // ユーザーがコントロールをクリックしたり、コントロールへアクセスするために + // Tab キーを使用するたびに、コントロールはフォーカスを得ます。 + select.addEventListener('focus', function (event) { + // 注記: 変数 `select` および `selectList` は、関数呼び出しのスコープ内でのみ + // 使用可能なクロージャです。 + + // コントロールをアクティブにします。 + activeSelect(select, selectList); + }); + + // コントロールがフォーカスを失った場合 + select.addEventListener('blur', function (event) { + // 注記: 変数 `select` は、関数呼び出しのスコープ内でのみ + // 使用可能なクロージャです。 + + // コントロールを非アクティブにします。 + deactivateSelect(select); + }); + +<code class="language-js"><span class="comment token"> </span></code> // ユーザーが`esc`を押した場合にフォーカスを外す +<code class="language-js"> select<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'keyup'</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + + <span class="comment token">// deactive on keyup of `esc`</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>event<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> +</code> deactivateSelect(select); +<code class="language-js"><span class="punctuation token"> </span> <span class="punctuation token">}</span></code> + }); +});</pre> + +<p>この時点でコントロールは設計どおりに状態が変わりますが、コントロール値はまだ更新されません。次の章でこれを扱います。</p> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Live example</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_3")}}</td> + </tr> + <tr> + <td style="text-align: center;"><a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3" title="HTML/Forms/How_to_build_custom_form_widgets/Example_3">ソースコードを確認する</a></td> + </tr> + </tbody> +</table> + +<h3 id="Handling_the_widgets_value" name="Handling_the_widget's_value">コントロールの値を制御する</h3> + +<p>コントロールが動作するようになりましたので、ユーザーの入力に従って値を更新して、フォームデータと共にその値を送信できるようにするコードを追加しなければなりません。</p> + +<p>これを行うもっとも簡単な方法は、覆い隠したネイティブコントロールを使用することです。そのようなコントロールはブラウザーが提供するすべての組み込みのコントロールと共に値の経過を保持しており、フォームを送信するときは通常どおりに値を送信します。これらすべてを行えるようにするために、車輪の再発明を行うのは無駄です。</p> + +<p>先ほど見たように、アクセシビリティの理由からフォールバック手段としてすでにネイティブの select コントロールを使用しています。単純に、その値をカスタムコントロールの値と同期することができます:</p> + +<pre class="brush: js notranslate">// この関数は、表示される値を更新してネイティブコントロールの値と同期します。 +// 引数は 2 つあります: +// select : 更新する値を持つ `select` クラスの DOM ノード +// index : 選択される値のインデックス +function updateValue(select, index) { + // 指定されたカスタムコントロール向けのネイティブコントロールを取得することが必要です。 + // この例では、ネイティブコントロールはカスタムコントロールの兄弟です。 + var nativeWidget = select.previousElementSibling; + + // カスタムコントロールの値のプレースホルダーの取得も必要です。 + var value = select.querySelector('.value'); + + // そして、選択肢の全リストが必要です。 + var optionList = select.querySelectorAll('.option'); + + // 選択した値のインデックスを、selectedIndex に設定します。 + nativeWidget.selectedIndex = index; + + // 上記に応じて、値のプレースホルダーも更新します。 + value.innerHTML = optionList[index].innerHTML; + + // そして、カスタムコントロールで対応する選択肢を強調します。 + highlightOption(select, optionList[index]); +}; + +// この関数は、ネイティブコントロールで現在選択されているインデックスを返します。 +// 引数は 1 つあります: +// select : ネイティブコントロールに関係する `select` クラスの DOM ノード +function getIndex(select) { + // 指定されたカスタムコントロール向けのネイティブコントロールにアクセスすることが必要です。 + // この例では、ネイティブコントロールはカスタムコントロールの兄弟です。 + var nativeWidget = select.previousElementSibling; + + return nativeWidget.selectedIndex; +};</pre> + +<p>これら 2 つの関数で、ネイティブコントロールとカスタムコントロールを関連づけることができます:</p> + +<pre class="brush: js notranslate">// ドキュメントが読み込まれたときのイベントの関連づけを制御します。 +window.addEventListener('load', function () { + var selectList = document.querySelectorAll('.select'); + + // 各々のコントロールは初期化が必要です。 + selectList.forEach(function (select) { + var optionList = select.querySelectorAll('.option'), + selectedIndex = getIndex(select); + + // カスタムコントロールがフォーカスを得られるようにします。 + select.tabIndex = 0; + + // ネイティブコントロールがフォーカスを得ないようにします。 + select.previousElementSibling.tabIndex = -1; + + // デフォルトで選択されている値が正しく表示されるようにします。 + updateValue(select, selectedIndex); + + // ユーザーが選択肢をクリックするのに応じて値を更新します。 + optionList.forEach(function (option, index) { + option.addEventListener('click', function (event) { + updateValue(select, index); + }); + }); + + // フォーカスがあるコントロールでユーザーがキーボードを使用するのに応じて、値を更新します。 + select.addEventListener('keyup', function (event) { + var length = optionList.length, + index = getIndex(select); + + // ユーザーが下矢印キーを押すと、次の選択肢にジャンプします。 + if (event.keyCode === 40 && index < length - 1) { index++; } + + // ユーザーが上矢印キーを押すと、前の選択肢にジャンプします。 + if (event.keyCode === 38 && index > 0) { index--; } + + updateValue(select, index); + }); + }); +});</pre> + +<p>上記のコードで、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLElement/tabIndex" title="/ja/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code> プロパティを使用していることは注目に値します。このプロパティは、ネイティブコントロールにフォーカスが当たらないようにすることと、ユーザーがキーボードやマウスを使用するとカスタムコントロールがフォーカスを得るようにするために必要です。</p> + +<p>これで完了です! 結果は以下のとおりです:</p> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Live example</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_4")}}</td> + </tr> + <tr> + <td style="text-align: center;"><a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4" title="HTML/Forms/How_to_build_custom_form_widgets/Example_4">ソースコードを確認する</a></td> + </tr> + </tbody> +</table> + +<p>ちょっと待ってください、本当に終わったのでしょうか?</p> + +<h2 id="Make_it_accessible" name="Make_it_accessible">アクセシブルにする</h2> + +<p>フル機能のセレクトボックスとはかけ離れていますが動作するものはできましたし、よく動作しています。しかし、私たちが行ってきたことは DOM の操作にすぎません。これには実際のセマンティクスがなく、またセレクトボックスのように見えていてもブラウザーの視点からはそうではないため、支援技術はそれがセレクトボックスであるとは理解できません。つまり、このきれいなセレクトボックスはアクセシブルではありません!</p> + +<p>幸いなことに解決策があり、それは <a href="/ja/docs/Accessibility/ARIA" title="Accessibility/ARIA">ARIA</a> と呼ばれます。ARIA は "Accessible Rich Internet Application" を表し、その <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">W3C 仕様</a> は私たちがここで行っていることに特化して設計されています: ウェブアプリケーションやカスタムコントロールをアクセシブルにします。これは基本的には、私たちが作り出した要素がネイティブコントロールとして通るかのように、役割や状態や特性をより説明できるようにするために HTML を拡張する属性のセットです。これらの属性の使用はとても簡単ですので、行ってみましょう。</p> + +<h3 id="The_role_attribute" name="The_role_attribute"><code>role</code> 属性</h3> + +<p><a href="/ja/docs/Accessibility/ARIA" title="Accessibility/ARIA">ARIA</a> で使用される主要な属性が、<a href="/ja/docs/Accessibility/ARIA/ARIA_Techniques" title="Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> 属性です。<a href="/ja/docs/Accessibility/ARIA/ARIA_Techniques" title="Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> 属性は、要素を何に使用するかを定義する値を受け入れます。それぞれのロールは、自身の要件や動作を定義します。本記事の例では、ロール <code><a href="/ja/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> を使用します。これは "composite role" であり、このロールの要素は子要素を持ち、またそれぞれの子要素も特定のロールを持ちます (この例では、ロール <code>option</code> の子要素が少なくとも 1 つ)。</p> + +<p>また、ARIA は標準の HTML マークアップにデフォルトで適用されるロールを定義することも特筆に値します。例えば、{{HTMLElement("table")}} 要素はロール <code>grid</code> に、{{HTMLElement("ul")}} 要素はロール <code>list</code> にマッチします。{{HTMLElement("ul")}} 要素を使用しているため、私たちのコントロールのロール <code>listbox</code> が、{{HTMLElement("ul")}} 要素のロール <code>list</code> を置き換えるようにしなければなりません。そのために、ロール <code>presentation</code> を使用します。このロールは要素に特別な意味はないことを示せるようにするためのものであり、単に情報を与えるために使用されます。これを {{HTMLElement("ul")}} 要素に適用します。</p> + +<p>ロール <code><a href="/ja/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> をサポートするため、HTML を以下のように更新することが必要です:</p> + +<pre class="brush: html notranslate"><!-- 最初の要素に role="listbox" 属性を追加します --> +<div class="select" role="listbox"> + <span class="value">Cherry</span> + <!-- ul 要素に role="presentation" を追加します --> + <ul class="optList" role="presentation"> + <!-- すべての li 要素に role="option" 属性を追加します --> + <li role="option" class="option">Cherry</li> + <li role="option" class="option">Lemon</li> + <li role="option" class="option">Banana</li> + <li role="option" class="option">Strawberry</li> + <li role="option" class="option">Apple</li> + </ul> +</div></pre> + +<div class="note"> +<p><strong>注記:</strong> <code>role</code> 属性と <code>class</code> 属性の両方を含める方法は、<a href="/ja/docs/CSS/Attribute_selectors" title="CSS/Attribute_selectors">CSS 属性セレクタ</a>に対応しない古いブラウザーをサポートしたい場合にのみ必要です。</p> +</div> + +<h3 id="The_aria-selected_attribute" name="The_aria-selected_attribute"><code>aria-selected</code> 属性</h3> + +<p><a href="/ja/docs/Accessibility/ARIA/ARIA_Techniques" title="Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> を使用するだけでは不十分です。<a href="/ja/docs/Accessibility/ARIA" title="Accessibility/ARIA">ARIA</a> は、状態や特性を表す多くの属性も提供します。これらをより多くまた適切に使用すると、コントロールが支援技術にもっと良く理解されるようになります。ここでは、使用する属性を 1 つに絞ります: <code>aria-selected</code> です。</p> + +<p><code>aria-selected</code> 属性は、どの選択肢が現在選択されているかを示すために使用します。これにより、支援技術はユーザーに現在何が選択されているかを伝えることができます。ここではユーザーが選択肢を選択するたびに、選択された選択肢を示すためにこの属性を JavaScript で動的に使用します。このために、<code>updateValue()</code> 関数の変更が必要です:</p> + +<pre class="brush: js notranslate">function updateValue(select, index) { + var nativeWidget = select.previousElementSibling; + var value = select.querySelector('.value'); + var optionList = select.querySelectorAll('.option'); + + // すべての選択肢が選択されていないようにします。 + optionList.forEach(function (other) { + other.setAttribute('aria-selected', 'false'); + }); + + // 指定された選択肢が選択されているようにします。 + optionList[index].setAttribute('aria-selected', 'true'); + + nativeWidget.selectedIndex = index; + value.innerHTML = optionList[index].innerHTML; + highlightOption(select, optionList[index]); +};</pre> + +<p>スクリーンリーダーにオフスクリーンselectに焦点をあてて他のスタイルを無視するようにした法が簡単に見えますが、これはアクセシブルな解決策ではありません。スクリーンリーダーは盲目の人だけのものではありません。低視力や、完全な視力の人もこれを使います。このため、スクリーンリーダーをオフスクリーン要素だけに焦点をあてるようにはできません。</p> + +<p>以下がこれらの変更を施した最終結果です (<a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> や <a href="http://www.apple.com/accessibility/voiceover/" rel="external" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a> などの支援技術でコントロールを使用してみても、よい感触を得られるでしょう):</p> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Live example</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_5")}}</td> + </tr> + <tr> + <td style="text-align: center;"><a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_5" title="HTML/Forms/How_to_build_custom_form_widgets/Example_2">ソースコードを確認する</a></td> + </tr> + </tbody> +</table> + +<p>もっと先に進むには、この例でのコードは汎用性や再利用性に改善が必要です。これは課題として挑戦できます。この2つのヒントを挙げると:すべての関数で最初の引数は同じで、つまりこれらの関数は同じコンテキストが必要です。そのコンテキストを共有するオブジェクトを作るのが賢明です。</p> + +<h2 id="An_alternative_approach_Using_radio_buttons" name="An_alternative_approach_Using_radio_buttons">他の方法: ラジオボタンを使う</h2> + +<p>上の例では、非動的なHTML、CSS、JavaScript を使って {{htmlelement('select')}} 要素を再発明しました。このselectは限られた選択肢から1つが選択され、それは {{htmlelement('input/radio', 'radio')}} ボタンのグループと同様な機能です。</p> + +<p>このため、代わりにラジオボタンを使って再発明できます。このオプションを見てみましょう。</p> + +<p>We can start with</p> + +<p>完全に意味のある、アクセシブルで、順序のない、関連する{{htmlelement('label')}}つきの{{htmlelement('input/radio','radio')}} ボタンのリストから始めます、グループ全体を適切な意味のある{{htmlelement('fieldset')}} と{{htmlelement('legend')}} のペアにラベルづけします。.</p> + +<pre class="brush: html notranslate"> <fieldset> + <legend>Pick a fruit</legend> + <ul class="styledSelect"> + <li><input type="radio" name="fruit" value="Cherry" id="fruitCherry" checked><label for="fruitCherry">Cherry</label></li> + <li><input type="radio" name="fruit" value="Lemon" id="fruitLemon"><label for="fruitLemon">Lemon</label></li> + <li><input type="radio" name="fruit" value="Banana" id="fruitBanana"><label for="fruitBanana"">Banana</label></li> + <li><input type="radio" name="fruit" value="Strawberry" id="fruitStrawberry"><label for="fruitStrawberry">Strawberry</label></li> + <li><input type="radio" name="fruit" value="Apple" id="fruitApple"><label for="fruitApple">Apple</label></li> + </ul> + </fieldset></pre> + +<p>(legend/fieldsetではなく)ラジオボタンリストに少しスタイルづけをして、前の例と同じ見た目にし、完了したことがわかるようにします:</p> + +<pre class="brush: css notranslate">.styledSelect { + display: inline-block; + padding: 0; +} +.styledSelect li { + list-style-type: none; + padding: 0; + display: flex; +} +.styledSelect [type=radio] { + position: absolute; + left: -100vw; + top: -100vh; +} +.styledSelect label { + margin: 0; + line-height: 2; + padding: 0 0 0 4px; +} +.styledSelect:not(:focus-within) input:not(:checked) + label { + height: 0; + outline: none; + overflow: hidden; +} +.styledSelect:not(:focus-within) input:checked + label { + border: .2em solid #000; + border-radius: .4em; + box-shadow: 0 .1em .2em rgba(0,0,0,.45); +} +.styledSelect:not(:focus-within) input:checked + label::after { + content : "▼"; + background: black; + float: right; + color: white; + padding: 0 4px; + margin: 0 -4px 0 4px; +} +.styledSelect:focus-within { + border: .2em solid #000; + border-radius: .4em; + box-shadow: 0 .1em .2em rgba(0,0,0,.45); +} +.styledSelect:focus-within input:checked + label { + background-color: #333; + color: #fff; + width: 100%; +}</pre> + +<p>JavaScriptなしで少しの CSSにて、ラジオボタンのリストをスタイルづけしてチェック済み項目のみを表示することができます。フォーカスが<code><fieldset></code>内の <code><ul></code> に来ると、リストは開いて、上下左右の矢印が前後の項目を選択するのに使えます。次で試してください:</p> + +<p>{{EmbedLiveSample("An_alternative_approach_Using_radio_buttons",200,240)}}</p> + +<p>これはある程度、JavaScriptなしで動作します。JavaScript が失敗しても動作する、われわれのカスタムコントロールど同じものを作ってきました。よい解決策でしょう？これはキーボードでは動作しますが、マウスクリックではそうなりません。ネイティブな意味づけのない要素を作るフレームワークに依存する代わりに、ウェブ標準をカスタムコントロールの基礎として使った方が意味があります。しかし、われわれのコントロールは <code><select></code> が自ずと持つ機能と同じものを備えていません。</p> + +<p>いい面として、このコントロールはスクリーンリーダーにとって完全にアクセシブルでキーボードで完全に操作できます。しかし、このコントロールは {{htmlelement('select')}} 要素の置き換えではありません。異なる機能や足りない機能があります。例えば、4つの矢印は選択肢を操作できますが、最後のボタンで下を押すと最初のボタンに移動します。<code><select></code> のように上端、下端で止まりません。</p> + +<p>この足りない機能の追加は、読者の課題としておきます。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>独自のフォームコントロールの作成方法を見てきましたが、ご覧いただいたようにこれは容易なことではありません。独自のカスタムコントロールを作る前に、HTMLに要求を十分に満たす代替要素がないかを検討してください。本当にカスタムコントロールを作成する必要がある場合、サードパーティのライブラリに頼るほうが簡単かつよいことも少なくありません。独自作成する場合、既存の要素を編集するか、準備されたコントロールを実装するフレームワークを使うようにして、実用的でアクセシブルなフォームコントロールの作成は見た目より複雑であることを忘れないでください。</p> + +<p>自分でコーディングする前に検討するとよいライブラリをいくつか紹介します:</p> + +<ul> + <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a></li> + <li><a href="https://www.webaxe.org/accessible-custom-select-dropdowns">AXE accessible custom select dropdowns</a></li> + <li><a href="https://github.com/marghoobsuleman/ms-Dropdown" rel="external" title="https://github.com/marghoobsuleman/ms-Dropdown">msDropDown</a></li> + <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Nice Forms</a></li> +</ul> + +<p>ラジオボタン、独自JavaScript 、またはサードパーティライブラリで代替コントロールを作る場合、アクセシブルかつ機能への耐性を高めましょう。すなわち Web 標準の実装状況がまちまちである、多様なブラウザーで良好に動作できるようにすることが必要です。楽しんでください!</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<h3 id="学習コース">学習コース</h3> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めての HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームコントロール</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームコントロールの作成方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">古いブラウザーでの HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Property_compatibility_table_for_form_widgets">フォームコントロール向けプロパティ実装状況一覧</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> +</ul> diff --git a/files/ja/learn/forms/how_to_structure_an_html_form/example/index.html b/files/ja/learn/forms/how_to_structure_an_html_form/example/index.html new file mode 100644 index 0000000000..2c97485087 --- /dev/null +++ b/files/ja/learn/forms/how_to_structure_an_html_form/example/index.html @@ -0,0 +1,164 @@ +--- +title: '例: お支払いフォーム' +slug: Learn/Forms/How_to_structure_an_HTML_form/Example +translation_of: Learn/Forms/How_to_structure_a_web_form/Example +--- +<p>これは記事 <a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a>の基本的なお支払いフォームの例です。</p> + +<h2 id="A_payment_form" name="A_payment_form">お支払いフォーム</h2> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><form> + <h1>Payment form</h1> + <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> + <section> + <h2>Contact information</h2> + <fieldset> + <legend>Title</legend> + <ul> + <li> + <label for="title_1"> + <input type="radio" id="title_1" name="title" value="M." > + Mister + </label> + </li> + <li> + <label for="title_2"> + <input type="radio" id="title_2" name="title" value="Ms."> + Miss + </label> + </li> + </ul> + </fieldset> + <p> + <label for="name"> + <span>Name: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="text" id="name" name="username"> + </p> + <p> + <label for="mail"> + <span>E-mail: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="email" id="mail" name="usermail"> + </p> + <p> + <label for="password"> + <span>Password: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="password" id="pwd" name="password"> + </p> + </section> + <section> + <h2>Payment information</h2> + <p> + <label for="card"> + <span>Card type:</span> + </label> + <select id="card" name="usercard"> + <option value="visa">Visa</option> + <option value="mc">Mastercard</option> + <option value="amex">American Express</option> + </select> + </p> + <p> + <label for="number"> + <span>Card number:</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="number" id="number" name="cardnumber"> + </p> + <p> + <label for="date"> + <span>Expiration date:</span> + <strong><abbr title="required">*</abbr></strong> + <em>formatted as mm/yy</em> + </label> + <input type="date" id="date" name="expiration"> + </p> + </section> + <section> + <p> <button type="submit">Validate the payment</button> </p> + </section> + </form></pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: css notranslate"> h1 { + margin-top: 0; + } + + ul { + margin: 0; + padding: 0; + list-style: none; + } + + form { + margin: 0 auto; + width: 400px; + padding: 1em; + border: 1px solid #CCC; + border-radius: 1em; + } + + div+div { + margin-top: 1em; + } + + label span { + display: inline-block; + width: 120px; + text-align: right; + } + + input, textarea { + font: 1em sans-serif; + width: 250px; + box-sizing: border-box; + border: 1px solid #999; + } + + input[type=checkbox], input[type=radio] { + width: auto; + border: none; + } + + input:focus, textarea:focus { + border-color: #000; + } + + textarea { + vertical-align: top; + height: 5em; + resize: vertical; + } + + fieldset { + width: 250px; + box-sizing: border-box; + margin-left: 136px; + border: 1px solid #999; + } + + button { + margin: 20px 0 0 124px; + } + + label { + position: relative; + } + + label em { + position: absolute; + right: 5px; + top: 20px; + }</pre> + +<h3 id="結果">結果</h3> + +<p>{{ EmbedLiveSample('A_payment_form', '100%', 620) }}</p> diff --git a/files/ja/learn/forms/how_to_structure_an_html_form/index.html b/files/ja/learn/forms/how_to_structure_an_html_form/index.html new file mode 100644 index 0000000000..ca3865643f --- /dev/null +++ b/files/ja/learn/forms/how_to_structure_an_html_form/index.html @@ -0,0 +1,329 @@ +--- +title: フォームの構築方法 +slug: Learn/Forms/How_to_structure_an_HTML_form +tags: + - CodingScripting + - HTML + - Web + - ガイド + - フォーム + - 例 + - 初心者 + - 学習 + - 構造 +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}</div> + +<p class="summary">基本から外れて、ここでは色々なフォームのパーツを構造化し、意味をつけるのに使われる要素を詳しく見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシーと、<a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の基本的な理解</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>HTML フォームを構造化して意味を与えて使いやすくアクセシブルにする方法を理解すること。</td> + </tr> + </tbody> +</table> + +<p>フォームは柔軟性があるため、<a href="/ja/docs/Learn/HTML" title="HTML">HTML</a> で最も複雑な構造の 1 つとなっています。専用のフォーム要素と属性を使用して、あらゆる種類の基本フォームを作成できます。HTML フォームを構築するときに正しい構造を使用すると、フォームが使用可能で<a href="/ja/docs/Learn/Accessibility">アクセスしやすい</a>ことを確実にするのに役立ちます。</p> + +<h2 id="The_<form>_element" name="The_<form>_element"><form> 要素</h2> + +<p>{{HTMLElement("form")}} 要素はフォームを正式に定義するとともに、自身の属性でフォームの動作を定義します。HTML フォームを作成しようとするたびに、この要素から始めて、すべてのコンテンツをその中に入れなければなりません。多くの支援技術やブラウザープラグインは {{HTMLElement("form")}} 要素を検出でき、またフォームを使いやすくするための特別なフックを実装できます。</p> + +<p>前の記事ですでにこれを見ています。</p> + +<div class="warning"><strong>警告:</strong> フォームの中にフォームを入れ子にすることは厳格に禁じられています。これは予期せぬ動作を発生するおそれがあるので、悪い方針です。</div> + +<p>{{HTMLElement("form")}} 要素の外部でもフォームウィジェットを使用できますが、そのフォームウィジェットは <a href="/ja/docs/Web/HTML/Attributes/form"><code>form</code></a> 属性を用いて関連付けなければ、どのフォームに対しても何も行わないことに注意してください。これは、実際には {{ HTMLElement("form") }} に包含されていない要素であっても明示的にフォームへ紐付けることを可能にします。</p> + +<p> 次に、フォームに含まれる構造的な要素を見ていきましょう。</p> + +<h2 id="The_<fieldset>_and_<legend>_elements" name="The_<fieldset>_and_<legend>_elements"><fieldset> および <legend> 要素</h2> + +<p>{{HTMLElement("fieldset")}} 要素は、スタイルや意味付けのために、同じ目的を持つウィジェットのグループの作成に便利です。{{HTMLElement("fieldset")}} 要素は、<code><fieldset></code> タグのすぐ下に {{HTMLElement("legend")}} 要素を入れてラベルを付与できます。{{HTMLElement("legend")}} 要素は、{{HTMLElement("fieldset")}} 要素の目的を正式に説明します。</p> + +<p>多くの支援技術は {{HTMLElement("legend")}} 要素を、対応する {{HTMLElement("fieldset")}} 要素内にある各ウィジェットのラベルの一部であるかのように扱うでしょう。例えば <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> や <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> といったスクリーンリーダーは、各ウィジェットのラベルを読み上げる前に legend の内容を読み上げます。</p> + +<p>以下に小さなサンプルを挙げます:</p> + +<pre class="brush:html; notranslate"><form> + <fieldset> + <legend>Fruit juice size</legend> + <p> + <input type="radio" name="size" id="size_1" value="small"> + <label for="size_1">Small</label> + </p> + <p> + <input type="radio" name="size" id="size_2" value="medium"> + <label for="size_2">Medium</label> + </p> + <p> + <input type="radio" name="size" id="size_3" value="large"> + <label for="size_3">Large</label> + </p> + </fieldset> +</form></pre> + +<div class="note"> +<p><strong>注</strong>: この例は <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> で見ることができます(<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">ライブ版も見てください</a>)。</p> +</div> + +<p>この例では、スクリーンリーダーは最初のウィジェットを "Fruit juice size small"、2 番目を "Fruit juice size medium"、3 番目を "Fruit juice size large" と読み上げるでしょう。</p> + +<p>このサンプルでのユースケースは、もっとも重要なことのひとつです。ラジオボタンのセットを置くたびに、それらを {{HTMLElement("fieldset")}} 要素内へ入れ子にするようにしましょう。ユースケースは他にもあり、通常は {{HTMLElement("fieldset")}} 要素でフォームを明確に区分するために使用できます。理想的には長いフォームは複数ページに分けるべきですが、フォームが長くなっても１つのページに収めないといけない場合、別々の関連セクションを別々の fieldset に入れることは使いやすさを改善します。</p> + +<p>支援技術への影響力により、{{HTMLElement("fieldset")}} 要素はアクセシブルなフォームを作成するために重要な要素のひとつです。しかし、それを誤用しないようにするのはあなたの責務です。できれば、フォームを作成するたびにスクリーンリーダーがどのように解釈するか聞いてみましょう。変に聞こえるのであれば、フォームの構造を改善するためのよいヒントになります。</p> + +<h2 id="The_<label>_element" name="The_<label>_element"><label> 要素</h2> + +<p>これまでの記事で見てきたように、{{HTMLElement("label")}} 要素は、HTML フォームウィジェットのラベルを定義する正式な方法です。これは、アクセシブルなフォームを作成したい場合にもっとも重要な要素です — 適切に実装された時は、スクリーンリーダーはフォーム要素のラベルと関連する指示を一緒に読み上げます。前の記事で見てきたこの例を見てみます:</p> + +<pre class="brush: html notranslate"><label for="name">Name:</label> <input type="text" id="name" name="user_name"></pre> + +<p><code><label></code> と<code><input></code> とがそれぞれ <code>for</code> と <code>id</code> 属性により正し関連付けられると (label の <code>for</code> 属性は対応するウィジェットの <code>id</code> 属性を参照します)、スクリーンリーダーは "Name, edit text"のように読み上げます。</p> + +<p>フォームコントロールとラベルを関連付けるもう 1 つの方法は、フォームコントロールを <code><label></code> の中でネストすることで、暗黙的に関連付けることです。</p> + +<pre class="brush: html notranslate"><label for="name"> + Name: <input type="text" id="name" name="user_name"> +</label></pre> + +<p>この場合でも <code>for</code> 属性を設定することがベストプラクティスと考えられています。これは、ラベルとウィジェットの暗黙的な関係を理解できない支援技術があるためです。</p> + +<p>ラベルがなかったり、フォームコントロールが明示的/暗黙にラベルに関連付けられていない場合、スクリーンリーダーは全く役立たない "Edit text blank" のような読み上げを行います。</p> + +<h3 id="Labels_are_clickable_too!" name="Labels_are_clickable_too!">ラベルもクリック可能です！</h3> + +<p>ラベルをセットアップするもう 1 つの利点は、ユーザーがラベルをクリックするとウィジェットをアクティブにすることが、あらゆるブラウザーで可能になります。これは例えば、テキスト入力で、入力と同様にラベルをクリックしてフォーカスさせることができますし、ラジオボタンやチェックボックスで特に有用です — このコントロールのヒットエリアはとても小さく、できるだけ大きくしておくのは便利です。</p> + +<p>例えば、次の例で "I like cherry" の テキストをクリックすると選択された <em>taste_cherry</em> チェックボックスの状態が切り替わります:</p> + +<pre class="brush:html; notranslate"><form> + <p> + <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry"> + <label for="taste_1">I like cherry</label> + </p> + <p> + <input type="checkbox" id="taste_2" name="taste_banana" value="banana"> + <label for="taste_2">I like banana</label> + </p> +</form></pre> + +<div class="note"> +<p><strong>注</strong>: この例は <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> で見ることができます(<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">ライブ版も見てください</a>)。</p> +</div> + +<h3 id="Multiple_labels" name="Multiple_labels">複数のラベル</h3> + +<p>厳密に言うと、1 つのウィジェット内に複数のラベルを入れることができますが、複数のラベルを持つウィジェットの扱いに問題がある支援技術があるかもしれません。複数のラベルがある場合、アクセシブルなフォームを作成するには1つの {{htmlelement("label")}} 要素内にウィジェットを入れ子にするとよいでしょう。</p> + +<p>以下のサンプルについて考えてみましょう:</p> + +<pre class="brush: html notranslate"><p>Required fields are followed by <abbr title="required">*</abbr>.</p> + +<!-- 2 つの例をご覧ください: --> +<div> + <label for="username">Name:</label> + <input id="username" type="text" name="username"> + <label for="username"><abbr title="required" aria-label="required">*</abbr></label> +</div> + +<!-- 前出の例よりは良いです: --> +<div> + <label for="username"> + <span>Name: </span> + <input id="username" type="text" name="username"> + <abbr title="required" aria-label="required">*</abbr> + </label> +</div> + +<!-- これが最も良いでしょう: --> +<div> + <label for="username">Name: <abbr title="required" aria-label="required">*</abbr></label> + <input id="username" type="text" name="username"> +</div></pre> + +<p>{{EmbedLiveSample("Multiple_labels", 120, 120)}}</p> + +<p>このサンプルでは、最初の段落で入力必須の要素の規則を定義しています。ユーザーが入力必須の要素を見つける前にスクリーンリーダーのような支援技術が注意事項を表示したり読み上げたりするためには、規則をはじめに置かなければなりません。これがユーザーにアスタリスクの意味を知らせても、それに依存することはできません。スクリーンリーダーはアスタリスクが出てくると "スター" と読み上げます。視力のあるユーザーがマウスを持ってくると、<code>title</code> 属性によって"必須"と表示されます。タイトルはスクリーンリーダーの設定により読み上げられるので、常にスクリーンリーダーに読み上げられる <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> 属性を入れておくのがより信頼性が高いでしょう。</p> + +<p>上記の違いをふまえると、以降を効率よく見ていけるでしょう:</p> + +<ul> + <li>最初の例では、label 要素すべての入力が読み上げられません — "edit text blank" だけです。その上に実際のラベルは別々に読まれます。複数の <code><label></code> 要素はスクリーンリーダーを混乱させます。</li> + <li>2 つ目の例では、少し明確になります "name star name edit text required" というようにラベルが入力と一緒に読み上げられます。しかしラベルはまだ別々に読み上げられます。少し混乱しやすいですが、これは <code><input></code> と関連したラベルがあるためまだ良いでしょう。</li> + <li>3 つ目の例が最も良いです — 実際のラベルがすべて一緒に読み上げられ、"name required edit text" のようにラベルと入力が一緒に読み上げられます。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: スクリーンリーダーによっては、少し異なる結果になる場合もあります。これは VoiceOver (と同様に動作する NVDA)でテストしています。あなたの体験を聞きたいです。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: この例は GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> で見ることができます(<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">ライブ版も見てください</a>)。2 や 3 のコメントを外したバージョンの例を実行しないでください — 複数の label と複数の同じ input ID があると、スクリーンリーダーは確実に混乱します!</p> +</div> + +<h2 id="Common_HTML_structures_used_with_forms" name="Common_HTML_structures_used_with_forms">フォームで使用される一般的な HTML 構造</h2> + +<p>ウェブフォーム特有の構造の前提として、フォームは単に HTML であると覚えておくとよいでしょう。つまり、ウェブフォームを組み立てるために HTML のすべての力を利用できるのです。</p> + +<p>サンプルでわかるように、ラベルとそのウィジェットを {{HTMLElement("ul")}} や {{HTMLElement("ol")}} リストの中の {{HTMLElement("li")}} 要素で包み込むのが一般的な慣習です。HTML リストにあるように、{{HTMLElement("p")}} 要素と {{HTMLElement("div")}} 要素も良く使われます。リストは複数のチェックボックスやラジオボタンを構造化するのに最もよく使われます。</p> + +<p>{{HTMLElement("fieldset")}} 要素に加えて、複雑なフォームの構築に HTML の見出し (例{{htmlelement("h1")}}, {{htmlelement("h2")}}) やセクション (例 {{htmlelement("section")}}) を使うことも一般的です。</p> + +<p>とりわけ、コーディングスタイルがどうあるのが心地よく、どれがアクセシブルで使いやすいフォームとなるのかを見つけるのはあなた次第です。別の機能セクションは別の {{htmlelement("section")}} 要素と、ラジオボタンを含む {{htmlelement("fieldset")}} にそれぞれ分けておくべきです。</p> + +<h3 id="Active_learning_building_a_form_structure" name="Active_learning_building_a_form_structure">アクティブラーニング: フォーム構造を構築する</h3> + +<p>これらのアイデアを実践し、もう少し複雑なフォーム構造、つまり支払いフォームを作成しましょう。このフォームはあなたがまだ理解していないかもしれないウィジェットタイプをいくつも含みますが、今はそのことを心配しないでください。次の記事 (<a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a>) でそれらがどのように機能するのかがわかります。今のところ、以下の説明に沿って説明を注意深く読み、フォームを構成するためにどのラッパー要素を使用しているか、そしてその理由を理解することから始めてください。</p> + +<ol> + <li>あらかじめ、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">空のテンプレートファイル</a>と<a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">お支払いフォームの CSS</a> のローカルコピーをコンピューターの新しいディレクトリーに作成します。</li> + <li>まず最初に、HTML {{htmlelement("head")}} 内に次の行を追加して CSS を HTML に適用します。 + <pre class="brush: html notranslate"><link href="payment-form.css" rel="stylesheet"></pre> + </li> + <li>次に、外側の {{htmlelement("form")}} 要素を追加してフォームを作成します: + <pre class="brush: html notranslate"><form> + +</form></pre> + </li> + <li><code><form></code> タグ内に、必須フィールドにマークを付ける方法をユーザーに通知するための見出しと段落を追加します: + <pre class="brush: html notranslate"><h1>Payment form</h1> +<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p></pre> + </li> + <li>次に、前のエントリーの下に、より大きなコードセクションをフォームに追加します。ここでは、連絡先情報フィールドを個別の {{htmlelement("section")}} 要素内にラップしていることがわかります。さらに、2 つのラジオボタンのセットがあり、それぞれ独自のリスト ({{htmlelement("li")}}) 要素の中に入れています。最後に、2 つの標準テキスト {{htmlelement("input")}} とそれに関連する {{htmlelement("label")}} 要素があり、それぞれ {{htmlelement("p")}} の内側に含まれていて、パスワードを入力するためのパスワード入力があります。フォームにこのコードを追加してください: + <pre class="brush: html notranslate"><section> + <h2>Contact information</h2> + <fieldset> + <legend>Title</legend> + <ul> + <li> + <label for="title_1"> + <input type="radio" id="title_1" name="title" value="K" > + King + </label> + </li> + <li> + <label for="title_2"> + <input type="radio" id="title_2" name="title" value="Q"> + Queen + </label> + </li> + <li> + <label for="title_3"> + <input type="radio" id="title_3" name="title" value="J"> + Joker + </label> + </li> + </ul> + </fieldset> + <p> + <label for="name"> + <span>Name: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="text" id="name" name="username"> + </p> + <p> + <label for="mail"> + <span>E-mail: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="email" id="mail" name="usermail"> + </p> + <p> + <label for="pwd"> + <span>Password: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="password" id="pwd" name="password"> + </p> +</section></pre> + </li> + <li>それでは、フォームの 2 番目の <code><section></code> — 支払い情報に目を向けます。ここには 3 つの異なるウィジェットとそのラベルがあり、それぞれ <code><p></code> の中に含まれています。1 つ目は、クレジットカードの種類を選択するためのドロップダウンメニュー ({{htmlelement("select")}}) です。2 番目は、クレジットカード番号を入力するための <code>tel</code> 型の <code><input></code> 要素です。<code>number</code> 型を使うこともできますが、そのスピナーUIは望ましくありません。最後のものは、カードの有効期限を入力するための <code>date</code> 型の <code><input></code> 要素です。これは、サポートしているブラウザーでは日付選択ウィジェットが表示され、サポートしていないブラウザーでは通常のテキスト入力に戻ります。新しい入力タイプは <a href="/ja/docs/Learn/Forms/HTML5_input_types">HTML5 入力タイプ</a>で再度紹介されます。<br> + <br> + 前のセクションの下に次のように入力してください。 + <pre class="brush: html notranslate"><section> + <h2>Payment information</h2> + <p> + <label for="card"> + <span>Card type:</span> + </label> + <select id="card" name="usercard"> + <option value="visa">Visa</option> + <option value="mc">Mastercard</option> + <option value="amex">American Express</option> + </select> + </p> + <p> + <label for="number"> + <span>Card number:</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="tel" id="number" name="cardnumber"> + </p> + <p> + <label for="date"> + <span>Expiration date:</span> + <strong><abbr title="required">*</abbr></strong> + <em>formatted as mm/dd/yyyy</em> + </label> + <input type="date" id="date" name="expiration"> + </p> +</section></pre> + </li> + <li>最後に追加するセクションはもっと単純で、フォームデータを送信するための <code>submit</code> タイプの {{htmlelement("button")}} のみを含みます。これをフォームの一番下に追加してください: + <pre class="brush: html notranslate"><p> <button type="submit">Validate the payment</button> </p></pre> + </li> +</ol> + +<p>完成したフォームは以下のように動作しています (GitHub でも確認できます。payment-form.html <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">ソース</a>を参照して<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">ライブ実行</a>してください)。</p> + +<p>{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}</p> + +<h2 id="Test_your_skills!" name="Test_your_skills!">あなたのスキルをテストしてみましょう!</h2> + +<p>この記事はここまでですが、最も重要な情報を覚えていますか？ 先に進む前に、この情報を保持しているかどうかを確認するためのテストがあります — <a href="/ja/docs/Learn/Forms/Test_your_skills:_Form_structure">Test your skills: Form structure</a> を参照してください。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>ウェブフォームを適切に構築するためのあらゆる知識を得ることができました。これからここで出てきた機能を見ていき、次の記事では、ユーザーから情報を集めるのに使いたくなるすべての種類のフォームウィジェットの詳細な実装について詳しく見ていきます。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li> + <li><a href="/ja/docs/Learn/Forms/Other_form_controls">Other form controls</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls">カスタムフォームコントロールの作成方法</a></li> + <li><a href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/forms/html5_input_types/index.html b/files/ja/learn/forms/html5_input_types/index.html new file mode 100644 index 0000000000..c825e48653 --- /dev/null +++ b/files/ja/learn/forms/html5_input_types/index.html @@ -0,0 +1,289 @@ +--- +title: HTML5 入力タイプ +slug: Learn/Forms/HTML5_input_types +tags: + - Beginner + - Controls + - Example + - Forms + - Guide + - HTML + - Web + - Widgets +translation_of: Learn/Forms/HTML5_input_types +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}</div> + +<p class="summary"><a href="/ja/docs/Learn/Forms/Basic_native_form_controls">前の記事では</a> {{htmlelement("input")}} 要素を見てきて、HTML の初期から利用できる <code>type</code> 属性の値をカバーしてきました。ここでは最近のフォームコントロールの機能、特定のデータを集めるのに HTML5 で追加された、新しい入力タイプを詳しく見ていきましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>コンピューターリテラシーの基本と、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の理解</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ネイティブフォームコントロールで利用できる新しい入力タイプの理解と、HTML を用いた実装方法。</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>注</strong>: この記事のたいていの昨日はブラウザーを超えて広くサポートされています。例外は注記しておきます。ブラウザーサポートについての詳細は、<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element#Forms">HTML フォーム要素のリファレンス</a>、特に <a href="/ja/docs/Web/HTML/Element/input"><input> タイプ</a>リファレンスを見てください。</p> +</div> + +<p>HTML フォームコントロールの見た目はデザイナーの仕様により全く異なるため、ウェブ開発者はときどき独自のフォームコントロールを作成します。これは上級のチュートリアル — <a href="/ja/docs/Learn/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a> — で扱います。</p> + +<h2 id="E-mail_address_field" name="E-mail_address_field">メールアドレスフィールド</h2> + +<p>このフィールドタイプは {{htmlattrxref("type","input")}}属性の <code>email</code> の値でセットされます:</p> + +<pre class="brush: html notranslate"><input type="email" id="email" name="email"></pre> + +<p>この {{htmlattrxref("type","input")}} が使われたとき、ユーザーは有効なメールアドレスをフィールドに入力することが必須です。その他のコンテンツでは、ブラウザーによってフォーム送信時にエラーが表示されます。この動作は下記のスクリーンショットで見ることができます。</p> + +<p><img alt='An invalid email input showing the message "Please enter an email address."' src="https://mdn.mozillademos.org/files/17027/email_address_invalid.png" style="display: block; height: 224px; margin: 0 auto; width: 369px;"></p> + +<p><code>email</code> 入力タイプと <a href="/ja/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 属性を組み合わせて、複数のメールアドレスが同じ入力に (カンマ区切りで)入力させることもできます:</p> + +<pre class="brush: html notranslate"><input type="email" id="email" name="email" multiple></pre> + +<p>いくつかの端末 — 特にスマートフォンのような動的キーボードつきのタッチデバイス — では、<code>@</code> キーを含むメールアドレス入力に適した別の仮想キーパッドが現れることもあります。Android 版 Firefox のキーボードの例として下記のスクリーンショットを見てください:</p> + +<p><img alt="firefox for android email keyboard, with ampersand displayed 既定では." src="https://mdn.mozillademos.org/files/17054/fx-android-email-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0 auto; width: 400px;"></p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 基本的なテキスト入力タイプの例は <a href="https://mdn.github.io/learning-area/html/forms/basic-input-examples/">basic input examples</a> にあります(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/basic-input-examples/index.html">ソースコード</a> も見てください)。</p> +</div> + +<p>これは新しい入力タイプを使う良い理由であり、こうした端末のユーザーのユーザー体験を向上させます。</p> + +<h3 id="Client-side_validation" name="Client-side_validation">クライアント側の検証</h3> + +<p>上で見てきたように、他の新しい <code>input</code> タイプと同様に、<code>email</code> は組み込みの<em>クライアント側の</em>エラー検証 — データがサーバーに送られる前にブラウザーで実行されるもの — があります。これはユーザーが正確に入力するのに役立ち、時間を短縮できます — データが正しくないことをサーバーとのラウンドトリップを待つことなくすぐに知ることは便利です。</p> + +<p>しかしこれは完全なセキュリティ対策と<em>考えるべきではありません</em>! アプリは送信データのセキュリティ確認をクライアント側と同様に<em>サーバー側</em>でも行うべきで、なぜならクライアント側の検証は簡単にオフにできるため悪意のあるユーザーは簡単にサーバーに不正なデータを送信できるためです。起こりうることについては <a href="/ja/docs/Learn/Server-side/First_steps/Website_security">Website security</a> を読んで下さい。サーバー側の検証を実装するのはこのモジュールの範囲を超えていますが、記憶しておくべきです。</p> + +<p>既定の制約では <code>a@b</code> は有効なメールアドレスです。これは既定では <code>email</code> 入力タイプはイントラネットのメールアドレスを許可しているためです。異なる検証動作を実装するには、<code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性を用いたり、エラーメッセージをカスタムできます。この機能の使い方は後の <a href="/ja/docs/Learn/Forms/Form_validation">クライアント側検証</a>の記事で話します。</p> + +<div class="note"> +<p><strong>注</strong>: 入力データがメールアドレスでない場合、{{cssxref(':invalid')}} 疑似クラスがマッチして、{{domxref('validityState.typeMismatch')}} プロパティは <code>true</code> を返します。</p> +</div> + +<h2 id="Search_field" name="Search_field">検索フィールド</h2> + +<p>検索フィールドは、ページやアプリの検索ボックス作成に使われるものです。このフィールドタイプは {{htmlattrxref("type","input")}}属性の <code>search</code> の値でセットされます:</p> + +<pre class="brush: html notranslate"><input type="search" id="search" name="search"></pre> + +<p><code>text</code> フィールドと <code>search</code> フィールドの主な違いは、ブラウザーの見た目のスタイル設定方法です。よく、<code>search</code> フィールドは角丸で描画されます。また時折、値がクリックされたときに値をクリアする "Ⓧ"も表示されます。その他、ダイナミックキーボードのある端末では、キーボードの enter キーが "<strong>検索</strong>"、あるいは虫眼鏡アイコンで表示されることもあります。</p> + +<p>下記のスクリーンショットでは macOS での Firefox 71, Safari 13, Chrome 79 と Windoes10 での Edge 18 と Chrome 79 での文字が入った検索フィールドを表示しています。注意として、クリアのアイコンはフィールドに値が入った場合のみ表示され、Safari を除いてフィールドにフォーカスが当たった場合のみ表示されます。</p> + +<p><img alt="Screenshots of search fields on several platforms." src="https://mdn.mozillademos.org/files/17028/search_focus.png" style="height: 179px; width: 549px;"></p> + +<p>もう 1 つの注目すべき機能として、<code>search</code> フィールドの値は同一サイトの複数ページにまたがって、自動保存してオートコンプリートすることができます。これはたいていのモダンブラウザーでは自動的に起こる傾向があります</p> + +<h2 id="Phone_number_field" name="Phone_number_field">電話番号フィールド</h2> + +<p>{{htmlattrxref("type","input")}} 属性に <code>tel</code> の値を使って作られる電話番号の入力専用フィールド:</p> + +<pre class="brush: html notranslate"><input type="tel" id="tel" name="tel"></pre> + +<p>ダイナミックキーボードつきのタッチデバイスにアクセルしたとき、たいていの端末では <code>type="tel"</code> が出てくると数字のキーパッドを表示します、つまりこのタイプは数字キーパッドが使えるときに使えて、電話番号に使う必要があるだけではありません。</p> + +<p>下記は Android 用 Firefox キーボードの例です:</p> + +<p><img alt="firefox for android email keyboard, with ampersand displayed 既定では." src="https://mdn.mozillademos.org/files/17056/fx-android-tel-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 276px; margin: 0px auto; width: 400px;"></p> + +<p>世界中にはいろいろな電話番号のフォーマットがあるため、このフィールドはユーザーが入力した値に制約を一切つけません (つまり、文字が入っていることなどがありえます)。</p> + +<p>前に触れた通り、<code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性が制約を強化するのに使われて、これは<a href="/ja/docs/Learn/Forms/Form_validation">クライアント側検証</a>で学びます。</p> + +<h2 id="URL_field" name="URL_field">URL フィールド</h2> + +<p>{{htmlattrxref("type","input")}} 属性に <code>url</code> の値を使うことで作成できる URL 入力の専用フィールド:</p> + +<pre class="brush: html notranslate"><input type="url" id="url" name="url"></pre> + +<p>これはフィールドに特別な検証制約を追加します。ブラウザーは (<code>http:</code>のような) プロトコルがない場合や、URL の形式が良くない場合にエラーを報告します。ダイナミックキーボードのある端末ではよく、コロン、ピリオド、スラッシュの複数やすべてをデフォルトキーとして表示します。</p> + +<p>例は下記のものを見てください (Android 用 Firefox の例):</p> + +<p><img alt="firefox for android email keyboard, with ampersand displayed 既定では." src="https://mdn.mozillademos.org/files/17057/fx-android-url-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 325px; margin: 0px auto; width: 400px;"></p> + +<div class="note"><strong>注:</strong> URL が正しい形式であっても、それが必ずしも実際存在する場所を参照しているとは限りません!</div> + +<h2 id="Numeric_field" name="Numeric_field">数値フィールド</h2> + +<p>{{HTMLElement("input")}} {{htmlattrxref("type","input")}} に <code>number</code> を指定して作成される数値入力用のコントロール。このコントロールはテキストフィールドのような見た目であるが、浮動小数値のみを許可し、通常は数値を増減するためのスピナー形式のボタンがあります。ダイナミックキーボードつきの端末では、一般的に数値キーボードが表示されます。</p> + +<p>下記のスクリーンショット (Android 用 Firefox より) に例があります:</p> + +<p><img alt="firefox for android email keyboard, with ampersand displayed 既定では." src="https://mdn.mozillademos.org/files/17055/fx-android-number-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 275px; margin: 0px auto; width: 400px;"></p> + +<p><code>number</code> の入力タイプでは、{{htmlattrxref("min","input")}} と {{htmlattrxref("max","input")}} 属性をセットすることで最小値と最大値の制約をつけることができます。</p> + +<p>スピナーボタンを押すことで増減させる増分を接とするのに <code>step</code> 属性を使うこともできます。既定では、number 入力タイプは数値が整数値の場合のみ検証します。浮動小数を許可するには、<code><a href="/ja/docs/Web/HTML/Attributes/step">step="any"</a></code>を指定します。省略された場合、<code>step</code> 値は既定で <code>1</code> となり、つまりすべての数値が有効です。</p> + +<p>いくつか例を見てみましょう。次の最初の例では値が <code>1</code> と <code>10</code> の間に制限され、増減ボタンで値が <code>2</code> ずつ変更される数値コントロールを作成しています。</p> + +<pre class="brush: html notranslate"><input type="number" name="age" id="age" min="1" max="10" step="2"></pre> + +<p>2 つ目の例では値が <code>0</code> と <code>1</code> の間に制限され、増減ボタンで値が <code>0.01</code> ずつ変更される数値コントロールを作成しています。</p> + +<pre class="brush: html notranslate"><input type="number" name="change" id="pennies" min="0" max="1" step="0.01"></pre> + +<p><code>number</code> 入力タイプは有効な値の範囲に制限されているときに意味を持ちます。例えば、ある人の年齢や身長です。範囲が大きすぎて増分が意味をなさない場合 (例えば USA の郵便番号は、<code>00001</code> から <code>99999</code> の範囲です)、<code>tel</code> タイプがより良い選択となることもあります。これは数値のスピナーUI機能に対して、数値キーパッドを提供します。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>number</code> 入力は Internet Explorer の 10 より前のバージョンではサポートされません。</p> +</div> + +<h2 id="Slider_controls" name="Slider_controls">スライダーコントロール</h2> + +<p>数字を選ぶもう１つの方法は<strong>スライダー</strong>です。家造りのようなサイトで資産の価格をフィルターするのによく見ることでしょう。これを示す例をライブで見てみましょう:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/range-example/index.html", '100%', 200)}}</p> + +<p>使用からすると、スライダーはテキストフィールドより不正確です。このため、<em>正確な</em>値が必ずしも重要でない数値の選択に使われます。</p> + +<p>スライダーは {{HTMLElement("input")}} に {{htmlattrxref("type","input")}} 属性を <code>range</code> にセットして作成します。スライダーはマウスやタッチや、キーパッドの矢印で移動できます。</p> + +<p>スライダーを適切に設定するのは重要です。そのためには、それぞれ最小、最大、増分値を設定する <code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code>, <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code>, <code><a href="/ja/docs/Web/HTML/Attributes/step">step</a></code> 属性を設定するのを強くお奨めします。</p> + +<p>上の例の背後にあるコードを見て、どのように実現されるかを見てみましょう。まずは基本となる HTML:</p> + +<pre class="brush: html notranslate"><label for="price">Choose a maximum house price: </label> +<input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000"> +<output class="price-output" for="price"></output></pre> + +<p>この例では、値が <code>50000</code> と <code>500000</code> までの範囲で、100 ずつ増減するスライダーを作成しています。デフォルトの値は <code>value</code> 属性を使って <code>250000</code> としています。</p> + +<p>スライダーについての問題は、現在の値がいくつなのかのフィードバックが一切ないことです。これは、現在の値を入れている {{htmlelement("output")}} 要素を導入する理由です (この要素は次の記事でも見ていきます)。入力値や、あらゆる要素内の計算結果を表示できますが、<code><output></code> は特別です — <code><label></code>のように — <code>for</code> 属性を取って要素や出力値の元となる要素と関連付けることができます。</p> + +<p>実際に現在の値を表示して、変更時に更新するには、JavaScript を使う必要がありますが、比較的に簡単です:</p> + +<pre class="brush: js notranslate">const price = document.querySelector('#price'); +const output = document.querySelector('.price-output'); + +output.textContent = price.value; + +price.addEventListener('input', function() { + output.textContent = price.value; +});</pre> + +<p>ここでは <code>range</code> 入力と <code>output</code> を 2 つの変数に保存しています。次に <code>output</code> の <code><a href="/ja/docs/Web/API/Node/textContent">textContent</a></code> を入力の <code>value</code> ですぐにセットします。最後に、イベントリスナーをセットして、range スライダーが移動するといつも、<code>output</code> の <code>textContent</code> を新しい値に更新します。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>range</code> 入力は Internet Explorer 10以前のバージョンではサポートされません。</p> +</div> + +<h2 id="Date_and_time_pickers" name="Date_and_time_pickers">日付と時刻ピッカー</h2> + +<p>日付と時刻の値を集めるのはウェブ開発者にとってずっと悪夢でした。すばらしいユーザー体験のためには、カレンダー選択UIを与えるのが重要であり、それによってユーザーはネイティブのカレンダーアプリへのコンテキストスイッチや、パースするのが難しい違うフォーマットで入力する可能性を避けて日付選択ができます。前の千年紀の最後の分は、次のようにいろいろな表現ができます。例えば: 1999/12/31, 23:59 or 12/31/99T11:59PM.</p> + +<p>HTML 日付コントロールは、カレンダーウィジェットを提供して統一されたデータを作成し、この種類のデータを扱うことができます。</p> + +<p>日付と時刻コントロールは{{HTMLElement("input")}} 要素と、日付か時間かその両方かを集めたいのかにあわせて適当な {{htmlattrxref("type","input")}} 属性を使って作成できます。非サポートブラウザーで{{htmlelement("select")}} 要素にフォールバックするライブの例は次の通り:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/datetime-local-picker-fallback/index.html", '100%', 200)}}</p> + +<p>利用できるいろいろなタイプを簡単に見ていきましょう。注意としては、このタイプの使用法はとても複雑で、特にブラウザーサポートを使う考えた場合そうです (下記を見てください); 完全な詳細情報は、各タイプのリファレンスページと、そこにある詳細な例を見てください。</p> + +<h3 id="datetime-local" name="datetime-local"><code>datetime-local</code></h3> + +<p><code><a href="/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code> は特別なタイムゾーン情報のない日付と時刻を表示して選択するウィジェットを作成します。</p> + +<pre class="brush: html notranslate"><input type="datetime-local" name="datetime" id="datetime"></pre> + +<h3 id="month" name="month"><code>month</code></h3> + +<p><code><a href="/ja/docs/Web/HTML/Element/input/month"><input type="month"></a></code> は年と月を表示して選択するウィジェットを作成します。</p> + +<pre class="brush: html notranslate"><input type="month" name="month" id="month"></pre> + +<h3 id="time" name="time"><code>time</code></h3> + +<p><code><a href="/ja/docs/Web/HTML/Element/input/time"><input type="time"></a></code> は時刻の値を表示して選択するウィジェットを作成します。時刻は 12時間のフォーマットで表示されますが、<em>戻り値</em>は 24時間フォーマットです。</p> + +<pre class="brush: html notranslate"><input type="time" name="time" id="time"></pre> + +<h3 id="week" name="week"><code>week</code></h3> + +<p><code><a href="/ja/docs/Web/HTML/Element/input/week"><input type="week"></a></code> は本年の週の番号を表示して選択するウィジェットを作成します。</p> + +<p>週は月曜始まりで日曜日で終わります。それに加えて、その年の最初の週はその年の最初の木曜日を含みます—これはその年の最初の日を含まないことも、前年の最後の数日を含むこともあります。</p> + +<pre class="brush: html notranslate"><input type="week" name="week" id="week"></pre> + +<h3 id="Constraining_datetime_values" name="Constraining_datetime_values">date/time 値の制限</h3> + +<p>日付をと時刻のコントロールはすべて、<code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> と <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性で制約をつけることができて、さらに <code><a href="/ja/docs/Web/HTML/Attributes/step">step</a></code> 属性 (この値は入力タイプによって変わります)で追加の制約も可能です。</p> + +<pre class="brush: html notranslate"><label for="myDate">When are you available this summer?</label> +<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" step="7" id="myDate"></pre> + +<h3 id="Browser_support_for_datetime_inputs" name="Browser_support_for_datetime_inputs">date/time 入力のブラウザーサポート</h3> + +<p>日付と時刻のウィジェットに最良のブラウザーサポートがないことに注意するべきです。現状では、Chrome, Edge, Opera ではよくサポートしていますが、Internet Explorerではサポートがなく、Safari にはモバイルのサポートがあり(しかしデスクトップサポートはなし)、Firefox では <code>time</code> と <code>date</code> のみサポートします。</p> + +<p>上でリンクしているリファレンスページでは非サポートブラウザーでフォールバックするようプログラミングするヒントを提供しています; もう1つのオプションは日付選択を提供する JavaScript ライブラリの利用です。たいていのモダンなフレームワークには機能を利用できるコンポーネントがあり、またスタンドアローンのライブラリもあります (ヒントとなる <a href="https://flatlogic.com/blog/best-javascript-date-picker-libraries/">Top date picker JavaScript plugins and libraries</a> を見てください)。</p> + +<h2 id="Color_picker_control" name="Color_picker_control">色選択コントロール</h2> + +<p>色も扱いが難しいです。色の表現がたくさんあります: RGB 値 (10進数や16進数), HSL 値、キーワードなど。</p> + +<p><code>color</code> コントロールは {{HTMLElement("input")}} 要素を、 {{htmlattrxref("type","input")}} 属性に <code>color</code>をつけて作成できます:</p> + +<pre class="brush: html notranslate"><input type="color" name="color" id="color"></pre> + +<p>サポートされている場合、色コントロールはOSのデフォルトの色選択機能を呼び出して選択できるようにする傾向があります。下記のスクリーンショットはmacOSの Firefox の例です:</p> + +<p><img alt="firefox for android email keyboard, with ampersand displayed 既定では." src="https://mdn.mozillademos.org/files/17058/fx-macos-color.jpg" style="border-style: solid; border-width: 1px; display: block; height: 412px; margin: 0px auto; width: 700px;"></p> + +<p>次のライブサンプルも試してみてください:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/color-example/index.html", '100%', 200)}}</p> + +<p>戻り値は常に小文字で 6桁の16進数の色です。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>color</code> 入力は Internet Explorerではサポートされていません。</p> +</div> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事の最後に到着しましたが、最も大事な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Test_your_skills:_HTML5_controls">Test your skills: HTML5 controls</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>ここで HTML5 フォーム入力タイプの旅が終了です。動作が特殊なため簡単に分類できないその他のコントロールタイプも少しあって、それを知るのも大事です。次の記事で扱います。</p> + +<p>{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets"> </a></li> +</ul> diff --git a/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html b/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html new file mode 100644 index 0000000000..edc9009df2 --- /dev/null +++ b/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html @@ -0,0 +1,219 @@ +--- +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 +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms")}}</div> + +<p class="summary">すべての Web 開発者は、Web が非常につらい場所であることをいち早く (時に痛いほど) 学びます。もっともいまいましいのは古いブラウザです。まあそれは受け入れて、我々が「古いブラウザ」と言うとき、みんなが古いバージョンの Internet Explorer を念頭に置いています...しかしそれだけではありません。<a href="https://www.mozilla.org/en-US/firefox/organizations/">ESR バージョン</a>のような1年経過した Firefox もまた古いブラウザです。そしてモバイルの世界では？ ブラウザも OS もアップデートできないときは？そう、最新ではない標準的なブラウザを搭載している多くの古い Android 携帯電話または iPhone があります。これらも古いブラウザです。</p> + +<p>残念ながら、そのような困難に対処するのも仕事の一部です。幸い、古いブラウザによって起きる問題の 80% 程度を解決する助けになることがわかっている秘訣がいくつかあります。</p> + +<h2 id="Learn_about_the_issues" name="Learn_about_the_issues">問題について学ぶ</h2> + +<p>実のところもっとも重要なことは、一般的なパターンを理解するためにそれらのブラウザに関するドキュメントを読むことです。例えば、多くの場合 CSS のサポート状況が HTML フォームにおける最大の問題です。あなたはスタートとして適切な場所にいます。使用したい要素 (または DOM インターフェイス) のサポート状況を確認しましょう。MDN では Web ページで使用できる多くの要素、プロパティあるいは API について、実装状況の一覧表を入手できます。しかし、驚くほど役に立つであろうリソースが他にもあります:</p> + +<h3 id="Browser_vendor_documentation" name="Browser_vendor_documentation">ブラウザベンダーのドキュメント</h3> + +<ul> + <li>Mozilla: あなたは適切な場所にいます。MDN をご覧ください。</li> + <li>Microsoft: <a href="https://docs.microsoft.com/ja-jp/openspecs/ie_standards/ms-iestandlp/8aea05e3-8c1e-4a9a-9614-31f71e679457" rel="external" title="http://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx">Internet Explorer Standards Support Documentation</a></li> + <li>WebKit: このエンジンはいくつかの異なるエディションが存在するため、やや複雑です。 + <ul> + <li><a href="https://www.webkit.org/blog/" rel="external" title="https://www.webkit.org/blog/">The WebKit blog</a> や <a href="http://planet.webkit.org/" rel="external" title="http://planet.webkit.org/">Planet WebKit</a> は、WebKit のコア開発者による最良の記事を集約しています。</li> + <li><a href="https://www.chromestatus.com/features" title="http://www.chromium.org/developers/web-platform-status">Chrome platform status site</a> も重要です。</li> + <li><a href="https://developer.apple.com/technologies/safari/" rel="external" title="https://developer.apple.com/technologies/safari/">Apple の Web サイト</a>も同様です。</li> + </ul> + </li> +</ul> + +<h3 id="Independent_documentation" name="Independent_documentation">独自のドキュメント</h3> + +<ul> + <li><a href="http://caniuse.com" rel="external" title="http://caniuse.com">Can I Use</a> に、先端技術のサポート状況に関する情報があります。</li> + <li><a href="http://www.quirksmode.org" rel="external" title="http://www.quirksmode.org">Quirks Mode</a> は、ブラウザの互換性に関するすばらしい資料です。<a href="http://www.quirksmode.org/mobile/" rel="external" title="http://www.quirksmode.org/mobile/">モバイルの部</a>は現時点で入手できる最高の情報源です。</li> + <li><a href="http://positioniseverything.net/" rel="external" title="http://positioniseverything.net/">Position Is Everything</a> は、古いブラウザのレンダリングの不具合や (もしあれば) その回避策を入手できる最高の情報源です。</li> + <li><a href="http://mobilehtml5.org" rel="external" title="http://mobilehtml5.org">Mobile HTML5</a> は、"top 5" に限らず (Nokia、Amazon、Blackberry も含む) さまざまなモバイルブラウザの互換性情報を掲載しています。</li> +</ul> + +<h2 id="Make_things_simple" name="Make_things_simple">物事をシンプルに</h2> + +<p><a href="/ja/docs/HTML/Forms" title="HTML/Forms">HTML フォーム</a>は複雑なやりとりを伴うことから、一つの経験則があります: <a href="http://en.wikipedia.org/wiki/KISS_principle" rel="external" title="http://en.wikipedia.org/wiki/KISS_principle">可能な限りシンプルにしてください</a> (<a href="http://ja.wikipedia.org/wiki/KISS%E3%81%AE%E5%8E%9F%E5%89%87" rel="external" title="http://ja.wikipedia.org/wiki/KISS%E3%81%AE%E5%8E%9F%E5%89%87">日本語版</a>)。フォームを "より立派に" あるいは "高機能に" したいケースはたくさんありますが、効率的なフォームの作成はデザインや技術の問題ではありません。それを忘れないように、<a href="http://www.uxforthemasses.com/forms-usability/" rel="external" title="http://www.uxforthemasses.com/forms-usability/">UX For The Masses にあるフォームのユーザビリティ</a>に関する記事を読む時間をとってください。</p> + +<h3 id="Graceful_degradation_is_web_developers_best_friend" name="Graceful_degradation_is_web_developer's_best_friend">Graceful Degradation は Web 開発者の最高の味方</h3> + +<p><a href="http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/" rel="external" title="http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/">Graceful Degradation と Progressive Enhancement</a> は、一度に幅広いブラウザをサポートすることにより、すばらしいものを構築可能にする開発パターンです。新しいブラウザで何かを構築するときにそれが動作すると確信したい場合は、あれやこれやで古いブラウザにおいて Graceful Degradation を行っています。</p> + +<p>HTML フォームに関する例をいくつか見ていきましょう。</p> + +<h4 id="HTML_input_types" name="HTML_input_types">HTML input のタイプ</h4> + +<p>HTML5 でもたらされた新たな input のタイプは、退行手段がとてもわかりやすいことから、すばらしいものです。ブラウザが {{HTMLElement("input")}} 要素の {{htmlattrxref("type","input")}} 属性の値を知らない場合は、値が <code>text</code> であるかのようにフォールバックします。</p> + +<pre class="brush: html notranslate"><label for="myColor"> + Pick a color + <input type="color" id="myColor" name="color"> +</label></pre> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Chrome 24</th> + <th scope="col" style="text-align: center;">Firefox 18</th> + </tr> + </thead> + <tbody> + <tr> + <th style="text-align: center;"><img alt="Screen shot of the color input on Chrome for Mac OSX" src="/files/4575/color-fallback-chrome.png" style="height: 35px; width: 139px;"></th> + <th style="text-align: center;"><img alt="Screen shot of the color input on Firefox for Mac OSX" src="/files/4577/color-fallback-firefox.png" style="height: 30px; width: 245px;"></th> + </tr> + </tbody> +</table> + +<h4 id="CSS_Attribute_Selectors" name="CSS_Attribute_Selectors">CSS 属性セレクタ</h4> + +<p><a href="/ja/docs/CSS/Attribute_selectors" title="CSS/Attribute_selectors">CSS の属性セレクタ</a>は <a href="/ja/docs/HTML/Forms" title="HTML/Forms">HTML フォーム</a> でとても有用ですが、一部の古いブラウザはサポートしていません。その場合、慣例では type と同等の class で二重化します:</p> + +<pre class="brush: html notranslate"><input type="number" class="number"></pre> + +<pre class="brush: css notranslate">input[type=number] { + /* こちらは一部のブラウザで機能しません */ +} + +input.number { + /* こちらはどのブラウザでも動作するでしょう */ +}</pre> + +<p>以下の記述では役に立たず (冗長であるため)、一部のブラウザで機能しない可能性があります:</p> + +<pre class="brush: css notranslate">input[type=number], +input.number { + /* セレクタのひとつが理解できない場合は規則全体が無視されるため、 + これは一部のブラウザで動作しません */ +}</pre> + +<h4 id="Form_buttons" name="Form_buttons">フォームボタン</h4> + +<p>HTML フォームでボタンを定義する方法は 2 つあります:</p> + +<ul> + <li>{{htmlattrxref("type","input")}} 属性の値を <code>button</code>、<code>submit</code>、<code>reset</code> あるいは <code>image</code> に設定した {{HTMLElement("input")}} 要素</li> + <li>{{HTMLElement("button")}} 要素</li> +</ul> + +<p>{{HTMLElement("input")}} は、要素セレクタを使用して CSS を適用したい場合に若干難しいことになります:</p> + +<pre class="brush: html notranslate"><input type="button" class="button" value="click me"></pre> + +<pre class="brush: css notranslate">input { + /* この規則は、input 要素で定義するボタンのデフォルトのレンダリングを無効にします */ + border: 1px solid #CCC; +} + +input.button { + /* これはデフォルトのレンダリングを復元しません */ + border: none; +} + +input.button { + /* こちらも同様です! 実際は、あらゆるブラウザでこれを行う標準的な方法はありません */ + border: auto; +}</pre> + +<p>{{HTMLElement("button")}} 要素は、起こりうる 2 つの問題に悩まされます:</p> + +<ul> + <li>古いバージョンの Internet Explorer に存在する不具合です。ユーザがボタンをクリックしたときに送信されるものは {{htmlattrxref("value","button")}} 属性の内容物ではなく、{{HTMLElement("button")}} 要素の開始タグと終了タグの間にある HTML コンテンツです。これはそのような値を送信する場合のみの問題であり、例えばユーザがクリックしたボタンに応じてデータを処理する場合です。</li> + <li>一部のとても古いブラウザは {{htmlattrxref("type","button")}} 属性のデフォルト値として <code>submit</code> を使用しないため、{{HTMLElement("button")}} 要素では常に {{htmlattrxref("type","button")}} 属性を設定することを推奨します。</li> +</ul> + +<pre class="brush: html notranslate"><!-- ボタンをクリックすると "A" ではなく "<em>Do A</em>" を送信する場合があります --> +<button type="submit" name="IWantTo" value="A"> + <em>Do A</em> +</button></pre> + +<p>プロジェクトの制約に基づいて、どちらの解決策を選択するかはあなた次第です。</p> + +<h3 id="Let_go_of_CSS" name="Let_go_of_CSS">CSS を手放そう</h3> + +<p>HTML フォームと古いブラウザにおける最大の問題は CSS のサポートです。<a href="/ja/docs/Property_compatibility_table_for_form_widgets" title="Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a> の記事の複雑さからおわかりいただけるとおり、これはとても難しい問題です。テキスト系の要素でいくらか調整が (サイズや文字色など) 可能であるとしても、それらには必ず副作用があります。残された最善の方法は、HTML フォームのウィジェットに一切スタイルを設定しないことです。ただし、それでも周囲のアイテムにはスタイルを設定してもかまいません。もしあなたがプロフェッショナルで、顧客が要求するようなことがあれば、<a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets" title="HTML/Forms/How_to_build_custom_form_widgets">JavaScript によるウィジェットの再構築</a>といった難易度が高い技術について調査してみるとよいでしょう。しかしそのような場合でも、<a href="http://www.smashingmagazine.com/2011/11/03/“but-the-client-wants-ie-6-support”/" rel="external" title="http://www.smashingmagazine.com/2011/11/03/“but-the-client-wants-ie-6-support”/">顧客の愚かさを変える</a>ことをためらってはいけません。</p> + +<h2 id="Feature_detection_and_polyfills" name="Feature_detection_and_polyfills">機能検出とポリフィル</h2> + +<p>JavaScript は新しいブラウザにおいてすばらしい技術ですが、古いブラウザでは多くの問題を抱えています。</p> + +<h3 id="Unobtrusive_JavaScript" name="Unobtrusive_JavaScript">控えめな JavaScript</h3> + +<p>最大の問題のひとつは、API を利用できるかです。そのため、"{{原語併記("控えめな", "unobtrusive")}}" JavaScript によって取り組むことベストプラクティスであると考えられています。これは、2 つの要件によって定義される開発パターンです:</p> + +<ul> + <li>構造と振る舞いの厳密な分割。</li> + <li>コードが動作しない場合でも、コンテンツや基本的な機能性には依然としてアクセス可能かつ利用可能でなければならない。</li> +</ul> + +<p><a href="http://docs.webplatform.org/wiki/concepts/programming/the_principles_of_unobtrusive_javascript" rel="external" title="http://docs.webplatform.org/wiki/concepts/programming/the_principles_of_unobtrusive_javascript">The principles of unobtrusive JavaScript</a> (原文は Peter-Paul Koch 氏によって Dev.Opera.com 向けに記述され、現在は Docs.WebPlatform.org に移動しました) で、これらのアイデアを明快に説明しています。</p> + +<h3 id="The_Modernizr_library" name="The_Modernizr_library">Modernizr ライブラリ</h3> + +<p>欠けている API を提供することで、すばらしい "ポリフィル" が大きな助けになるケースが多数あります。<a href="http://remysharp.com/2010/10/08/what-is-a-polyfill/" rel="external" title="http://remysharp.com/2010/10/08/what-is-a-polyfill/">ポリフィル</a>は、古いブラウザにおける機能性の "穴を埋める" 小さな JavaScript コードです。ポリフィルは任意の機能のサポート状況を改善するために使用できますが、JavaScript 向けに使用するのは CSS や HTML 向けより低リスクです。JavaScript が動作しない可能性は多数あります(ネットワークの問題、スクリプトの競合 など)。しかし JavaScript については、控えめな JavaScript を念頭に置いて取り組む場合はポリフィルが欠けたとしても、重大な問題にはなりません。</p> + +<p>欠けている API に対してポリフィルを適用する最善の方法は、<a href="http://modernizr.com" rel="external" title="http://modernizr.com">Modernizr</a> ライブラリおよびそこからスピンオフしたプロジェクトである <a href="http://yepnopejs.com" rel="external" title="http://yepnopejs.com">YepNope</a> を使用することです。Modernizr は、機能が利用できるかを確認して適宜対応を行えるようにするためのライブラリです。YepNope は、条件付きで読み込みを行うライブラリです。</p> + +<p>サンプルは以下のとおりです:</p> + +<pre class="brush: js notranslate">Modernizr.load({ + // ブラウザが HTML5 の form validation 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" title="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">すばらしいポリフィルのリスト</a>を管理しています。必要なポリフィルを選びましょう。</p> + +<div class="note"> +<p><strong>注記:</strong> Modernizr は、控えめな JavaScript や Graceful Degradation のテクニックに取り組むことを支援するためのすばらしい機能を搭載しています。<a href="http://modernizr.com/docs/" rel="external" title="http://modernizr.com/docs/">Modernizr のドキュメント</a>をご覧ください。</p> +</div> + +<h3 id="Pay_attention_to_performance" name="Pay_attention_to_performance">パフォーマンスに注意を払う</h3> + +<p>Modernizr のようなスクリプトはパフォーマンスを非常に意識していますが、200キロバイトのポリフィルをロードするとアプリケーションのパフォーマンスに影響を与えます。これは従来のブラウザでは特に重要です。多くは JavaScript エンジンが非常に遅く、すべての polyfill の実行はユーザにとって苦痛になります。パフォーマンスはそれ自体が課題ですが、従来のブラウザはそれに非常に敏感です。基本的にそれらは遅く、より多くのポリフィルが必要で、より多くの JavaScript を処理する必要があります。そのため現代のブラウザと比較して二重の負担をかけていることになります。従来のブラウザでコードをテストして、実際のパフォーマンスを確認しましょう。場合によっては、一部の機能を削除すると、すべてのブラウザでまったく同じ機能を使用するよりも優れたユーザーエクスペリエンスが得られます。最後に念のため、常にエンドユーザのことを考えるようにしてください。</p> + +<h2 id="Conclusion" name="Conclusion">おわりに</h2> + +<p>お分かりのように、従来のブラウザを扱うことは単にフォームに関することだけではありません。テクニック一式です。 しかし、それらすべてをマスターすることは、この記事の範囲を超えています。</p> + +<p>この <a href="/ja/docs/Learn/HTML/Forms">HTML フォームガイド</a>のすべての記事を読んでいれば、フォームの使用に慣れているはずです。新しいテクニックやヒントを見つけた場合は、<a href="/ja/docs/MDN/Getting_started">ガイドの改善</a>にご協力ください。</p> + +<p>{{PreviousMenuNext("Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めての HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">古いブラウザでの HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Property_compatibility_table_for_form_widgets">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/forms/index.html b/files/ja/learn/forms/index.html new file mode 100644 index 0000000000..aa428b7db7 --- /dev/null +++ b/files/ja/learn/forms/index.html @@ -0,0 +1,96 @@ +--- +title: HTML フォーム +slug: Learn/Forms +tags: + - Beginner + - Featured + - Forms + - Guide + - HTML + - Landing + - Learn + - Web +translation_of: Learn/Forms +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">このモジュールでは、ウェブフォームの習得に役立つ一連の記事をそろえています。ウェブフォームは、ユーザーとやり取りするための強力なツールです — 通常、ユーザーデータを集めたり、ユーザーインターフェイスの制御に使われてきました。しかし歴史的および技術的な理由から、その能力を十分に生かして使用する方法は、必ずしも明確とは限りません。このガイドではウェブフォームの構造からスタイル、データの検証やサーバーへの送信まであらゆる本質的な側面を取り上げます。</p> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを始める前に、少なくとも <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を一通り読んでおくべきです。ここでは簡単に理解できる{{anch("Introductory guides", "導入ガイド")}}が見つかり、<a href="/ja/docs/Learn/Forms/Basic_native_form_controls">ネイティブフォームコントロール</a>ガイドも利用できます。</p> + +<p>しかしそれ以外のモジュールは HTML 知識よりも少し高度です — ページにフォームウィジェットを置くのは簡単ですが、高度なフォームの機能や CSS や JavaScript を使わないと実際に活用できません。このため、その他の節を見る前にまずは <a href="/ja/docs/Learn/CSS">CSS</a> と <a href="/ja/docs/Learn/JavaScript">JavaScript</a> を学んでおくのをお勧めします。</p> + +<p>上記のテキストは、ウェブフォームを HTML、CSS、JavaScript エリアに混ぜずに、独立したモジュールに置くことの良い指針です — フォーム要素は HTML要素より複雑で、最大限利用するには、関連する CSS と JavaScript テクニックを最大限活用する。</p> + +<div class="note"> +<p><strong>注</strong>: 自分のファイルを作ることができないコンピューター/タブレット/その他の端末で作業している場合、(大半の) コード例を <a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったオンラインコーディングプログラムで試すことができます。</p> +</div> + +<h2 id="Introductory_guides" name="Introductory_guides">導入ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのウェブフォーム</a></dt> + <dd>このシリーズの最初の記事では ウェブフォーム作成のほんの最初を提供し、それには簡単なフォームのデザインや、適切な HTML 要素で実装することや、CSS で簡単なスタイルづけをすることや、データがサーバーに送られる方法などが含まれます。</dd> + <dt><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a></dt> + <dd>基本的な話と共に、ここではフォームの色々な部分に構造と意味を与えるのに使う要素を詳しく見ていきます。</dd> +</dl> + +<h2 id="What_form_widgets_are_available" name="What_form_widgets_are_available">どんなフォームウィジェットが利用できますか？</h2> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></dt> + <dd>オリジナルの HTML {{htmlelement("input")}}タイプの詳細や、色々なデータ型を集めるのにどんなオプションが使えるかを見ていきます。</dd> + <dt><a href="/ja/docs/Learn/Forms/HTML5_input_types">HTML5 入力タイプ</a></dt> + <dd>ここでは <code><input></code> 要素を深く見ていき、HTML5 リリースにて追加された入力タイプや、さまざまな UI コントロールとデータコレクションの改良を見ます。さらには、{{htmlelement('output')}} 要素も見ます。</dd> + <dt><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls">その他のフォームコントロール</a></dt> + <dd>次には<code><input></code> 以外のフォームコントロールと関連するツール、例えば {{htmlelement('select')}}、{{htmlelement('textarea')}}、{{htmlelement('meter')}}、{{htmlelement('progress')}} を見ていきます。</dd> +</dl> + +<h2 id="Form_styling_guides" name="Form_styling_guides">フォームのスタイルガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">ウェブフォームをスタイリングする</a></dt> + <dd>この記事では基本的なスタイリング作業のために知るべき基本を含む、フォームを CSS でスタイリングするための入門を紹介します。</dd> + <dt><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">ウェブフォームの高度なスタイリング</a></dt> + <dd>ここでは、スタイルが難しい要素を扱うために必要な、さらに高度なフォームスタイリングテクニックを紹介します。</dd> + <dt><a href="/ja/docs/Learn/Forms/UI_pseudo-classes">UI 擬似クラス</a></dt> + <dd>現在の状態に応じて制御される HTML フォームコントロールを可能とする、UI 擬似クラス の入門です。</dd> +</dl> + +<h2 id="Validating_and_submitting_form_data" name="Validating_and_submitting_form_data">フォームデータを検証して送信する</h2> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">クライアント側のフォームデータ検証</a></dt> + <dd>データ送信だけで充分ではありません — ユーザーがフォームに記入したデータが、我々が処理に成功するような正しいフォーマットであり、アプリケーションが破綻しないかを確認する必要があります。またユーザーが正しくフォームを記入してアプリを使うのにイライラしないよう手助けしたいです。フォーム検証はこの目的を達成するのに役立ちます — この記事では知っておくべきことを教えます。</dd> + <dt><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの</a><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">送信</a></dt> + <dd>この記事ではユーザーがフォームを送信するときに何が起こるのかを見ます — データがどこに行くのか、そしてそこでデータを受けたらどう扱うかなどです。また、フォームデータ送信に関連するセキュリティ上の懸念もその一部です。</dd> +</dl> + +<h2 id="Advanced_guides" name="Advanced_guides">高度なガイド</h2> + +<p>下記の記事は学習コースに必須ではないですが、上記のテクニックをマスターしてそれ以上知りたいときには、興味深く役立つものでしょう。</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームコントロールの作成方法</a></dt> + <dd>場合によってはネイティブのフォームウィジェットが必要となるものを提供していないことがあるでしょう。例えばスタイリングや機能で。この場合、生の HTML から自分自身のフォームウィジェットを作る必要があります。この記事ではその方法と考慮すべき点を、実際のケーススタディと一緒に説明します。</dd> + <dt><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></dt> + <dd>この記事では、標準フォームの送信ではなく、カスタム JavaScript 内で HTTP リクエストを組み立てて送る方法を見ます。またそうしたい理由と、そうする意味も見ていきます(<a href="/ja/docs/Web/API/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a>もご覧ください)。</dd> +</dl> + +<dl> + <dt><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">フォームコントロール用の CSS プロパティ互換性テーブル</a></dt> + <dd>この最後の記事では、どの CSS プロパティがフォーム要素に互換性があるのかを引くことのできるハンディリファレンスを提供します。</dd> +</dl> + +<dl> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Element#Forms">HTML フォーム要素リファレンス</a></li> + <li><a href="/ja/docs/Web/HTML/Element/input">HTML <input> タイプリファレンス</a></li> + <li><a href="/ja/docs/Web/HTML/Attributes">HTML 属性リファレンス</a></li> +</ul> diff --git a/files/ja/learn/forms/other_form_controls/index.html b/files/ja/learn/forms/other_form_controls/index.html new file mode 100644 index 0000000000..6c6f825de4 --- /dev/null +++ b/files/ja/learn/forms/other_form_controls/index.html @@ -0,0 +1,333 @@ +--- +title: その他のフォームコントロール +slug: Learn/Forms/Other_form_controls +tags: + - Beginner + - Controls + - Example + - Forms + - Guide + - HTML + - Web + - Widgets +translation_of: Learn/Forms/Other_form_controls +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/HTML5_input_types","Learn/Forms/Styling_HTML_forms", "Learn/Forms")}}</div> + +<p class="summary">ドロップダウンリストや複数行のテキストフィールドから、{{htmlelement('output')}}要素(前の記事で見ました)やプログレスバーといったその他の役立つ機能まで、非-<code><input></code> 型のフォーム要素の機能を詳しく見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシーと、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の基本的な理解。</a></td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>非-<code><input></code> 型のフォーム機能と、HTML を用いた実装方法の理解。</td> + </tr> + </tbody> +</table> + +<h2 id="Multi-line_text_fields" name="Multi-line_text_fields">複数行のテキストフィールド</h2> + +<p>複数行のテキストフィールドは、{{HTMLElement("input")}}要素ではなく{{HTMLElement("textarea")}} 要素で指定されます。</p> + +<pre class="brush: html notranslate"><textarea cols="30" rows="8"></textarea></pre> + +<p>これは次のように描画されます:</p> + +<p>{{EmbedLiveSample("Multi-line_text_fields", 120, 120)}}</p> + +<p> <code><textarea></code> と通常の単一行テキストフィールドとの主な違いは、ユーザーが送信データの中に改行を (リターンを押すことで) 入れることができます。</p> + +<p><code><textarea></code> は閉じタグを取ることができて、既定のテキストは開始タグと終了タグの間にあるべきです。これに対し、{{HTMLElement("input")}} は閉じタグのない空要素です — <code><a href="/ja/docs/Web/HTML/Attributes/value">value</a></code> 属性の中に既定の値が入ります。</p> + +<p>注意として、<code><textarea></code> 要素 (その他の HTML 要素、CSS、JavaScript を含む)には何でも入れられるものの、この性質により、プレーンテキストコンテンツのように描画されます(非フォームコントロールでの <code><a href="/ja/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code> を使うと、プレーンテキストの代わりに HTML/リッチコンテンツの API を使用できます)。</p> + +<p>視覚的には、入力テキストは改行されて、既定ではフォームコントロールはリサイズ可能です。モダンブラウザーにはテキストエリアのサイズを増減できるドラッグハンドルがあります。</p> + +<p>下記のスクリーンショットは macOS での Firefox 71 と Safari 13 、Windows10 での Edge 18, Yandex 14, Firefox 71, Chrome 79 における既定の、フォーカスされた、無効な<code><textarea></code> 要素を表示しています。</p> + +<p><img alt="The default, focused, and disabled <textarea> element in Firefox 71 and Safari 13 on Mac OSX and Edge 18, Yandex 14, Firefox and Chrome on Windows 10." src="https://mdn.mozillademos.org/files/17029/textarea_basic.png" style="display: block; height: 338px; margin: 0 auto; width: 636px;"></p> + +<div class="note"> +<p><strong>注</strong>: 多少は面白いテキストエリアの使用例は、このシリーズの最初の記事の<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">例</a> が見つかります (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">ソースコードも見てください</a>)。</p> +</div> + +<h3 id="Controlling_multi-line_rendering" name="Controlling_multi-line_rendering">複数行レンダリングの制御</h3> + +<p>{{htmlelement("textarea")}} では、複数行にまたがってレンダリングするのを制御する 3 つの属性を受け付けます:</p> + +<dl> + <dt>{{htmlattrxref("cols","textarea")}}</dt> + <dd>テキストコントロールの (カラム) 幅を、平均的なキャラクター幅で指定します。これは <code><textarea></code>をリサイズすることで変更でき、また CSS で上書きもできるため、有効な開始時の幅です。何も指定されていない場合、デフォルト値は 20 です。</dd> + <dt>{{htmlattrxref("rows","textarea")}}</dt> + <dd>コントロールの行数を指定します。これは <code><textarea></code>をリサイズすることで変更でき、また CSS で上書きもできるため、有効な開始時の高さです。何も指定されていない場合、デフォルト値は 2 です。</dd> + <dt>{{htmlattrxref("wrap","textarea")}}</dt> + <dd>コントロールがどのようにテキストを改行するかを制御します。値は <code>soft</code> (デフォルト値)、この値では送信されるテキストは改行されないが、ブラウザーでレンダリングされるテキストは改行される、<code>hard</code> (この値を使うには <code>cols</code> 属性を指定する必要がある)、この値では送信テキストとレンダリングされるテキストの両方が改行される、<code>off</code>、この値では改行が停止、を取ります。</dd> +</dl> + +<h3 id="Controlling_textarea_resizability" name="Controlling_textarea_resizability">テキストエリアのリサイズの制御</h3> + +<p><code><textarea></code> をリサイズできるかは CSS の <code>resize</code> プロパティで制御されます。とりうる値は次の通り:</p> + +<ul> + <li><code>both</code>: デフォルト値 — 水平、垂直ともリサイズ許可</li> + <li><code>horizontal</code>: 水平のみリサイズ許可</li> + <li><code>vertical</code>: 垂直のみリサイズ許可</li> + <li><code>none</code>: リサイズ許可しない</li> + <li><code>block</code> と <code>inline</code>: <code>block</code> や <code>inline</code> 方向のみにリサイズできる実験的な値 (これはテキストの方向性によって変わります。詳しくは <a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a> を見てください)</li> +</ul> + +<p>これがどのように動作するのかのデモは、{{cssxref("resize")}} リファレンスページの最初にあるインタラクティブな例で遊んでみてください。</p> + +<h2 id="Drop-down_controls" name="Drop-down_controls">ドロップダウンコントロール</h2> + +<p>ドロップダウン コントロールは、ユーザー インターフェイスのスペースをあまり取らずに、ユーザーがさまざまなオプションから選択できるようにするためのシンプルな方法です。HTML には、<strong>選択ボックス</strong>と<strong>オートコンプリート ボックス</strong>という 2 つの形式のドロップダウン コンテンツがあります。どちらの場合も相互作用は同じです。コントロールを有効にすると、ブラウザーにはユーザーが選択できる値のリストが表示されます。</p> + +<div class="note"> +<p><strong>注</strong>: すべてのドロップダウンボックスの例は、GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/drop-down-content.html">drop-down-content.html </a>にあります (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html">ライブでもご覧ください</a>)。</p> +</div> + +<h3 id="Select_box" name="Select_box">選択ボックス</h3> + +<p>単純なセレクトボックスは、1 つ以上の {{HTMLElement("option")}} 要素を子要素として持つ {{HTMLElement("select")}}要素で作成され、それぞれが可能な値のうちの 1 つを指定します。</p> + +<div id="Simple"> +<pre class="brush: html notranslate"><select id="simple" name="simple"> + <option>Banana</option> + <option selected>Cherry</option> + <option>Lemon</option> +</select></pre> +</div> + +<p>{{EmbedLiveSample("Simple", 120, 120)}}</p> + +<p>必要に応じて、希望する {{HTMLElement("option")}}要素の{{htmlattrxref("selected", "option")}}属性を用いて、セレクトボックスのデフォルト値を設定することができます。<br> + - このオプションは、ページが読み込まれたときにあらかじめ選択されています。</p> + +<p>{{HTMLElement("option")}}要素は、{{HTMLElement("optgroup")}}要素の中に入れ子にすることができ、視覚的に関連付けられた値のグループを作成することができます。</p> + +<div id="groups"> +<pre class="brush: html notranslate"><select id="groups" name="groups"> + <optgroup label="fruits"> + <option>Banana</option> + <option selected>Cherry</option> + <option>Lemon</option> + </optgroup> + <optgroup label="vegetables"> + <option>Carrot</option> + <option>Eggplant</option> + <option>Potato</option> + </optgroup> +</select></pre> +</div> + +<p>{{EmbedLiveSample("groups", 120, 120)}}</p> + +<p>{{HTMLElement("optgroup")}}要素では、label属性の値が入れ子になったオプションの値の前に表示されます。ブラウザーは通常、それらをオプションから視覚的に離して（すなわち太字にしたり、入れ子レベルを変えたりして）表示しますので、実際のオプションと混同される可能性は低くなります。</p> + +<p>{{HTMLElement("option")}}要素に明示的な value属性が設定されている場合、そのオプションが選択された状態でフォームが送信された時にその値が送信されます。上の例のように value属性を省略した場合は、{{HTMLElement("option")}}要素の内容が値として使われます。そのため、value属性は必要ありませんが、セレクトボックスに視覚的に表示されている値とは異なる値を短くしたり、サーバーに送信したい理由があるかもしれません。</p> + +<p>例えば、:</p> + +<pre class="brush: html notranslate"><select id="simple" name="simple"> + <option value="banana">Big, beautiful yellow banana</option> + <option value="cherry">Succulent, juicy cherry</option> + <option value="lemon">Sharp, powerful lemon</option> +</select></pre> + +<p>デフォルトでは、選択ボックスの高さは、単一の値を表示するのに十分です。オプションの size 属性は、セレクトにフォーカスがない場合に表示されるオプションの数を制御します。</p> + +<h3 id="Multiple_choice_select_box" name="Multiple_choice_select_box">複数選択の選択ボックス</h3> + +<p>デフォルトでは、セレクトボックスは、ユーザーに単一の値を選択 さ せ る だけです。{{HTMLElement("select")}}要素に{{htmlattrxref("multiple", "select")}}属性を追加することで、オペレーティングシステムが提供するデフォルトのメカニズム（例えば、<kbd>Cmd</kbd>/<kbd>Ctrl</kbd> を押しながらデスクトップ上で複数の値をクリックするなど）を使用して、ユーザーが複数の値を選択できるようにすることができます。</p> + +<pre class="brush: html notranslate"><select id="multi" name="multi" multiple size="2"> + <optgroup label="fruits"> + <option>Banana</option> + <option selected>Cherry</option> + <option>Lemon</option> + </optgroup> + <optgroup label="vegetables"> + <option>Carrot</option> + <option>Eggplant</option> + <option>Potato</option> + </optgroup> +</select></pre> + +<p>{{EmbedLiveSample("Multiple_choice_select_box", 120, 120)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 複数選択可能なセレクトボックスの場合、セレクトボックスはドロップダウンコンテンツとして値を表示しないことに気づくでしょう - 代わりに、すべての値がリストに一度に表示され、オプションの <code><a href="/ja/docs/Web/HTML/Attributes/size">size</a></code>属性はウィジェットの高さを決定します。</p> +</div> + +<div class="note"><strong>注:</strong> {{HTMLElement("select")}}要素をサポートするすべてのブラウザーは、{{htmlattrxref("multiple", "select")}}属性もサポートしています。</div> + +<h3 id="Autocomplete_box" name="Autocomplete_box">オートコンプリートのボックス</h3> + +<p>You can provide suggested, automatically-completed values for form widgets using 表示する値を指定する {{HTMLElement("option")}} 子要素つきの {{HTMLElement("datalist")}} 要素を使って、フォームウィジェット用のオートコンプリートの提案値を提供できます。 <code><datalist></code> には <code>id</code>が必要です。</p> + +<p>データリストは、 <code>id</code> の値が拘束するデータリストの値となる {{htmlattrxref("list","input")}} 属性を用いて、 {{htmlelement("input")}} 要素 (つまり<code>text</code> や <code>email</code> の入力タイプ) に拘束されます。</p> + +<div id="first_autocomplete"> +<p>データリストがフォームウィジェットに関連づけられると、オプションはユーザーが入力するオートコンプリートテキストに使われます。典型的には、これはユーザーが入力に打ち込んだものにマッチするドロップダウンボックスで表示されます。</p> + +<p>例を見てみましょう。</p> + +<pre class="brush: html notranslate"><label for="myFruit">What's your favorite fruit?</label> +<input type="text" name="myFruit" id="myFruit" list="mySuggestion"> +<datalist id="mySuggestion"> + <option>Apple</option> + <option>Banana</option> + <option>Blackberry</option> + <option>Blueberry</option> + <option>Lemon</option> + <option>Lychee</option> + <option>Peach</option> + <option>Pear</option> +</datalist></pre> + +<p>{{EmbedLiveSample("first_autocomplete", 120, 120)}}</p> +</div> + +<h4 id="Datalist_support_and_fallbacks" name="Datalist_support_and_fallbacks">Datalist support and fallbacks</h4> + +<p>Almost all browsers support datalist, but if you are still supporting older browsers such as IE versions below 10, there is a trick to provide a fallback:</p> + +<pre class="brush:html; notranslate"><label for="myFruit">What is your favorite fruit? (With fallback)</label> +<input type="text" id="myFruit" name="fruit" list="fruitList"> + +<datalist id="fruitList"> + <label for="suggestion">or pick a fruit</label> + <select id="suggestion" name="altFruit"> + <option>Apple</option> + <option>Banana</option> + <option>Blackberry</option> + <option>Blueberry</option> + <option>Lemon</option> + <option>Lychee</option> + <option>Peach</option> + <option>Pear</option> + </select> +</datalist> +</pre> + +<p>{{EmbedLiveSample("Datalist_support_and_fallbacks", 120, 120)}}</p> + +<p>Browsers that support the {{HTMLElement("datalist")}} element will ignore all the elements that are not {{HTMLElement("option")}} elements, with the datalist working as expected. Old browsers that don't support the {{HTMLElement("datalist")}} element will display the label and the select box.</p> + +<p>The following screenshot shows the datalist fallback as rendered in Safari 6:</p> + +<p><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></p> + +<p>If you use this fallback, ensure the data for both the <code><input></code> and the <code><select></code> are collected server-side.</p> + +<h4 id="Less_obvious_datalist_uses" name="Less_obvious_datalist_uses">Less obvious datalist uses</h4> + +<p>According to <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">the HTML specification</a>, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. This leads to some uses of it that might seem a little non-obvious.</p> + +<p>例えば、in browsers that support <code>{{htmlelement("datalist")}}</code> on <code>range</code> input types, a small tick mark will be displayed above the range for each datalist <code>{{htmlelement("option")}}</code> value. You can see an implementation <a href="/ja/docs/Web/HTML/Element/input/range#A_range_control_with_hash_marks">example of this on the <code><input type="range"></code> reference page</a>.</p> + +<p>And browsers that support {{htmlelement('datalist')}}s and <code><a href="/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code> should display a customized palette of colors as the default, while still making the full color palette available.</p> + +<p>In this case, different browsers behave differently from case to case, so consider such uses as progressive enhancement, and ensure they degrade gracefully.</p> + +<h2 id="Other_form_features" name="Other_form_features">その他のフォーム機能</h2> + +<p>There are a few other form features that are not as obvious as the ones we have already mentioned, but still useful in some situations, so we thought it would be worth giving them a brief mention.</p> + +<div class="note"> +<p><strong>注</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html">other-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html">see it live also</a>).</p> +</div> + +<h3 id="Meters_and_progress_bars" name="Meters_and_progress_bars">メーターとプログレスバー</h3> + +<p>Meters and progress bars are visual representations of numeric values.</p> + +<h4 id="Progress" name="Progress">Progress</h4> + +<p>A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.</p> + +<pre class="brush: html notranslate"><progress max="100" value="75">75/100</progress></pre> + +<p>{{EmbedLiveSample("Progress", 120, 120)}}</p> + +<p>This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.</p> + +<p>The content inside the {{HTMLElement("progress")}} element is a fallback for browsers that don't support the element and for screen readers to vocalize it.</p> + +<h4 id="Meter" name="Meter">Meter</h4> + +<p>A meter bar represents a fixed value in a range delimited by {{htmlattrxref("max","meter")}} and {{htmlattrxref("min","meter")}} values. This value is visually rendered as a bar, and to know how this bar looks, we compare the value to some other set values:</p> + +<ul> + <li>The {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values divide the range in three parts: + <ul> + <li>The lower part of the range is between the {{htmlattrxref("min","meter")}} and {{htmlattrxref("low","meter")}} values, inclusive.</li> + <li>The medium part of the range is between the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values, exclusive.</li> + <li>The higher part of the range is between the {{htmlattrxref("high","meter")}} and {{htmlattrxref("max","meter")}} values, inclusive.</li> + </ul> + </li> + <li>The {{htmlattrxref("optimum","meter")}} value defines the optimum value for the {{HTMLElement("meter")}} element. In conjuction with the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} value, it defines which part of the range is prefered: + <ul> + <li>If the {{htmlattrxref("optimum","meter")}} value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part, and the higher range is considered to be the worst part.</li> + <li>If the {{htmlattrxref("optimum","meter")}} value is in the medium part of the range, the lower range is considered to be an average part, the medium range is considered to be the prefered part, and the higher range is considered to be average as well.</li> + <li>If the {{htmlattrxref("optimum","meter")}} value is in the higher part of the range, the lower range is considered to be the worst part, the medium range is considered to be the average part and the higher range is considered to be the prefered part.</li> + </ul> + </li> +</ul> + +<p>All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar:</p> + +<ul> + <li>If the current value is in the prefered part of the range, the bar is green.</li> + <li>If the current value is in the average part of the range, the bar is yellow.</li> + <li>If the current value is in the worst part of the range, the bar is red.</li> +</ul> + +<p>Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, 例えば、a bar showing total space used on a disk, which turns red when it starts to get full.</p> + +<pre class="brush: html notranslate"><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> + +<p>{{EmbedLiveSample("Meter", 120, 120)}}</p> + +<p>The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p> + +<p>Support for {{HTMLElement("progress")}} and {{HTMLElement("meter")}} is fairly good — there is no support in Internet Explorer, but other browsers support it well.</p> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の終わりまで到達しましたが、最も重要な情報を覚えていますか？次に移る前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Test_your_skills:_Other_controls">Test your skills: Other controls</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>最も後のいくつかの記事で見てきたように、利用できるフォーム要素にはいろいろな種類がたくさんあります。一見してすべてを詳しく覚えておく必要はなく、詳細について調べたいだけ、記事に戻ることができます。</p> + +<p>いろいろなフォームコントロールの背後にある HTML をざっと理解したので、<a href="/ja/docs/Learn/Forms/Styling_HTML_forms">それらのスタイル設定</a>について見ていきましょう。</p> + +<p>{{PreviousMenuNext("Learn/Forms/HTML5_input_types","Learn/Forms/Styling_HTML_forms", "Learn/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets"> </a></li> +</ul> diff --git a/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html new file mode 100644 index 0000000000..c24af4a732 --- /dev/null +++ b/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -0,0 +1,2017 @@ +--- +title: フォームウィジェット向けプロパティ実装状況一覧 +slug: Learn/Forms/Property_compatibility_table_for_form_controls +tags: + - Advanced + - CSS + - Forms + - Guide + - HTML + - NeedsUpdate + - Web + - ウェブ + - ガイド + - フォーム + - 高度 +translation_of: Learn/Forms/Property_compatibility_table_for_form_controls +--- +<div>{{learnsidebar}}</div> + +<p class="summary">以下の実装状況一覧表で、 HTML フォーム向けの CSS の対応状況を要約しています。 HTML フォームや CSS の複雑さにより、これらの表は完全なリファレンスであるとはいえません。それでも、何ができて何ができないかの見識を得られるでしょう。また、どうすればよいかを知る助けにもなるでしょう。</p> + +<h2 id="How_to_read_the_tables" name="How_to_read_the_tables">表の見方</h2> + +<h3 id="Values" name="Values">値</h3> + +<p>それぞれのプロパティで取り得る値は 4 種類あります。</p> + +<dl> + <dt>Yes</dt> + <dd>プロパティは各ブラウザー間で、一貫してほどよく対応されています。もっとも、特殊なケースでは奇妙な副作用に直面するかもしれません。</dd> + <dt>Partial</dt> + <dd>プロパティは動作しますが、たびたび奇妙な副作用や一貫性のなさに直面するかもしれません。まず副作用について熟知しているのでなければ、これらのプロパティは避けるべきでしょう。</dd> + <dt>No</dt> + <dd>プロパティは動作しない、または頼りにできるほどの一貫性がありません。</dd> + <dt>n.a.</dt> + <dd>当該ウィジェットに対して、そのプロパティは意味がありません。</dd> +</dl> + +<h3 id="Rendering" name="Rendering">レンダリング</h3> + +<p>それぞれのプロパティで可能なレンダリング方法は 2 種類あります:</p> + +<dl> + <dt>N (Normal)</dt> + <dd>プロパティをそのまま適用することを表します。</dd> + <dt>T (Tweaked)</dt> + <dd>下記の追加ルールとともにプロパティを適用することを表します:</dd> +</dl> + +<pre class="brush: css notranslate">* { +/* これは、WebKit ベースのブラウザーでネイティブのルックアンドフィールを無効にします */ + -webkit-appearance: none; + appearance: none; + +/* Internet Explorer用 */ + background: none; +}</pre> + +<h2 id="Compatibility_tables" name="Compatibility_tables">実装状況一覧表</h2> + +<h3 id="Global_behaviors" name="Global_behaviors">全体的な動作</h3> + +<p>全体的なレベルで多くのブラウザーに共通する動作があります:</p> + +<dl> + <dt>{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}</dt> + <dd>これらのプロパティのいずれかを使用すると、一部のブラウザーでネイティブのルックアンドフィールが部分的に、あるいは全面的に無効になることがあります。これらを使用する際は注意してください。</dd> + <dt>{{cssxref("line-height")}}</dt> + <dd>このプロパティの対応状況は各ブラウザー間で一貫性がありませんので、避けるべきでしょう。</dd> + <dt>{{cssxref("text-decoration")}}</dt> + <dd>このプロパティはフォームウィジェットにおいて Opera が対応していません。</dd> + <dt>{{cssxref("text-overflow")}}</dt> + <dd>Opera、Safari および IE9 ではフォームウィジェットでこのプロパティに対応していません。</dd> + <dt>{{cssxref("text-shadow")}}</dt> + <dd>Opera は {{cssxref("text-shadow")}} をフォームウィジェットで対応していません。また、IE9 はまったく対応していません。</dd> +</dl> + +<h3 id="Text_fields" name="Text_fields">テキストフィールド</h3> + +<p><code>{{htmlelement("input/text", "text")}}</code>, <code>{{htmlelement("input/search", "search")}}</code>, and <code>{{htmlelement("input/password", "password")}}</code> の入力タイプを見てください。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>WebKit ブラウザーは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、<code>-webkit-appearance:none</code> を使用することが必要です。</li> + <li>Windows 7 で Internet Explorer 9 は、 <code>background:none</code> が適用されなければ境界を適用しません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、<code>-webkit-appearance:none</code> を使用することが必要です。</li> + <li>Windows 7 で Internet Explorer 9 は、<code>background:none</code> が適用されなければ境界を適用しません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、<code>-webkit-appearance:none</code> を使用することが必要です。</li> + <li>Windows 7 で Internet Explorer 9 は、<code>background:none</code> が適用されなければ境界を適用しません。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>{{cssxref("border-color")}} プロパティが設定されていない場合、一部の WebKit ベースブラウザは <code>{{htmlelement("textarea")}}</code> において、フォントだけでなく境界にも {{cssxref("color")}} プロパティを適用します。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td>{{cssxref("line-height")}} の注意事項をご覧ください。</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td>Opera に関する注意事項をご覧ください。</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 はこのプロパティを <code>{{htmlelement("textarea")}}</code> のみで、Opera は単一行のテキストフィールドのみで対応しています。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、<code>-webkit-appearance:none</code> を使用することが必要です。Windows 7 で Internet Explorer 9 は、<code>background:none</code> が適用されなければ境界を適用しません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、<code>-webkit-appearance:none</code> を使用することが必要です。Windows 7 で Internet Explorer 9 は、<code>background:none</code> が適用されなければ境界を適用しません。</li> + <li>Opera では、明示的に境界が設定されている場合にのみ {{cssxref("border-radius")}} が適用されます。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Buttons" name="Buttons">ボタン</h3> + +<p><code>{{htmlelement("input/button", "button")}}</code>, <code>{{htmlelement("input/submit", "submit")}}</code>, and <code>{{htmlelement("input/reset", "reset")}}</code> input types and the <code>{{htmlelement("button")}}</code> 要素を見てください。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>Mac OSX や iOS では、WebKit ベースブラウザでこのプロパティが適用されません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>Mac OSX や iOS では、WebKit ベースブラウザでこのプロパティが適用されません。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td>{{cssxref("line-height")}} の注意事項をご覧ください。</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> + <td> + <ol> + <li>Opera では、明示的に境界が設定されている場合にのみ {{cssxref("border-radius")}} が適用されます。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Number" name="Number">数値</h3> + +<p> <code>{{htmlelement("input/number", "number")}}</code> 入力タイプを見てください。フィールドの値の変更に使用するスピンボタンのスタイルを変更するための、標準的な方法はありません。Safari では、スピンボタンがフィールドの外部にあることは知っておくべきです。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Opera ではスピンボタンが拡大されて、フィールドの内容物を隠す場合があります。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Opera ではスピンボタンが拡大されて、フィールドの内容物を隠す場合があります。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td>{{cssxref("line-height")}} の注意事項をご覧ください。</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td colspan="1" rowspan="3"> + <p>対応していますが、ブラウザ間で頼りにできるほどの一貫性はありません。</p> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + </tr> + </tbody> +</table> + +<h3 id="Check_boxes_and_radio_buttons" name="Check_boxes_and_radio_buttons">チェックボックスとラジオボタン</h3> + +<p><code>{{htmlelement("input/checkbox", "checkbox")}}</code> と <code>{{htmlelement("input/radio", "radio")}}</code> 入力タイプを見てください。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td> + <ol> + <li>一部のブラウザでは、マージンを追加したりウィジェットを引き伸ばしたりします。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td> + <ol> + <li>一部のブラウザでは、マージンを追加したりウィジェットを引き伸ばしたりします。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="Select_boxes_single_line" name="Select_boxes_(single_line)">セレクトボックス (単一行)</h3> + +<p><code>{{htmlelement("select")}}</code>、 <code>{{htmlelement("optgroup")}}</code>、<code>{{htmlelement("option")}}</code> 要素を見てください。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>このプロパティは <code>{{htmlelement("select")}}</code> 要素では問題ありませんが、 <code>{{htmlelement("option")}}</code> 要素や <code>{{htmlelement("optgroup")}}</code> 要素では効果がありません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[2]</sup></td> + <td> + <ol> + <li>プロパティは適用されますが、Mac OSX ではブラウザ間の一貫性がありません。</li> + <li>このプロパティは <code>{{htmlelement("select")}}</code> 要素には適用されますが、 <code>{{htmlelement("option")}}</code> 要素や <code>{{htmlelement("optgroup")}}</code> 要素では処理に一貫性がありません。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Mac OSX では、WebKit ベースのブラウザがネイティブウィジェットでこのプロパティに対応せず、また <code>{{htmlelement("option")}}</code> 要素や <code>{{htmlelement("optgroup")}}</code> 要素では Opera を含めてまったく対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Mac OSX では、WebKit ベースのブラウザがネイティブウィジェットでこのプロパティに対応せず、また <code>{{htmlelement("option")}}</code> 要素や <code>{{htmlelement("optgroup")}}</code> 要素では Opera を含めてまったく対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 は {{HTMLElement("select")}}、 <code>{{htmlelement("option")}}</code> および <code>{{htmlelement("optgroup")}}</code> 要素でこのプロパティに対応していません。Mac OSX で WebKit ベースのブラウザは、 <code>{{htmlelement("option")}}</code> 要素や <code>{{htmlelement("optgroup")}}</code> 要素でこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td> + <ol> + <li>Windows 7 で IE9 および Mac OSX で WebKit ベースのブラウザは、このウィジェットで本プロパティに対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Firefox のみがこのプロパティを完全対応しています。 Opera はこのプロパティに全く対応しておらず、また他のブラウザは <code>{{htmlelement("select")}}</code> 要素のみに対応しています。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td> + <ol> + <li>ほとんどのブラウザは、<code>{{htmlelement("select")}}</code> 要素のみでこのプロパティに対応しています。</li> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td> + <ol> + <li>ほとんどのブラウザは、<code>{{htmlelement("select")}}</code> 要素のみでこのプロパティに対応しています。</li> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>ほとんどのブラウザは、<code>{{htmlelement("select")}}</code>要素のみでこのプロパティに対応しています。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>ほとんどのブラウザは、<code>{{htmlelement("select")}}</code>要素のみでこのプロパティに対応しています。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<p>Firefox では<code>{{htmlelement("select")}}</code> 要素の下矢印を変更する方法はありません。.</p> + +<h3 id="Select_boxes_multiline" name="Select_boxes_(multiline)">セレクトボックス (複数行)</h3> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Opera は {{cssxref("padding-top")}} および {{cssxref("padding-bottom")}} に <code>{{htmlelement("select")}}</code> 要素で対応していません。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td>{{cssxref("line-height")}} の注意事項をご覧ください。</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 は <code>{{htmlelement("select")}}</code> 、 <code>{{htmlelement("option")}}</code> および <code>{{htmlelement("optgroup")}}</code> 要素でこのプロパティに対応していません。Mac OSX で WebKit ベースのブラウザは、 <code>{{htmlelement("option")}}</code> 要素や <code>{{htmlelement("optgroup")}}</code> 要素でこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td> + <ol> + <li>Windows 7 で IE9 および Mac OSX で WebKit ベースのブラウザは、このウィジェットで本プロパティに対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td> + <ol> + <li>Firefox および IE9 以上のみが対応しています。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>ほとんどのブラウザは、 <code>{{htmlelement("select")}}</code> 要素のみでこのプロパティに対応します。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> + <td> + <ol> + <li>Opera では、明示的に境界が設定されている場合にのみ {{cssxref("border-radius")}} が適用されます。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Datalist" name="Datalist">Datalist</h3> + +<p> <code>{{htmlelement("datalist")}}</code> and <code>{{htmlelement("input")}}</code> 要素と <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/list"><code>list</code> 属性</a>を見てください。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="File_picker" name="File_picker">ファイルピッカー</h3> + +<p> <code>{{htmlelement("input/file", "file")}}</code> 入力タイプを見てください。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td> + <ol> + <li>対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>ほとんどのブラウザは、このプロパティを選択ボタンにも適用します。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>ウィジェットの外側に左マージンがあるような状態になります。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td> + <ol> + <li>対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Date_pickers" name="Date_pickers">日付選択</h3> + +<p><code>{{htmlelement("input/date", "date")}}</code> と <code>{{htmlelement("input/time", "time")}}</code> 入力タイプを見てください。多くのプロパティが対応されていますが、ブラウザー間で頼りにできるほどの一貫性はありません。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="Color_pickers" name="Color_pickers">カラーピッカー</h3> + +<p> <code>{{htmlelement("input/color", "color")}}</code> 入力タイプを見てください。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>Opera はこのプロパティを、select ウィジェットと同じ制限事項のもとに処理します。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>Opera はこのプロパティを、select ウィジェットと同じ制限事項のもとに処理します。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Meters_and_progress" name="Meters_and_progress">メーターとプログレスバー</h3> + +<p><code>{{htmlelement("meter")}}</code> と <code>{{htmlelement("progress")}}</code> 要素を見てください:</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Chrome は調整された (Tweaked) 状態の要素に {{cssxref("padding")}} プロパティが適用されていると、{{HTMLElement("progress")}} 要素や {{HTMLElement("meter")}} 要素を隠します。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Range" name="Range">Range</h3> + +<p><code>{{htmlelement("input/range", "range")}}</code> 入力タイプを見てください。スライダーのつまみのスタイルを変更するための標準的な方法はなく、また Opera ではウィジェットのデフォルトの表示を調整する方法がありません。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Chrome や Opera はウィジェットの周りに余白を追加します。また Windows 7 の Opera では、スライダーのつまみが引き伸ばされます。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>{{cssxref("padding")}} は適用されますが、視覚的な効果はありません。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Image_buttons" name="Image_buttons">画像ボタン</h3> + +<p><code>{{htmlelement("input/image", "image")}}</code> 入力タイプを見てください:</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td colspan="1"></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td colspan="1"> + <ol> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td colspan="1"> + <ol> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<p>{{PreviousMenu("Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<h3 id="学習コース">学習コース</h3> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めての HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">古いブラウザでの HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Property_compatibility_table_for_form_widgets">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> + +<h3 id="上級トピック">上級トピック</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> +</ul> diff --git a/files/ja/learn/forms/sending_and_retrieving_form_data/index.html b/files/ja/learn/forms/sending_and_retrieving_form_data/index.html new file mode 100644 index 0000000000..7370945b88 --- /dev/null +++ b/files/ja/learn/forms/sending_and_retrieving_form_data/index.html @@ -0,0 +1,341 @@ +--- +title: フォームデータの送信 +slug: Learn/Forms/Sending_and_retrieving_form_data +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - HTTP + - Web + - セキュリティ + - ファイル + - フォーム +translation_of: Learn/Forms/Sending_and_retrieving_form_data +--- +<div>{{LearnSidebar}}{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}</div> + +<p class="summary">フォームがクライアント側で検証されたら、フォームの送信は大丈夫です。前の記事では検証をカバーしたので、送信する準備はできています! この記事では、ユーザーがフォームを送信したときに何が起こるか、つまりデータがどこへ行くのか、そこに来たときにどう扱うのかを見ます。また、フォームデータの送信に関連するセキュリティの考慮事項のいくつかも見てみます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターリテラシー, <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の理解</a>, <a href="/ja/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> および<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドプログラミング</a>の基本的な知識。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>フォームデータが送信されたら何が起こるかを、データがサーバー上でどのように処理されるかの基本的な考えも含めて理解すること。</td> + </tr> + </tbody> +</table> + +<p>まずは、フォームが送信されたときにデータに何が起こるかを考えてみましょう。</p> + +<h2 id="About_clientserver_architecture" name="About_clientserver_architecture">クライアント/サーバー構成について</h2> + +<p>ウェブはごく基本的なクライアント/サーバー構成に基づいており、簡単に言うと次のようになります。クライアント (通常はウェブブラウザー) は <a href="/ja/docs/HTTP">HTTP プロトコル</a>を使用して、サーバー (ほとんどの場合 <a href="http://httpd.apache.org/" rel="external">Apache</a>、<a href="http://nginx.com/" rel="external">Nginx</a>、<a href="http://www.iis.net/" rel="external">IIS</a>、<a href="http://tomcat.apache.org/" rel="external">Tomcat</a> などのウェブサーバー) にリクエストを送ります。サーバーは同じプロトコルを使用して、リクエストに応答します。</p> + +<p><img alt="基本的なクライアント/サーバー構成" src="/files/4291/client-server.png" style="display: block; height: 141px; margin: 0px auto; width: 400px;"></p> + +<p>クライアント側において、HTML フォームはサーバーへデータを送信する HTTP リクエストを組み立てるのための、便利でユーザーに使いやすい手段でしかありません。フォームによって、ユーザーが HTTP リクエストで渡す情報を提供することができるようになります。</p> + +<div class="note"> +<p><strong>メモ</strong>: どのようにクライアント/サーバー構成が動作するかについてもっと知りたい場合は、<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイド Web サイトプログラミング入門</a>モジュールをお読みください。</p> +</div> + +<h2 id="On_the_client_side_defining_how_to_send_the_data" name="On_the_client_side_defining_how_to_send_the_data">クライアント側: データ送信方法の定義</h2> + +<p>{{HTMLElement("form")}} 要素で、データを送信する方法を定義します。その属性すべてが、ユーザーが送信ボタンを押すと送信されるリクエストを調整できるように設計されています。もっとも重要な属性は {{htmlattrxref("action","form")}} と {{htmlattrxref("method","form")}} の 2 つです。</p> + +<h3 id="The_htmlattrxrefactionform_attribute" name="The_htmlattrxref(actionform)_attribute">action 属性</h3> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/action">action</a></code> 属性は、どこにデータを送信するかを定義します。値は妥当な相対/絶対 <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Common_questions/What_is_a_URL">URL</a> でなければなりません。この属性が与えられなかった場合は、フォームが含まれているページの URL にデータが送信されます。</p> + +<p>この例では、データを絶対 URL の <code>http://</code><code>example.com</code> に送信します。</p> + +<pre class="brush: html notranslate"><form action="http://example.com"></pre> + +<p>こちらは、相対 URL を使用しています。データは同一オリジン上の別の URL に送信されます。</p> + +<pre class="brush: html notranslate"><form action="/somewhere_else"></pre> + +<p>以下のように属性を指定しない場合は、{{HTMLElement("form")}} 要素はフォームが表示されているページ自身に対してデータを送信します。</p> + +<pre class="brush: html notranslate"><form></pre> + +<div class="note"> +<p><strong>メモ:</strong> HTTPS (secure HTTP) プロトコルを使用して URL を指定することができます。このようにすると、フォーム自体が HTTP でアクセスされる安全ではないページで提供される場合でも、データはリクエストの残りの部分とともに暗号化されます。一方、フォームが安全なページ提供されていても、{{htmlattrxref("action","form")}} 属性で安全ではない HTTP の URL を指定すると、どのブラウザーでもデータを送信する際にユーザーに対してセキュリティの警告を表示します。これは、データが暗号化されないためです。</p> +</div> + +<p>非ファイル型のフォームコントロールの名前/値は&記号で結合された <code>name=value</code> ペアでサーバーに送られます。<code>action</code> の値は、サーバー側の検証を含め入力データを扱うサーバーのファイルです。サーバーは応答して、一般的にはデータを処理して <code>action</code> 属性で定義された URL を読み込み、新しいページの読み込み (または <code>action</code> が同じページを指している場合は既存ページのリフレッシュ)を引き起こします。</p> + +<p>データがどう送られるかは <code>method</code> 属性に依存します。</p> + +<h3 id="The_htmlattrxrefmethodform_attribute" name="The_htmlattrxref(methodform)_attribute">method 属性</h3> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/method">method</a></code> 属性は、どのようにデータを送信するかを定義します。<a href="/ja/docs/HTTP">HTTP プロトコル</a>はリクエストを実行するための方法をいくつか提供しています。HTML フォームのデータは複数の方法で送信することができます。もっとも一般的なものは <code>GET</code> メソッドと <code>POST</code> メソッドです。</p> + +<p>これら2つのメソッドの違いを理解するために、一歩戻って <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTTP/Overview">HTTP の動作</a>についてみていきましょう。ウェブ上のリソースにたどり着こうとするたびに、ブラウザーは URL へリクエストを送信します。HTTP リクエストは 2 つの部分で構成されます。ブラウザーの機能に関する包括的なメタデータのセットを持つヘッダーと、指定されたリクエストをサーバーが処理するために必要な情報を持つ本文です。</p> + +<h4 id="The_GET_method" name="The_GET_method">GET メソッド</h4> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTTP/Methods/GET"><code>GET</code> メソッド</a>は、サーバーに対して指定したリソースを返すよう求めるためにブラウザーが使用するメソッドです。"やあサーバー、このリソースをくれよ。" この場合、ブラウザーは空の本文を送信します。本文が空であるため、フォームをこのメソッドで送信する場合はデータを URL の後に付加します。</p> + +<p>以下のフォームについて考えてみましょう。</p> + +<pre class="brush: html notranslate"><form action="http://foo.com" method="get"> + <div> + <label for="say">What greeting do you want to say?</label> + <input name="say" id="say" value="Hi"> + </div> + <div> + <label for="to">Who do you want to say it to?</label> + <input name="to" id="to" value="Mom"> + </div> + <div> + <button>Send my greetings</button> + </div> +</form></pre> + +<p><code>GET</code> メソッドが使用されているので、フォームを送信するときにブラウザーのアドレスバーに <code>www.foo.com/?say=Hi&to=Mom</code> という URL が見えるでしょう。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14685/url-parameters.png" style="display: block; margin: 0 auto;">URL に追加されたデータは名前/値の組の連続です。URL の Web アドレスが終了した後、疑問符 (<code>?</code>) に続いて、名前/値の組が、それぞれアンパサンド (<code>&</code>) で区切られて入ります。この場合、2 つのデータの断片がサーバーに渡されます。</p> + +<ul> + <li><code>say</code> の値は <code>Hi</code></li> + <li><code>to</code> の値は <code>Mom</code></li> +</ul> + +<p>HTTP リクエストは次のようになります。</p> + +<pre class="notranslate">GET /?say=Hi&to=Mom HTTP/1.1 +Host: foo.com</pre> + +<div class="note"> +<p><strong>メモ</strong>: この例は GitHub にあります。— <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> を参照してください (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">ライブはこちら</a>).</p> +</div> + +<h4 id="The_POST_method" name="The_POST_method">POST メソッド</h4> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTTP/Methods/POST"><code>POST</code> メソッド</a>は少し異なります。これは、HTTP リクエストの本文で提供したデータを考慮したレスポンスの要求を、ブラウザーがサーバーに送信するためのメソッドです。"やあサーバー、このデータを見て適切な結果を返してよ。" このメソッドを使用してフォームを送信する場合は、データが HTTP リクエストの本文の後に追加されます。</p> + +<p>例を見てみましょう。— これは前述の <code>GET</code> の節で見たものと同じフォームですが、{{htmlattrxref("method","form")}} 属性が <code>post</code> に設定されています。</p> + +<pre class="brush: html notranslate"><form action="http://foo.com" method="post"> + <div> + <label for="say">What greeting do you want to say?</label> + <input name="say" id="say" value="Hi"> + </div> + <div> + <label for="to">Who do you want to say it to?</label> + <input name="to" id="to" value="Mom"> + </div> + <div> + <button>Send my greetings</button> + </div> +</form></pre> + +<p>フォームをが <code>POST</code> メソッドで送信されると、URL にはデータが追加されず、HTTP リクエストは次のように、リクエスト本文にデータが含まれた形になります。</p> + +<pre class="notranslate">POST / HTTP/1.1 +Host: foo.com +Content-Type: application/x-www-form-urlencoded +Content-Length: 13 + +say=Hi&to=Mom</pre> + +<p><code>Content-Length</code> ヘッダーは本文の長さを、また <code>Content-Type</code> ヘッダーはサーバーに送信するリソースの種類を表します。これらのヘッダーについて少し説明しましょう。</p> + +<div class="note"> +<p><strong>メモ</strong>: この例は GitHub で見つけることができます。— <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/post-method.html">post-method.html</a> を参照してください (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">ライブ版も見てください</a>)。</p> +</div> + +<h3 id="HTTP_リクエストの表示">HTTP リクエストの表示</h3> + +<p>当然ながら HTTP リクエストはユーザーには表示されません (見たいのであれば、<a href="/ja/docs/Tools/Network_Monitor">Firefox ネットワークモニター</a>や <a href="https://developers.google.com/chrome-developer-tools/">Chrome デベロッパー ツール</a>などのツールが必要です)。例のように、フォームのデータは Chrome の Network タブに以下のように表示されます。フォームの送信後に、以下のように操作してください。</p> + +<ol> + <li>開発者ツールを開く</li> + <li>"Network" を選択</li> + <li>"All" を選択</li> + <li>"Name" タブから "foo.com" を選択</li> + <li>"Headers" を選択</li> +</ol> + +<p>これで下の画像にあるように、フォームデータを取得することができます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14691/network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>ユーザーに表示されるのは呼び出された URL のみです。前述のように、<code>GET</code> リクエストはユーザーが URL バーの中でデータを見ることができますが、<code>POST</code> リクエストではそうではありません。これは 2 つの理由でとても重要です。</p> + +<ol> + <li>パスワード (あるいは何らかの機密データ) を送信する必要がある場合は、<code>GET</code> メソッドを使用してはいけません。データが URL バーに表示されるリスクがあり、とても危険です。</li> + <li>大量のデータを送信する必要があるなら、<code>POST</code> が好ましいメソッドです。これは、URL の長さ制限があるブラウザーが存在するためです。加えて、多くのサーバーは受け入れる URL の長さを制限しています。</li> +</ol> + +<h2 id="On_the_server_side_retrieving_the_data" name="On_the_server_side_retrieving_the_data">サーバー側: データの取得</h2> + +<p>どちらの HTTP メソッドを選択しても、サーバーが受け取る文字列は、キー/値の組のリストとしてデータを取得するために解析されます。このリストにアクセスする方法は、使用する開発プラットフォームや、使用するであろう特定のフレームワークに依存します。</p> + +<h3 id="Example_Raw_PHP" name="Example_Raw_PHP">PHP の例</h3> + +<p><a href="https://php.net/">PHP</a> は、データにアクセスするためのグローバルオブジェクトを提供します。<code>POST</code> メソッドを使用したと仮定すると、データを取得してユーザーに表示する例は以下のとおりです。もちろん、データに対して何をするかはあなた次第です。データを表示したり、データベースに保管したり、メールで送信したり、他の手段で処理したりするでしょう。</p> + +<pre class="brush: php notranslate"><?php + // $_POST グローバル変数は、POST メソッドで送信されたデータへ名前でアクセスを可能にする + // GET メソッドで送信されたデータにアクセスするには、$_GET が使用できる + $say = htmlspecialchars($_POST['say']); + $to = htmlspecialchars($_POST['to']); + + echo $say, ' ', $to; +?></pre> + +<p>この例では送信されたデータを含むページを表示します。これはサンプルの <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> ファイル、つまり以前 <code>method</code> が <code>POST</code> で <code>action</code> が <code>php-example.php</code> の時に見たサンプルフォームを含むファイルアクションの中で見ることができます。送信されると、フォームデータは上記のブロックの PHP コードを含む <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-example.php</a> へ送信されます。コードが実行されると、ブラウザーの出力は <code>Hi Mom</code> になります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14693/php-result.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>メモ</strong>: この例はブラウザーにローカルに読み込んだ時には動作しません。— ブラウザーは PHP コードを解釈できないので、フォームがブラウザーに送信されると、PHP ファイルをダウンロードしようとするでしょう。動作させるためには、この例を何らかの PHP サーバー経由で実行する必要があります。ローカルの PHP のテストには、<a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac および Windows) や <a href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) がいいでしょう。</p> + +<p>MAMP を使って MAMP Pro がない (または MAMP Pro デモトライアルの有効期限が切れた)場合、動作させるのにトラブルが起こるかもしれません。再び動作させるには MAMP アプリを閉じて、<em>MAMP</em> > <em>Preferences</em> > <em>PHP</em>メニューから "Standard Version:" を "7.2.x" (x はあなたがどのバージョンをインストールしたかによります)にするといいことがわかっています。</p> +</div> + +<h3 id="Example_Raw_Python" name="Example_Raw_Python">Python の例</h3> + +<p>この例は、同じこと (与えられたデータをウェブページに表示する) を Python で行います。これはテンプレートの表示やフォームデータの受付などのために <a href="http://flask.pocoo.org/">Flask フレームワーク</a>を使用しています (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a> を参照してください)。</p> + +<pre class="notranslate">from flask import Flask, render_template, request +app = Flask(__name__) + +@app.route('/', methods=['GET', 'POST']) +def form(): + return render_template('form.html') + +@app.route('/hello', methods=['GET', 'POST']) +def hello(): + return render_template('greeting.html', say=request.form['say'], to=request.form['to']) + +if __name__ == "__main__": + app.run()</pre> + +<p>次のように、上記のコードでは 2 つのテンプレートが参照されます。(自分の環境で実行する場合、これらは <code>templates</code> というサブディレクトリにあり、<code>python-example.py</code>ファイルと同じディレクトリにある必要があります):</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html</a>: 以前に {{anch("The POST method", "POST メソッド")}}の節で見たフォームと同じですが、<code>action</code> が <code>\{{ url_for('hello') }}</code> に設定されています (これは <a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a> テンプレートで、基本的に HTML ですが、波括弧の中にウェブサーバーで実行されている Python のコードの呼び出しを含めることができます。<code>url_for('hello')</code> は基本的に、「フォームが送信されたら <code>/hello</code> にリダイレクトしてください」と言っています。)</li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a>: このテンプレートは、表示時に渡された 2 つの小さいデータを表示する行だけを含みます。<code>/hello</code> の URL が呼び出されるときに実行される、前述の <code>hello()</code> 関数によって行われます。</li> +</ul> + +<div class="note"> +<p><strong>メモ</strong>: 繰り返しますが、このコードはブラウザーに直接読み込もうとしても動作しません。Python は PHP とは若干異なる動作をします。— ローカルでこのコードを実行するには、<a href="/ja/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">Python/PIP をインストール</a>する必要があり、それから <code>pip3 install flask</code> を使用して Flask をインストールしてください。この時点で <code>python3 python-example.py</code> を実行し、ブラウザーで <code>localhost:5000</code> に移動することで実行することができるでしょう。</p> +</div> + +<h3 id="Other_languages_and_frameworks" name="Other_languages_and_frameworks">その他の言語やフレームワーク</h3> + +<p>フォームの操作に使用できるサーバー側の技術は、Perl、Java、.Net、Ruby などたくさんあります。もっとも好きなものを選びましょう。しかしそれらの技術を直接使用することは、扱いにくいため一般的ではないことが特筆に値します。以下のような、フォームをより簡単に扱えるようにする多くの高品質フレームワークのひとつを使用する方がより一般的です:</p> + +<ul> + <li>Python 用 <a href="https://www.djangoproject.com/" rel="external">Django</a> (<a href="http://flask.pocoo.org/">Flask</a> より若干重いものですが、ツールとオプションはもっとたくさんあります)</li> + <li>Node.js 用 <a href="/ja/docs/Learn/Server-side/Express_Nodejs">Express</a></li> + <li>PHP 用 <a href="https://laravel.com/">Laravel</a></li> + <li>Ruby 用 <a href="http://rubyonrails.org/" rel="external">Ruby On Rails</a></li> +</ul> + +<p>言うまでもなく、これらのフレームワークを使用したとしても、フォームでの作業が必ずしも<em>簡単に</em>なるとは限りません。しかし、すべての機能を自分で 1 から書こうとするよりずっと簡単で、また多くの時間を節約できるでしょう。</p> + +<div class="note"> +<p><strong>メモ</strong>: サーバー側言語やフレームワークまで説明することはこの記事の範囲を超えます。上記のリンクが参考になりますので、学習してみてください。</p> +</div> + +<h2 id="A_special_case_sending_files" name="A_special_case_sending_files">特別な場合: ファイル送信</h2> + +<p>ファイルは HTML フォームで特別なケースです。他のデータがすべてテキストデータである中、ファイルはバイナリーデータ (あるいはそのように考えられるデータ) です。HTTP はテキストのプロトコルであるため、バイナリーデータを扱うための特別な要件があります。</p> + +<h3 id="The_htmlattrxrefenctypeform_attribute" name="The_htmlattrxref(enctypeform)_attribute">enctype 属性</h3> + +<p>この属性で <code>Content-Type</code> HTTP ヘッダーの値を指定できます。このヘッダーはサーバーに対して送信するデータの種類を伝えることから、とても重要です。既定値は <code>application/x-www-form-urlencoded</code> です。人間の言葉では、「これは URL 形式でエンコードされたフォームデータです。」という意味です。</p> + +<p>しかしファイルを送信したい場合は、さらに 2 つのステップを踏む必要があります。</p> + +<ul> + <li>ファイルの内容は URL 引数に収めることができないので、{{htmlattrxref("method","form")}} 属性を <code>POST</code> に設定してください。</li> + <li>データは複数の部分に分かれ、それぞれのファイルや文字列データがフォーム本体に含められているので、{{htmlattrxref("enctype","form")}} の値を <code>multipart/form-data</code> に設定ください。</li> + <li>ユーザーがアップロードするファイルを選択できるように、1 つ以上の <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code> コントロールを含めてください。</li> +</ul> + +<p>例:</p> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="file">Choose a file</label> + <input type="file" id="file" name="myFile"> + </div> + <div> + <button>Send the file</button> + </div> +</form></pre> + +<div class="blockIndicator note"> +<p><strong>警告:</strong> 多くのサーバーは悪用を防ぐために、ファイルや HTTP リクエストの長さを制限しています。</p> +</div> + +<h2 id="Common_security_concerns" name="Common_security_concerns">一般的なセキュリティへの配慮</h2> + +<p>サーバーにデータを送信するたびに、セキュリティについて考える必要があります。HTML フォームはサーバーに対するもっともよくある攻撃の入口 (攻撃が行われる場所) になります。問題が HTML フォーム自身から発生することはありません — サーバーがどのようにデータを扱うかによります。</p> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Server-side">server-side</a> の学習トピックの <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Server-side/First_steps/Website_security">Website security</a> の記事では、一般的な攻撃とその防御を詳細に扱っています。そちらへ行って記事を確認し、何が起こり得るかを理解してください。</p> + +<h3 id="Be_paranoid_Never_trust_your_users" name="Be_paranoid_Never_trust_your_users">疑い深くあれ: ユーザーを信用してはいけません</h3> + +<p>さて、これらの脅威に対してどう対抗するのでしょうか? これは本ガイドの内容を超える話題です。それでも、覚えておくとよいルールがいくつかあります。もっとも重要なルールは、自分自身も含めユーザーを決して信用してはならないことです。信頼されているユーザーでさえハイジャックされるかもしれません。</p> + +<p>サーバーに来るすべてのデータを確認およびサニタイズしなければなりません。いつでもです。例外はありません。</p> + +<ul> + <li><strong>潜在的に危険な文字をエスケープします。</strong>注意すべき具体的な文字は、データが使用される状況や使用するサーバー基盤に大きく依存しますが、どのサーバー側言語もそのための機能を持っています。注意しておくべきことは、 (<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript">JavaScript</a> や <a href="https://en.wikipedia.org/wiki/SQL">SQL</a> コマンドといった)実行可能なコードのようなキャラクターシーケンスです。</li> + <li><strong>入力データの量を、必要なサイズまでしか受け入れないように制限します。</strong></li> + <li><strong>アップロードされたファイルをサンドボックス化します。</strong>ファイルを別のサーバーに保管して、別のサブドメインまたはよりよい方法としてまったく別のドメインを通してのみアクセスを許可します。</li> +</ul> + +<p>これら 3 つのルールに従うと、多くのあるいはほとんどの問題を避けられるでしょう。ただし、適格の第三者によるセキュリティレビューを受けることもよい考えです。発生し得る問題のすべてを見いだしたとは考えないようにしてください。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>ご覧いただいたように、フォームデータの送信は簡単ですが、アプリケーションを安全にするのは容易ではありません。フロントエンドの開発者はデータのセキュリティモデルを定義すべき者ではないことを忘れないようにしてください。今後見ていくように<a href="/ja/docs/Web/HTML/Forms/Data_form_validation">クライアント側でのデータ検証</a>も可能ですが、クライアント側で実際に何が起きているかを知ることはできませんので、サーバー側でその検証内容を信用することはできません。</p> + +<p>このチュートリアルを順番に終えた場合、フォームのマークアップとスタイル設定の方法、クライアント側での検証の方法、フォーム送信の理解ができているでしょう。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<p>ウェブアプリケーションのセキュア化についてさらに学びたいのでしたら、次のリソースをよく読んでください。</p> + +<ul> + <li><a href="/ja/docs/Learn/Server-side/First_steps">サーバー側ウェブサイトプログラミング入門</a></li> + <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external">The Open Web Application Security Project (OWASP)</a></li> + <li><a href="https://infosec.mozilla.org/guidelines/web_security">Web Security by Mozilla</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/forms/sending_forms_through_javascript/index.html b/files/ja/learn/forms/sending_forms_through_javascript/index.html new file mode 100644 index 0000000000..3b3ba71ce2 --- /dev/null +++ b/files/ja/learn/forms/sending_forms_through_javascript/index.html @@ -0,0 +1,396 @@ +--- +title: JavaScript によるフォームの送信 +slug: Learn/Forms/Sending_forms_through_JavaScript +tags: + - Advanced + - Example + - Forms + - Forms Guide + - Guide + - HTML + - HTML forms + - JavaScript + - Learn + - Security + - Web + - Web Forms +translation_of: Learn/Forms/Sending_forms_through_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p><span class="seoSummary">HTML フォームは <a href="/ja/docs/Web/HTTP">HTTP</a> リクエストを宣言的に送信できます。しかし、フォームは 、例えば <code>XMLHttpRequest</code> のように JavaScript 経由で送信する HTTP リクエストを準備することもできます。この記事ではその方法を探ります。</span></p> + +<h2 id="A_form_is_not_always_a_form" name="A_form_is_not_always_a_form">フォームは必ずしもフォームであるとは限らない</h2> + +<p>PWA や SPA やフレームワークベースのアプリが現れたことで、<a href="/ja/docs/HTML/Forms" title="HTML/Forms">HTML フォーム</a>を、応答データを受け取ったときに、新しい文書を読み込むことなくデータ送信するのに使用することが次第に一般的になってきました。最初になぜいろいろなアプローチが必要となるのかを話しましょう。</p> + +<h3 id="Gaining_control_of_the_global_interface" name="Gaining_control_of_the_global_interface">グローバルインターフェイスの制御を取得</h3> + +<p>次の記事で述べる標準の HTML フォーム送信では、データが送信された URL がロードされます。つまり、ブラウザーウィンドウは全ページロードで移動します。ページ全体の読み込みを回避すると、ちらつきのような視覚上の問題や、ネットワークの遅延を避けて、よりスムーズな操作を提供できます。</p> + +<p>最近の多くの UI は、HTML フォームを使用してユーザーからの入力を収集します。ユーザーがデータを送信しようとすると、アプリケーションはバックグラウンドでデータを非同期的に制御して送信し、変更が必要な UI の部分のみを更新します。</p> + +<p>任意のデータを非同期に送信することは、<strong>"Asynchronous JavaScript And XML" </strong>を表す頭字語である <a href="/ja/docs/AJAX" title="AJAX">AJAX</a> として知られています。</p> + +<h3 id="How_is_it_different" name="How_is_it_different">その違いは?</h3> + +<p>{{domxref("XMLHttpRequest")}} (XHR) DOM オブジェクトで HTTP リクエストを作成して送信し、結果を取得することができます。歴史的には、{{domxref("XMLHttpRequest")}} は交換フォーマットとして <a href="/ja/docs/XML_Introduction">XML</a> を取得して送信するように設計されていました。しかし、<a href="/ja/docs/Glossary/JSON">JSON</a> は XML に取って代わっています。しかし、XML も JSON もフォームデータリクエストのエンコーディングには適合しません。フォームデータ (<code>application/x-www-form-urlencoded</code>) は、キーと値のペアの URL エンコードされたリストで構成されています。バイナリーデータを送信するために、HTTP リクエストは <code>multipart/form-data</code> に再形成されます<strong>。</strong></p> + +<div class="blockIndicator note"> +<p><strong>注記</strong>: <a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Fetch_API">Fetch API</a> は最近 XHR の代わりによく使われます — これは XHR のモダンで更新されたバージョンであり、同様に動作しますが利点もあります。この記事で見る大半の XHR コードは Fetch で置き換えられます。</p> +</div> + +<p>フロントエンド (ブラウザーで実行されるコード) とバックエンド (サーバーで実行されるコード) を制御すれば、JSON/XML を送信して必要に応じて処理することができます。</p> + +<p>しかし、サードパーティのサービスを利用したい場合、サービスが要求する零式でデータ送信する必要があります。</p> + +<p>ではどのようにしてそのようなデータを送信するのでしょうか?以下に必要となるさまざまなテクニックがあります。</p> + +<h2 id="Sending_form_data" name="Sending_form_data">フォームデータの送信</h2> + +<p>フォームデータを送信するには、従来の方法から新しい {{domxref("FormData")}} オブジェクトまで 3 つの方法があります。それらを詳しく見てみましょう。</p> + +<h3 id="Building_an_XMLHttpRequest_manually" name="Building_an_XMLHttpRequest_manually">手作業での XMLHttpRequest の作成</h3> + +<p>{{domxref("XMLHttpRequest")}} は、HTTP リクエストを作成する最も安全で信頼性の高い方法です。{{domxref("XMLHttpRequest")}} を使用してフォームデータを送信するには、URL エンコードしたデータを準備し、フォームデータリクエストの詳細に従ってください。</p> + +<p>例を見てみましょう:</p> + +<pre class="brush: html notranslate"><button>Click Me!</button></pre> + +<p>JavaScript はこうです:</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); + +function sendData( data ) { + console.log( 'Sending data' ); + + const XHR = new XMLHttpRequest(); + + let urlEncodedData = "", + urlEncodedDataPairs = [], + name; + + // data オブジェクトを、URL エンコードしたキーと値のペアの配列に変換します + for( name in data ) { + urlEncodedDataPairs.push( encodeURIComponent( name ) + '=' + encodeURIComponent( data[name] ) ); + } + + // キーと値のペアをひとつの文字列に連結して、Web ブラウザーのフォーム送信方式に + // 合うよう、エンコードされた空白をプラス記号に置き換えます。 + urlEncodedData = urlEncodedDataPairs.join( '&' ).replace( /%20/g, '+' ); + + // データが正常に送信された場合に行うことを定義します + XHR.addEventListener( 'load', function(event) { + alert( 'Yeah! Data sent and response loaded.' ); + } ); + + // エラーが発生した場合に行うことを定義します + XHR.addEventListener( 'error', function(event) { + alert( 'Oops! Something went wrong.' ); + } ); + + // リクエストをセットアップします + XHR.open( 'POST', 'https://example.com/cors.php' ); + + // フォームデータの POST リクエストを扱うために必要な HTTP ヘッダを追加します + XHR.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' ); + + // 最後に、データを送信します + XHR.send( urlEncodedData ); +} + +btn.addEventListener( 'click', function() { + sendData( {test:'ok'} ); +} ) +</pre> + +<p>そして、結果は以下のとおりです:</p> + +<p>{{EmbedLiveSample("Building_an_XMLHttpRequest_manually", "100%", 50)}}</p> + +<div class="note"> +<p><strong>注記:</strong> この {{domxref("XMLHttpRequest")}} の使用は、第三者の Web サイトにデータを送信したい場合にも、同一生成元ポリシーの対象となります。クロスオリジンリクエストの場合は、<a href="/ja/docs/Web/HTTP/CORS">CORS と HTTP のアクセス制御</a>が必要です。</p> +</div> + +<h3 id="Using_XMLHttpRequest_and_the_FormData_object" name="Using_XMLHttpRequest_and_the_FormData_object">XMLHttpRequest と FormData オブジェクトの使用</h3> + +<p>HTTP リクエストを手作業で作成するのは大変なことです。幸いなことに、最近の <a href="http://www.w3.org/TR/XMLHttpRequest/">XMLHttpRequest 仕様</a>では {{domxref("FormData")}} オブジェクトを使ってフォームデータリクエストを処理する便利で簡単な方法が提供されています。</p> + +<p>{{domxref("FormData")}} オブジェクトは、送信用のフォームデータを作成したり、送信方法を管理するフォーム要素内のデータを取得するために使用できます。{{domxref("FormData")}} オブジェクトは "書き込み専用" であることに注意してください。つまり、変更することはできますが、内容を取得することはできません。</p> + +<p>このオブジェクトの使い方は <a href="/ja/docs/Web/API/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a>で詳述されていますが、2 つの例があります。</p> + +<h4 id="Using_a_standalone_FormData_object" name="Using_a_standalone_FormData_object">独立した FormData オブジェクトを使用する</h4> + +<pre class="brush: html notranslate"><button type="button" onclick="sendData({test:'ok'})">Click Me!</button></pre> + +<p>HTML のサンプルはおわかりでしょう。JavaScript はこうです。</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); + +function sendData(data) { + const XHR = new XMLHttpRequest(), + FD = new FormData(); + + // データを FormData オブジェクトに投入します + for(name in data) { + FD.append(name, data[name]); + } + + // データが正常に送信された場合に行うことを定義します + XHR.addEventListener('load', function(event) { + alert('Yeah! Data sent and response loaded.'); + }); + + // エラーが発生した場合に行うことを定義します + XHR.addEventListener('error', function(event) { + alert('Oups! Something goes wrong.'); + }); + + // リクエストをセットアップします + XHR.open('POST', 'http://ucommbieber.unl.edu/CORS/cors.php'); + + // FormData オブジェクトを送信するだけです。HTTP ヘッダは自動的に設定されます + XHR.send(FD); +}</pre> + +<p>そして、結果は以下のとおりです:</p> + +<p>{{EmbedLiveSample("Using_a_standalone_FormData_object", "100%", 50)}}</p> + +<h4 id="Using_FormData_bound_to_a_form_element" name="Using_FormData_bound_to_a_form_element">form 要素に紐づけた FormData を使用する</h4> + +<p><code>FormData</code> オブジェクトを {{HTMLElement("form")}} 要素に紐づけることもできます。これにより、フォームに含まれるデータを表す <code>FormData</code> をすばやく得ることができます。</p> + +<p>HTML の部分はかなり典型的です:</p> + +<pre class="brush: html notranslate"><form id="myForm"> + <label for="myName">Send me your name:</label> + <input id="myName" name="name" value="John"> + <input type="submit" value="Send Me!"> +</form></pre> + +<p>しかし、JavaScript がフォームを乗っ取ります。</p> + +<pre class="brush: js notranslate">window.addEventListener("load", function () { + function sendData() { + const XHR = new XMLHttpRequest(); + + // FormData オブジェクトと form 要素を紐づけます + const FD = new FormData(form); + + // データが正常に送信された場合に行うことを定義します + XHR.addEventListener("load", function(event) { + alert(event.target.responseText); + }); + + // エラーが発生した場合に行うことを定義します + XHR.addEventListener("error", function(event) { + alert('Oups! Something goes wrong.'); + }); + + // リクエストをセットアップします + XHR.open("POST", "http://ucommbieber.unl.edu/CORS/cors.php"); + + // 送信したデータは、ユーザーがフォームで提供したものです + XHR.send(FD); + } + + // form 要素にアクセスしなければなりません + const form = document.getElementById("myForm"); + + // フォームの submit イベントを乗っ取ります + form.addEventListener("submit", function (event) { + event.preventDefault(); + + sendData(); + }); +});</pre> + +<p>そして、結果は以下のとおりです:</p> + +<p>{{EmbedLiveSample("Using_FormData_bound_to_a_form_element", "100%", 50)}}</p> + +<p>フォームの {{domxref("HTMLFormElement.elements", "elements")}} プロパティを使用してフォーム内のすべてのデータ要素のリストを取得し、それらを一度に 1 つずつ手動で管理することで、このプロセスにさらに関わることができます。詳細については、{{SectionOnPage("/ja/docs/Web/API/HTMLFormElement.elements", "要素リストの内容にアクセスする")}}の例を参照してください。</p> + +<h2 id="Dealing_with_binary_data" name="Dealing_with_binary_data">バイナリーデータを扱う</h2> + +<p><code><input type="file"></code> ウィジェットを含むフォームで {{domxref("FormData")}} オブジェクトを使用すると、データは自動的に処理されます。しかし、バイナリーデータを手動で送るには、追加でやるべきことがあります。</p> + +<p>現代の Web には、バイナリーデータのソースが多数あります。たとえば、{{domxref("FileReader")}}、{{domxref("HTMLCanvasElement","Canvas")}}、<a href="/ja/docs/Web/API/Navigator/getUserMedia">WebRTC</a> などです。残念ながら、一部の従来のブラウザーではバイナリーデータにアクセスできないか、または複雑な回避策が必要です。これらのレガシーケースはこの記事の範囲外です。<code>FileReader</code> API について詳しく知りたい場合は、<a href="/ja/docs/Web/API/File/Using_files_from_web_applications">Web アプリケーションからファイルを扱う</a>を読んでください。</p> + +<p>{{domxref("FormData")}} をサポートするバイナリーデータを送信するのは簡単です。<code>append()</code> メソッドを使用すれば完了です。手動でやらなければならないならば、それはトリッキーです。</p> + +<p>以下の例ではバイナリーデータへのアクセスに {{domxref("FileReader")}} API を使用しており、また手作業でマルチパートのフォームデータを作成しています:</p> + +<pre class="brush: html notranslate"><form id="myForm"> + <p> + <label for="i1">text data:</label> + <input id="i1" name="myText" value="Some text data"> + </p> + <p> + <label for="i2">file data:</label> + <input id="i2" name="myFile" type="file"> + </p> + <button>Send Me!</button> +</form></pre> + +<p>ご覧のとおり、HTML は標準の <code><form></code> です。不思議なところは何もありません。「魔法」は JavaScript にあります。</p> + +<pre class="brush: js notranslate">// DOM ノードにアクセスしたいため、 +// ページをロードしたときにスクリプトを初期化します。 +window.addEventListener('load', function () { + + // この変数は、フォームデータを格納するために使用します。 + const text = document.getElementById("i1");; + const file = { + dom : document.getElementById("i2"), + binary : null + }; + + // ファイルコンテンツへのアクセスに FileReader API を使用します。 + const reader = new FileReader(); + + // FileReader API は非同期であるため、ファイルの読み取りが完了したときに + // その結果を保存しなければなりません。 + reader.addEventListener("load", function () { + file.binary = reader.result; + }); + + // ページを読み込んだとき、すでに選択されているファイルがあればそれを読み取ります。 + if(file.dom.files[0]) { + reader.readAsBinaryString(file.dom.files[0]); + } + + // 一方、ユーザーがファイルを選択したらそれを読み取ります。 + file.dom.addEventListener("change", function () { + if(reader.readyState === FileReader.LOADING) { + reader.abort(); + } + + reader.readAsBinaryString(file.dom.files[0]); + }); + + // sendData 関数がメインの関数です。 + function sendData() { + // 始めに、ファイルが選択されている場合はファイルの読み取りを待たなければなりません。 + // そうでない場合は、関数の実行を遅延させます。 + if(!file.binary && file.dom.files.length > 0) { + setTimeout(sendData, 10); + return; + } + + // マルチパートのフォームデータリクエストを構築するため、 + // XMLHttpRequest のインスタンスが必要です。 + const XHR = new XMLHttpRequest(); + + // リクエストの各パートを定義するためのセパレータが必要です。 + const boundary = "blob"; + + // 文字列としてリクエストのボディを格納します。 + let data = ""; + + // そして、ユーザーがファイルを選択したときに + if (file.dom.files[0]) { + // リクエストのボディに新たなパートを作ります + data += "--" + boundary + "\r\n"; + + // フォームデータであることを示します (他のものになる場合もあります) + data += 'content-disposition: form-data; ' + // フォームデータの名前を定義します + + 'name="' + file.dom.name + '"; ' + // 実際のファイル名を与えます + + 'filename="' + file.dom.files[0].name + '"\r\n'; + // ファイルの MIME タイプを与えます + data += 'Content-Type: ' + file.dom.files[0].type + '\r\n'; + + // メタデータとデータの間に空行を置きます + data += '\r\n'; + + // リクエストのボディにバイナリーデータを置きます + data += file.binary + '\r\n'; + } + + // テキストデータの場合はシンプルです。 + // リクエストのボディに新たなパートを作ります + data += "--" + boundary + "\r\n"; + + // フォームデータであることと、データの名前を示します。 + data += 'content-disposition: form-data; name="' + text.name + '"\r\n'; + // メタデータとデータの間に空行を置きます + data += '\r\n'; + + // リクエストのボディにテキストデータを置きます。 + data += text.value + "\r\n"; + + // 完了したら、リクエストのボディを "閉じます"。 + data += "--" + boundary + "--"; + + // データが正常に送信された場合に行うことを定義します + XHR.addEventListener('load', function(event) { + alert('Yeah! Data sent and response loaded.'); + }); + + // エラーが発生した場合に行うことを定義します + XHR.addEventListener('error', function(event) { + alert('Oups! Something goes wrong.'); + }); + + // リクエストをセットアップします + XHR.open('POST', 'http://ucommbieber.unl.edu/CORS/cors.php'); + + // マルチパートのフォームデータの POST リクエストを扱うために必要な HTTP ヘッダを追加します。 + XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary); + XHR.setRequestHeader('Content-Length', data.length); + + // 最後に、データを送信します + // Firefox のバグ 416178 により、send() の代わりに sendAsBinary() を使用することが必要です。 + XHR.sendAsBinary(data); + } + + // 少なくとも、フォームにアクセスしなければなりません。 + const form = document.getElementById("myForm"); + + // submit イベントを乗っ取ります。 + form.addEventListener('submit', function (event) { + event.preventDefault(); + sendData(); + }); +});</pre> + +<p>そして、結果は以下のとおりです:</p> + +<p>{{EmbedLiveSample("Dealing_with_binary_data", "100%", 150)}}</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>ブラウザーや扱うデータタイプによっては、JavaScript を介してフォームデータを送信するのが簡単な場合と難しい場合があります。{{domxref("FormData")}} オブジェクトが一般的な答えであり、レガシーブラウザーで <a href="https://github.com/jimmywarting/FormData">polyfill</a> を使用することをためらってはいけません。</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<h3 id="学習コース">学習コース</h3> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めての HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">古いブラウザーでの HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Property_compatibility_table_for_form_widgets">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> + +<h3 id="上級トピック">上級トピック</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> +</ul> diff --git a/files/ja/learn/forms/styling_html_forms/index.html b/files/ja/learn/forms/styling_html_forms/index.html new file mode 100644 index 0000000000..4634665cef --- /dev/null +++ b/files/ja/learn/forms/styling_html_forms/index.html @@ -0,0 +1,398 @@ +--- +title: HTML フォームへのスタイル設定 +slug: Learn/Forms/Styling_HTML_forms +tags: + - CSS + - Example + - Forms + - Guide + - HTML + - Intermediate + - Web +translation_of: Learn/Forms/Styling_web_forms +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Other_form_controls","Learn/Forms/Advanced_form_styling","Learn/Forms")}}</p> + +<p class="summary">前の記事ではウェブフォームを構築するのに必要な HTML のすべてを見てきました。この記事ではフォームコントロールにスタイル設定する <a href="https://wiki.developer.mozilla.org/ja/docs/CSS" title="/ja/docs/CSS">CSS</a> の使い方に進みます。これは歴史的に難しかったです — フォームコントロールは大きく変わり CSS を使ったフォームのカスタマイズは簡単になりました— しかし古いブラウザーが引退してモダンブラウザーが多くの機能を与えるため、より簡単になりました。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td> + <p>基本的なコンピューターリテラシーと、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML">HTML</a> と <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/First_steps">CSS</a> の基本的な理解。</p> + </td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>フォームのスタイル設定の問題を理解し、役立つスタイル付けのテクニックを学ぶこと。</td> + </tr> + </tbody> +</table> + +<h2 id="Why_is_it_so_hard_to_style_form_widgets_with_CSS" name="Why_is_it_so_hard_to_style_form_widgets_with_CSS">なぜ CSS によるフォームウィジェットへのスタイル設定は困難であるか?</h2> + +<p>1995年頃に <a href="http://www.ietf.org/rfc/rfc1866.txt" rel="extrenal" title="http://www.ietf.org/rfc/rfc1866.txt">HTML 2 仕様</a>へフォームコントロールが追加されました。CSS は 1996年までリリースされず、その後も少しのブラウザーによって十分サポートされませんでした。ブラウザーはフォームコントロールの管理や表示について下層の OS に頼ることを選択しました。</p> + +<p>CSS が HTML のスタイル設定できるようになってからも、ユーザーは各プラットフォームの視覚的な外見に慣れていましたので、ブラウザーベンダーはフォームコントロールをスタイル付け可能にすることに乗り気ではありませんでした。しかしこれは変わりました。ウェブサイトのオーナーはこれまでよりも、サイト全体に適するスタイルを欲しており、ウェブプラットフォームはこれを実現可能にしました。</p> + +<p>いくつかのフォームウィジェットでは、コントロールをスタイル設定できるように作成し直すのは難しいですが、ユーザービリティを破綻させないよう気をつける必要はあるものの、CSS を使って多くのフォーム機能をスタイル設定できます。</p> + +<h3 id="Not_all_widgets_are_created_equal_when_CSS_is_involved" name="Not_all_widgets_are_created_equal_when_CSS_is_involved">CSS を伴ってもすべてのウィジェットが同等に作成されるわけではありません</h3> + +<p>いまだに、フォームで CSS を使用する際に困ることが存在します。この問題は、3 つのカテゴリーに分けられます。</p> + +<h4 id="The_good" name="The_good">良好</h4> + +<p>いくつかの要素はプラットフォーム間の問題があるとしても、ほとんど問題なくスタイルを設定できます。これらは以下の構造的な要素が含まれます:</p> + +<ol> + <li>{{HTMLElement("form")}}</li> + <li>{{HTMLElement("fieldset")}} と {{HTMLElement("legend")}}</li> + <li>単一行のテキスト {{HTMLElement("input")}} (例 text, url, email...のタイプ) <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code>を除く</li> + <li>複数行の {{HTMLElement("textarea")}}</li> + <li>ボタン ({{HTMLElement("input")}} と {{HTMLElement("button")}}の両方)</li> + <li>{{HTMLElement("label")}}</li> + <li>{{HTMLElement("output")}}</li> +</ol> + +<h4 id="The_bad" name="The_bad">不良</h4> + +<p>一部の要素はほとんどスタイル設定ができず、時に CSS3 の高度な知識やトリックが必要になるかもしれません。</p> + +<ol> + <li>チェックボックスとラジオボタン</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> +</ol> + +<p>これら特殊なケースをどのように扱うかについては、<a href="/ja/docs/Advanced_styling_for_HTML_forms" title="Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a>の記事で見ていきます。</p> + +<h4 id="The_ugly" name="The_ugly">劣悪</h4> + +<p>一部の要素は、CSS でスタイルを設定できません。たとえば次のもの:</p> + +<ul> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>のような日付関連コントロール</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/range"><input type="range"></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code></li> + <li>ドロップダウンウィジェットの作成に含まれる要素、{{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("datalist")}}を含む。</li> + <li>{{HTMLElement("progress")}} と {{HTMLElement("meter")}}</li> +</ul> + +<p>これらの要素をスタイル設定するのに関して何ができるかについては、<a href="/ja/docs/Advanced_styling_for_HTML_forms" title="Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a>の記事で見ていきます。</p> + +<p>これらすべてのウィジェットの主な問題は、ウィジェットの構造がとても複雑であるという事実と、(コントロールの width や margin の変更といった)基本的なスタイル設定を超えると、現在の CSS では(例えばカレンダー日付ピッカーや、選択肢のリストを表示する<select>のボタンのような)ウィジェットの細かい部分すべてにスタイルを設定できるほどの表現力がないことによります。</p> + +<p>これらのウィジェットを完全にカスタマイズしたい場合は、HTML, CSS, JavaScript を使って独自のものを作成する必要があります。それはこのコアフォームの記事の範囲を超えますが、高度な記事の<a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets" title="HTML/Forms/How_to_build_custom_form_widgets">カスタムウィジェットの作成方法</a>の記事で説明します。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: フォームコントロールの内部コンポーネントにスタイル設定するプロプライエタリな CSS 疑似要素、例えば {{cssxref('::-moz-range-track')}}がありますが、これはブラウザー同士で整合していないので、これに頼るべきではありません。これについては後程でも触れます。</p> +</div> + +<h2 id="The_good_2" name="The_good_2">良好</h2> + +<p>CSS での<a href="/ja/docs/HTML/Forms/Styling_HTML_forms#The_good" title="HTML/Forms/Styling_HTML_forms#The_good">スタイル設定が容易な要素</a>は、振る舞いが他の HTML 要素とほとんど同じであるため、問題に直面することはないでしょう。ただし、ブラウザー間でユーザーエージェントのスタイルシートが若干矛盾するかもしれませんので、より簡単にスタイルを設定できるようにするためのトリックがあります。</p> + +<p>上記で述べた基本的な CSS ツールと同じく、いくつかのセレクターが与えられます — UI 疑似クラス — これにより現在の UI の状態に基づくスタイル設定ができます。これは次の記事である、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">UI 疑似クラス</a>で扱います。</p> + +<p>この記事の最後で基本的なフォームコントロールのスタイル設定と配置について理解できる実例を詳しく見ていきます。しかしその前に、知っておくと良いフォームスタイル設定の特定の面をいくつか述べておきます。</p> + +<h3 id="Fonts_and_text" name="Fonts_and_text">フォントとテキスト</h3> + +<p>CSS のフォントやテキストの機能は、任意のウィジェットで容易に使用できます (また、フォームウィジェットで {{cssxref("@font-face")}} も使用できます)。ただし、ブラウザーの動作にしばしば矛盾があります。デフォルトで、一部のブラウザーは親から {{cssxref("font-family")}} や {{cssxref("font-size")}} を継承しません。代わりに多くのブラウザーでは、システムのデフォルトの体裁を使用します。フォームの体裁を他のコンテンツと一致させるには、以下のルールをスタイルシートに追加するとよいでしょう:</p> + +<pre class="brush: css notranslate">button, input, select, textarea { + font-family : inherit; + font-size : 100%; +}</pre> + +<p>{{cssxref('inherit')}} のプロパティ値で、プロパティ値は計算された親要素のプロパティ値に一致するようになります。つまり親の値を継承します。</p> + +<p>以下のスクリーンショットで違いを示します。左側は Mac OS X の Chrome における<code><input type="text"></code>, <code><input type="date"></code>, {{htmlelement('select')}}, {{htmlelement('textarea')}}, <code><input type="submit"></code>, <code><button></code> 要素の既定のレンダリングで、プラットフォームのデフォルトフォントスタイルを使用しています。右側は同じ要素ですが、フォントを調和させるスタイルルールを適用したものです。</p> + +<p><img alt="Form controls with default and inherited font families. 既定では, some types are serif and others are sans serif. Inheriting should change the fonts of all to the parent's font family - in this case a paragraph. Oddly, input of type submit does not inherit from the parent paragraph." src="https://mdn.mozillademos.org/files/16903/forms_fontfamily.png" style="height: 260px; width: 483px;"></p> + +<p>既定はいろいろと変わります。継承により、フォントは親のフォントファミリーに変更されます — ここでは親コンテナのデフォルトの serif フォントです。ほぼすべてそうですが、例外として Chrome では<code><input type="submit"></code> は親段落を継承しません。むしろ、{{cssxref('font-family#Values', 'font-family: system-ui')}}を使います。これは同等な入力タイプの中で <code><button></code> 要素を使う理由です!</p> + +<p>フォームはシステムのデフォルトスタイルを使用するか、コンテンツに合うよう設計されたカスタムスタイルを使用するかについては多くの議論があります。これを決めるのは、設計者としてサイトやウェブアプリケーションを作成するあなた次第です。</p> + +<h3 id="Box_model" name="Box_model">ボックスモデル</h3> + +<p>すべてのテキストフィールドは、CSS のボックスモデルに関する全プロパティ ({{cssxref("width")}}、{{cssxref("height")}}、{{cssxref("padding")}}、{{cssxref("margin")}}、および {{cssxref("border")}}) を完全にサポートしています。ただし前述のとおり、ブラウザーがウィジェットを表示する際はシステムのデフォルトスタイルに依存します。コンテンツに対してそれらをどのように混ぜ合わせるかを決めるのは、あなた次第です。ウィジェットでネイティブのルックアンドフィールを維持したいのでしたら、ウィジェットのサイズを調和させたい場合に若干の問題に直面するでしょう。</p> + +<p><strong>これは各ウィジェットがボーダー、パディング、マージンについて独自のルールを持っているためです。</strong>このためさまざまなウィジェットを同じサイズにしたい場合に、{{cssxref("box-sizing")}} プロパティを使用しなければなりません:</p> + +<pre class="brush: css notranslate">input, textarea, select, button { + width : 150px; + padding: 0; + margin: 0; + box-sizing: border-box; +}</pre> + +<p>下のスクリーンショットで、左の列は<input type="radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date"> input, {{htmlelement('select')}}, {{htmlelement('textarea')}},<input type="submit">, {{htmlelement('button')}} の既定の描画、右の列は同じ要素に上のルールを使用して作成したものです。各種のウィジェットのプラットフォームのデフォルトルールと比較して、すべての要素が同じ領域を占めるようにすることが可能な点に注目してください。</p> + +<p><img alt="box model properties effect most input types." src="https://mdn.mozillademos.org/files/16904/boxmodel_formcontrols1.png" style="height: 365px; width: 359px;"></p> + +<p>スクリーンショットで明白でないことはラジオボタンとチェックボックスコントロールが同じであるが、水平位置が {{cssxref('width')}} プロパティで与えられる 150px の中心にあることです。他のブラウザーではウィジェットを中心揃えにしませんが、割り当てられたスペースに付着させます。</p> + +<h3 id="legend" name="legend">legend 配置</h3> + +<p>{{HTMLElement("legend")}} 要素はポジショニングを除いて、スタイル設定の問題はありません。既定では、それは親 {{HTMLElement("fieldset")}} の上ボーダーの前面に、左上の隅の近くに配置されます。これを他の場所、例えば fieldset内のどこかや、左下の隅に配置するには、配置に頼る必要があります。</p> + +<p>下記の例を見てください:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/native-form-widgets/positioned-legend.html", '100%', 400)}}</p> + +<p>この方法で legend を配置するには、次の CSS を使います(簡単のため他の宣言は削除しています):</p> + +<pre class="brush: css notranslate">fieldset { + position: relative; +} + +legend { + position: absolute; + bottom: 0; + right: 0; +}</pre> + +<p><code><fieldset></code> も配置される必要があり、<code><legend></code> がそれに合わせて位置が決まるように (そうでなければ <code><legend></code> は <code><body></code>に合わせて位置決めされます)</p> + +<p>{{HTMLElement("legend")}} 要素はアクセシビリティのためとても重要です — これはアシスト技術により fieldset 内の各フォーム要素のラベルとして話されます — が、上のようなテクニックの使用は良いです。legend コンテンツは同じ方法で話されます; 単に見た目の位置が変更されます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code><legend></code>の位置決めに役立つ{{cssxref("transform")}}プロパティも使用できますが、例えばa <code>transform: translateY();</code>を使って配置するとき、移動はするものの <code><fieldset></code> の枠に劣悪なギャップができて、除去が困難です。</p> +</div> + +<h2 id="A_specific_styling_example" name="A_specific_styling_example">特定のスタイル設定の例</h2> + +<p>HTML フォームにスタイルを設定する方法の具体例を見ていきましょう。以下のような "はがき" 風の連絡フォームを作成します。<a href="https://mdn.github.io/learning-area/html/forms/postcard-example/">完成バージョンはこちら</a>。</p> + +<p>この例に従うには、<a href="https://github.com/mdn/learning-area/blob/master/html/forms/postcard-example/postcard-start.html">postcard-start.html ファイル</a>をコピーして、次のやり方に従ってください。</p> + +<h3 id="The_HTML" name="The_HTML">HTML</h3> + +<p>HTML は、<a href="/ja/docs/HTML/Forms/My_first_HTML_form" title="HTML/Forms/My_first_HTML_form">ガイドの最初の記事</a>で使用したものより少しだけ複雑です。いくつか ID やタイトルを追加しています。</p> + +<pre class="brush: html notranslate"><form> + <h1>to: Mozilla</h1> + + <div id="from"> + <label for="name">from:</label> + <input type="text" id="name" name="user_name"> + </div> + + <div id="reply"> + <label for="mail">reply:</label> + <input type="email" id="mail" name="user_email"> + </div> + + <div id="message"> + <label for="msg">Your message:</label> + <textarea id="msg" name="user_message"></textarea> + </div> + + <div class="button"> + <button type="submit">Send your message</button> + </div> +</form></pre> + +<p>上記のコードを HTML の body に追加します。</p> + +<h3 id="Organizing_your_assets" name="Organizing_your_assets">Organizing your assets</h3> + +<p>ここからがおもしろいところです! コードを書き始める前に、ここでは 3 つの追加要素が必要です:</p> + +<ol> + <li>はがきの<a href="https://developer.mozilla.org/files/4151/background.jpg" title="The postcard background">背景</a> — この画像をダウンロードして作業している HTML ファイルと同じディレクトリーに保存します。</li> + <li>タイプライター風フォント: <a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external" title="http://www.fontsquirrel.com/fonts/Secret-Typewriter">fontsquirrel.com の "Secret Typewriter" </a> — TTF ファイルを上記と同じディレクトリーにダウンロードします。</li> + <li>手書き風フォント: <a href="http://www.fontsquirrel.com/fonts/Journal" rel="external" title="http://www.fontsquirrel.com/fonts/Journal">fontsquirrel.com の "Journal" </a> — TTF ファイルを上記と同じディレクトリーにダウンロードします。</li> +</ol> + +<p>始める前にフォントの処理が必要です:</p> + +<ol> + <li>fontsquirrel <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a> に移動します。</li> + <li>フォームを使って、両方のフォントファイルをアップロードして webfont キットを生成します。キットをコンピューターにダウンロードします。</li> + <li>zip ファイルを展開します。</li> + <li>展開した中身には 2 つの <code>.woff</code> ファイルと 2 つの <code>.woff2</code> ファイルがあります。このファイルを、前と同じ fonts というディレクトリーにコピーします。各フォントの 2 つのファイルはブラウザー互換性を最大化するのに使います; より詳しい情報は <a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> の記事を見てください。</li> +</ol> + +<h3 id="The_CSS" name="The_CSS">CSS</h3> + +<p>ここから例の CSS を見ていきましょう。{{htmlelement("style")}} 要素の中にすべてのコードブロックを一つ一つ追加します。</p> + +<h4 id="Overall_layout" name="Overall_layout">全体レイアウト</h4> + +<p>まず、{{cssxref("@font-face")}} ルールと、すべての{{HTMLElement("body")}} と {{HTMLElement("form")}} 要素に設定するスタイルを定義して準備します。fontsquirrel 出力が上記で述べたものと異なる場合、<code>stylesheet.css</code> ファイル内にダウンロード済みの webfont キットの中から正しい <code>@font-face</code> ブロックを見つけることができます(下記の <code>@font-face</code> ブロックをそれで置換し、パスをフォントファイルのものに更新する必要があります):</p> + +<pre class="brush: css notranslate">@font-face { + font-family: 'handwriting'; + src: url('fonts/journal-webfont.woff2') format('woff2'), + url('fonts/journal-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'typewriter'; + src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'), + url('fonts/veteran_typewriter-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +body { + font : 1.3rem sans-serif; + padding : 0.5em; + margin : 0; + background : #222; +} + +form { + position : relative; + width : 740px; + height : 498px; + margin : 0 auto; + padding: 1em; + box-sizing: border-box; + background : #FFF url(background.jpg); + + /* we create our grid */ + display : grid; + grid-gap : 20px; + grid-template-columns : repeat(2, 1fr); + grid-template-rows : 10em 1em 1em 1em; +}</pre> + +<p>注意として、フォームをレイアウトするのに <a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> と <a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> を使っています。これで、タイトルやフォーム要素といった各要素を配置できます:</p> + +<pre class="brush: css notranslate">h1 { + font : 1em "typewriter", monospace; + align-self : end; +} + +#message { + grid-row: 1 / 5; +} + +#from, #reply { + display: flex; +}</pre> + +<h4 id="Labels_and_controls" name="Labels_and_controls">ラベルとコントロール</h4> + +<p>そして、フォーム要素自体に対するスタイル設定を始めます。まずは、{{HTMLElement("label")}} に適切なフォントを割り当てましょう。</p> + +<pre class="brush: css notranslate">label { + font : .8em "typewriter", sans-serif; +}</pre> + +<p>テキストフィールドには、共通のルールがいくつか必要です。{{cssxref("border")}} や {{cssxref("background")}} の削除と {{cssxref("padding")}} や {{cssxref("margin")}} の再定義を行います。</p> + +<pre class="brush: css notranslate">input, textarea { + font : 1.4em/1.5em "handwriting", cursive, sans-serif; + border : none; + padding : 0 10px; + margin : 0; + width : 80%; + background : none; +}</pre> + +<p>これらフィールドのひとつがフォーカスを得たときに、ライトグレー色で透過する背景で強調します。一部のブラウザーで付加されるデフォルトのフォーカス強調を取り除くため、{{cssxref("outline")}} プロパティを追加することが重要ですので注意してください。</p> + +<pre class="brush: css notranslate">input:focus, textarea:focus { + background : rgba(0,0,0,.1); + border-radius: 5px; +}</pre> + +<p>テキストフィールドのスタイル設定が完了して、次は単一行および複数行のテキストフィールドの表示が同じになるよう調整しなければなりません。これは、一般的にこれらのデフォルト表示が同じでないためです。</p> + +<h4 id="Tweaking_the_textareas" name="Tweaking_the_textareas">Tweaking the textareas</h4> + +<p>{{HTMLElement("textarea")}} 要素はデフォルトでブロック要素としてレンダリングされるようにします。ここで重要なことは、{{cssxref("resize")}} プロパティと {{cssxref("overflow")}} プロパティの 2 つです。ここでは固定サイズでデザインしているため、ユーザーが複数行のテキストフィールドをリサイズできないように <code>resize</code> プロパティを使用します。{{cssxref("overflow")}} プロパティは、ブラウザー間でのフィールドの一貫性を向上させるために使用します。これのデフォルト値が <code>auto</code> であるブラウザーと <code>scroll</code> であるブラウザーが存在します。この例では、すべてのブラウザーが <code>auto</code> になるようにするのがよいでしょう。</p> + +<pre class="brush: css notranslate">textarea { + display : block; + + padding : 10px; + margin : 10px 0 0 -10px; + width : 100%; + height : 90%; + + border-right: 1px solid; + + /* resize : none; */ + overflow: auto; +}</pre> + +<h4 id="Styling_the_submit_button" name="Styling_the_submit_button">送信ボタンにスタイル設定する</h4> + +<p>{{HTMLElement("button")}} 要素は、CSS によってより便利になります。<a href="/ja/docs/CSS/Pseudo-elements" title="CSS/Pseudo-elements">疑似要素</a>を含めて、行いたいことが何でもできます!</p> + +<pre class="brush: css notranslate">button { + padding : 5px; + font : bold .6em sans-serif; + border : 2px solid #333; + border-radius: 5px; + background : none; + cursor : pointer; + transform : rotate(-1.5deg); +} + +button:after { + content : " >>>"; +} + +button:hover, +button:focus { + outline : none; + background : #000; + co</pre> + +<h3 id="The_final_result" name="The_final_result">最終結果</h3> + +<p>これでよし! フォームは次のようになるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/17063/updated-form-screenshot.jpg" style="border-style: solid; border-width: 1px; height: 497px; width: 740px;"></p> + +<div class="note"> +<p><strong>注</strong>: 例が期待どおり動かず、われわれのバージョンを確認したい場合、GitHub にあります — <a href="https://mdn.github.io/learning-area/html/forms/postcard-example/">ライブ版</a>を見てください (<a href="https://github.com/mdn/learning-area/tree/master/html/forms/postcard-example">ソースコード</a>も見てください)。</p> +</div> + +<h2 id="スキルを試しましょう！"><strong>スキルを試しましょう！</strong></h2> + +<p>この記事の終わりまで到達しました。しかし、肝要な点を思い起こせるでしょうか？次に進む前に、テストによって知識の定着を試すことができます——<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Styling_basics">スキルテスト：スタイリングの基本</a>をご覧ください。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>ご覧いただいたとおり、テキストフィールドとボタンだけでフォームを作成する限りでは、CSS を使用したスタイル設定は容易です。<a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms" title="Advanced_styling_for_HTML_forms">次の記事では</a>、"不良" や "劣悪" カテゴリに入っているウィジェットの扱い方を見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/Forms/Other_form_controls","Learn/Forms/Advanced_form_styling","Learn/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<h2 id="In_this_module" name="In_this_module"><a class="button section-edit only-icon" href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Other_form_controls$edit#In_this_module" rel="nofollow, noindex"><span>E</span></a></h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Your_first_form">初めてのフォーム</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_structure_a_web_form">フォームの構築方法</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Basic_native_form_controls">ネイティブフォームウィジェット</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Styling_web_forms">フォームへのスタイル設定</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 class="highlight-spanned" id="Advanced_Topics" name="Advanced_Topics"><span class="highlight-span">上級トピック</span></h3> + +<h3 class="highlight-spanned" id="Advanced_Topics" name="Advanced_Topics"><a class="local-anchor" href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Other_form_controls#Advanced_Topics"><span>セクション</span></a></h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/forms/the_native_form_widgets/index.html b/files/ja/learn/forms/the_native_form_widgets/index.html new file mode 100644 index 0000000000..f0ddcdc09d --- /dev/null +++ b/files/ja/learn/forms/the_native_form_widgets/index.html @@ -0,0 +1,339 @@ +--- +title: 基本的なネイティブフォームコントロール +slug: Learn/Forms/The_native_form_widgets +tags: + - Example + - Forms + - Guide + - HTML + - Intermediate + - Web +translation_of: Learn/Forms/Basic_native_form_controls +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}</div> + +<p class="summary"><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_structure_a_web_form">直前の記事</a>では、機能的なウェブフォームの例をマークアップし、いくつかのフォームコントロールとよくある構造要素を導入し、アクセシビリティのベストプラクティスを見てきました。次にさまざまなフォームコントロールやウィジェットの機能を詳しく見ていきます — 色々な種類のデータを集めるのにどんなオプションが使えるのかを見ていきます。とりわけこの記事では、ウェブの初期からある全てのブラウザーで利用できる、オリジナルのフォームコントロールを見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシーと、基本的な <a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の理解</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>データを収集するためにブラウザーで使用できるネイティブフォームウィジェットの種類と、それらを HTML を使用して実装する方法を理解する。</td> + </tr> + </tbody> +</table> + +<p>{{HTMLelement('form')}}, {{HTMLelement('fieldset')}}, {{HTMLelement('legend')}}, {{HTMLelement('textarea')}}, {{HTMLelement('label')}}, {{HTMLelement('button')}}, {{HTMLelement('input')}}といったフォーム要素については既に見てきました。この記事では次を網羅します:</p> + +<ul> + <li>{{HTMLelement('input/button', 'button')}}, {{HTMLelement('input/checkbox', 'checkbox')}}, {{HTMLelement('input/file', 'file')}}, {{HTMLelement('input/hidden', 'hidden')}}, {{HTMLelement('input/image', 'image')}}, {{HTMLelement('input/password', 'password')}}, {{HTMLelement('input/radio', 'radio')}}, {{HTMLelement('input/reset', 'reset')}}, {{HTMLelement('input/submit', 'submit')}}, and {{HTMLelement('input/text', 'text')}}といったよくある入力タイプ</li> + <li>すべてのフォームコントロールに共通する属性のいくつか</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: この記事で説明されている機能のほとんどは、ブラウザー間で幅広くサポートされています。これに対する例外に注意しましょう。より正確な詳細が必要な場合は、<a href="/ja/docs/Web/HTML/Element#Forms">HTML フォーム要素のリファレンス</a>、特に広範囲にわたる <a href="/ja/docs/Web/HTML/Element/input"><input> 型</a>の参照を参照してください。</p> +</div> + +<h2 id="Text_input_fields" name="Text_input_fields">テキスト入力フィールド</h2> + +<p>テキスト {{htmlelement("input", "入力")}} フィールドは最も基本的なフォームウィジェットです。これらはユーザーがあらゆる種類のデータを入力できるとても便利な方法です。</p> + +<div class="note"> +<p><strong>注</strong>: HTML フォームのテキストフィールドは単純なプレーンテキストの入力コントロールです。つまり、これらを使って<a href="/ja/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla">リッチエディット</a> (太字、斜体など) を実行することはできません。見かけるすべてのリッチテキストエディタは、HTML、CSS、および JavaScript で作成されたカスタムウィジェットです。</p> +</div> + +<p>すべてのテキストフィールドに共通する動作があります:</p> + +<ul> + <li>{{htmlattrxref("readonly","input")}} (ユーザーは入力値を変更できないが他のフォーム値とともに送信される) あるいは {{htmlattrxref("disabled","input")}} (入力値は編集できず、値も他のフォームデータとともに送られません) とすることができます。</li> + <li>{{htmlattrxref("placeholder","input")}} を設定することができます。これは、ボックスの目的を簡単に説明する、ボックス内に表示されるテキストです。</li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/size"><code>size</code></a> (ボックスの物理的なサイズ) や <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a> (ボックスに入力できる最大文字数) による制限が可能です。</li> + <li>ブラウザーがサポートしていれば、(<a href="/ja/docs/Web/HTML/Global_attributes/spellcheck"><code>spellcheck</code></a>属性を用いて) <a href="/ja/docs/Web/HTML/Element/Input#attr-spellcheck" title="HTML/Element/input#attr-spellcheck">スペルチェック</a>の恩恵を受けられます。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: {{htmlelement("input")}} 要素は、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/type">type</a></code> 属性によってさまざまなフォームとなるため、、HTML要素の中でも特別です。単一行のテキストフィールド、テキスト入力のないコントロール、時間と日付のコントロール、チェックボックス、カラーピッカー、ボタンといったテキスト入力のないコントロールなど、ほとんどのタイプのフォームウィジェットの作成に使用されます。</p> +</div> + +<h3 id="Single_line_text_fields" name="Single_line_text_fields">単一行のテキストフィールド</h3> + +<p>単一行のテキストフィールドは、{{htmlattrxref("type","input")}} 属性値が <code>text</code> に設定されている {{HTMLElement("input")}} 要素を使用するか、{{htmlattrxref("type","input")}} 属性を指定しない場合( <code>text</code> がデフォルト値になり)に作成されます。{{htmlattrxref("type","input")}} 属性に指定した値がブラウザーに認識されない場合 (たとえば <code>type="color"</code> を指定してブラウザーがネイティブの色ピッカーをサポートしていない場合)、この属性の値のテキストは代替値になります。</p> + +<div class="note"> +<p><strong>注</strong>: GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> に、すべての単一行テキストフィールドタイプの例があります (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">こちらも参照してください</a>)。</p> +</div> + +<p>これは基本的な単一行のテキストフィールドの例です。</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>comment<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>comment<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>I<span class="punctuation token">'</span>m a text field<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<p>単一行のテキストフィールドは、ひとつだけ厳密な制約があります: 改行を含むテキストを入力した場合、ブラウザーはデータを送信する前に改行を取り除きます。</p> + +<p><em>下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効にされたテキスト入力を示しています。</em></p> + +<p><img alt="Screenshot of the disabled attribute and default :focus styles on a text input in Firefox, Safari, Chrome and Edge." src="https://mdn.mozillademos.org/files/17021/disabled.png" style="height: 113px; width: 442px;"></p> + +<div class="blockIndicator note"> +<p>HTML5 では {{htmlattrxref("type","input")}} 属性に専用の値を追加することで、基本的な単一行のテキストフィールドを拡張しています。これらの値もやはり {{HTMLElement("input")}} 要素を単一行のテキストフィールドにしますが、フィールドに対して追加の制約や機能を付加します。</p> +</div> + +<h4 id="Password_field" name="Password_field">パスワードフィールド</h4> + +<p>このタイプのフィールドは、{{htmlattrxref("type","input")}} 属性の値 <code>password</code> を使用して設定できます:</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pwd<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pwd<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<p><code>password</code> の値は入力したテキストに対する特別な制約は付加しませんが、フィールドの値を隠します(例、ドットやアスタリスク)ので読むことができません。</p> + +<p>これはユーザーインターフェイスの機能でしかないことに注意してください。テキストは JavaScript を使用してあなた自身でエンコードしなければ、平文で送信されてしまい、セキュリティには良くありません — 悪い組織がデータを遮ってパスワードや、クレジットカードデータや、送信したあらゆるものを盗むことがあります。ユーザーからこれを保護するためにはフォームを含むあらゆるページをセキュア通信でホストし (つまり <code>https://</code> ... アドレスにて) 、データ送信前に暗号化することです。</p> + +<p>最近のブラウザーは、安全でない接続を介してフォームデータを送信することによるセキュリティへの影響を認識しており、ユーザーが安全でないフォームを使用しないように警告を実装しています。Firefox が実装しているものの詳細については、<a href="/ja/docs/Web/Security/Insecure_passwords">安全でないパスワード</a>をご覧ください。</p> + +<h3 id="Hidden_content" name="Hidden_content">隠しコンテンツ</h3> + +<p>もう１つのオリジナルなテキストコントロールは <code>hidden</code> 入力タイプです。これは他のフォームデータとともにサーバー送信されるがユーザーからは見えないデータを持つのに使われています — 例えば命令を発行するときにサーバーにタイムスタンプを送りたい場合。これは隠れているので、ユーザーが見ることも、意図せずに値を編集することもなく、フォーカスを得ることもないしスクリーンリーダーが気づくこともありません。</p> + +<pre class="brush: html notranslate"><input type="hidden" id="timestamp" name="timestamp" value="1286705410"> +</pre> + +<p>このような要素を作成する場合は、<code>name</code> 属性と <code>value</code> 属性の設定が必要です。この値は JavaScript にて動的にセットできます。<code>hidden</code> 入力タイプには関連したラベルはありません。</p> + +<p>その他のテキストタイプ、{{HTMLElement("input/search", "search")}}, {{HTMLElement("input/url", "url")}}, と{{HTMLElement("input/tel", "tel")}}, は HTML5 で追加されました。これは次のチュートリアルの「HTML5 入力タイプ」にて網羅されます。</p> + +<h2 id="Checkable_items" name="Checkable_items">チェック可能アイテム:チェックボックスとラジオボタン</h2> + +<p>チェック可能アイテムは、そのものや、関連したラベルをクリックすることで状態を変更できるコントロールです。チェック可能アイテムは 2 種類あります: チェックボックスとラジオボタンです。どちらもデフォルトでチェックするかを示すために、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes//checked"><code>checked</code></a> 属性を使用します。</p> + +<p>これらのウィジェットは、他のフォームウィジェットと同じようには動作しない点が特筆されます。ほとんどのフォームウィジェットではフォームを送信すると、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/name"><code>name</code></a> 属性を持つすべてのウィジェットは値がなくても送信します。チェック可能アイテムでは、それらがチェックされている場合にのみ値を送信します。チェックされていない場合は、name も含めて何も送信しません。チェックされているが値がない場合、name が <em>on</em> という値で送信されます。</p> + +<div class="note"> +<p><strong>注</strong>: このセクションの例は、<a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> として GitHub にあります (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">こちらも参照してください</a>)。</p> +</div> + +<p>最大限のユーザービリティ/アクセシビリティを実現するために、関連項目の各リストを {{htmlelement("fieldset")}} で囲み、リストの全体的な説明を示す {{htmlelement("legend")}} で囲むことをお勧めします。{{htmlelement("label")}}/{{htmlelement("input")}} 要素の個々のペアは、それぞれ独自のリスト項目 (または同様のもの) に含める必要があります。関連した {{htmlelement('label')}} はラジオボタンやチェックボックスの直後に、{{htmlelement("legend")}}の中身にラジオボタンやチェックボックスのグループの説明が置かれます。これは上の例に示されています。</p> + +<h3 id="Check_box" name="Check_box">チェックボックス</h3> + +<p>チェックボックスは、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/type"><code>type</code></a> 属性を {{HTMLElement("input/checkbox", "checkbox")}} に設定した {{HTMLElement("input")}} 要素で作成します。</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/checked">checked</a></code> 属性を含んだチェックボックスはページ読み込み時に自動的にチェックされます。チェックボックスまたはその関連ラベルをチェックするとチェックボックスのオン/オフがトグルされます。</p> + +<p>下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効にされたチェックボックスを示しています。</p> + +<p><img alt="Default, focused and disabled Checkboxes in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10" src="https://mdn.mozillademos.org/files/17024/checkboxes.png" style="height: 203px; width: 293px;"></p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/checked">checked</a></code> 属性のあるあらゆるチェックボックスやラジオボタンには、チェックされていない場合でも、対応する {{cssxref('<code>:default')}}</code> 仮想クラスがあります。現在チェックされているものには<code>{{cssxref(':checked')}}</code> 仮想クラスがあります。</p> +</div> + +<p id="Radio_button">チェックボックスのオンオフ性質により、チェックボックスは、規定のチェックボックスを拡張してトグルスイッチのように見えるボタンを作っている開発者やデザイナーにとって、トグルボタンとして考えられます。<a href="https://mdn.github.io/learning-area/html/forms/toggle-switch-example/">ここで動作する例を</a> 見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/toggle-switch-example/index.html">ソースコード</a>も見られます)。</p> + +<h3 id="Radio_button" name="Radio_button">ラジオボタン</h3> + +<p>ラジオボタンは、{{htmlattrxref("type","input")}} 属性を <code>radio</code> に設定した {{HTMLElement("input")}} 要素で作成します。</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<p>いくつかのラジオボタンをまとめることができます。{{htmlattrxref("name","input")}} 属性で同じ値を共有すると、それらのラジオボタンは同じボタングループに属するとみなされます。グループ内でボタンは同時に 1 つだけチェックできます。つまり、あるラジオボタンをチェックすると、他のラジオボタンは自動的にチェックが外れます。フォームを送信するときは、チェックしているラジオボタンのみの値を送信します。何もチェックしていない場合はラジオボタンの集まり全体が未知の状態であるとみなし、フォーム送信時は値を送信しません。</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>fieldset</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>legend</span><span class="punctuation token">></span></span>What is your favorite meal?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>legend</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Soup<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>curry<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Curry<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>curry<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>curry<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pizza<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Pizza<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pizza<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pizza<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>fieldset</span><span class="punctuation token">></span></span></code></pre> + +<p>下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、チェックなしとチェックされたラジオボタン、フォーカスされた、また無効でチェックなしとチェックされたラジオボタンを示しています。</p> + +<p><img alt="Radio buttons on Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10" src="https://mdn.mozillademos.org/files/17022/radios.png" style="height: 142px; width: 196px;"></p> + +<h2 id="Buttons" name="Buttons">ボタン</h2> + +<p>ラジオボタンはその名に反して、実際のボタンではありません。実際のボタンを見てみましょう! ボタンを生成するには、3 種類の入力タイプがあります:</p> + +<dl> + <dt>{{原語併記("送信", "Submit")}}</dt> + <dd>フォームデータをサーバーに送信します。{{HTMLElement("button")}} 要素の場合、<code>type</code> 属性 (または <code>type</code> の無効な値) を省略すると、送信ボタンが表示されます。</dd> + <dt>{{原語併記("リセット", "Reset")}}</dt> + <dd>すべてのフォームウィジェットをデフォルト値にリセットします。</dd> + <dt><code>button</code></dt> + <dd>自動的な効果のないボタンで、JavaScript コードを用いてカスタマイズできるもの。</dd> +</dl> + +<p>それから、{{htmlelement("button")}} 要素それ自体もあります。これは値が <code>submit</code>、<code>reset</code> または <code>button</code> である <code>type</code> 属性をとり、上記の 3 つの <code><input></code> 種別を模倣できます。この 2 つの主な違いは実際の <code><button></code> 要素の方が多くのスタイル設定できることです。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>image</code> 入力タイプもボタンとしてレンダリングされます。それはあとで見ます。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: このセクションの例は <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html">button-examples.html</a> として GitHub にあります (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html">こちらも参照してください</a>)。</p> +</div> + +<p>ボタンは {{HTMLElement("button")}} 要素か {{HTMLElement("input")}} 要素で作成します。どの種類のボタンを表示するかを指定するのは、{{htmlattrxref("type","input")}} 属性の値です:</p> + +<h3 id="submit" name="submit">送信</h3> + +<pre class="brush: html notranslate"><button type="submit"> + This a <br><strong>submit button</strong> +</button> + +<input type="submit" value="This is a submit button"></pre> + +<h3 id="reset" name="reset">リセット</h3> + +<pre class="brush: html notranslate"><button type="reset"> + This a <br><strong>reset button</strong> +</button> + +<input type="reset" value="This is a reset button"></pre> + +<h3 id="anonymous" name="anonymous">無名</h3> + +<pre class="brush: html notranslate"><button type="button"> + This an <br><strong>anonymous button</strong> +</button> + +<input type="button" value="This is an anonymous button"></pre> + +<p>ボタンは {{HTMLElement("button")}} 要素でも {{HTMLElement("input")}} 要素でも、常に同じ動作になります。上記のサンプルでわかるように、{{HTMLElement("button")}} 要素はラベルとして HTML コンテンツを使用できて、これは開始と終了の<code><button></code>タグの間に挿入されます。一方で{{HTMLElement("input")}} 要素は空要素です。つまり <code>value</code> 属性の中にラベルが挿入され、このためプレーンテキストのコンテンツのみ使用できます。</p> + +<p>下記の例は macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効なボタンを示しています。</p> + +<p><img alt="Default, focused and disabled button input types in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10" src="https://mdn.mozillademos.org/files/17023/buttons.png" style="height: 182px; width: 286px;"></p> + +<h3 id="Image_button" name="Image_button">画像ボタン</h3> + +<p><strong>画像ボタン</strong>コントロールは {{HTMLElement("img")}} 要素とまったく同じように表示されますが、ユーザーがクリックすると送信ボタン (前述) のように動作します。</p> + +<p>画像ボタンは、{{htmlattrxref("type","input")}} 属性を <code>image</code> に設定した {{HTMLElement("input")}} 要素で作成します。</p> + +<p>この要素は {{HTMLElement("img")}} 要素とまったく同じ属性をサポートして、さらにフォームボタンがサポートする属性もすべてサポートします。</p> + +<pre class="brush: html notranslate"><input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> + +<p>画像ボタンをフォームの送信に使用する際にこのウィジェットは自身の値を送信しませんが、代わりに画像上でクリックした位置の X 座標と Y 座標を送信します (座標は画像に対して相対的、つまり画像の左上隅が座標 0, 0 になります)。座標は 2 つのキーと値の組として送信されます。</p> + +<ul> + <li>X 値のキーは {{htmlattrxref("name","input")}} 属性の値の後ろに文字列 "<em>.x</em>" をつけたもの、</li> + <li>Y 値のキーは {{htmlattrxref("name","input")}} 属性の値の後ろに文字列 "<em>.y</em>" をつけたものです。</li> +</ul> + +<p>サンプルをご覧ください。フォームの画像上の座標 (123, 456) でクリックすると、 <code>get</code> メソッド経由で送信されて、以下のような値の追加された URL が送信されます:</p> + +<pre class="notranslate">http://foo.com?pos.x=123&pos.y=456</pre> + +<p>これは "hot map" を作成するためにとても便利な手段です。これらの値がどのように送信あるいは取得されるかについては、<a href="https://developer.mozilla.org/ja/docs/HTML/Forms/Sending_and_retrieving_form_data" title="HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a>の記事で詳しく説明します。</p> + +<h2 id="File_picker" name="File_picker">ファイルピッカー</h2> + +<p>初期のHTMLであった最後の <code><input></code> タイプがあります: ファイル入力タイプです。フォームで、ファイルをサーバーに送信できます。この特定操作については以下の記事で詳しく説明します: <a href="/ja/docs/HTML/Forms/Sending_and_retrieving_form_data" title="HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a>。ファイルピッカーウィジェットで、ユーザーは送信するファイルを 1 つ以上選択できます。</p> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file">ファイルピッカーウィジェット</a>を作成するには、{{htmlattrxref("type","input")}} 属性を <code>file</code> に設定した {{HTMLElement("input")}} 要素を使用します。{{htmlattrxref("accept","input")}} 属性を使用して、受け入れるファイルの種類を制限できます。加えて、ユーザーが複数のファイルを選択できるようにしたい場合は、{{htmlattrxref("multiple","input")}} 属性を付加します。</p> + +<h4 id="Example_3" name="Example_3">例</h4> + +<p>以下の例では、画像ファイルを要求するファイルピッカーを作成しています。ユーザーは複数のファイルを指定できます。</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">accept</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image/*<span class="punctuation token">"</span></span> <span class="attr-name token">multiple</span><span class="punctuation token">></span></span></code></pre> + +<p>いくつかのモバイルデバイスでは、ファイルピッカーは、次のようにキャプチャー情報を <code>accept</code> 属性に追加することで、端末のカメラやマイクでキャプチャーされた写真、動画、オーディオにアクセスできます:</p> + +<pre class="notranslate"><input type="file" accept="image/*;capture=camera"> +<input type="file" accept="video/*;capture=camcorder"> +<input type="file" accept="audio/*;capture=microphone"></pre> + +<h2 id="Common_attributes" name="Common_attributes">共通属性</h2> + +<p>フォームウィジェットを定義するために使用される要素の多くは、独自の属性をいくつか持っています。ただし、すべてのフォーム要素に共通の一連の属性があり、それによりウィジェットをある程度制御できます。共通属性のリストは以下のとおりです。</p> + +<table> + <thead> + <tr> + <th scope="col">属性名</th> + <th scope="col">既定値</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/autofocus">autofocus</a></code></td> + <td>false</td> + <td>この真偽値属性を使用すると、ユーザーがページをロードするときに、たとえば別のコントロールを入力して上書きしない限り、要素に自動的に入力フォーカスするように指定できます。この属性を指定できるのは、文書内の 1 つのフォーム関連要素だけです。</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/disabled">disabled</a></code></td> + <td>false</td> + <td>この真偽値属性は、ユーザーが要素と対話できないことを示します。この属性が指定されていない場合、要素はそれを含む要素 (例えば {{HTMLElement("fieldset")}}) からその設定を継承します。<code>disabled</code><span class="tlid-translation translation" lang="ja"><span title=""> 属性が設定されている包含要素がない場合は、その要素が有効になります。</span></span></td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/form">form</a></code></td> + <td></td> + <td>ウィジェットが関連付けられている <code><form></code> 要素。属性の値は、同じ文書内の {{HTMLElement("form")}} 要素の <code>id</code> 属性でなければなりません。理論的には、フォームウィジェットを {{HTMLElement("form")}} 要素の外側に設定できます。しかし実際には、その機能をサポートするブラウザーはありません。</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/name">name</a></code></td> + <td></td> + <td>要素の名前。これはフォームデータとともに送信されます。</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/value">value</a></code></td> + <td></td> + <td>要素の初期値</td> + </tr> + </tbody> +</table> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事の最後に到着しましたが、最も大事な情報を覚えていますか？ 次に進む前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Basic_controls">Test your skills: Basic controls</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>上で見たように、利用可能なフォーム要素には多くの異なるタイプがあります。一度にこれらの詳細の全てを覚えておく必要はありません。詳細について調べるために好きなだけこの記事に戻ることができます 。</p> + +<p>この記事では古い入力タイプをカバーしてきました — これは HTML の初期の頃に導入されたオリジナルで、すべてのブラウザーでよくサポートされます。次のセクションでは、HTML 5 で追加された新しい <code>type</code> 属性の値を見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/forms/ui_pseudo-classes/index.html b/files/ja/learn/forms/ui_pseudo-classes/index.html new file mode 100644 index 0000000000..8ab11cbac6 --- /dev/null +++ b/files/ja/learn/forms/ui_pseudo-classes/index.html @@ -0,0 +1,616 @@ +--- +title: UI 擬似クラス +slug: Learn/Forms/UI_pseudo-classes +tags: + - Beginner + - CSS + - Example + - Forms + - Guide + - HTML + - Pseudo-classes + - Styling + - Web +translation_of: Learn/Forms/UI_pseudo-classes +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Advanced_form_styling", "Learn/Forms/Form_validation", "Learn/Forms")}}</p> + +<p>In the previous articles we covered the styling of various form controls, in a general manner. This included some usage of pseudo-classes, 例えば、using <code>:checked</code> to target a checkbox only when it is selected. <span class="seoSummary">In this article, we will explore in detail the different UI pseudo-classes available to us in modern browsers for styling forms in different states.</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>Basic computer literacy, and a basic understanding of <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML</a> and <a href="/ja/docs/Learn/CSS/First_steps">CSS</a>, including general knowledge of <a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes and pseudo-elements</a>.</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>To understand what parts of forms are hard to style, and why; to learn what can be done to customize them.</td> + </tr> + </tbody> +</table> + +<h2 id="What_pseudo-classes_do_we_have_available" name="What_pseudo-classes_do_we_have_available">疑似クラスで何が利用できるか?</h2> + +<p>The original pseudo-classes available to us (as of <a href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external">CSS 2.1</a>) that are relevant to forms are:</p> + +<ul> + <li>{{cssxref(":hover")}}: Selects an element only when it is being hovered over by a mouse pointer.</li> + <li>{{cssxref(":focus")}}: Selects an element only when it is focused (i.e. by being tabbed to via the keyboard).</li> + <li>{{cssxref(":active")}}: selects an element only when it is being activated (i.e. while it is being clicked on, or when the <kbd>Return</kbd>/<kbd>Enter</kbd> key is being pressed down in the case of a keyboard activation).</li> +</ul> + +<p>These basic pseudo-classes should be familiar to you now. More recently, the <a href="http://www.w3.org/TR/css3-selectors/" rel="external">CSS Selector Level 3</a> and <a href="http://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external">CSS Basic UI Level 3</a> added more pseudo-classes related to HTML forms that provide several other useful targetting conditions that you can take advantage of. We'll discuss these in more detail in the sections below, but briefly, the main ones we'll be looking at are:</p> + +<ul> + <li>{{cssxref(':required')}} and {{cssxref(':optional')}}: Targets required or optional form controls.</li> + <li>{{cssxref(":valid")}} and {{cssxref(":invalid")}}, and {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}}: Target form controls that are valid/invalid according to form validation constraints set on them, or in-range/out-of-range.</li> + <li>{{cssxref(":enabled")}} and {{cssxref(":disabled")}}, and {{cssxref(":read-only")}} and {{cssxref(":read-write")}}: Target enabled or disabled form controls (e.g. with the <code>disabled</code> HTML attribute set), and read-write or read-only form controls (e.g. with the <code>readonly</code> HTML attribute set).</li> + <li>{{cssxref(":checked")}}, {{cssxref(":indeterminate")}}, and {{cssxref(":default")}}: Respectively target checkboxes and radio buttons that are checked, in an indeterminate state (neither checked or not checked), and the default selected option when the page loads (e.g. an <code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> with the <code>checked</code> attribute set, or an <code><a href="/ja/docs/Web/HTML/Element/option"><option></a></code> element with the <code>selected</code> attribute set).</li> +</ul> + +<p>There are many others too, but the ones listed above are the most obviously useful. Some of the others are aimed at solving very specific niche problems, or simply not very well supported in browsers yet. The ones listed above all have pretty good browser support, but of course you should test your form implementations carefully to make sure they work for your target audience.</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: A number of the pseudo-classes discussed here are concerned with styling form controls based on their validation state (is their data valid, or not?) You'll learn much more about setting and controlling validation constraints in our next article — <a href="/ja/docs/Learn/Forms/Form_validation">Client-side form validation</a> — but for now we'll keep things simple with regards to form validation, so it doesn't confuse things.</p> +</div> + +<h2 id="Styling_inputs_based_on_whether_they_are_required_or_not" name="Styling_inputs_based_on_whether_they_are_required_or_not">入力が必須か否かでスタイル設定する</h2> + +<p>One of the most basic concepts with regards to client-side form validation is whether a form input is required (it has to be filled in before the form can be submitted) or optional.</p> + +<p>{{htmlelement('input')}}, {{htmlelement('select')}}, and {{htmlelement('textarea')}} elements have a <code>required</code> attribute available which, when set, means that you have to fill in that control before the form will successfully submit. 例えば、:</p> + +<pre class="brush: html notranslate"><form> + <fieldset> + <legend>Feedback form</legend> + <div> + <label for="fname">First name: </label> + <input id="fname" name="fname" type="text" required> + </div> + <div> + <label for="lname">Last name: </label> + <input id="lname" name="lname" type="text" required> + </div> + <div> + <label for="email">Email address (include if you want a response): </label> + <input id="email" name="email" type="email"> + </div> + <div><button>Submit</button></div> + </fieldset> +</form></pre> + +<p>Here, the first name and last name are required, but the email address is optional.</p> + +<p>You can match these two states using the {{cssxref(':required')}} and {{cssxref(':optional')}} pseudo-classes. 例えば、if we apply the following CSS to the above HTML:</p> + +<pre class="brush: css notranslate">input:required { + border: 1px solid black; +} + +input:optional { + border: 1px solid silver; +}</pre> + +<p>The required controls would have a black border, and the optional control will have a silver border, like so:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/basic-required-optional.html", '100%', 400)}}</p> + +<p>You can also try submitting the form without flling it in, to see the client-side validation error messages browsers give you 既定では.</p> + +<p>The above form isn't bad, but it isn't great either. For a start, we are signalling required versus optional status using color alone, which isn't great for colorblind people. Second, the standard convention on the web for required status is an asterisk (*), or the word "required" being associated with the controls in question.</p> + +<p>In the next section we'll look at a better example of indicating required fields using <code>:required</code>, which also digs into using generated content.</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: You'll probably not find yourself using the <code>:optional</code> pseudo-class very often. Form controls are optional 既定では, so you could just do your optional styling 既定では, and add styles on top for required controls.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: If one radio button in a same-named group of radio buttons has the <code>required</code> attribute, all the radio buttons will be invalid until one is selected, but only the one with the attribute assigned will actually match {{cssxref(':required')}}<strong>.</strong></p> +</div> + +<h2 id="Using_generated_content_with_pseudo-classes" name="Using_generated_content_with_pseudo-classes">疑似クラスでコンテンツを生成する</h2> + +<p>In previous articles we've seen usage of <a href="/ja/docs/Web/CSS/CSS_Generated_Content">generated content</a>, but we thought now would be a good time to talk about it in a bit more detail.</p> + +<p>The idea is that we can use the <code><a href="/ja/docs/Web/CSS/::before">::before</a></code> and <code><a href="/ja/docs/Web/CSS/::after">::after</a></code> pseudo-elements along with the <code><a href="/ja/docs/Web/CSS/content">content</a></code> property to make a chunk of content appear before or after the affected element. The chunk of content is not added to the DOM, so is invisible to screenreaders; it is part of the document's styles. Because it is a pseudo element, it can be targetted with styles in the same way that any actual DOM node can.</p> + +<p>This is really useful when you want to add a visual indicator to an element, such as a label or icon, but don't want it to be picked up by assistive technologies. 例えば、in our <a href="https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html">custom radio buttons example</a>, we use generated content to handle the placement and animation of the inner circle when a radio button is selected:</p> + +<pre class="brush: css notranslate">input[type="radio"]::before { + display: block; + content: " "; + width: 10px; + height: 10px; + border-radius: 6px; + background-color: red; + font-size: 1.2em; + transform: translate(3px, 3px) scale(0); + transform-origin: center; + transition: all 0.3s ease-in; +} + +input[type="radio"]:checked::before { + transform: translate(3px, 3px) scale(1); + transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); +}</pre> + +<p>This is really useful — screenreaders already let their users know when a radio button or checkbox they encounter is checked/selected, so you don't want them to read out another DOM element that indicates selection — that could be confusing. Having a purely visual indicator solves this problem.</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: This also shows how you can combine a pseudo-class and pseudo-element if required.</p> +</div> + +<p>Back to our required/optional example from before, this time we'll not alter the appearance of the input itself — we'll use generated content to add an indicating label (<a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/required-optional-generated.html">see it live here</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/required-optional-generated.html">source code here</a>).</p> + +<p>First of all, we'll add a paragraph to the top of the form to say what you are looking for:</p> + +<pre class="brush: html notranslate"><p>Required fields are labelled with "required".</p></pre> + +<p>Screenreader users will get "required" read out as an extra bit of information when they get to each required input, which sighted users will get our label.</p> + +<p>Since form inputs don't directly support having generated content put on them (this is because generated content is placed relative to an element's formatting box, but form inputs work more like replaced elements and therefore don't have one), we will add an empty <code><a href="/ja/docs/Web/HTML/Element/span"><span></a></code> to hang the generated content on:</p> + +<pre class="brush: html notranslate"><div> + <label for="fname">First name: </label> + <input id="fname" name="fname" type="text" required> + <span></span> +</div></pre> + +<p>The immediate problem with this was that the span was dropping onto a new line below the input, because the input and label are both set with <code>width: 100%</code>. To fix this we style the parent <code><div></code> to become a flex container, but also tell it to wrap its contents onto new lines if the content becomes too long:</p> + +<pre class="brush: css notranslate">fieldset > div { + margin-bottom: 20px; + display: flex; + flex-flow: row wrap; +}</pre> + +<p>The effect this has is that the label and input sit on separate lines because they are both <code>width: 100%</code>, but the <code><span></code> has a width of 0 so can sit on the same line as the input.</p> + +<p>Now onto the generated content. We create it using this CSS:</p> + +<pre class="brush: css notranslate">input + span { + position: relative; +} + +input:required + span::after { + font-size: 0.7rem; + position: absolute; + content: "required"; + color: white; + background-color: black; + padding: 5px 10px; + top: -26px; + left: -70px; +}</pre> + +<p>We set the <code><span></code> to <code>position: relative</code> simply so that we can set the generated content to <code>position: absolute</code> and position it relative to the <code><span></code> rather than the <body> (The generated content acts as though it is a child node of the element it is generated on, for the purposes of positioning).</p> + +<p>Then we give the generated content the content "required", which is what we wanted our label to say, and style and position it as we want. The result is seen below.</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/required-optional-generated.html", '100%', 430)}}</p> + +<h2 id="Styling_controls_based_on_whether_their_data_is_valid" name="Styling_controls_based_on_whether_their_data_is_valid">データが妥当が否かでコントロールをスタイル設定する</h2> + +<p>The other really important, fundamental concept in form validation is whether a form control's data is valid or not (in the case of numerical data, we can also talk about in-range and out-of-range data). Form controls with <a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint limitations</a> can be targeted based on these states.</p> + +<h3 id="valid_and_invalid" name="valid_and_invalid">:valid と :invalid</h3> + +<p>You can target from control using the {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes. Some points worth bearing in mind:</p> + +<ul> + <li>Controls with no constraint validation will always be valid, and therefore matched with <code>:valid</code>.</li> + <li>Controls with <code>required</code> set on them that have no value are counted as invalid — they will be matched with <code>:invalid</code> and <code>:required</code>.</li> + <li>Controls with built-in validation, such as <code><input type="email"></code> or <code><input type="url"></code> are (matched with) <code>:invalid</code> when the data entered into them does not match the pattern they are looking for (but they are valid when empty).</li> + <li>Controls whose current value is outside the range limits specified by the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max","input")}} attributes are (matched with) <code>:invalid</code>, but also matched by {{cssxref(":out-of-range")}}, as you'll see later on.</li> + <li>There are some other ways to make an element matched by <code>:valid</code>/<code>:invalid</code>, as you'll see in the <a href="/ja/docs/Learn/Forms/Form_validation">Client-side form validation</a> article. But we'll keep things simple for now.</li> +</ul> + +<p>Let's go in and look at a simple example of <code>:valid</code>/<code>:invalid</code> (see <a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/valid-invalid.html">valid-invalid.html</a> for the live version, and also check out the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/valid-invalid.html">source code</a>).</p> + +<p>As in the previous example, we've got extra <code><span></code>s to generate content on, which we'll use to provide indicators of valid/invalid data:</p> + +<pre class="brush: html notranslate"><div> + <label for="fname">First name *: </label> + <input id="fname" name="fname" type="text" required> + <span></span> +</div></pre> + +<p>To provide these indicators, we use the following CSS:</p> + +<pre class="brush: css notranslate">input + span { + position: relative; +} + +input + span::before { + position: absolute; + right: -20px; + top: 5px; +} + +input:invalid { + border: 2px solid red; +} + +input:invalid + span::before { + content: '✖'; + color: red; +} + +input:valid + span::before { + content: '✓'; + color: green; +}</pre> + +<p>As before, we set the <code><span></code>s to <code>position: relative</code> so that we can position the generated content relative to them. We then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, respectively. To add a bit of extra urgency to the invalid data, we've also given the inputs a thick red border when invalid.</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: We've used <code>::before</code> to add these labels, as we were already using <code>::after</code> for the "required" labels.</p> +</div> + +<p>You can try it below:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/valid-invalid.html", '100%', 430)}}</p> + +<p>Notice how the required text inputs are invalid when empty, but valid when they have something filled in. The email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address.</p> + +<h3 id="In-range_and_out-of-range_data" name="In-range_and_out-of-range_data">範囲内と範囲外のデータ</h3> + +<p>As we hinted at above, there are two other related pseudo-classes to consider — {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}}. These match numeric inputs where range limits are specified by the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max","input")}}, when their data is inside or outside the specified range, respectvely.</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: Numeric input types are <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>.</p> +</div> + +<p>It is worth noting that inputs whose data is in-range will also be matched by the <code>:valid</code> pseudo-class, and inputs whose data is out-of-range will also be matched by the <code>:invalid</code> pseudo-class. So why have both? The issue is really one of semantics — out-of-range is a more specific type of invalid communication, so you might want to provide a different message for out-of-range inputs, which will be more helpful to users than just saying "invalid". You might even want to provide both.</p> + +<p>Let's look at an example that does exactly this. Our <a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/out-of-range.html">out-of-range.html</a> demo (see also the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/out-of-range.html">source code</a>) builds on top of the previous example to provide out-of-range messages for the numeric inputs, as well as saying whether they are required.</p> + +<p>The numeric input looks like this:</p> + +<pre class="brush: html notranslate"><div> + <label for="age">Age (must be 12+): </label> + <input id="age" name="age" type="number" min="12" max="120" required> + <span></span> +</div></pre> + +<p>And the CSS looks like this:</p> + +<pre class="brush: css notranslate">input + span { + position: relative; +} + +input + span::after { + font-size: 0.7rem; + position: absolute; + padding: 5px 10px; + top: -26px; +} + +input:required + span::after { + color: white; + background-color: black; + content: "Required"; + left: -70px; +} + +input:out-of-range + span::after { + color: white; + background-color: red; + width: 155px; + content: "Outside allowable value range"; + left: -182px; +}</pre> + +<p>This is a similar story to what we had before in the <code>:required</code> example, except that here we've split out the declarations that apply to any <code>::after</code> content into a separate rule, and given the separate <code>::after</code> content for <code>:required</code> and <code>:out-of-range</code> states their own content and styling. You can try it here:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/out-of-range.html", '100%', 430)}}</p> + +<p>It is possible for the number input to be both required and out-of-range at the same time, so what happens then? Because the <code>:out-of-range</code> rule appears later in the source code than the <code>:required</code> rule, the <a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#Understanding_the_cascade">cascade rules</a> come into play, and the out of range message is shown.</p> + +<p>This works quite nicely — when the page first loads, "Required" is shown, along with a red cross and border. When you've typed in a valid age (i.e. in the range of 12-120), the input turns valid. If however, you then change the age entry to one that is out of range, the "Outside allowable value range" message then pops up in place of "Required".</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: To enter an invalid/out-of-range value, you'll have to actually focus the form and type it in using the keyboard. The spinner buttons won't let you increment/decrement the value outside the allowable range.</p> +</div> + +<h2 id="Styling_enabled_and_disabled_inputs_and_read-only_and_read-write" name="Styling_enabled_and_disabled_inputs_and_read-only_and_read-write">有効/無効や読み取り専用/読み書き可能の入力をスタイル設定する</h2> + +<p>An enabled element is an element that can be activated; it can be selected, clicked on, typed into, etc. A disabled element on the other hand cannot be interacted with in any way, and its data isn't even sent to the server</p> + +<p>These two states can be targeted using {{cssxref(":enabled")}} and {{cssxref(":disabled")}}. Why are disabled inputs useful? Well, sometimes if some data does not apply to a certain user, you might not even want to submit that data when they submit the form. A classic example is a shipping form — commonly you'll get asked if you want to use the same address for billing and shipping; if so, you can just send a single address to the server, and might as well just disable the billing address fields.</p> + +<p>Let's have a look at an example that does just this. First of all, the HTML is a simple form containing text inputs, plus a checkbox to toggle disabling the billing address on and off. The billing address fields are disabled 既定では.</p> + +<pre class="brush: html notranslate"><form> + <fieldset id="shipping"> + <legend>Shipping address</legend> + <div> + <label for="name1">Name: </label> + <input id="name1" name="name1" type="text" required> + </div> + <div> + <label for="address1">Address: </label> + <input id="address1" name="address1" type="text" required> + </div> + <div> + <label for="pcode1">Zip/postal code: </label> + <input id="pcode1" name="pcode1" type="text" required> + </div> + </fieldset> + <fieldset id="billing"> + <legend>Billing address</legend> + <div> + <label for="billing-checkbox">Same as shipping address:</label> + <input type="checkbox" id="billing-checkbox" checked> + </div> + <div> + <label for="name" class="billing-label disabled-label">Name: </label> + <input id="name" name="name" type="text" disabled required> + </div> + <div> + <label for="address2" class="billing-label disabled-label">Address: </label> + <input id="address2" name="address2" type="text" disabled required> + </div> + <div> + <label for="pcode2" class="billing-label disabled-label">Zip/postal code: </label> + <input id="pcode2" name="pcode2" type="text" disabled required> + </div> + </fieldset> + + <div><button>Submit</button></div> +</form></pre> + +<p>Now onto the CSS. The most relevant parts to this example are as follows:</p> + +<pre class="brush: css notranslate">input[type="text"]:disabled { + background: #eee; + border: 1px solid #ccc; +} + +.disabled-label { + color: #aaa; +}</pre> + +<p>We've directly selected the inputs we want to disable using <code>input[type="text"]:disabled</code>, but we also wanted to gray out the corresponding text labels. These weren't quite as easy to select, so we've used a class to provide them with that styling.</p> + +<p>Now finally, we've used some JavaScript to toggle the disabling of the billing address fields:</p> + +<pre class="brush: js notranslate">// Wait for the page to finish loading +document.addEventListener('DOMContentLoaded', function () { + + // Attach `change` event listener to checkbox + document.getElementById('billing-checkbox').addEventListener('change', toggleBilling); +}, false); + +function toggleBilling() { + // Select the billing text fields + let billingItems = document.querySelectorAll('#billing input[type="text"]'); + // Select the billing text labels + let billingLabels = document.querySelectorAll('.billing-label'); + + // Toggle the billing text fields and labels + for (let i = 0; i < billingItems.length; i++) { + billingItems[i].disabled = !billingItems[i].disabled; + + if(billingLabels[i].getAttribute('class') === 'billing-label disabled-label') { + billingLabels[i].setAttribute('class', 'billing-label'); + } else { + billingLabels[i].setAttribute('class', 'billing-label disabled-label'); + } + } +}</pre> + +<p>It uses the <a href="/ja/docs/Web/API/HTMLElement/change_event"><code>change</code> event</a> to let the user enable/disable the billing fields, and toggle the styling of the associated labels.</p> + +<p>You can see the example in action below (also <a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/enabled-disabled-shipping.html">see it live here</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/enabled-disabled-shipping.html">source code</a>):</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/enabled-disabled-shipping.html", '100%', 600)}}</p> + +<h3 id="Read-only_and_read-write" name="Read-only_and_read-write">Read-only and read-write</h3> + +<p>In a similar manner to <code>:disabled</code> and <code>:enabled</code>, the <code>:read-only</code> and <code>:read-write</code> pseudo-classes target two states that form inputs toggle between. Read-only inputs have their values submitted to the server, but the user can't edit them, whereas read-write means they can be edited — their default state.</p> + +<p>An input is set to read-only using the <code>readonly</code> attribute. As an example, imagine a confirmation page where the developer has sent the details filled in on previous pages over to this page, with the aim of getting the user to check them all in one place, add any final data that is needed, and then confirm the order by submitting. At this point, all the final form data can be sent to the server in one go.</p> + +<p>Let's look at what a form might look like (see <a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/readonly-confirmation.html">readonly-confirmation.html</a> for the live example; also <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html">see the source code</a>).</p> + +<p>A fragment of the HTML is as follows — note the readonly attribute:</p> + +<pre class="brush: html notranslate"><div> + <label for="name">Name: </label> + <input id="name" name="name" type="text" + value="Mr Soft" readonly> +</div></pre> + +<p>If you try the live example, you'll see that the top set of form elements are not focusable, however the values are submitted when the form is submitted. We've also styled the read-only form controls using the <code>:read-only</code> pseudo-class, like so:</p> + +<pre class="brush: css notranslate">input:-moz-read-only, textarea:-moz-read-only { + border: 0; + box-shadow: none; + resize: none; + background-color: white; +} + +input:read-only, textarea:read-only { + border: 0; + box-shadow: none; + resize: none; + background-color: white; +}</pre> + +<p>Yes, you've guessed it — Firefox only supports it with a prefix, hence having to double up the ruleset.</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>:enabled</code> and <code>read-write</code> are two more pseudo-classes that you'll probably rarely use, given that they describe the default states of input elements.</p> +</div> + +<h2 id="ラジオとチェックボックスの状態_—_チェック済み、既定、中間">ラジオとチェックボックスの状態 — チェック済み、既定、中間</h2> + +<p>As we've seen in earlier articles in the module, {{HTMLElement("input/radio", "radio buttons")}} and {{HTMLElement("input/checkbox", "checkboxes")}} can be checked or unchecked. But there are a couple of other states to consider too:</p> + +<ul> + <li>{{cssxref(":default")}}: Matches radios/checkboxes that are checked 既定では, on page load (i.e. by setting the <code>checked</code> attribute on them) These match the {{cssxref(":default")}} pseudo-class, even if the user unchecks them.</li> + <li>{{cssxref(":indeterminate")}}: When radios/checkboxes are neither checked nor unchecked, they are considered <em>indeterminate</em> and will match the {{cssxref(":indeterminate")}} pseudo-class. More on what this means below.</li> +</ul> + +<h3 id="checked" name="checked">:checked</h3> + +<p>When checked, they will be matched by the {{cssxref(":checked")}} pseudo-class.</p> + +<p>The most common use of this is to add a different style onto the checkbox/radiobutton when it is checked, in cases where you've removed the system default styling with <code>appearance: none;</code> and want to build the styles back up yourself. We saw examples of this in the previous article, when we talked about <a href="/ja/docs/Learn/Forms/Advanced_form_styling#Using_appearence_none_on_radioscheckboxes">Using <code>appearence: none</code> on radios/checkboxes</a>.</p> + +<p>As a recap, the <code>:checked</code> code from our <a href="https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html">Styled radio buttons</a> example looks like so:</p> + +<pre class="brush: css notranslate">input[type="radio"]::before { + display: block; + content: " "; + width: 10px; + height: 10px; + border-radius: 6px; + background-color: red; + font-size: 1.2em; + transform: translate(3px, 3px) scale(0); + transform-origin: center; + transition: all 0.3s ease-in; +} + +input[type="radio"]:checked::before { + transform: translate(3px, 3px) scale(1); + transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); +}</pre> + +<p>You can try it out here:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/radios-styled.html", '100%', 200)}}</p> + +<p>Basically, we build the styling for the radio button "inner circle" using the <code>::before</code> pseudo element, but set a <code>scale(0)</code> <code><a href="/ja/docs/Web/CSS/transform">transform</a></code> on it. We then use a <code><a href="/ja/docs/Web/CSS/transition">transition</a></code> to make it nicely animate into view when the radio is selected/checked. The advantage of using a transform rather than transitioning <code><a href="/ja/docs/Web/CSS/width">width</a></code>/<code><a href="/ja/docs/Web/CSS/height">height</a></code> is that you can use <code><a href="/ja/docs/Web/CSS/transform-origin">transform-origin</a></code> to make it grow from the center of the circle, rather than having it appear to grow from the circle's corner.</p> + +<h3 id="default_and_indeterminate" name="default_and_indeterminate">:default と :indeterminate</h3> + +<p>As mentioned above, the {{cssxref(":default")}} pseudo-class matches radios/checkboxes that are checked 既定では, on page load, even when unchecked. This could be useful for adding an indicator to a list of options to remind the user what the defaults (or starting options) were, in case they want to reset their choices.</p> + +<p>Also mentioned above radios/checkboxes will be matched by the {{cssxref(":indeterminate")}} pseudo-class when they are in a state where they are neither checked nor unchecked. But what does this mean? Elements that are indeterminate include:</p> + +<ul> + <li>{{HTMLElement("input/radio")}} inputs, when all radio buttons in a same-named group are unchecked</li> + <li>{{HTMLElement("input/checkbox")}} inputs whose <code>indeterminate</code> property is set to <code>true</code> via JavaScript</li> + <li>{{HTMLElement("progress")}} elements that have no value.</li> +</ul> + +<p>This isn't something you'll likely use very often. One use case could be an indicator to tell users that they really need to select a radio button before they move on.</p> + +<p>Let's look at a couple of modified versions of the previous example that remind the user what the default option was, and style the radio buttons when indeterminate. Both of these have the following HTML structure for the inputs:</p> + +<pre class="brush: html notranslate"><p> + <input type="radio" name="fruit" value="cherry" id="cherry"> + <label for="cherry">Cherry</label> + <span></span> +</p></pre> + +<p>For the <code>:default</code> example, we've added the <code>checked</code> attribute to the middle radio button input, so it will be selected 既定では when loaded. We then style this with the following CSS:</p> + +<pre class="brush: css notranslate">input ~ span { + position: relative; +} + +input:default ~ span::after { + font-size: 0.7rem; + position: absolute; + content: "Default"; + color: white; + background-color: black; + padding: 5px 10px; + right: -65px; + top: -3px; +}</pre> + +<p>This provides a little "Default" label on the one the was originally selected when the page loaded. Note here we are using the general sibling combinator (<code>~</code>) rather than the adjacent sibling combinator (<code>+</code>) — we need to do this because the <code><span></code> does not come right after the <code><input></code> in the source order.</p> + +<p>See the live result below:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/radios-checked-default.html", '100%', 200)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: You can also find the example live on GitHub at <a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-default.html">radios-checked-default.html</a> (also see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/radios-checked-default.html">source code</a>.)</p> +</div> + +<p>For the <code>:indeterminate</code> example, we've got no default selected radio button — this is important — if there was, then there would be no indeterminate state to style. We style the indeterminate radio buttons with the following CSS:</p> + +<pre class="brush: css notranslate">input[type="radio"]:indeterminate { + border: 2px solid red; + animation: 0.4s linear infinite alternate border-pulse; +} + +@keyframes border-pulse { + from { + border: 2px solid red; + } + + to { + border: 6px solid red; + } +}</pre> + +<p>This creates a fun little animated border on the radio buttons, which hopefully indicates that you need to select one of them!</p> + +<p>See the live result below:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/radios-checked-indeterminate.html", '100%', 200)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: You can also find the example live on GitHub at <a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-indeterminate.html">radios-checked-indeterminate.html</a> (also see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/radios-checked-indeterminate.html">source code</a>.)</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: You can find an <a href="/ja/docs/Web/HTML/Element/Input/checkbox#Indeterminate_state_checkboxes">interesting example involving <code>indeterminate</code> states</a> on the <code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> reference page.</p> +</div> + +<h2 id="More_pseudo-classes" name="More_pseudo-classes">その他の疑似クラス</h2> + +<p>There are a number of other pseudo-classes of interest, and we don't have space to write about them all in detail here. Let's talk about a few more that you should take the time to investigate.</p> + +<p>The following are fairly well-supported in modern browsers:</p> + +<ul> + <li>The {{cssxref(":focus-within")}} pseudo-class matches an element that has received focus or <em>contains</em> an element that has received focus. This is useful if you want a whole form to highlight in some way when an input inside it is focused.</li> + <li>The {{cssxref(":focus-visible")}} pseudo-class matches focused elements that received focus via keyboard interaction (rather than touch or mouse) — useful if you want to show a different style for keyboard focus compared to mouse (or other) focus.</li> + <li>The {{cssxref(":placeholder-shown")}} pseudo-class matches {{htmlelement('input')}} and {{htmlelement('textarea')}} elements that have their placeholder showing (i.e. the contents of the <code><a href="/ja/docs/Web/HTML/Attributes/placeholder">placeholder</a></code> attribute) because the value of the element is empty.</li> +</ul> + +<p>The following are also interesting, but as yet not well-supported in browsers:</p> + +<ul> + <li>The {{cssxref(":blank")}}<strong> </strong>pseudo-class selects empty form controls. {{cssxref(":empty")}} also matches elements that have no children, like {{HTMLElement("input")}}, but it is more general — it also matches other empty elements like {{HTMLElement("br")}} and {{HTMLElement("hr")}}. <code>:empty</code> has reasonable browser support; the <code>:blank</code> pseudo-class's specification is not yet finished, so it not yet supported in any browser.</li> + <li>The <code><a href="https://drafts.csswg.org/selectors-4/#user-invalid-pseudo">:user-invalid</a></code> pseudo-class, when supported, will be similar to {{cssxref(":invalid")}}, but with better user experience. If the value is valid when the input receives focus, the element may match <code>:invalid</code> as the user enters data if the value is temporarily invalid, but will only match <code>:user-invalid</code> when the element loses focus. If the value was originally invalid, it will match both <code>:invalid</code> and <code>:user-invalid</code> for the whole duration of the focus. In a similar manner to <code>:invalid</code>, it will stop matching <code>:user-invalid</code> if the value does become valid.</li> +</ul> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>This completes our look at UI pseudo-classes that relate to form inputs. Keep playing with them, and create some fun form styles! Next up, we'll move on to something different — <a href="/ja/docs/Learn/Forms/Form_validation">client-side form validation</a>.</p> + +<p>{{PreviousMenuNext("Learn/Forms/Advanced_form_styling", "Learn/Forms/Form_validation", "Learn/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/forms/your_first_form/example/index.html b/files/ja/learn/forms/your_first_form/example/index.html new file mode 100644 index 0000000000..bddf242144 --- /dev/null +++ b/files/ja/learn/forms/your_first_form/example/index.html @@ -0,0 +1,113 @@ +--- +title: 例 +slug: Learn/Forms/Your_first_form/Example +tags: + - CodingScripting + - HTML + - Web + - ガイド + - フォーム + - 例 + - 初心者 + - 学習 +translation_of: Learn/Forms/Your_first_form/Example +--- +<p>これは<a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">最初の HTML フォーム</a>の記事のサンプルコードです。</p> + +<h2 id="A_simple_form" name="A_simple_form">簡単なフォーム</h2> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><form action="<span class="pl-s">/my-handling-form-page</span>" method="post"> + <div> + <label for="name">Name:</label> + <input type="text" id="name" name="user_name"> + </div> + + <div> + <label for="mail">E-mail:</label> + <input type="email" id="mail" name="user_email"> + </div> + + <div> + <label for="msg">Message:</label> + <textarea id="msg" name="user_message"></textarea> + </div> + + <div class="button"> + <button type="submit">Send your message</button> + </div> +</form></pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: css notranslate">form { + /* Just to center the form on the page */ + margin: 0 auto; + width: 400px; + + /* To see the limits of the form */ + padding: 1em; + border: 1px solid #CCC; + border-radius: 1em; +} + +div + div { + margin-top: 1em; +} + +label { + /* To make sure that all label have the same size and are properly align */ + display: inline-block; + width: 90px; + text-align: right; +} + +input, textarea { + /* To make sure that all text field have the same font settings + By default, textarea are set with a monospace font */ + font: 1em sans-serif; + + /* To give the same size to all text field */ + width: 300px; + + -moz-box-sizing: border-box; + box-sizing: border-box; + + /* To harmonize the look & feel of text field border */ + border: 1px solid #999; +} + +input:focus, textarea:focus { + /* To give a little highligh on active elements */ + border-color: #000; +} + +textarea { + /* To properly align multiline text field with their label */ + vertical-align: top; + + /* To give enough room to type some text */ + height: 5em; + + /* To allow users to resize any textarea vertically + It works only on Chrome, Firefox and Safari */ + resize: vertical; +} + +.button { + /* To position the buttons to the same position of the text fields */ + padding-left: 90px; /* same size as the label elements */ +} + +button { + /* This extra magin represent the same space as the space between + the labels and their text fields */ + margin-left: .5em; +}</pre> + +<h3 id="結果">結果</h3> + +<p>{{ EmbedLiveSample('A_simple_form', '100%', '280') }}</p> + +<p> </p> diff --git a/files/ja/learn/forms/your_first_form/index.html b/files/ja/learn/forms/your_first_form/index.html new file mode 100644 index 0000000000..d3e646269f --- /dev/null +++ b/files/ja/learn/forms/your_first_form/index.html @@ -0,0 +1,313 @@ +--- +title: 初めてのフォーム +slug: Learn/Forms/Your_first_form +tags: + - Beginner + - CodingScripting + - Example + - Forms + - Guide + - HTML + - Learn + - Web + - ウェブ + - ガイド + - フォーム + - 初心者向け + - 学習 +translation_of: Learn/Forms/Your_first_form +--- +<div> +<div>{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</div> +</div> + +<p class="summary">このシリーズの最初の記事では、簡単なフォームの設計、HTML フォームコントロールとその他の HTML 要素を使用した正しい実装、CSS によるとても簡単なスタイル付け、データをサーバーに送る方法を含めた、ウェブフォームを作成する本当に初歩的な経験をします。サブトピックは、モジュールの後で詳しく展開していきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシーと、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML を理解する</a>を理解していること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ウェブフォームとは何か、何に使うのか、どうデザインするのか、サンプル事例に必要な基本の HTML 要素について熟知する。</td> + </tr> + </tbody> +</table> + +<h2 id="What_are_HTML_forms" name="What_are_HTML_forms">ウェブフォームとは何か?</h2> + +<p><strong>ウェブフォーム</strong>とは、ユーザーと ウェブサイトやアプリケーションとの対話の要となるもののひとつです。フォームによって、ユーザーは ウェブサイトへデータを送ることができます。それらのデータはたいてい ウェブサーバーに送られて処理、保存されたり (モジュール後半の<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">サーバーにデータを送る</a>を見てください) 、クライアント側ですぐにインターフェイスを更新する(例えば、リストに他の項目を追加したり、UI の機能を表示/非表示にしたり)こともあります。</p> + +<p>ウェブフォームは 1 つ以上の<strong>フォームコントロール</strong>(<strong>ウィジェット</strong>ともいいます)と、フォーム全体を構成するのに役立つ追加要素 — よく <strong>HTML フォーム</strong>と呼ばれます — とで作られます。それらのコントロールはテキストフィールド (単一行または複数行)、ドロップダウンボックス、ボタン、チェックボックスあるいはラジオボタンがあります。たいていは {{htmlelement("input")}} 要素を使って作成されますが、その他の要素もあります。</p> + +<p>フォームコントロールは、特定フォームの値が入力されるのを強制する(<strong>フォーム検証</strong>)ためにもプログラミングされ、視力のある・盲目のユーザーいずれにとっても、用途を説明するラベルと対になります。</p> + +<h2 id="Designing_your_form" name="Designing_your_form">フォームを設計する</h2> + +<p>コードを書き始める前に、そこから離れてフォームについて考える時間をとるとよいでしょう。簡単なモデルを作ると、あなたがユーザーに入力を依頼したいデータの適切なセットを定義することの助けになります。ユーザー体験 (UX) の観点では、フォームが大規模になるとユーザーが不満を持って離れるリスクが高まると覚えておくことが重要です。簡単に、かつ集中するようにしてください。本当に必要なことだけをたずねてください。</p> + +<p>フォームの設計は、サイトやアプリケーションを構築する際の大事なステップです。フォームのユーザー体験まで扱うと本記事の対象を超えてしまいますが、そこまで踏み込みたい場合は以下の記事をご覧ください。</p> + +<ul> + <li>Smashing Magazine に<a href="http://uxdesign.smashingmagazine.com/tag/forms/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">フォームの UX に関するよい記事</a>がありますが、もっとも重要な記事は <a href="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/" rel="external" title="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/">Extensive Guide To Web Form Usability</a> でしょう。</li> + <li>UXMatters もまた、<a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">複数ページのフォーム</a>といった複雑なことへの<a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">基本的なベストプラクティス</a>から良いアドバイスを得られる、思慮深いリソースです。</li> +</ul> + +<p>本記事では、シンプルな連絡フォームを作成します。簡単に図を描いてみましょう。</p> + +<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; height: 352px; width: 400px;"></p> + +<p>このフォームには、3 つのテキストフィールドと 1 つのボタンがあります。要するに、ユーザーへ名前(Name)、メールアドレス(E-mail)、送信したいメッセージ(Message)をたずねます。ボタンを押すと、データをウェブサーバーに送信します。</p> + +<h2 id="Get_your_hands_dirty_with_HTML" name="Get_your_hands_dirty_with_HTML">HTML を書きましょう</h2> + +<p>これで、HTML に移ってフォームのコードを書く準備ができました。連絡フォームを作るために、以下の HTML 要素を使用します: {{HTMLElement("form")}}、{{HTMLElement("label")}}、{{HTMLElement("input")}}、{{HTMLElement("textarea")}}、{{HTMLElement("button")}} です。</p> + +<p>前に進む前に、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">簡単な HTML テンプレート</a>をローカルにコピーします — ここにフォームの HTML を入力します。</p> + +<h3 id="The_HTMLElementform_element" name="The_HTMLElement(form)_element">{{HTMLElement("form")}} 要素</h3> + +<p>すべてのフォームは、以下のように {{HTMLElement("form")}} 要素から始まります:</p> + +<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> + +</form></pre> + +<p>これは、フォームを正式に定義します。これは {{HTMLElement("div")}} 要素や {{HTMLElement("p")}} 要素と同様にコンテナ要素ですが、フォームの動作を設定するための固有の属性もサポートします。すべての属性は省略可能ですが、少なくとも <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/action"><code>action</code></a> 属性と <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/method"><code>method</code></a>属性は常に設定することがベストプラクティスであると考えられます。</p> + +<ul> + <li><code>action</code> 属性は、フォームで収集したデータを送信すべき場所 (URL) を定義します</li> + <li><code>method</code> 属性は、データを送信するために使用する HTTP メソッド ( <code>get</code> または <code>post</code> ) を定義します</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: これらの属性がどのように働くかについて、詳しくは<a href="/ja/docs/HTML/Forms/Sending_and_retrieving_form_data" title="HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信と取得</a>で説明しています。</p> +</div> + +<p>今は、上の {{htmlelement("form")}} 要素を HTML 本文に追加します。</p> + +<h3 id="Add_widgets_with_the_HTMLElementlabel_HTMLElementinput_and_HTMLElementtextarea_elements" name="Add_widgets_with_the_HTMLElement(label)_HTMLElement(input)_and_HTMLElement(textarea)_elements">{{HTMLElement("label")}}、{{HTMLElement("input")}} および {{HTMLElement("textarea")}} 要素でウィジェットを追加する</h3> + +<p>連絡フォームはとてもシンプルで 3 つのテキストフィールドを持っており、それぞれに 対応した {{HTMLelement("label")}} がついています。</p> + +<ul> + <li>名前の入力フィールドは、基本的な単一行のテキストフィールドです。</li> + <li>メールアドレスの入力フィールドは、メールアドレスだけを受け付ける単一行のテキストフィールドです。</li> + <li>メッセージの入力フィールドは、基本的な複数行のテキストフィールドです。</li> +</ul> + +<p>HTML コードで、それらは以下のようになります:</p> + +<pre class="brush:html; notranslate" dir="rtl"><form action="/my-handling-form-page" method="post"> + <ul> + <li> + <label for="name">Name:</label> + <input type="text" id="name" name="user_name"> + </li> + <li> + <label for="mail">E-mail:</label> + <input type="email" id="mail" name="user_email"> + </li> + <li> + <label for="msg">Message:</label> + <textarea id="msg" name="user_message"></textarea> + </li> + </ul> +</form></pre> + +<p>フォームのコードを上に見えるようなものに更新してください。</p> + +<p>{{HTMLelement("li")}} 要素はコードを扱いやすく構造化するとともに、スタイル設定を容易にするため (後述) に置いています。すべての {{HTMLElement("label")}} 要素における、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/for"> <code>for</code> </a> 属性の使い方に注目してください。これは、ラベルとフォームウィジェットを関連付けるための正式な方法です。この属性は、対応するウィジェットの <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/id"><code>id</code></a> を参照します。</p> + +<p>これには利点があります — フォームコントロールにラベルを関連付けて、ユーザーがマウス、トラックパッド、タッチデバイスでラベルをクリックすると対応するウィジェットがアクティブになり、スクリーンリーダーのユーザーに読み上げられるアクセシブルな名前が提供されます。この属性の利点をさらに知りたいのでしたら、こちらの記事ですべてを詳しく説明しています: <a href="/ja/docs/HTML/Forms/How_to_structure_an_HTML_form" title="HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a>.</p> + +<p>{{HTMLElement("input")}} 要素でもっとも重要な属性は、<code>type</code> 属性です。この属性は {{HTMLElement("input")}} 要素の見た目や動作を定義するため、とても重要です。これは要素を根本的に変えるものですから、注意してください。詳しく知りたい場合は、<a href="/ja/docs/HTML/Forms/The_native_form_widgets" rel="external" title="HTML/Forms/The_native_forms_widgets">ネイティブフォームウィジェット</a>の記事をご覧ください。</p> + +<ul> + <li>本記事の例では、最初の input に {{HTMLelement("input/text")}} という値を使用しています (これは属性の既定値であり、制御や検証を行わずあらゆるテキストを受け入れる、単一行のテキストフィールドを表します) 。</li> + <li>2番目の input では、正しくフォーマットされた E メールアドレスのみを受け付ける単一行として定義された {{HTMLelement("input/email")}} という値を使用しています。この値はベーシックなテキストフィールドを、ユーザーによって入力されたデータをチェックするようにする "知的な" フィールドへと変化させます。またスマートフォンのように動的なキーボードのある端末で、E メールアドレスを入力するのにふさわしいキーボードレイアウト (例えばデフォルトで @ 記号があるもの) が表示されるようにします。フォームの検証について詳しく知りたい場合は、<a href="/ja/docs/HTML/Forms/Data_form_validation" title="HTML/Forms/Data_form_validation">データフォームの検証</a> の記事をご覧ください。</li> +</ul> + +<p>大事なことを言い忘れましたが、<code><input></code> と <code><textarea></textarea></code> の構文に注意してください。これは HTML の変わったことの 1 つです。<code><input></code> タグは空要素です。つまり、終了タグは不要です。一方 {{HTMLElement("textarea")}} は空の要素ではないので、適切な終了タグで閉じる必要があります。これは HTML フォームの特定の機能、つまりデフォルト値の定義方法に影響があります。{{HTMLElement("input")}} 要素のデフォルト値を定義するには、次のように <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/value"><code>value</code></a> 属性を使う必要があります。</p> + +<pre class="brush:html; notranslate"><input type="text" value="デフォルトではこの要素にはこの文章が挿入されます" /></pre> + +<p>また、{{HTMLElement("textarea")}} のデフォルト値を定義したい場合は、デフォルト値を {{HTMLElement("textarea")}} の開始タグと終了タグの間に書いてください。以下のとおりです：</p> + +<pre class="brush:html; notranslate"><textarea> +デフォルトではこの要素にはこの文章が挿入されます +</textarea></pre> + +<h3 id="And_a_HTMLElementbutton_to_finish" name="And_a_HTMLElement(button)_to_finish">{{HTMLElement("button")}} を追加する</h3> + +<p>フォームはほぼできあがりました。あとは、ユーザーがフォームに記入したらデータを"送信"するためのボタンを追加します。これは、{{HTMLElement("button")}} 要素を使用して簡単にできます: 閉じタグの <code></ul></code> の直前に次の行を追加します:</p> + +<pre class="brush:html; notranslate"><li class="button"> + <button type="submit">メッセージを送信</button> +</li></pre> + +<p>{{htmlelement("button")}} 要素は <code>type</code> 属性を受け付けます。3 種類の値を受け付けて、これは <code>submit</code>、<code>reset</code>、<code>button</code> です。</p> + +<ul> + <li><code>submit</code> ボタンをクリックするとフォームのデータを、{{HTMLElement("form")}} 要素の <code>action</code> 属性で定義した ウェブページへ送信します。</li> + <li><code>reset</code> ボタンをクリックすると、直ちにすべてのフォームウィジェットを既定値にリセットします。UX の観点ではこのボタンはバッドプラクティスであると考えられており、どうしても必要な理由がない限りこのボタンの使用は避けるようにします。</li> + <li><code>button</code> ボタンをクリックすると...何もしません! おかしなことのように見えますが、JavaScript を使用してカスタムボタンを作成するために驚くほど役立ちます。</li> +</ul> + +<div class="note"> +<p>メモ: {{HTMLElement("input")}} 要素で対応する <code>type</code> を指定して、ボタンを作成することもできます。例えば <code><input type="submit"></code> のように。{{HTMLElement("button")}} 要素との大きな違いは、{{HTMLElement("input")}} 要素ではラベルとしてプレーンテキストしか許容しませんが、{{HTMLElement("button")}} 要素ではすべての HTML コンテンツを使用して、もっと複雑でクリエイティブなボタンコンテンツを作成できます。</p> +</div> + +<h2 id="Lets_make_it_a_bit_nicer_with_CSS" name="Let's_make_it_a_bit_nicer_with_CSS">CSS でフォームを少し見栄えよくしましょう</h2> + +<p>フォームのHTMLコードの記述ができました。このフォームをお気に入りのブラウザーで見ると、見栄えがよくないでしょう。</p> + +<div class="note"> +<p><strong>メモ</strong>: あなたの HTML コードが正しくないと考える場合、完成例と比較してみてください — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> にあります (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html">ライブ版も見てください</a>)。</p> +</div> + +<p>フォームを素敵にスタイル付けるのはトリッキーです。それはこの記事でフォームスタイリングについて教える範囲を超えています。なので当面はまずまずの見ばえとなる CSS を追加するだけにしましょう。</p> + +<p>最初に、ページの HTML の head 内に {{htmlelement("style")}} 要素を追加します。次のようになります:</p> + +<pre class="brush: html notranslate"><style> + +</style></pre> + +<p><code class="language-html"><span class="tag token"><span class="tag token">style</span></span></code> タグの中に、次の CSS を追加します:</p> + +<pre class="brush:css; notranslate">form { + /* フォームをページの中央に置く */ + margin: 0 auto; + width: 500px; + /* フォームの範囲がわかるようにする */ + padding: 1em; + border: 1px solid #CCC; + border-radius: 1em; +} + +ul { + list-style: none; + padding: 0; + margin: 0; +} + +form li + li { + margin-top: 1em; +} + +label { + /* すべてのラベルを同じサイズにして、きちんと揃える */ + display: inline-block; + width: 90px; + text-align: right; +} + +input, textarea { + /* すべてのテキストフィールドのフォント設定を一致させる + デフォルトで、textarea は等幅フォントが設定されている */ + font: 1em sans-serif; + + /* すべてのテキストフィールドを同じサイズにする */ + width: 300px; + box-sizing: border-box; + + /* テキストフィールドのボーダーの外見を同一にする */ + border: 1px solid #999; +} + +input:focus, +textarea:focus { + /* アクティブな要素を少し強調する */ + border-color: #000; +} + +textarea { + /* 複数行のテキストフィールドをラベルにきちんと揃える */ + vertical-align: top; + + /* テキスト入力に十分な領域を与える */ + height: 5em; +} + +.button { + /* ボタンを他のテキストフィールドと同じ場所に置く */ + padding-left: 90px; /* label 要素と同じサイズ */ +} + +button { + /* このマージンは、ラベルとテキストフィールドの間のスペースと + おおよそ同じスペースを表す */ + margin-left: .5em; +}</pre> + +<p>保存して再読み込みすると、フォームがよりきれいになりました。</p> + +<div class="note"> +<p><strong>メモ</strong>: Github の <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> にあります(<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">ライブ版も見てください</a>)。</p> +</div> + +<h2 id="Sending_the_data_to_your_web_server" name="Sending_the_data_to_your_web_server">データをウェブサーバーに送信する</h2> + +<p>最後の、またもっともややこしいであろう部分が、サーバー側でのフォームデータの扱いです。{{HTMLElement("form")}} 要素は <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/action"><code>action</code></a> 属性と <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/method"><code>method</code></a> 属性により、どこへどのようにデータを送信するかを定義できます。</p> + +<p>フォームコントロールに <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/name"><code>name</code></a> をつけます。これらの名前はクライアント側とサーバー側の両側で重要です。ブラウザー側ではそれぞれのデータにどのような名前をつけるかを示すものであり、サーバー側では名前によってそれぞれのデータを扱うことができます。フォームデータは名前/値のペアとしてサーバーに送信されます。</p> + +<p>データに名前をつけるために、各々のデータを集めるフォームウィジェットの <code>name</code> 属性を使用しなければなりません。ここでもフォームのコードで見てみましょう:</p> + +<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> + <ul> + <li> + <label for="name">Name:</label> + <input type="text" id="name" name="user_name" /> + </li> + <li> + <label for="mail">E-mail:</label> + <input type="email" id="mail" name="user_email" /> + </li> + <li> + <label for="msg">Message:</label> + <textarea id="msg" name="user_message"></textarea> + </li> + + ... +</pre> + +<p>この例では、フォームはそれぞれ "<code>user_name</code>"、"<code>user_email</code>"、"<code>user_message</code>" と名付けられた 3 つのデータを送信します。これらのデータは URL "<code>/my-handling-form-page</code>" へ、<a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Methods/POST">HTTP <code>POST</code></a> メソッドで送信します。</p> + +<p>サーバー側では URL "<code>/my-handling-form-page</code>" のスクリプトが、HTTP リクエストに埋め込まれた 3 つのキーおよび値のアイテムリストとしてデータを受け取ります。スクリプトがデータを処理する方法は、あなた次第です。各サーバーサイド言語 (PHP、Python、Ruby、Java、C# など) は、これらのデータを扱う仕組みを持っています。これは本ガイドで踏み込んでいく範囲を超えますが、詳しく知りたい場合は<a href="/ja/docs/HTML/Forms/Sending_and_retrieving_form_data" title="HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信と取得</a>の記事にサンプルを載せていますのでご覧ください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>おめでとうございます! 初めてのウェブフォームが完成しました。こちらが最終結果のデモです。</p> + +<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}</p> + +<p>これはほんの開始点です、しかし — さて、より深く見ていくときが来ました。ウェブフォームはここで見てきたものよりさらに強力であり、ガイドの他の記事で残りの部分を習得できます。</p> + +<p>{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls">Other form controls</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls">カスタムフォームコントロールの作成方法</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> |