小程序开发----表单控件_程序员插件表单控件-优快云博客

本文链接：https://blog.youkuaiyun.com/scwMason/article/details/82818414

本文介绍了一个使用小程序实现的表单页面，包含多种输入组件如文本输入、数字输入、开关、滑块等，并集成了轮播图功能，展示了如何通过wxml和wxss进行布局和样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--miniprogram/pages/Formdemo1/form.wxml-->
<swiper indicator-dots='true' autoplay='true' interval='3000' duration='1000' circular='true'>
  <block wx:for="{{imgURLS}}">
    <swiper-item class="image">
      <image src="{{item}}"></image>
    </swiper-item>
  </block>
</swiper>
<form bindsubmit='submit' bindreset='reset'>
  <view class="name" id="view">姓名
    <input class="input" type='text' maxlength='10' cursor-spacing='2px'></input>
  </view>
  <view class="phoneNumber" id="view">手机号码
    <input class="input" type="number" maxlength='11'></input>
  </view>
  <view class="KaiGuan" id="view">是否开启Wifi
    <switch name="switch"></switch>
  </view>
  <view class="slider" id="view">需要的数量
    <slider></slider>
  </view>
  <view class="radio" id="view">性别
    <radio-group>
      <view style='display:flex'>
        <radio>radio1</radio>
      </view>
      <view>
        <radio>radio2</radio>
      </view>
    </radio-group>
  </view>
  <view id="view">喜欢的课程
    <view>
      <checkbox-group>
        <view style="display:flex">
          <checkbox>高数</checkbox>
        </view>
        <view style="display:flex">
          <checkbox>C语言程序设计</checkbox>
        </view>
        <view style="display:flex">
          <checkbox>大学英语</checkbox>
        </view>
        <view style="display:flex">
          <checkbox>单片机原理</checkbox>
        </view>
      </checkbox-group>
    </view>
  </view>
  <view class="btn-area" id="view">
    <button form-type='submit'>Submit</button>
    <button form-type='reset'>Reset</button>
  </view>
  
  <view class="section" id="view">
    <picker mode="time" value='{{time}}' start="09:01" end="21:01" bindchange='bindTimeChange'>
      <view class="picker">
        当前选择时间
        <view class="timeChoose">{{time}}</view>
      </view>
    </picker>
  </view>
  <view class="section" id="view">
    <picker mode="date" value='{{date}}' start="2017-01-01" end="2018-10-1" bindchange='bindDateChange'>
      <view class="picker">
        当前选择日期
        <view class="timeChoose">{{date}}</view>
      </view>
    </picker>
  </view>
  <view>
    <textarea placeholder="请输入" placeholder-class='textarea'></textarea>
  </view>
</form>