快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

表单 Form

概述

基础组件,触发业务逻辑时使用。

基础表单

用法:设置类j-form,每一条表单数据为一个j-form-item。如:

<div class="j-form">
    <div class="j-form-item">
        <label class="j-form-item-label">手机号码</label>
        <div class="j-form-item-content">
            <div class="j-input">
                <input type="tel" placeholder="请输入手机号码" class="j-input-inner">
            </div>
        </div>
    </div>
    <div class="j-form-item">
        <label class="j-form-item-label">密码</label>
        <div class="j-form-item-content">
            <div class="j-input">
                <input type="password" placeholder="请输入密码" class="j-input-inner">
            </div>
        </div>
    </div>
</div>
行内表单

用法:设置类j-form-inline。如:

<div class="j-form j-form-inline">
    <div class="j-form-item">
        <label class="j-form-item-label">账号</label>
        <div class="j-form-item-content">
            <div class="j-input">
                <input type="text" placeholder="请输入账号" class="j-input-inner">
            </div>
        </div>
    </div>
    <div class="j-form-item">
        <label class="j-form-item-label">密码</label>
        <div class="j-form-item-content">
            <div class="j-input">
                <input type="password" placeholder="请输入密码" class="j-input-inner">
            </div>
        </div>
    </div>
    <div class="j-form-item">
        <div class="j-form-item-content">
            <button class="j-button j-type-primary">提交</button>
        </div>
    </div>
</div>
label对齐方式

用法:设置类j-form-label-**为方向值,包括leftrighttop,不设置则默认方向为right。如:

<div class="j-form j-form-label-top">
    <div class="j-form-item">
        <label class="j-form-item-label">账号</label>
        <div class="j-form-item-content">
            <div class="j-input">
                <input type="text" placeholder="请输入账号" class="j-input-inner">
            </div>
        </div>
    </div>
</div>
验证提醒

文本提醒:在j-form-item-content内,设置类j-form-tip。如:

<div class="j-form">
    <div class="j-form-item">
        <label class="j-form-item-label">账号</label>
        <div class="j-form-item-content">
            <div class="j-input">
                <input type="text" placeholder="请输入账号" class="j-input-inner">
            </div>
            <div class="j-form-tip">提示文本</div>
        </div>
    </div>
</div>
提示:用户名仅支持英文和数字
提示:请设置6-18位密码

验证提示:根据验证结果类型设置类j-type-**为结果类型值,包括dangerwarningsuccess。如:

<div class="j-form">
    <div class="j-form-item j-type-danger">
        <label class="j-form-item-label">账号</label>
        <div class="j-form-item-content">
            <div class="j-input">
                <input type="text" placeholder="请输入账号" class="j-input-inner">
            </div>
            <div class="j-form-tip">提示文本</div>
        </div>
    </div>
</div>
提示:用户名仅支持英文和数字
验证成功
上一章:阴影 Shadow
下一章:输入框 Input