Form(文本框)


填写类表单-文本框。Form UI 提供与WeLink规范一致的表单视图。

效果示例

HTML
    <div class="page" style="background: #eee;">
        <div class="page__hd">
            <h1 class="page__title">Form</h1>
            <p class="page__desc">表单(填写)
        </div>
        <div class="page__bd">
            <div class="weui-form_view">
                <div class="weui-form_view-cell weui-form_view-cell__access weui-form_view-cell__line">
                    <div class="weui-form_view-cell__header ">标题<span class="weui-form_view_cell_nonull">*</span></div>
                    <div class="weui-form_view-cell__body weui-form_view-cell__align_rg">
                        <input id="input1" class="weui-input" type="text" placeholder="请输入"/>
                    </div>
                </div>
                <div class="weui-form_view-cell weui-form_view-cell__access">
                    <div class="weui-form_view-cell__header">标题标题标题标题标题标题标题标题标题标题</div>
                    <div class="weui-form_view-cell__body weui-form_view-cell__align_rg active">
                        <input id="input1" class="weui-input" type="text" placeholder="请输入"/>
                    </div>
                </div>
            </div>            
            <div class="weui-form_view" style="margin-top: 30px;">
                <div class="weui-form_view-cell weui-form_view-cell__access weui-form_view-cell__explan">
                    <div class="weui-form_view-cell__explan-layout">
                        <div class="weui-form_view-cell__header">标题</div>
                        <div class="weui-form_view-cell__body active weui-form_view-cell__align_rg">
                            <input id="input1" class="weui-input" type="text" placeholder="请输入" value="输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容"/>
                        </div>
                    </div>
                    <div class="weui-form_view-cell__explan-text">
                        辅助文本说明,辅助文本说明辅助文本说明辅助文本说明
                    </div>
                </div>
            </div>
            <div class="weui-form_view" style="margin-top: 30px;">
                <div class="weui-form_view-cell weui-form_view-cell__access  weui-form_view-cell__explan">
                    <div class="weui-form_view-cell__explan-layout">
                        <div class="weui-form_view-cell__header">标题</div>
                        <div class="weui-form_view-cell__body active weui-form_view-cell__align_rg">
                            <input id="input1" class="weui-input" type="text" placeholder="请输入"/>
                        </div>
                    </div>
                    <div class="weui-form_view-cell__explan-text weui-form_view-cell__explan-error">
                        错误信息校验,右对齐
                    </div>
                </div>
            </div>
            <div class="weui-form_view" style="margin-top: 30px;">
                <div class="weui-form_view-cell__verticality weui-form_view-cell__access weui-form_view-cell__explan">            
                    <div class="weui-form_view-cell__header">标题</div>
                    <div class="weui-form_view-cell__body active">
                        <input id="input1" class="weui-input" type="text" placeholder="请输入"/>
                    </div>
                    <div class="weui-form_view-cell__explan-text">
                        辅助文本说明,辅助文本说明辅助文本说明辅助文本说明
                        辅助文本说明,辅助文本说明辅助文本说明辅助文本说明
                    </div>
                </div>
            </div>            
            <div class="weui-form_view" style="margin-top: 30px;">
                <div class="weui-form_view-cell__verticality weui-form_view-cell__access weui-form_view-cell__explan">            
                    <div class="weui-form_view-cell__header">标题</div>
                    <div class="weui-form_view-cell__body active">
                        <input id="input1" class="weui-input" type="text" placeholder="请输入" value="输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容"/>
                    </div>
                    <div class="weui-form_view-cell__explan-text weui-form_view-cell__explan-error">
                        错误信息校验,左对齐
                    </div>
                </div>
            </div>
        </div>
    </div>

result. ""

    Not Found. ""