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，暂时没有解决方法。
禁止录入
对输入控件input和textarea填入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/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.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-fill"></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表示表单右侧按钮。以下以手机验证码为例进行效果演示。更多按钮用法见按钮
<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-txt、ax-form-head和ax-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/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.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/v1.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>
基础效果预览
<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-fill"></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-fill"></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-fill"></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-fill"></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-fill"></span></a><a href="###" class="ax-form-btn ax-btn ax-icon ax-round"><span class="ax-iconfont ax-icon-trash-alt-fill"></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/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.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/v1.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/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.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-fill"></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-fill"></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/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.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/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.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-fill"></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-fill"></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/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.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/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.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-sm和ax-xs尺寸使用。
<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/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.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/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.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/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a><span class="ax-form-txt ax-color-des">李创江</span>
</div>
</div>
移动端自适应
本框架默认在PC下使用，如果需要在移动端实现自适应效果请在ax.css之后加载ax-response.css。自适应效果请详见：基础表单