Input 表单基础

使用方法

整体用ax-form-group样式包裹,输入部分用ax-form-con包裹,ax-form-con中的输入控件是按100%显示,通过定义ax-form-input的宽度来确定输入控件的宽度;表头用ax-form-label包裹,框架设定其宽度是160px,用户根据需要自行修改。基本格式如下:

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="text"></div>
                                </div>
                                </div>
                                </div>
                            
姓名:
评论内容:

考虑到一些特殊行业的特殊字段,表头可以一行,也可以两行显示。

您十年前在深圳的曾用名是什么:
IE11下有BUG,暂时没有解决方法。

禁止录入

对输入控件inputtextarea填入readonly="即可。

姓名:
评论内容:

文件选择

原始的file控件显示效果比较差,而且不同浏览器显示结果不同,故使用原生js设计了本文件上传控件,美观实用。更多文件域使用方法详见这里

选择文件:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择文件:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-file" data-placeholder="点击选择头像" data-text="选择文件">
                                <input type="file">
                                </div>
                                </div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg),var(--load-gif);"></a>
                                </div>
                                </div>
                            

扩展一:右侧显示结果

ax-form-con之后使用ax-form-txt样式,配合使用图标即可实现。请观摩效果演示。

姓名:
姓名:
姓名:
你错了
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="text"></div>
                                </div>
                                <div class="ax-form-txt ax-color-danger"><span class="ax-iconfont ax-icon-close-o-f"></span> 文字</div>
                                </div>
                                </div>
                            

扩展二:右侧添加清除按钮

在输入控件input和textarea后添加ax-pos-right样式,对图标使用ax-val-none即可,请观摩效果演示。

姓名:
评论内容:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span></div>
                                </div>
                                </div>
                                </div>
                            

除了添加清除图标之外,同理还可以添加其他图标,想让图标具备什么功能用户可通过自行编写js实现。

姓名:
评论内容:

扩展三:右侧按钮

表单中经常在右侧放置按钮用来跳转或者打开窗口,本框架使用ax-form-btn表示表单右侧按钮。以下以手机验证码为例进行效果演示。更多按钮用法见按钮

手机验证码:
获取验证码
手机验证码:
获取验证码
手机验证码:
52s后重新获取
手机验证码:
手机验证码:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="text"></div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn">文字</a>
                                </div>
                                </div>
                            

扩展四:一行输入多个值

在某些行业中,多个字段是关联的,所以需要在一行录入相关联的字段,比如省市县、房源等。在ax-form-input中使用均分或者非均分布局方法实现,本框架设计了两种效果,请观摩效果演示。

选择房子:
所在位置:
县/区
病症:
疾病
症状
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><input type="text"></div>
                                <span class="ax-bunch-txt">文字</span>
                                <div class="ax-col ax-col-8"><input type="text"></div>
                                <span class="ax-bunch-txt">文字</span>
                                <div class="ax-col ax-col-8"><input type="text"></div>
                                <span class="ax-bunch-txt">文字</span>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><input type="text"><span class="ax-pos-right">文字</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input type="text"><span class="ax-pos-right">文字</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input type="text"><span class="ax-pos-right">文字</span></div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>
                            

扩展五:右侧显示文字或图片

框架定义了ax-form-txtax-form-headax-form-img,用来显示文字和图片。请观摩演示效果

单价:
单位(元)
带头像:
李创江
带图片:
李创江
验证码:
显示验证码
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">单价:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入商品单价" value="" type="text"></div>
                                </div>
                                <span class="ax-form-txt ax-color-ignore">单位(元)</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">带头像:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text"></div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg),var(--load-gif);"></a><span class="ax-form-txt ax-color-des">李创江</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">带图片:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text"></div>
                                </div>
                                <a href="###" class="ax-form-img"><img src="
                                https://src.axui.cn/v2.0/examples/images/image-1.jpg"></a><span class="ax-form-txt ax-color-des">李创江</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">验证码:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text"></div>
                                </div>
                                <span class="ax-form-img"><a href="###">显示验证码</a></span>
                                </div>
                                </div>
                            

基础效果预览

姓名:
姓名:
姓名:
你错了
姓名:
姓名:
您十年前在深圳的曾用名是什么:
选择房子:
选择房子:
手机验证码:
获取验证码
手机验证码:
获取验证码
手机验证码:
52s后重新获取
单价:
单位(元)
名称(头像):
李创江
名称(图片):
李创江
选择文件:
评论:
评论(只读):
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
                                </div>
                                <span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
                                </div>
                                <span class="ax-form-txt ax-color-danger ax-iconfont ax-icon-close-o-f"></span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
                                </div>
                                <div class="ax-form-txt ax-color-danger"><span class="ax-iconfont ax-icon-close-o-f"></span> 你错了</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="只读的input" readonly type="text"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="李畅" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">您十年前在深圳的曾用名是什么:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
                                </div>
                                <span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择房子:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几室" value="" type="text"><span class="ax-pos-right">室</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value="" type="text"><span class="ax-pos-right">厅</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value="" type="text"><span class="ax-pos-right">卫</span></div>
                                </div>
                                </div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-danger ax-icon ax-round"><span class="ax-iconfont ax-icon-trash-alt-f"></span></a><a href="###" class="ax-form-btn ax-btn ax-icon ax-round"><span class="ax-iconfont ax-icon-trash-alt-f"></span></a>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择房子:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几室" value="" type="text"></div>
                                <span class="ax-bunch-txt">室</span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value="" type="text"></div>
                                <span class="ax-bunch-txt">厅</span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value="" type="text"></div>
                                <span class="ax-bunch-txt">卫</span>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">手机验证码:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text"></div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">手机验证码:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text"></div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn">获取验证码</a>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">手机验证码:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text"></div>
                                </div>
                                <span class="ax-form-btn ax-btn ax-forbid">52s后重新获取</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">单价:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入商品单价" value="" type="text"></div>
                                </div>
                                <span class="ax-form-txt ax-color-ignore">单位(元)</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称(头像):</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a><span class="ax-iconfont ax-icon-me"></span></span></div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg),var(--load-gif);"></a><span class="ax-form-txt ax-color-des">李创江</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称(图片):</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text"></div>
                                </div>
                                <a href="###" class="ax-form-img"><img src="
                                https://src.axui.cn/v2.0/examples/images/image-1.jpg"></a><span class="ax-form-txt ax-color-des">李创江</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择文件:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-file" data-placeholder="点击选择头像" data-text="选择文件">
                                <input type="file">
                                </div>
                                </div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg),var(--load-gif);"></a>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">评论:</div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">评论(只读):</div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论" readonly=""></textarea></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label"></div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full">提交button</button></div>
                                </div>
                                </div>
                                </div>
                            

在线调试请点击这里

直角风格

框架表单风格是3px的圆角风格,对input、teatarea、selet使用ax-square类即可。

姓名:
选择房子:
手机验证码:
获取验证码
名称(头像):
李创江
选择文件:
评论:
选择城市:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text" class="ax-square"></div>
                                </div>
                                <span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择房子:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几室" value="" type="text" class="ax-square"><span class="ax-pos-right">室</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value="" type="text" class="ax-square"><span class="ax-pos-right">厅</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value="" type="text" class="ax-square"><span class="ax-pos-right">卫</span></div>
                                </div>
                                </div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-danger ax-icon ax-square"><span class="ax-iconfont ax-icon-trash-alt-f"></span></a>
                                </div>
                                </div>


                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">手机验证码:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text" class="ax-square"></div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-primary ax-square">获取验证码</a>
                                </div>
                                </div>


                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称(头像):</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text" class="ax-square"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a><span class="ax-iconfont ax-icon-me"></span></span></div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg),var(--load-gif);"></a><span class="ax-form-txt ax-color-des">李创江</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择文件:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-file ax-square" data-placeholder="点击选择头像" data-text="选择文件">
                                <input type="file">
                                </div>
                                </div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg),var(--load-gif);"></a>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">评论:</div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论" class="ax-square"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择城市:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <select class="ax-square">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="重庆">重庆</option>
                                </select>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label"></div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full ax-square">提交button</button></div>
                                </div>
                                </div>
                                </div>
                            

圆形风格

框架表单风格是3px的圆角风格,对input、textarea、select使用ax-round类即可。

姓名:
选择房子:
手机验证码:
获取验证码
名称(头像):
李创江
选择文件:
评论:
选择城市:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text" class="ax-round"></div>
                                </div>
                                <span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择房子:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几室" value="" type="text" class="ax-round"><span class="ax-pos-right">室</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value="" type="text" class="ax-round"><span class="ax-pos-right">厅</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value="" type="text" class="ax-round"><span class="ax-pos-right">卫</span></div>
                                </div>
                                </div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-danger ax-icon ax-round"><span class="ax-iconfont ax-icon-trash-alt-f"></span></a>
                                </div>
                                </div>


                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">手机验证码:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text" class="ax-round"></div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-primary ax-round">获取验证码</a>
                                </div>
                                </div>


                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称(头像):</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text" class="ax-round"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a><span class="ax-iconfont ax-icon-me"></span></span></div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg),var(--load-gif);"></a><span class="ax-form-txt ax-color-des">李创江</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择文件:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-file ax-round" data-placeholder="点击选择头像" data-text="选择文件">
                                <input type="file">
                                </div>
                                </div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg),var(--load-gif);"></a>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">评论:</div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论" class="ax-round"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择城市:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <select class="ax-round">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="重庆">重庆</option>
                                </select>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label"></div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full ax-round">提交button</button></div>
                                </div>
                                </div>
                                </div>

                            

标题避让 JS

这种用法暂时叫做“避让”,顾名思义当表单控件成为焦点的时候,指示标题缩小至左上方,既能输入内容又可告知当前输入字段,比表单控件自带的placeholder属性好用。为了实现该效果写了一小段JS,具体用法是对input和textarea控件的父层追加ax-dodge即可。目前看来避让效果只是对input和textarea使用比较合适。另外该效果只对常规尺寸和ax-lg尺寸良好,不建议对ax-smax-xs尺寸使用。

通过axDodge(targetDom,text)方法可实现异步避让,axDodge方法有两个参数,说明如下:

  • targetDom:可填写'#id'或者'DOM'
  • text:纯文本

axDodge方法的意思是:向targetDom录入text值之后执行避让效果。立即避让 取消避让

  •                                             <script type='text/javascript'>
                                                var okDodge = document.querySelector('#okDodge');
                                                var cancelDodge = document.querySelector('#cancelDodge');
                                                okDodge.onclick = function(){
                                                axDodge('#divDodge','张春阳');
                                                }
                                                cancelDodge.onclick = function(){
                                                axDodge('#divDodge','');
                                                }
                                                </script>
                                            
  •                                             <a href="###" class="ax-btn ax-primary ax-sm" id="okDodge">立即避让</a>
                                                <a href="###" class="ax-btn ax-primary ax-sm" id="cancelDodge">取消避让</a>
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-con">
                                                <div class="ax-form-input ax-dodge"><input name="username" placeholder="请输入姓名" type="text"></div>
                                                </div>
                                                </div>
                                                </div>
    
                                                <div class="ax-break-md"></div>
    
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-flex-block">
                                                <div class="ax-form-input ax-dodge"><textarea name="" cols="" rows="" placeholder="请写下你的评论" ></textarea></div>
                                                </div>
                                                </div>
                                                </div>
    
                                                <div class="ax-break-md"></div>
    
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-con">
                                                <div class="ax-form-input ax-dodge"><input name="username" placeholder="请输入姓名" type="text" class="ax-lg"></div>
                                                </div>
                                                </div>
                                                </div>
    
                                                <div class="ax-break-md"></div>
    
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-flex-block">
                                                <div class="ax-form-input ax-dodge"><textarea name="" cols="" rows="" placeholder="请写下你的评论" class="ax-lg"></textarea></div>
                                                </div>
                                                </div>
                                                </div>
    
                                            

不同尺寸

本框架input默认高度是38px,用户可以对input和textarea追加尺寸类实现不同大小,包括:高22px的ax-xs尺寸、高28px的ax-sm尺寸和高48px的ax-lg尺寸。如果是组合表单,那么除了给input和textarea追加尺寸类之外还需要给ax-form-group追加尺寸类。

高22px的ax-xs。

名称(头像):
李创江
                                <input name="username" placeholder="输入登录名称" type="text" class="ax-xs">
                                <div class="ax-break-md"></div>
                                <textarea name="" cols="" rows="" placeholder="写评论" class="ax-xs"></textarea>
                                <div class="ax-break-md"></div>
                                <select class="ax-xs">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="重庆">重庆</option>
                                </select>
                                <div class="ax-break-md"></div>
                                <div class="ax-form-group ax-xs">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称(头像):</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" class="ax-xs" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a><span class="ax-iconfont ax-icon-me"></span></span></div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg),var(--load-gif);"></a><span class="ax-form-txt ax-color-des">李创江</span>
                                </div>
                                </div>
                            

高28px的ax-sm。

名称(头像):
李创江
                                <input name="username" placeholder="输入登录名称" type="text" class="ax-sm">
                                <div class="ax-break-md"></div>
                                <textarea name="" cols="" rows="" placeholder="写评论" class="ax-sm"></textarea>
                                <div class="ax-break-md"></div>
                                <select class="ax-sm">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="重庆">重庆</option>
                                </select>
                                <div class="ax-break-md"></div>
                                <div class="ax-form-group ax-sm">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称(头像):</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" class="ax-sm" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a><span class="ax-iconfont ax-icon-me"></span></span></div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg),var(--load-gif);"></a><span class="ax-form-txt ax-color-des">李创江</span>
                                </div>
                                </div>
                            

高48px的ax-lg。

名称(头像):
李创江
                                <input name="username" placeholder="输入登录名称" type="text" class="ax-lg">
                                <div class="ax-break-md"></div>
                                <textarea name="" cols="" rows="" placeholder="写评论" class="ax-lg"></textarea>
                                <div class="ax-break-md"></div>
                                <select class="ax-lg">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="重庆">重庆</option>
                                </select>
                                <div class="ax-break-md"></div>
                                <div class="ax-form-group ax-lg">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称(头像):</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" class="ax-lg" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a><span class="ax-iconfont ax-icon-me"></span></span></div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg),var(--load-gif);"></a><span class="ax-form-txt ax-color-des">李创江</span>
                                </div>
                                </div>
                            

所有文本输入类型

对于input文本输入的诸多类型,大致分为两类,一类是除了外框没有其他修饰的元素;一类是带着某些修饰功能的元素。

无修饰类别:text、url、tel、email、password

有修饰类别:number(增减按钮)、search(清空按钮)、color(颜色选择按钮)、date(包括datetime/month/week/time/datetime-local)

AXUI只对type=text进行默认样式设定,如果其他类型的文本输入框需要美化请追加ax-input样式。

text
无type:
url:
tel:
email:
password:
number:
search:
date:
color:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">text</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="text" placeholder="请输入..." ></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">无type:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">url:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="url" placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">tel:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="tel" placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">email:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="email" placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">password:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="password"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">number:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="number" placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">search:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="search" placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">date:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="date" placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">color:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="color" placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>
                            

移动端自适应

本框架默认在PC下使用,如果需要在移动端实现自适应效果请在ax.css之后加载ax-response.css。自适应效果请详见:基础表单

插件使用方法

以上的input方法是最原始、简单的创建方法,对于管理系统开发者而言大概认为不够好用的。我们通常需要对input进行赋值、清空、事件等操作,通过实例化之后更便于管理。

插件运行方式有四种:

  • ax*属性:对input标签使用axInput属性即可按默认参数运行插件。
  • ax*属性:对div标签使用axInput属性即可按默认参数运行插件(此div将作为wrapper包裹input)。
  • js实例:通过new axInput('#ID')方式创建实例运行。
  • js实例:通过new axInput('')方式创建内存实例运行。
input创建实例:
父层创建实例:
用ID创建实例:
创建内存实例:
F12打开控制台看看,input节点将被新创建的ax-form-wrapper包裹。
  •                                             <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">input创建实例:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input"><input placeholder="请输入姓名" type="text" axInput></div>
                                                </div>
                                                </div>
                                                </div>
    
                                                <div class="ax-break-md"></div>
    
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">父层创建实例:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input" axInput></div>
                                                </div>
                                                </div>
                                                </div>
    
                                                <div class="ax-break-md"></div>
    
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">用ID创建实例:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input"><input placeholder="请输入姓名" type="text" id="input"></div>
                                                </div>
                                                </div>
                                                </div>
                                            
  •                                             new axInput('#input');
                                                console.log(new axInput(''));
                                            

功能扩展

实例化的input自带了清除按钮,可通过clearShow:true显示,另外用户可通过extend参数自行扩展功能按钮。

extend可以是一个对象(一个扩展),也可以是一个数组(多个扩展),扩展的参数说明如下:

  • name:对扩展组件取一个名字。
  • icon:扩展组件的图标样式名,比如"ax-iconfont ax-icon-zoomin"。
  • text:扩展的按钮文本,icon和text用一个便好了。
  • node:扩展按钮的节点名称,默认是“a”,用户可以填“i”或“span”。
  • callback:扩展按钮点击之后的回调函数,支持两个参数button(按钮自身)和field(input域)。
创建扩展:
  •                                             <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">创建扩展:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input" id="extend"></div>
                                                </div>
                                                </div>
                                                </div>
                                            
  •                                             new axInput('#extend',{
                                                extend:[
                                                {
                                                name:'zoom',
                                                icon:'ax-iconfont ax-icon-zoomin',
                                                node:'a',
                                                callback:function(button,field){
                                                button.onclick = ()=>{
                                                field.value = '看,我创建了一个扩展组件!';
                                                }
                                                }
                                                },
                                                {
                                                name:'me',
                                                icon:'ax-iconfont ax-icon-me',
                                                node:'a',
                                                callback:function(button,field){
                                                button.onclick = ()=>{
                                                new axMessage({
                                                content:'看,我创建了一个扩展组件!'
                                                });
                                                }
                                                }
                                                },
                                                ],
                                                });
                                            

字数限制

input实例化后的一个重要功能是使用字数限制,通过limit参数设置允许的文字数量,input下方将实时显示已输入文字数量和剩余可输入的文字数量。

允许输入10个字:
  •                                             <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">允许输入10个字:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input" id="limit"></div>
                                                </div>
                                                </div>
                                                </div>
                                            
  •                                             new axInput('#limit', {
                                                limit: 10,
                                                });
                                            

其他类型

axInput实例化的类型type,默认是text,除了text还支其他持四类input实例化。

  • 多行文本域:textarea
  • 隐藏域:hidden
  • 按钮:submit、reset和button
  • 功能性类型input:url、tel、search、email、color、number、range、month、week、date、time、datetime、datetime-local
search类型:
textarea类型:
button类型:
注意:按钮类型的按钮文字通过value参数来设定
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">search类型:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input" axInput='type:"search",className:"ax-input"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">textarea类型:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input" axInput='type:"textarea"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">ccccc
                                <div class="ax-form-label">button类型:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input" axInput='type:"button",value:"按钮",className:"ax-btn"'></div>
                                </div>
                                </div>
                                </div>
                            

操作方法

创建实例后我们需要使用内置方法进行增删改操作。

  • set:设置input的value,支持两个参数:设置文本和回调函数
    • text:文本内容
    • callback:回调函数,支持三个参数:input本身、实际文本值和剩余可输入的文字数量
  • getValues:获取input的值,支持回调函数,无参数
  • clear:清空input值,支持回调函数,回调函数可使用一个参数,即input本身

既然需要操作实例,那么便需要了解内置的变量有哪些:

  • this:实例本身
  • this.parent:input的父节点
  • this.field:input的自身节点
  • this.limit:字数限制的div节点
  • this.tools:扩展工具节点
  • this.output:实例输出内容,是一个对象,属性如下:
    • name:字段名
    • value:input的文本值
    • dom:input本身节点
    • parent:input父节点
    • type:input类型,与options.type一致
  •                                             <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">操作:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input" id="operate"></div>
                                                </div>
                                                </div>
                                                </div>
    
                                                <div class="ax-break"></div>
    
                                                <a href="###" id="set" class="ax-btn">设置值</a>
                                                <a href="###" id="clear" class="ax-btn">清除值</a>
                                                <a href="###" id="get" class="ax-btn">获取值</a>
                                                <a href="###" id="detail" class="ax-btn">获取详细,打开F12看控制台</a>
                                            
  •                                             let optIns = new axInput('#operate', {
                                                limit: 20,
                                                clearShow: true,
                                                placeholder: '请输入...'
                                                }),
                                                set = document.querySelector('#set'),
                                                get = document.querySelector('#get'),
                                                clear = document.querySelector('#clear'),
                                                detail = document.querySelector('#detail');
    
                                                set.onclick = () => {
                                                optIns.set('伟大的中国', () => {
                                                alert('设置了“伟大的中国”');
                                                });
                                                }
                                                get.onclick = () => {
                                                alert('当前值:' + optIns.getValues());
                                                }
                                                clear.onclick = () => {
                                                optIns.clear(() => {
                                                alert('清空了');
                                                });
                                                }
                                                detail.onclick = () => {
                                                console.log(optIns.output);
                                                }
                                            

监听事件

借鉴jQuery的写法,本插件有若干监听方法,格式是:instance.on('event',function(){});具体事件说明如下:

  • set/onSet 设置值后执行,支持三个参数:
    • field input节点本身
    • text input的值
    • remainder 剩余可输入的文字数量
  • onInit 初始化后执行,支持参数output,即输出详细
  • clear/onClear 清除后执行,支持参数output,即输出详细
  • exceed/onExceed 字数到极限后执行,支持参数output,即输出详细
  • input/onInput 键入文字后执行,支持参数output,即输出详细

演示实例使用console方法,请用F12打开浏览器控制台查看监听结果。

监听:
设置值 清除值
  •                                             <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">监听:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input" id="on"></div>
                                                </div>
                                                </div>
                                                </div>
    
                                                <div class="ax-break"></div>
    
                                                <a href="###" id="onset" class="ax-btn">设置值</a>
                                                <a href="###" id="onclear" class="ax-btn">清除值</a>
                                            
  •                                             let onIns = new axInput('#on', {
                                                limit: 20,
                                                clearShow: true,
                                                placeholder: '请输入...',
                                                onInit:()=>{
                                                console.log('初始化了!')
                                                }
                                                }),
                                                onset = document.querySelector('#onset'),
                                                onget = document.querySelector('#onget'),
                                                onclear = document.querySelector('#onclear');
                                                onset.onclick = () => {
                                                onIns.set('伟大的中国');
                                                }
                                                onget.onclick = () => {
                                                onIns.getValues()
                                                }
                                                onclear.onclick = () => {
                                                onIns.clear();
                                                }
                                                onIns.on('set', (field, text) => {
                                                console.log('设置了值:' + text)
                                                }).on('clear', (field, text) => {
                                                console.log('清空了')
                                                }).on('exceed', () => {
                                                console.log('字数到极限了')
                                                }).on('input', (obj) => {
                                                console.log('输入了文字:'+obj.dom.value);
                                                });
                                            

参数选项

                                document.addEventListener("DOMContentLoaded", function() {
                                var demo1 = new axInput('#id',{
                                type: 'text', //input类型,text、range、date、password、textarea等
                                name: '', //字段名
                                value: '', //初始值
                                limit: 0, //最多录入多少字符,默认为0不限制
                                placeholder: '', //表单域输入提示
                                width: '', //设置表单域宽度,比如width:'100px'
                                height: '', //设置表单域高度,比如height:'100px'
                                size: '', //设置表单域的尺寸,可以填xs、sm、md或lg
                                className: '', //设置表单域样式名
                                props: '', //设置表单域其他属性,比如props:{role:'',display:''}
                                toolsShow: true, //设置是否显示右侧工具,默认显示
                                extend: '', //工具扩展,可以是一个对象也可以是一个数组,格式为[{name:'',icon:'',text:'',node:'',callback:''},]
                                clearShow: false, //当toolsShow: true的时候是否显示清除按钮,默认true显示,可选择false不显示
                                onClear: '', //清除值后的回调函数,支持参数output,即输出详细
                                onSet: '', //设置值后的回调函数,支持input节点本身,input的值和剩余可输出的文字数量
                                onGet: '', //获取值后的回调函数,支持参数output,即输出详细
                                onInit: '', //初始化后的回调函数,支持参数output,即输出详细
                                });
                                });