layui框架学习（14：表单-上）

最新推荐文章于 2025-07-09 16:43:57 发布

原创最新推荐文章于 2025-07-09 16:43:57 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui #表单

网页编程专栏收录该内容

203 篇文章

订阅专栏

文章介绍了Layui框架在B/S架构应用中用于构建表单的方法，包括使用预设类如layui-form、layui-form-item、layui-input-block和layui-input-inline等设置表单样式和布局。示例代码展示了一个基于layui的上传资源页面的表单结构，包括文本区域、输入框、选择框和单选按钮等元素的布局和交互处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单是B/S架构应用系统中的常见元素，其主要用于收集用户的输入信息。系统中创建、维护各类数据对象的信息时大多数都使用表单。Layui支持通过预设类设置表单及表单元素的样式，同时通过form模块来完成各种交互。普通表单及基于layui样式的表单的对比如下所示。
在这里插入图片描述

Layui中使用预设类layui-form设置表单的顶层元素样式（顶层元素可以是form，也可以是div等），其下包含一系列预设类为layui-form-item的表单项集合，每个表单项占据一行，其内部有几种元素排列方式：
1）输入项占据整行内容，此时采用预设类layui-form-label设置包含输入项名称的标签元素，采用预设类layui-input-block设置包含input元素或其它输入项的div元素；
2）输入项占据部分行内容，此时采用预设类layui-form-label设置包含输入项名称的标签元素，采用预设类layui-input-inline设置包含input元素或其它输入项的div元素（查看layui.css，layui-form-label元素的最大宽度好像是不超过450px）；
3）包含多个子输入项，layui官网教程中介绍说是layui-inline定义外层行内，layui-input-inline定义内层行内，感觉不是很好理解。个人理解layui-inline类似定义表单项包含几列，layui-form-item中包含几个layui-inline，就意味着有几列输入内容，然后每列中layui-form-label设置输入项名称，layui-input-block或layui-input-inline包含输入项元素。
在这里插入图片描述

参照CSDN中上传资源页面编写简单的基于layui的表单示例，代码及效果图如下所示：

	<form class="layui-form" action="">
	  <div class="layui-form-item">
	    <label class="layui-form-label">资源名称</label>
	    <div class="layui-input-block">
	      <textarea name="rsname" placeholder="推荐格式:知识领域+技术关键词+内容关键词+用途" class="layui-textarea"></textarea>
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">资源描述</label>
	    <div class="layui-input-block">
	      <textarea name="rsdesc" placeholder="容我多说几句,让更多的人看到我的资源!&#10;推荐格式:内容概要+适用人群+使用场景及目标+其他说明" class="layui-textarea"></textarea>
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">资源标签</label>
	    <div class="layui-input-inline">
	      <input type="text" name="rslabel" required  lay-verify="required" placeholder="请输入资源标签" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">所属分类</label>
	    <div class="layui-input-block">
	      <select name="type" lay-verify="required">
	        <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="radio" name="rsform" value="0" title="积分资源" checked>
	      <input type="radio" name="rsform" value="1" title="VIP专享资源" >
		  <input type="radio" name="rsform" value="2" title="付费资源" >
	    </div>
	  </div>
	  <div class="layui-form-item">
	      <label class="layui-form-label">所需积分</label>
	      <div class="layui-input-inline">
	        <input type="text" name="rscost" required  lay-verify="required" placeholder="请输入所需积分" autocomplete="off" class="layui-input">
	      </div>
	      <div class="layui-form-mid layui-word-aux">看看大家如何定价</div>
	    </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">动态调分</label>
	    <div class="layui-input-block">
	      <input type="radio" name="rschange" value="0" title="允许" checked>
	      <input type="radio" name="rschange" value="1" title="不允许" >			  				  
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn layui-bg-red layui-btn-radius" lay-submit>提交</button>
	    </div>
	  </div>
	</form>

在这里插入图片描述

参考文献：
[1]B站：layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://qa.1r1g.com/sf/ask/3503840931/