from表單的使用

在使用from表單的時候，必須先宣告from模組，否則select、checkbox、radio等將無法顯示，並且無法使用form相關功能，這是很多小白一開始經常犯的錯誤，雖然這很簡單但也很基礎，所以有必要在這裡提一下

from模組宣告

<script> layui.use('form', function () { var form = layui.form; form.render(); }); </script>

在from使用class="layui-form"

<from class="layui-form"></from>
 

在from裡面，我們通常使用這三個類（其他地方也一樣）

class="layui-元素名-item"
class="layui-元素名-inline"
class="layui-元素名-block"

比如layui-form-item單獨使用這個類會預設該元素獨佔一行，如

 <form class="layui-form">
        <div style="padding: 20px; background-color: #F2F2F2;">
            <div class="layui-form-item">
                <input type="text" class="layui-input">
            </div>
        </div>
    </form>
 

效果如下

這是單獨一行的文字框，當然這樣並不好看，通常我們會把它和標籤一起使用

<form class="layui-form">
        <div style="padding: 20px; background-color: #F2F2F2;">
            <div class="layui-form-item">
                <label class="layui-input-inline">標籤：</label>
                <input type="text" class="layui-input">
            </div>
        </div>
    </form>
 

效果如下

這時候我們發現，這兩個東西並沒有並在一排，我們通常需要給input外面新增一個class="layui-input-block"的div

<div class="layui-input-block">
                    <input type="text" class="layui-input">
                </div>

這時候這兩個元素就會排成一排

這是因為layui-input-block這個類是一個表單元素佔一行，豎著，以例表的形式排列。然後配合layui-form-item的使用，使這兩個元素處在同一行。

但通常來講，我們不需要這麼長的input，我們可以把外面的div的類換成class="layui-input-inline"試試

<div class="layui-input-inline">
                <label class="layui-input-inline">標籤：</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input">
                </div>
 </div>

class="layui-input-inline"允許多個表單控制元件佔一行，橫著，一行可以放置多個表單元素

讓我們多複製幾段看看效果

如果我想讓它們豎下來排呢?別忘了上面講到的layui-input-block

但是這樣並不好看，我們通常是這樣使用

 <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">標籤：</label>
                    <div class="layui-inline">
                        <input type="text" class="layui-input">
                    </div>
                </div>
            </div>

一般來講，新增不同元素名和預設的layui-inline的效果是不一樣的，這個就需要大家多加試驗來挑選合適自己的類。

以上是我的一些心得總結，後續我還會更新其他的關於layui框架的部落格，希望能幫助到更多剛入門的同學，謝謝大家的支援！