<view class="page-head">
  <view class="page-head-title">form</view>
  <view class="page-head-line"></view>
</view>
<view class="form-page">
  <view class="page-section">
    <form bindsubmit="handleSubmit" bindreset="handleReset" id="formSelf">
      <view class="item-wrap">
        <text class="page-section-title section-title">switch</text>
        <switch name="switch"></switch>
      </view>
      <view class="item-wrap">
        <text class="page-section-title section-title">slider</text>
        <slider name="slider" show-value="{{true}}" value="{{42}}"></slider>
      </view>
      <view class="item-wrap">
        <text class="page-section-title section-title">checkbox</text>
        <checkbox-group name="CheckboxGroup">
          <view class="radio">
            <checkbox value="option1"></checkbox>
            <text class="text">{{i18n.t('form_option1')}}</text>
          </view>
          <view class="radio">
            <checkbox value="option2"></checkbox>
            <text class="text">{{i18n.t('form_option2')}}</text>
          </view>
        </checkbox-group>
      </view>
      <view class="item-wrap">
        <text class="page-section-title section-title">radio</text>
        <radio-group name="RadioGroup">
          <view class="radio">
            <radio value="radio1"></radio>
            <text class="text">{{i18n.t('form_option1')}}</text>
          </view>
          <view class="radio">
            <radio value="radio2"></radio>
            <text class="text">{{i18n.t('form_option2')}}</text>
          </view>
        </radio-group>
      </view>
      <view class="item-wrap">
        <text class="page-section-title section-title">input</text>
        <view class="page-cell">
          <input class="page-input" name="input" placeholder="enter..." />
        </view>
      </view>
      <view class="item-wrap">
        <text class="page-section-title section-title">textarea</text>
        <view class="textarea-wrap">
          <textarea
            name="textarea"
            placeholder="enter..."
            class="textarea-box"
            bindinput="handleTextareaInput"
          ></textarea>
        </view>
      </view>
      <view class="btns-wrap">
        <view class="btn-line">
          <button
            form-type="submit"
            id="triggerBtn"
            data-info="提交的按钮"
            type="primary"
            class="submit-btn"
          >
            submit
          </button>
        </view>
        <view class="btn-line">
          <button form-type="reset" id="resetBtn" data-info="reset的按钮" class="reset-btn">
            reset
          </button>
        </view>
      </view>
    </form>
    <view class="result-wrap">
      <view ty:for="{{resultData}}" ty:key="{{item.name}}" class="result-item">
        <text class="result-name">{{item.name}}: </text>
        <text>{{item.value}}</text>
      </view>
    </view>
  </view>
</view>
