layui-表單樣式

<form class="layui-form" style="width:90%;">
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">調用別名</label>
        <div class="layui-input-block">
            <input type="text" name="Name" class="layui-input Name" lay-verify="required" placeholder="只允許字母數字下划線">
        </div>
    </div>
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">顯示名稱</label>
        <div class="layui-input-block">
            <input type="text" name="DisplayName" class="layui-input DisplayName" lay-verify="required" placeholder="請輸入顯示名稱">
        </div>
    </div>
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">上級菜單</label>
        <div class="layui-input-block">           
            <select name="ParentId" class="ParentId" lay-filter="ParentId">
            <option value="0">無上級菜單</option>
            @foreach (var item in Model)
            {
                <option value="@item.Id">@item.DisplayName</option>
            }
            </select>
        </div>
    </div>  
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">是否顯示</label>
        <div class="layui-input-block IsDisplay">
            <input type="radio" name="IsDisplay" value="0" title="否">
            <input type="radio" name="IsDisplay" value="1" title="是" checked>
        </div>
    </div> 
    <div class="layui-form-item layui-row layui-col-xs12">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="addUser">確定</button>
            <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
        </div>
    </div>
</form>

方框樣式（追加class layui-form-pane，值得注意的是 復選框/開關/單選框 這些組合在該風格下需要額外添加 pane屬性（否則會看起來比較別扭））