3种Layui表单布局技巧，让界面瞬间专业起来-优快云博客

3种Layui表单布局技巧，让界面瞬间专业起来

【免费下载链接】layui 项目地址: https://gitcode.com/gh_mirrors/lay/layui

你还在为表单标签与输入框排列混乱而烦恼吗？客户抱怨填写表单时找不到对应关系？本文将通过Layui的3种布局方案，帮你彻底解决这些问题，让表单既美观又易用。读完你将掌握普通布局、栅格布局和行内布局的实现方法，以及如何根据场景选择最合适的布局方式。

为什么表单布局如此重要？

表单是用户与系统交互的重要桥梁，不合理的布局会导致用户填写困难、出错率高，甚至放弃操作。Layui作为一款经典的前端UI框架，提供了多种灵活的表单布局方案，帮助开发者快速构建专业的表单界面。官方文档中详细介绍了表单组件的使用方法，包括布局、验证和提交等功能，具体可参考docs/form/index.md。

1. 普通布局：快速搭建基础表单结构

普通布局是Layui表单的默认布局方式，通过固定的class组合实现标签与输入框的上下或左右排列。其核心要点包括：

使用class="layui-form"定义表单域
通过class="layui-form-item"创建表单项容器
用class="layui-form-label"定义标签
使用class="layui-input-block"或class="layui-input-inline"控制输入框的显示方式

以下是一个基本的普通布局示例：

<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" placeholder="请输入用户名" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" placeholder="请输入密码" class="layui-input">
    </div>
  </div>
</form>

这种布局适合简单的表单场景，代码结构清晰，易于理解和维护。更多示例可参考官方文档中的综合演示部分。

2. 栅格布局：实现复杂响应式表单

当表单元素较多或需要在不同屏幕尺寸下有不同表现时，栅格布局是最佳选择。Layui的栅格系统将一行分为12列，通过layui-col-md*等class可以灵活控制每个元素的宽度。

以下是一个栅格布局的示例，实现了多列表单布局：

<form class="layui-form layui-row layui-col-space16">
  <div class="layui-col-md6">
    <div class="layui-form-item">
      <label class="layui-form-label">姓名</label>
      <div class="layui-input-block">
        <input type="text" name="name" placeholder="请输入姓名" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-col-md6">
    <div class="layui-form-item">
      <label class="layui-form-label">电话</label>
      <div class="layui-input-block">
        <input type="tel" name="phone" placeholder="请输入电话" class="layui-input">
      </div>
    </div>
  </div>
</form>

这种布局方式可以根据屏幕宽度自动调整列数，在PC端显示多列，在移动端自动变为单列，极大提升了用户体验。完整的栅格布局示例可参考form.grid.md。

3. 行内布局：紧凑排列多个表单项

对于需要紧凑排列的场景，如搜索框、筛选条件等，行内布局是理想选择。通过class="layui-inline"可以将表单项设置为行内块元素，实现多元素在同一行显示。

以下是一个行内布局的示例：

<form class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">开始日期</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" placeholder="请选择开始日期">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">结束日期</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" placeholder="请选择结束日期">
      </div>
    </div>
    <div class="layui-inline">
      <button class="layui-btn" lay-submit>查询</button>
    </div>
  </div>
</form>

这种布局适合需要在一行内放置多个相关表单项的场景，如搜索条件、筛选器等。更多行内布局的应用可参考Layui官方示例中的搜索表单部分。

布局选择指南：哪种布局适合你的场景？

不同的布局方式适用于不同的场景，选择合适的布局可以提升表单的可用性和美观度。以下是一个简单的选择指南：

布局类型	适用场景	优点	缺点
普通布局	简单表单、信息录入	结构清晰、易于理解	不够灵活，在复杂场景下显得臃肿
栅格布局	复杂表单、多元素排列	灵活度高、响应式支持好	代码相对复杂，需要理解栅格系统
行内布局	搜索框、筛选条件	紧凑节省空间	不适合大量表单项，易显得拥挤

实际案例：企业信息登记表单

下面我们通过一个实际案例，展示如何综合运用上述布局技巧，创建一个美观实用的企业信息登记表单。

<form class="layui-form layui-row layui-col-space16">
  <!-- 基本信息区域 - 栅格布局 -->
  <div class="layui-col-md12">
    <fieldset class="layui-elem-field layui-field-title">
      <legend>基本信息</legend>
    </fieldset>
  </div>
  
  <div class="layui-col-md6">
    <div class="layui-form-item">
      <label class="layui-form-label">企业名称</label>
      <div class="layui-input-block">
        <input type="text" name="company" lay-verify="required" placeholder="请输入企业名称" class="layui-input">
      </div>
    </div>
  </div>
  
  <div class="layui-col-md6">
    <div class="layui-form-item">
      <label class="layui-form-label">所属行业</label>
      <div class="layui-input-block">
        <select name="industry" lay-verify="required">
          <option value="">请选择</option>
          <option value="it">信息技术</option>
          <option value="finance">金融</option>
          <option value="manufacturing">制造业</option>
        </select>
      </div>
    </div>
  </div>
  
  <!-- 联系方式区域 - 行内布局 -->
  <div class="layui-col-md12">
    <fieldset class="layui-elem-field layui-field-title">
      <legend>联系方式</legend>
    </fieldset>
  </div>
  
  <div class="layui-col-md12">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">联系人</label>
        <div class="layui-input-inline" style="width: 120px;">
          <input type="text" name="contact" lay-verify="required" placeholder="姓名" class="layui-input">
        </div>
      </div>
      
      <div class="layui-inline">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline" style="width: 150px;">
          <input type="tel" name="phone" lay-verify="required|phone" placeholder="手机号" class="layui-input">
        </div>
      </div>
      
      <div class="layui-inline">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-inline" style="width: 200px;">
          <input type="email" name="email" lay-verify="email" placeholder="企业邮箱" class="layui-input">
        </div>
      </div>
    </div>
  </div>
  
  <!-- 提交按钮 -->
  <div class="layui-col-md12">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="save">保存信息</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </div>
</form>

<script>
layui.use(['form', 'layer'], function(){
  var form = layui.form;
  var layer = layui.layer;
  
  // 表单提交事件
  form.on('submit(save)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '表单数据'
    });
    return false;
  });
});
</script>

这个案例综合运用了栅格布局和行内布局，将表单分为不同区域，既保证了信息的分类清晰，又充分利用了页面空间。完整的代码示例可参考form.demo.md。

通过灵活运用Layui提供的布局方式，我们可以轻松创建出既美观又实用的表单界面，提升用户体验和数据收集效率。建议结合官方文档中的表单布局部分，深入学习更多布局技巧和最佳实践。

【免费下载链接】layui 项目地址: https://gitcode.com/gh_mirrors/lay/layui

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考