Add form control example

Author: fantasai

css3-writing-modes/Overview.html

@@ -1158,6 +1158,34 @@ <h3 id=writing-mode><span class=secno>3.1. </span> Block Flow Direction:
     src=vertical-lr.png width=300></p>
   </div>
 
+  <div class=example>
+   <p>In the following example, some form controls are rendered inside a
+    block with &lsquo;<a href="#vertical-rl"><code
+    class=css>vertical-rl</code></a>&rsquo; writing mode. The form controls
+    are rendered to match the writing mode.
+
+   <pre>
+<!-- -->&lt;style>
+<!-- -->  form { writing-mode: vertical-rl; }
+<!-- -->&lt;/style>
+<!-- -->...
+<!-- -->&lt;form style="writing-mode: tb-lr">
+<!-- -->&lt;p>&lt;label>姓名：&lt;input value="艾俐俐">&lt;/label>
+<!-- -->&lt;p>&lt;label>语文：&lt;select>&lt;option>English
+<!-- -->                       &lt;option>français
+<!-- -->                       &lt;option>فارسی
+<!-- -->                       &lt;option> 中文
+<!-- -->                       &lt;option>日本语&lt;/select>&lt;/label>
+<!-- -->&lt;/form></pre>
+
+   <p><img alt="Screenshot of vertical layout: the input element is laid
+    lengthwise from top to bottom and its contents rendered in a vertical
+    typographic mode, matching the labels outside it. The drop-down selection
+    control after it slides out to the side (towards the after edge of the
+    block) rather than downward as it would in horizontal writing modes."
+    src=vertical-form.png></p>
+  </div>
+
   <h4 id=svg-writing-mode><span class=secno>3.1.1. </span> SVG1.1 &lsquo;<a
    href="#writing-mode1"><code class=property>writing-mode</code></a>&rsquo;
    Values</h4>

css3-writing-modes/Overview.src.html

@@ -798,6 +798,34 @@ <h3 id="writing-mode">
                   and 3 are arranged side by side from left to right"
             src="vertical-lr.png" height="191" width="300" ></p>
   </div>
+  
+  <div class="example">
+    <p>In the following example, some form controls are rendered inside
+      a block with ''vertical-rl'' writing mode. The form controls are
+      rendered to match the writing mode.
+    <pre>
+<!-- -->&lt;style>
+<!-- -->  form { writing-mode: vertical-rl; }
+<!-- -->&lt;/style>
+<!-- -->...
+<!-- -->&lt;form style="writing-mode: tb-lr">
+<!-- -->&lt;p>&lt;label>姓名：&lt;input value="艾俐俐">&lt;/label>
+<!-- -->&lt;p>&lt;label>语文：&lt;select>&lt;option>English
+<!-- -->                       &lt;option>français
+<!-- -->                       &lt;option>فارسی
+<!-- -->                       &lt;option> 中文
+<!-- -->                       &lt;option>日本语&lt;/select>&lt;/label>
+<!-- -->&lt;/form></pre>
+
+    <p><img alt="Screenshot of vertical layout: the input element is
+                laid lengthwise from top to bottom and its contents
+                rendered in a vertical typographic mode, matching the
+                labels outside it. The drop-down selection control
+                after it slides out to the side (towards the after
+                edge of the block) rather than downward as it would
+                in horizontal writing modes."
+            src="vertical-form.png"></p>
+  </div>
 
 <h4 id="svg-writing-mode">
 SVG1.1 'writing-mode' Values</h4>