layui框架中常見表單排版介紹-Layui教程-PHP中文網

首頁

web前端

Layui教程

layui框架中常見表單排版介紹

尚

Nov 23, 2019 pm 04:14 PM

layui

layui框架中常見表單排版介紹

平常我們常用到的表單排版方式常見的有兩種，layui文件中已經給出垂直的排版方式，我們做後台的時候也會用到水平排版方式,用於在頁面的頂部進行搜尋的時候用到。推薦：layui教學

下面我們來看看水平垂直表單清單實作：

一、水平排版

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; }

登入後複製

效果展示:

layui框架中常見表單排版介紹 #二、垂直排版

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;}

登入後複製

效果展示:

layui框架中常見表單排版介紹 #三、垂直排版---文字很多的時候

#我之前在做垂直表單的時候遇到過左側文字很多的時候會換行顯示不美觀,那咋辦呢,下面是解決辦法:

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;}

登入後複製

效果展示:

layui框架中常見表單排版介紹 #如果覺得文字還要很多呢,繼續同樣的辦法:

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;}

登入後複製

效果展示:

layui框架中常見表單排版介紹最終示範效果展示:http://www.jianbaizhan.com/upload/file/20181204/5c06280599c0d/form.html

以上是layui框架中常見表單排版介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7834

Java教學

1648

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1240

Related knowledge

layui登陸頁怎麼設定跳轉 Apr 04, 2024 am 03:12 AM

layui 登入頁面跳轉設定步驟：新增跳轉代碼：在登入表單提交按鈕點選事件中新增判斷，成功登入後透過 window.location.href 跳到指定頁面。修改 form 配置：在 lay-filter="login" 的 form 元素中新增 hidden 輸入字段，name 為 "redirect"，value 為目標頁面位址。

layui怎麼取得表單數據 Apr 04, 2024 am 03:39 AM

layui 提供了多種取得表單資料的方法，包括直接取得表單所有欄位資料、取得單一表單元素值、使用formAPI.getVal() 方法取得指定欄位值、將表單資料序列化並作為AJAX 請求參數，以及監聽表單提交事件獲取資料。

layui跟vue有啥差別 Apr 04, 2024 am 03:54 AM

layui與Vue的差異主要體現在功能和關注點上。 layui專注於快速開發UI元素，提供預製元件簡化頁面建置；而Vue則是全端框架，注重資料綁定、元件化開發和狀態管理，更適合建構複雜應用程式。 layui學習簡單，適合快速建立頁面；Vue學習曲線陡峭，但有助於建立可擴展且易於維護的應用程式。根據專案需求和開發者技能水平，可以選擇合適的框架。

layui如何實現自適應 Apr 26, 2024 am 03:00 AM

透過使用layui框架的響應式佈局功能，可以實現自適應佈局。步驟包括：引用layui框架。定義自適應佈局容器，設定layui-container類別。使用響應式斷點（xs/sm/md/lg）隱藏特定斷點下的元素。利用網格系統（layui-col-）指定元素寬度。透過偏移量（layui-offset-）建立間距。使用響應式實用工具（layui-invisible/show/block/inline）控制元素的可見性和顯示方式。

layui怎麼傳數據 Apr 26, 2024 am 03:39 AM

使用 layui 傳輸資料的方法如下：使用 Ajax：建立請求對象，設定請求參數（URL、方法、資料），處理回應。使用內建方法：使用 $.post、$.get、$.postJSON 或 $.getJSON 等內建方法簡化資料傳輸。

layui是什麼意思啊 Apr 04, 2024 am 04:33 AM

layui是一個前端UI框架，它提供了豐富的UI元件、工具和功能，幫助開發人員快速建立現代化、響應式和互動式Web應用程序，特點包括：靈活輕量、模組化設計、豐富的元件、強大的工具和易於自訂。它廣泛應用於各種Web應用程式的開發中，包括管理系統、電商平台、內容管理系統、社交網路和行動裝置應用程式。

layui框架是什麼語言 Apr 04, 2024 am 04:39 AM

layui框架是一款基於JavaScript的前端框架，提供了一套易用的UI元件和工具，幫助開發者快速建立響應式網路應用程式。其特點包括：模組化、輕量級、響應式，並擁有完善的文件和社群支援。 layui廣泛應用於管理後台系統、電商網站和行動裝置應用程式等開發。優點在於上手快、提升效率、維護方便，缺點是客製化較差、技術更新較慢。

layui框架和vue框架的區別 Apr 26, 2024 am 01:27 AM

layui和vue是前端框架，layui是一種輕量級的函式庫，提供UI元件和工具；vue是一個全面的框架，提供UI元件、狀態管理、資料綁定和路由等功能。 layui基於模組化的架構，vue是基於組件化的架構。 layui擁有較小的生態系統，vue擁有龐大且活躍的生態系統。 layui學習曲線較低，vue學習曲線較陡。 layui適用於小型專案和快速開發UI元件，vue適用於大型專案和需要豐富功能的場景。

See all articles

layui框架中常見表單排版介紹

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題