layui框架中常见表单排版:水平+垂直排版


平常我们经常用到的表单排版方式常见的有两种,layui文档中已经给出垂直的排版方式,来源:https://www.layui.com/doc/element/form.html。我们做后台的时候也会用到水平排版方式,用于在页面的顶部进行搜索的时候用到。

下面我们来看一下水平+垂直表单列表实现:

1.jpg

一、水平排版

html:

<div class="mainTop layui-clear">
<div class="fl">
<button type="button" class="layui-btn layui-btn-blue">新增商品</button>
</div>
<div class="fr">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">状态:</label>
<div class="layui-input-inline">
<select name="city" lay-verify="required" class="select_wd120">
	<option value=""></option>
	<option value="0">启用</option>
	<option value="1">禁用</option>
	<option value="2">暂时</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">创建时间:</label>
<div class="layui-input-inline">
<input type="text" class="layui-input dateIcon" id="dateTime" placeholder="请选择时间范围"
	   style="width: 240px;">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" placeholder="请输入标题" class="layui-input" style="width: 240px;">
</div>
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-blue">搜索</button>
</div>
</div>
</div>

</form>
</div>
</div>

公共css:(包括主题颜色修改)

.fl { float: left; }
.fr { float: right; }
.mb10{ margin-bottom:10px;}
.sideBlock { padding: 24px; }
.layui-form-item .layui-input-inline { width: auto; }
.layui-input, .layui-select, .layui-textarea{ height:36px;}
.layui-form-label {
    padding: 8px 15px;
}
.layui-form-switch {
    height: 34px;
    line-height: 34px;
    margin-top: 0;
    min-width: 54px;
}
.layui-form-switch i {
    width: 24px;
    height: 24px;top: 5px;
}
.layui-form-onswitch i {
    margin-left: -28px;
    top: 5px;
}
.layui-form-switch em{margin-left: 27px;}
.layui-form-onswitch em {
    margin-left: 5px;
}
.layui-btn{ height:36px;}
/*修改颜色风格-蓝色 */
.layui-form-select dl dd.layui-this {
    background-color: #02a7f0;
}
.layui-btn-blue { background-color: #02a7f0; }
.layui-form-onswitch {
    border-color: #02a7f0;
    background-color: #02a7f0;
}
.layui-form-radio>i:hover, .layui-form-radioed>i {
    color: #02a7f0;
}
.layui-form-checked[lay-skin=primary] i {
    border-color: #02a7f0;
    background-color: #02a7f0;
}
.layui-form-checkbox[lay-skin=primary]:hover i {
    border-color: #02a7f0;
}

水平css:

.mainTop .layui-form-label { width: auto; padding-right: 5px; }
.dateIcon { display: inline-block; background: url(images/dateIcon.png) no-repeat 210px center; }

效果展示:

2.jpg

二、垂直排版

html:

<div class="formList">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">昵称<em class="dotRed">*</em>:</label>
<div class="layui-input-block">
<input type="text" placeholder="请输入昵称" class="layui-input" style="width: 320px;">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱<em class="dotRed">*</em>:</label>
<div class="layui-input-block">
<input type="email" placeholder="请输入邮箱" class="layui-input" style="width: 320px;">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别:</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="保密" title="保密" checked>
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">兴趣:</label>
<div class="layui-input-block">
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="唱歌" lay-skin="primary">
<input type="checkbox" name="" title="跳舞" lay-skin="primary" checked>
<input type="checkbox" name="" title="睡觉" lay-skin="primary">
<input type="checkbox" name="" title="画画" lay-skin="primary">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">城市<em class="dotRed">*</em>:</label>
<div class="layui-input-block">
<select name="city" lay-verify="required" class="select_wd320">
	<option value=""></option>
	<option value="0">北京</option>
	<option value="1">上海</option>
	<option value="2">广州</option>
	<option value="3">深圳</option>
	<option value="4">杭州</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态:</label>
<div class="layui-input-block">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">个人签名:</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入活动备注内容" class="layui-textarea"></textarea>
</div>
</div>
</form>
</div>

css:

.dotRed {
    color: #ff3100;
}
.mt32{ margin-top:32px;}
.formList .layui-form-label { padding-right: 0; }
.formList .layui-input-block{ margin-left:100px;}

效果展示:

3.jpg

三、垂直排版---文字很多的时候

我之前在做垂直表单的时候遇到过左侧文字很多的时候会换行显示不美观,那咋办呢,下面是解决办法:

html:

<div class="formList">
<form class="layui-form layui-form-wd120" action="">
<div class="layui-form-item">
<label class="layui-form-label">浏览器名称<em class="dotRed">*</em>:</label>
<div class="layui-input-block">
<input type="text" placeholder="请输入浏览器名称" class="layui-input" style="width: 480px;">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">商店详细地址<em class="dotRed">*</em>:</label>
<div class="layui-input-block">
<select name="city" lay-verify="required" class="select_wd320">
	<option value=""></option>
	<option value="0">北京</option>
	<option value="1">上海</option>
	<option value="2">广州</option>
	<option value="3">深圳</option>
	<option value="4">杭州</option>
</select>
</div>
</div>
</form>
</div>

css:

.layui-form-wd120 .layui-form-label{ width:120px;}
.layui-form-wd120 .layui-input-block{ margin-left:140px;}

效果展示:

4.jpg

如果觉得文字还要很多呢,继续同样的办法:

html:

<div class="formList">
<form class="layui-form layui-form-wd210" action="">
<div class="layui-form-item">
	<label class="layui-form-label">启用上传商品自动生成相册图<em class="dotRed">*</em>:</label>
	<div class="layui-input-block">
		<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
		<span class="error-tips">启用后以商品原图无压缩上传,原图文件较大,会影响网页图片打开速度。</span>
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">启用上传商品保留原图<em class="dotRed">*</em>:</label>
	<div class="layui-input-block">
		<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
	</div>
</div>
</form>
</div>

css:

.layui-form-wd210 .layui-form-label{ width:210px;}
.layui-form-wd210 .layui-input-block{ margin-left:230px;}

.error-tips{ color: #ff3100; font-size:13px; padding-left:10px;}

效果展示:

5.jpg

最终演示效果展示:http://www.jianbaizhan.com/upload/file/20181204/5c06280599c0d/form.html

本文转载自:https://fly.layui.com/jie/45407/


推荐文章
layui如何获取table某一行的值?

layui中可以使用table.checkStatus('ID')方法获取table某一行的值,其中ID为基础参数。【自动化渲染】……【方法渲染】table.render({//其它参数省略 id:'

vue.js和layui一样么?

vue.jsVue(读音/vjuː/,类似于view)是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,方

浅谈layui中table.render的使用(附代码)

layui框架提供了丰富的内置模块,他们皆可通过模块化的方式按需加载,其中包括:layer、layDate、layPage、laytpl、table等。本篇文章给大家浅谈一下layui中table.r

layui和layer的区别是什么?

layui是之前layerlaydate等独立组件的超集合;layui是一个完整的前端框架,和Bootstrap是同一类事务;引入了layui之后layer就不用单独引入了。layer至今仍作为lay

浅谈layui时间控件闪退问题的解决方案

项目上线,发现后台管理系统layui的子页面出现时间控件闪退的问题,根本选取不到时间。其原因是:如果出现页面找到多个节点,只有第一个节点能正常使用后面的节点都会闪退,可以理解为目前laydate不支持

浅谈layui中iframe跳转链接和页面按钮跳转相关问题

一、导航跳转iframe页面问题:关于layui的iframe嵌套页面的导航跳转页面问题,如下图所示可以看到效果:在模板页的导航代码: 所有商品 商品列表 商品属性 商品分类 添加 解决方案

浅谈Layui的时间选择框

Layui中时间格式的输入框:html代码: 选择日期: -- - js代码:layui.use(['layer','form','table','laydate'],function()

浅谈layui弹出层(open)的属性

layui.open属性如:打开一个弹出层核心方法varindex=layer.open({ type:2, title:title, maxmin:true, offset:'100px', are

浅谈layui标签输入框inputTags

layui标签输入框inputTags样式:目录结构:页面代码: inputTags layui.config({ base:'js/

浅谈让 layui table 固定列也能监听滚动的方法

目前table能滚动的区域是layMain这个区域,他会联动的去滚动表头和固定列,左右固定列实际他们本身的样式overflow是hidden的,所以本身不会出现滚动条,也就是说你把鼠标移动到左右固定列

layui如何关闭弹出层?

layui可以使用closeAll关闭弹出层,如果不指向层类型的话,它会销毁掉当前页所有的layer层。我们可以使用下面的方法关闭指定层:layer.closeAll();//疯狂模式,关闭所有层la

layui中如何获取表格全部数据?

layui中获取表格全部数据第一步可以通过layui.table.cache["testReload"]的方式来获取表格全部数据,其中testReload是表格id第二步打开网页,我们可以看一下要获取

layui怎么固定表格的表头?

步骤:1、设置两个table,第一个table有thead没有tbody,第二个table有tbody没有table;2、第二个table需要一个div包住,并设置宽高,可用绝对布局3、tr下的th和

详解layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:1、模块化与非模块化的区别layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。模块化:使用时加载相应的模块。非模块化:一次性加载所有

如何让layui支持es5?写法介绍

写js的时候会写一些es5的代码,但是打包到dist时,发现不支持语法,怎么办呢。两步添加es5支持:一、使用npm下载安装babel,进入gulpfile.js所在目录。$npminstall--s

浅谈layui前端遇到的难点(集合)

一、表格中插入下拉框的情况问题:表格遇到下拉框表单的情况,下拉框在表格中没办法显示出来,效果:1、表格中下拉框被隐藏----方法1这种方法解决了表格中下拉框被隐藏的状态了,但是显示并不是很美观,距离最

layui调用弹层的方法

两种调用方法:1、引用独立的layer.js文件引入好layer.js后,直接用即可 layer.msg('hello'); 2、调用layui中的layer模块layui.use('layer',

Django+Layui学习之浅谈后台布局

前言Layui对于没有太多前端基础的我来说,第一次接触还是有点困难,不过文档还算详细,摸索着的逐渐的了解了,这次来说下后台布局。Layui后台布局:一、后台布局之顶边栏 layui后台布局 控制台

layui框架属于前端还是后端?

layui框架属于前端还是后端?layui框架属于前端,是前端框架。layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,

layui动态表格之合并单元格

需求:下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的:①第一步:再生成表格后调用此方法,以合并重复的单元格done:function(res,curr,count){ merge(