<h2>Vertical Form Controls</h2>
<div class="wrapper">
<section>
  <h4>&lt;textarea&gt;</h4>
  <textarea rows="15">
何は前せっかくその推察家という方の所にするですない。はたして事実が観念帰りはむくむくその通知たでまでで至るばいるたをは尊重なりないでて、そうにはできるでですですでし。学校へさたのはまあほかがよくですますた。せっかく槙さんを刺戟教師さっそく自失が行っなけれ腹の中同じ尻馬これかお話しのとしてお助力なたたまして、その結果はこれか模範教師にしから、大森君の訳に国家の私をせっかくご作文として彼ら偽りからお妨害が進んようにのらくらご使用がありましなけれと、何しろすでに立脚にもっですているありのが知れますあり。すなわちすなわちご国家のいうのはもともと好きと解らませと、その気がは連れうがという学校をありてくるですまし。
​
その時先方の以上いわゆる事はそれ中の与えたかとネルソンさんをよっべきます、辺の前ですというおお尋ねだだないて、探照灯の上を衣食の前までの国家から前さて切らば、始終の一遍にましてその以上をけっしてさますませとかけるたものなば、忌まわしいですなので実際ご事なっます事ですですで。もしくは英文かあやふやか影響にいうですて、絶対中義務にしばいた時にご招待の先刻に思わなけれでし。前にはかくすると立ったたんたて、はなはだしかるにして＃「もずいぶんないますものます。またお払底に引張りのでもおいたのなくて、当座のも、けっして私か次ぐて訊かれるんませ致すられないたと加えるて、文芸は与えといるですまし。すでに無論はあたかも自分といういませし、そこへは次第ごろとも私のご説明はもったいない怒っ下さろありでしょ。
  </textarea>
</section>
<section>
  <h4>&lt;input type=text&gt;</h4>
  <input type=text value="日本">
</section>
<section>
  <h4>&lt;input type=checkbox switch&gt;</h4>
  <input type="checkbox" switch checked>
</section>
<section>
  <h4>&lt;meter&gt;</h4>
  <meter min="0" max="100" low="33" high="66" optimum="80" value="30"></meter>
  <meter min="0" max="100" low="33" high="66" optimum="80" value="50"></meter>
  <meter min="0" max="100" low="33" high="66" optimum="80" value="90"></meter>
</section>
<section>
  <h4>&lt;input type=range&gt;</h4>
  <input type="range" value="20" max="100">
</section>
<section>
  <h4>&lt;progress&gt;</h4>
  <progress value="40" min="0" max="100"></progress>
  <progress value="80" min="0" max="100"></progress>
</section>
<section>
  <h4>&lt;input type=checkbox&gt;</h4>
  <div style="writing-mode: vertical-rl">
    <div>
        <input type="checkbox" id="checkbox1" checked />
        <label for="checkbox1">ブルーベリー</label>
    </div>
    <div>
        <input type="checkbox" id="checkbox2" />
        <label for="checkbox2">さくらんぼ</label>
    </div>
    <div>
        <input type="checkbox" id="checkbox3" />
        <label for="checkbox3">ココナッツ</label>
    </div>
  </div>
</section>
<section>    
  <h4>&lt;input type=radio&gt;</h4>
  <div style="writing-mode: vertical-rl">
    <div>
        <input type="radio" id="radio1" checked />
        <label for="radio1">ブルーベリー</label>
    </div>
    <div>
        <input type="radio" id="radio2" />
        <label for="radio2">さくらんぼ</label>
    </div>
    <div>
        <input type="radio" id="radio3" />
        <label for="radio3">ココナッツ</label>
    </div>
  </div>  
</section>
<section>
  <h4>&lt;input type=search&gt;</h4>
  <input type=search value="日本" results="3">
</section>
<section>
  <h4>&lt;input type=number&gt;</h4>
  <input type=number>
</section>
<section>
  <h4>&lt;input type=button&gt;</h4>
  <input type="button" value="こんにちは">
</section>
<section>
  <h4>&lt;input type=file&gt;</h4>
  <input type=file>
</section>
<section>
  <h4>&lt;select&gt;</h4>
  <select>
    <option>選択</option>
    <option>あいなき</option>
    <option>あらまほしき</option>
    <option>わろき</option>
  </select>
</section>
<section>
  <h4>&lt;select multiple&gt;</h4>
  <select multiple="" size="7">
    <option>りんご</option>
    <option>あんず</option>
    <option>バナナ</option>
    <option>ブルーベリー</option>
    <option>さくらんぼ</option>
    <option>ココナッツ</option>
    <option>ぶどう</option>
    <option>キウイ</option>
    <option>レモン</option>
    <option>びわ</option>
    <option>マンゴー</option>
    <option>メロン</option>
    <option>オレンジ</option>
    <option>もも</option>
    <option>なし</option>
    <option>かき</option>
    <option>パイナップル</option>
    <option>きいちご</option>
    <option>いちごy</option>
    <option>すいかn</option>
  </select>
</section>
<!-- <section>
  <h4>&lt;input type=color&gt;</h4>
  <input type=color value="#FF0000">
</section> -->
</div>