weui/src/example/form/form_vertical.html

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

<div class="page">
  <div class="weui-form">
    <div class="weui-form__bd">
      <div class="weui-form__text-area">
        <h2 class="weui-form__title">上下结构</h2>
        <div class="weui-form__desc">上下结构样式</div>
      </div>
      <div class="weui-form__control-area">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
              <div class="weui-cell weui-cell_active weui-cell_vertical">
                <div class="weui-cell__hd"><label for="js_text" class="weui-label">问题描述</label></div>
                <div class="weui-cell__bd">
                  <textarea id="js_text" class="weui-textarea" placeholder="请描述你所发生的问题" rows="3"></textarea>
                  <div role="option" aria-live="polite" class="weui-textarea-counter"><span>0</span>/200</div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="weui-form__ft">
      <div class="weui-form__opr-area">
        <a role="button" class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
      </div>
    </div>
  </div>
</div>