表单组

表单组效果图

滑杆样式2

QQ20170527-174929.png

QQ20170527-175119.png

html结构：

<div class="box">
        <div class="h5ui-group">
            <h5 class="h5ui-group_title">
                <i class="sub-1"></i>
                收款人信息
            </h5>

            <div class="h5ui-form">
                <label for="username" class="h5ui-form-label">真实姓名</label>
                <input type="text" id="username" class="h5ui-form-input" placeholder="占位输入提示">
            </div>

            <div class="h5ui-form">
                <label for="email" class="h5ui-form-label">Email</label>
                <input type="email" id="email" class="h5ui-form-input" placeholder="youname@gmail.com">
            </div>

            <div class="h5ui-form">
                <label for="password" class="h5ui-form-label">密码表单</label>
                <input type="password" id="password" class="h5ui-form-input" placeholder="设置登录密码">
            </div>
        </div>
        <div class="h5ui-group">
            <div class="h5ui-form">
                <label class="h5ui-form-label">详细地址</label>
                <textarea rows="3" class="h5ui-form-input" placeholder="请输入详细地址"></textarea>
            </div>
        </div>
    </div>```

PS：在h5ui原来结构基础上新增DOM结构 <i class="sub-1"></i>

# 换行输入表单项


![换行输入表单项不同结构效果图](http://upload-images.jianshu.io/upload_images/6218157-680365569789b207.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

html结构：

<div class="h5ui-group">
<div class="h5ui-form titenter">
<label class="h5ui-form-label"><span class="fcolor-green">筹款标题</span></label>
<textarea rows="1" class="h5ui-form-input" placeholder="请输入详细地址"></textarea>
</div>
</div>
<div class="h5ui-group">
<div class="h5ui-form titenter">
<label class="h5ui-form-label">
<span class="fcolor-green">提现金额 </span>
<span class="v3-submsg-b">（可提现金额293，248）</span>
</label>
<textarea rows="2" class="h5ui-form-input" placeholder="请输入详细地址"></textarea>

        </div>
    </div> 
    <div class="h5ui-group">
        <div class="h5ui-form titenter">
            <label class="h5ui-form-label"><span class="fcolor-green">筹款标题</span><span class="v3-submsg-s">如何填写</span></label>
            <textarea rows="3" class="h5ui-form-input" placeholder="请输入详细地址"></textarea>
            <div class="v3-txt-num"><span class="u-num1">4</span><span class="u-num2">/120</span></div>
        </div>
    </div>


    <div class="h5ui-group">
        <div class="h5ui-form titenter">
            <label class="h5ui-form-label fcolor-gray">帮他证实</label>
            <textarea rows="2" class="h5ui-form-input" placeholder="请输入详细地址"></textarea>
            <div class="v3-txt-num"><span class="u-num1">4</span><span class="u-num2">/120</span></div>
        </div>
    </div> 

PS: 
1、label换行需要在原结构div.h5ui-form上添加类名titenter；
2、如果label标题的颜色是绿色在label.h5ui-form-label上添加fcolor-green，灰色添加fcolor-gray；
3、如果label后有灰色提示小文字添加结构：<span class="v3-submsg-s">如何填写</span>
4、如果label后有灰色提示大文字添加结构： <span class="v3-submsg-b">（可提现金额293，248）    
     </span>
5、如果需要右下方输入统计数字，需要添加html结构div.v3-txt-num及其子元素，见上图；如果不需要次结构，
     则直接删除div.v3-txt-num及其子元素。


#select下拉框效果
![select下拉框效果](http://upload-images.jianshu.io/upload_images/6218157-e47466af34e48516.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
html结构

<div class="h5ui-form">
<label class="h5ui-form-label" for="date">选择日期</label>
<div class="h5ui-select date-select">
<input class="h5ui-form-input" id="date" type="date" value="">
</div>
</div>

<div class="h5ui-form">
<div class="h5ui-select select-cell">
<select>
<option value="">请选择银行</option>
<option value="ccb">招商银行</option>
<option value="icbc">工商银行</option>
<option value="abchina">建设银行</option>
</select>
</div>
</div>


<div class="h5ui-form">
<label class="h5ui-form-label" for="date">开户银行</label>
<div class="h5ui-select select-cell havetit">
<select>
<option value="">请选择银行</option>
<option value="ccb">招商银行</option>
<option value="icbc">工商银行</option>
<option value="abchina">建设银行</option>
</select>

QQ20170527-171946.png

QQ20170527-172601.png

</div>

</div>

PS: 1、