《layUI 的 form表单》

最新推荐文章于 2025-04-07 17:09:41 发布
最新推荐文章于 2025-04-07 17:09:41 发布
阅读量788 收藏
点赞数
分类专栏： layUI 文章标签： layUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42585871/article/details/83963795
版权 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layUI 表单</title>
</head>
<body>

<!-- layUI css插件引用标签 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all">
<!-- 模块化用法引用标签 -->
<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
<!-- 非模块化用法引用标签（一次性加载所有插件，方便，但性能低） -->
<%-- <script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script> --%>

<!-- layui-form-pane： 内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭） -->
<form class="layui-form layui-form-pane" action="">

<div class="layui-form-item">
  <label class="layui-form-label">输入框：</label>
  <div class="layui-input-block">
  <input type="text" name="title" 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">
  <input type="password" name="" autocomplete="off" class="layui-input">  
  </div>
</div>


<div class="layui-form-item" pane>
  <label class="layui-form-label">下拉框：</label>
  <div class="layui-input-block">
   
   <select name="city" lay-verify="">
    <option value="">请选择一个城市</option>
    <option value="010">北京</option>
    <option value="021">上海</option>
    <option value="0571">杭州</option>
   </select>     
   
   <select name="city" lay-verify="">
  <option value="010">北京</option>
  <option value="021" disabled>上海（禁用效果）</option>
  <option value="0571" selected>杭州</option>
  </select>     
   
   <select name="quiz">
  <option value="">请选择</option>
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市？</option>
  </optgroup>
  <optgroup label="学生时代">
    <option value="你的工号">你的工号？</option>
    <option value="你最喜欢的老师">你最喜欢的老师？</option>
  </optgroup>
   </select>
   
   <select name="city" lay-verify="" lay-search>
  <option value="010">layer</option>
  <option value="021">form</option>
  <option value="0571" selected>layim</option>
   </select>     
   
  </div>
</div>


<div class="layui-form-item"  pane>
  <label class="layui-form-label">复选框：</label>
  <div class="layui-input-block">
    
    默认风格：
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆"> 
<input type="checkbox" name="" title="禁用" disabled> 
 
 原始风格：
<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" disabled> 
    
  </div>
</div>

<div class="layui-form-item"  pane>
  <label class="layui-form-label">开关：</label>
  <div class="layui-input-block">
    <input type="checkbox" name="xxx" lay-skin="switch">
    <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
    <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
    <input type="checkbox" name="aaa" lay-skin="switch" disabled>
  </div>
</div>

<div class="layui-form-item"  pane>
  <label class="layui-form-label">单选框：</label>
  <div class="layui-input-block">
    <input type="radio" name="sex" value="nan" title="男">
    <input type="radio" name="sex" value="nv" title="女" checked>
    <input type="radio" name="sex" value="" title="中性" disabled>
  </div>
</div>

<div class="layui-form-item" pane>
  <label class="layui-form-label">文本域：</label>
  <div class="layui-input-block">
    <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
  </div>
</div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>

<!-- <div class="layui-form-item">
  <label class="layui-form-label">标签区域</label>
  <div class="layui-input-block">
    原始表单元素区域
  </div>
</div> -->

</form>

<script>
//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

</body>
</html>
layui表单页面
weixin_45730286的博客
08-31 716
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="content"> <!-- <head> <meta charset="utf-8"> <link rel="stylesheet" href="../static/component/pear/css/pear.css" /> </head> --&g
Layui之表单form
XCMercy
12-23 1万+
1. 全家福代码以及效果图 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here $(function() { layui.use('form', function() { var form = layui.
Layui的Form
ppwwp的专栏
10-14 634
样式： layui-form ：form layui-form-pane ： form风格 layui-form-item ： form的行 layui-form-label ：label layui-input-block ：长输入框 layui-input-inline ： 短输入框 autocomplete 属性是否补全 placeholder 提示 class风格 lay-verify ...
Layui 12 Form 表单组件
最新发布
monian187的博客
04-07 1150
layui form 表单组件整合
Layui常用表单的设计
zbguolei的专栏
04-03 965
一、引入CSS文件 <linkrel="stylesheet"href="../layuiadmin/layui/css/layui.css"media="all"> <linkrel="stylesheet"href="../layuiadmin/style/admin.css"media="all"> 二、HTML表单 包含常用的文本框、下拉列表框、单选框、复选框、按钮等表单元素 <divclass="layui-card"> &lt...
Layui表格好看样式
weixin_44546735的博客
07-27 8590
Layui表格好看样式 开发工具与关键技术：web 作者：熊琪 撰写时间：2019.7.27 Layui表格的运用至今已经很广了，如需要以下样式的请继续往下看哦，如图一为layui表格的样式效果图，主要与layui的数据表格默认的样式不同的地方就是表头的颜色不同，和数据的颜色相间当为数为偶数时颜色为白色，除了偶数就是奇数，奇数显示为灰色，合计为黄色，而且表格高度固定，当数据条数过多，自动添加滚动...
layui form表单提交之后重新加载数据表格的方法
10-16
本文将探讨在使用layui框架的情况下，如何在表单提交之后重新加载数据表格。 首先，让我们来分析一下使用的layui组件。Layui是一个前端UI框架，它提供了一套模块化的组件，方便开发者快速开发界面。其中，form模块...
layui form表单提交后实现自动刷新
10-16
再者，为了能够让layui识别表单并提供额外的交互功能，需要为表单添加一个class名为“layui-form”的类。这样做不仅符合layui的规范，而且可以启用layui为表单提供的默认样式和功能。 在layui中，form模块提供了...
防止Layui form表单重复提交的实现方法
10-16
然后，可以使用Layui的form模块来监听这个标记的表单提交事件。 Layui的form模块提供了on方法，用于监听表单的提交事件。通过form.on("submit(formConfig)",function(data){...})的调用，开发者可以指定当具有特定...
layui实现form表单同时提交数据和文件的代码
10-16
总的来说，layui通过结合`layui-form`和`layui-upload`，实现了在同一个表单中同时提交文本数据和文件的功能。这种做法在Web应用中非常常见，特别是在用户注册、个人资料编辑等场景下。通过合理的HTML结构和...
layui中form表单
weixin_30379973的博客
10-18 249
<body> @*blockquote块引用;fieldset:字段集*@ <blockquote class="layui-elem-quote layui-text"> 鉴于小伙伴的普遍反馈，先温馨提醒两个常见“问题”：1. <a href="/doc/base/faq.html#form" targ...
漂亮的表单验证样式，纯HTML
03-27
漂亮的表单验证样式 纯HTML 单个文件 实用
easyweb-layui后台模板，界面美观、开箱即用
12-05
通用型后台管理模板，界面美观、开箱即用 是一套通用型后台管理模板,界面美观、开箱即用,拥有丰富的扩展组件和模板页面,适合各类中后台应用。
layui使用form表单实现post请求页面跳转的方法
10-16
今天小编就为大家分享一篇layui使用form表单实现post请求页面跳转的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js layui跳转页面_layui使用form表单实现post请求页面跳转的方法
weixin_39901943的博客
12-18 953
如下所示：window.location.href='url?param=' + paramValue;上面这种方式实现页面跳转附带参数，容易造成信息泄露；layui使用form表单实现post请求，避免信息泄露(设置form表单隐藏，也可以初始化时隐藏)：这里是在数据表格查询数据时的按钮操作，其他操作类似数据表格具体配置查看layui文档详情下面action部分可以是具体的请求路径，亦可以使*....
记录一个好用的layUIform表单快速布局（懒人专用）
唐昊
05-31 576
点击：地址 快速拼接
采用layui技术制作精美表格
XSL_xuxuan的博客
09-30 2746
先上一张展示图： 效果还是很好看的，看下如何实现的吧 当然首先要做好准备工作，下载layui文件到自己的项目中去，下载地址https://www.layui.com/ 最好之后，看例子吧 其中的数据源放在json格式的文件中，使用layui框架，返回的数据格式要按照他们定义的格式来，不然是获取不到数据的。 html代码： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; ...
layUI表单--乐字节前端
dirft_din的博客
06-18 451
表单 ​ 依赖加载模块：form 在一个容器中设定 class=“layui-form” 来标识一个表单元素块 <form class="layui-form" action=""> </form> 基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。 <div class="layui-form-item"> <label class="lay
layui的layer弹出层和form表单
热门推荐
阳某的博客
06-27 4万+
文章目录弹出层layerform表单增删改查所有代码 如果想用layui来完成增删改查，那么要会用弹出层和form表单这两个组件是必须的，所以今天就来介绍一些如何用layui完成基本的增删改查 弹出层layer 因为layui的特性，每次不管使用哪个组件，都要先把它的模块加载出来 比如我要用layer和form 那么就需要先这样定义,你的操作都是在这个里面进行，当然页可以一次性加载所有模块，详情...
ruoyi layui form表单清空
07-03
在Ruoyi（若依）layui框架中，form表单清空通常指的是清除表单中的所有输入字段和选中的值。你可以通过JavaScript操作或利用layui提供的API来实现这个功能。这里是一个简单的例子： ```javascript // 获取表单元素 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值