ColorUI/pages/form/form.wxml

<form>
  <view class="form-box form-avatar-box">
    <view class="form-avatar" bindtap="uploadPhoto" style='background-image:url({{src}})'>
      <text>修改/上传</text>
    </view>
    <view class="form-avatar-item">
      <view class="form-item">
        <input type="text" class="form-input" name="title" value="" placeholder="输入框的描述" />
      </view>
      <view class="form-item">
        <input type="text" class="form-input" name="title" value="" placeholder="输入框的描述" />
        <view class='form-input-btn'>
          <button class='success btn sm'>获取验证码</button>
        </view>
      </view>
    </view>
  </view>
  <view class='form-box'>
    <view class='form-item'>
      <view class='form-title cur form-title-sm'>
        两字
      </view>
      <input class='' type="text" placeholder="输入框的描述" class='form-input'></input>
    </view>
    <view class='form-item'>
      <view class='form-title cur'>
        输入框
      </view>
      <input class='' type="text" placeholder="输入框的描述" class='form-input'></input>
    </view>
    <view class='form-item'>
      <view class='form-title'>
        输入框项
      </view>
      <view class='form-input'>
        <input class='' type="text" placeholder="输入框的描述"></input>
      </view>
      <view class='form-input-btn'>
        <text class='iconfont icon-locationfill warning-text'></text>
      </view>
    </view>
    <view class='form-item'>
      <view class='form-title'>
        输入框
      </view>
      <input class='' type="text" placeholder="输入框的描述" class='form-input'></input>
      <view class='form-input-btn'>
        <button class='success btn sm'>获取验证码</button>
      </view>
    </view>
  </view>
  <view class='form-box'>
    <view class='form-item'>
      <view class='form-title cur'>
        单列选择
      </view>
      <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        <view class="picker">
          {{array[index]}}
        </view>
      </picker>
    </view>
    <view class='form-item'>
      <view class='form-title'>
        多列选择
      </view>
      <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
        <view class="picker">
          {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
        </view>
      </picker>
    </view>
    <view class='form-item'>
      <view class='form-title'>
        时间选择
      </view>
      <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
        <view class="picker">
          {{time}}
        </view>
      </picker>
    </view>
    <view class='form-item'>
      <view class='form-title'>
        日期选择
      </view>
      <picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="bindDateChange">
        <view class="picker">
          {{date}}
        </view>
      </picker>
    </view>
    <view class='form-item'>
      <view class='form-title'>
        地址选择
      </view>
      <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
        <view class="picker">
          {{region[0]}}，{{region[1]}}，{{region[2]}}
        </view>
      </picker>
    </view>
  </view>
  <view class='form-box'>
    <view class='form-item'>
      <view class='form-title cur'>
        单选框
      </view>
      <view class='form-arrow' bindtap='showModal' data-modal="radioModal">
        单选框
      </view>
      <view class="modal-box {{modalName=='radioModal'?'cur':''}}">
        <view class='modal-dialog'>
          <view class="modal-title">
            <text>单选框</text>
          </view>
          <scroll-view class='modal-bd' scroll-y="true" style='max-height:500rpx;'>
            <radio-group class="list-double-col list-box" bindchange="radioChange">
              <label class="list-li" wx:for="{{radio}}">
                <view class='list-text'>{{item.value}}</view>
                <radio value="{{item.name}}" checked="{{item.checked}}" class='list-icon' />
              </label>
            </radio-group>
          </scroll-view>
          <view class='modal-option'>
            <view class='modal-option-btn' bindtap='closeModal'>取消</view>
            <view class='modal-option-btn success-text' bindtap='closeModal'>确认</view>
          </view>
        </view>

      </view>
    </view>
    <view class='form-item'>
      <view class='form-title cur'>
        复选框
      </view>
      <view class='form-arrow' bindtap='showModal' data-modal="checkboxModal">
        复选框
      </view>
      <view class="modal-box {{modalName=='checkboxModal'?'cur':''}}">
        <view class='modal-dialog'>
          <view class="modal-title">
            <text>复选框</text>
            <view class='bar-close badge danger round' bindtap='closeModal'>
              <text class='iconfont icon-close'></text>
            </view>
          </view>
          <scroll-view class='modal-bd' scroll-y="true" style='max-height:500rpx;'>
            <checkbox-group class="list-double-col list-box" bindchange="checkboxChange">
              <label class="list-li" wx:for="{{radio}}">
                <view class='list-text'>{{item.value}}</view>
                <checkbox class='list-icon' value="{{item.name}}" checked="{{item.checked}}" />
              </label>
            </checkbox-group>
          </scroll-view>
          <view class='modal-option'>
            <view class='modal-option-btn' bindtap='closeModal'>取消</view>
            <view class='modal-option-btn success-text' bindtap='closeModal'>确认</view>
          </view>
        </view>
      </view>
    </view>
    <view class='form-item'>
      <view class='form-title cur'>
        两级联动
      </view>
      <view class='form-arrow' bindtap='showModal' data-modal="doubleModal">
        两级联动
      </view>
      <view class="modal-box {{modalName=='doubleModal'?'cur':''}}">
        <view class='modal-dialog'>
          <view class="modal-title">
            <text>两级联动</text>
          </view>
          <view class='modal-bd double-chose'>
            <scroll-view scroll-y class="double-chose-first" style='height:640rpx;width: 400rpx;'>
              <view class="cur">北京</view>
              <view class="" wx:for="asdasdasdasdasdasdasdasdasd">北京</view>
            </scroll-view>
            <scroll-view scroll-y class="double-chose-last" style='height:640rpx;'>
              <view class="cur">北京</view>
              <view class="" wx:for="asdasdasdasdasdasdasdasdasd">北京</view>
            </scroll-view>
          </view>
          <view class='modal-option'>
            <view class='modal-option-btn' bindtap='closeModal'>取消</view>
            <view class='modal-option-btn success-text' bindtap='closeModal'>确认</view>
          </view>
        </view>
      </view>
    </view>
    <view class='form-item'>
      <view class='form-title cur'>
        单项选择
      </view>
      <view class='form-arrow' bindtap='showModal' data-modal="singleModal">
        单项选择
      </view>
      <view class="modal-box {{modalName=='singleModal'?'cur':''}}">
        <view class='modal-dialog'>
          <view class="modal-title">
            <text>单项选择</text>
          </view>
          <scroll-view class='modal-bd' scroll-y="true" style='max-height:800rpx;'>
            <view class='single-modal'>
              <view class="single-modal-item {{item.checked?'cur':''}}" wx:for="{{radio}}" bindtap='closeModal'>{{item.value}}</view>
            </view>
          </scroll-view>
          <view class='modal-option'>
            <view class='modal-option-btn' bindtap='closeModal'>取消</view>
          </view>
        </view>
      </view>
    </view>

    <view class="form-item form-textarea {{modalName==null?'':'hide'}}">
      <view class='form-title cur'>
        文本框
      </view>
      <textarea placeholder='多行文本输入框' maxlength="-1"></textarea>
    </view>
  </view>
  <view class='form-box'>
    <view class='form-item'>
      <view class='form-title cur'>
        单图上传
      </view>
      <view class='form-arrow' wx:if="{{chooseimg}}" bindtap='viewUploadimg'>
        <text class='success-text iconfont icon-roundcheckfill'></text> 已上传
        <text class='gray-text fr'>预览</text>
      </view>
      <view class='form-arrow form-add' bindtap='uploadimg' wx:else>
        请选择图片
      </view>
    </view>

    <view class='form-item form-upload'>
      <view class='form-title cur'>
        多图上传
      </view>
      <view class="lattice-image">
        <view>
          <image src='http://image.weilanwl.com/img/4x3-1.jpg' mode='aspectFill'></image>
          <view class='iconfont icon-close'></view>
        </view>
        <view class='lattice-btn'>
          <text class='iconfont icon-cameraadd'></text>
        </view>
      </view>
    </view>
  </view>
  <view class='form-box'>
    <view class="form-item form-upload  {{modalName==null?'':'hide'}}">
      <textarea placeholder='多行文本输入框' maxlength="-1"></textarea>
      <view class="lattice-image">
        <view>
          <image src='http://image.weilanwl.com/img/3x4-1.jpg' mode='aspectFill'></image>
          <view class='iconfont icon-close'></view>
        </view>
        <view class='lattice-btn'>
          <text class='iconfont icon-cameraadd'></text>
        </view>
      </view>
    </view>
  </view>
</form>