zoukankan      html  css  js  c++  java
  • 微信小程序组件form

    表单组件form:官方文档

    Demo Code:

    Page({
      formSubmit: function(e) {
        console.log('form发生了submit事件,携带数据为:', e.detail.value)
      },
      formReset: function() {
        console.log('form发生了reset事件')
      }
    })
    JS
    <form bindsubmit="formSubmit" bindreset="formReset">
      <view class="section section_gap">
        <view class="section__title">switch</view>
        <switch name="switch"/>
      </view>
      <view class="section section_gap">
        <view class="section__title">slider</view>
        <slider name="slider" show-value ></slider>
      </view>
    
      <view class="section">
        <view class="section__title">input</view>
        <input name="input" placeholder="please input here" />
      </view>
      <view class="section section_gap">
        <view class="section__title">radio</view>
        <radio-group name="radio-group">
          <label class="checkbox"><radio value="radio1"/>radio1</label>
          <label class="checkbox"><radio value="radio2"/>radio2</label>
        </radio-group>
      </view>
      <view class="section section_gap">
        <view class="section__title">checkbox</view>
        <checkbox-group name="checkbox">
          <label class="checkbox"><checkbox value="checkbox1"/>checkbox1</label>
          <label class="checkbox"><checkbox value="checkbox2"/>checkbox2</label>
        </checkbox-group>
      </view>
      <view class="btn-area">
        <button formType="submit">Submit</button>
        <button formType="reset">Reset</button>
      </view>
    </form>
    WXML
    .section__title{
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding:5px;
    }
    label{
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .section_gap{
        margin-top: 10px;
    }
    .checkbox{
        display:block;
        margin-left:10px;
        margin-top:5px;
    }
    WXSS
  • 相关阅读:
    编译i386 Linux 内核并基于 QEMU 运行
    在 Linux 上编译运行并测试 LwIP 协议栈性能
    gdb 重定位源文件目录
    SkyWalking 分布式追踪系统
    微服务化的基石——持续集成(二)
    微服务容器化的分工与合作,促进DevOps (一)
    预订餐位
    单词记录1.26
    What do you do on weekends
    make a travel plan(LC)
  • 原文地址:https://www.cnblogs.com/betterlife/p/5969060.html
Copyright © 2011-2022 走看看