layui-表单集合

最新推荐文章于 2024-05-16 01:36:11 发布
最新推荐文章于 2024-05-16 01:36:11 发布
阅读量1.2w 收藏 4
点赞数
分类专栏： Layui 文章标签： 表单 layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ajlgl/article/details/72514974
版权

layui-表单集合

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表达集合</title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>响应式的表单集合</legend>
</fieldset>

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">单行输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证必填项</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">验证手机</label>
      <div class="layui-input-inline">
        <input type="tel" name="phone" lay-verify="phone" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">验证邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">多规则验证</label>
      <div class="layui-input-inline">
        <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">验证日期</label>
      <div class="layui-input-inline">
        <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-mm-dd" autocomplete="off" class="layui-input" onclick="layui.laydate({elem: this})">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">验证链接</label>
      <div class="layui-input-inline">
        <input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">验证身份证</label>
    <div class="layui-input-block">
      <input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">自定义验证</label>
    <div class="layui-input-inline">
      <input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">范围</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">单行选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1" selected="">阅读</option>
        <option value="2">游戏</option>
        <option value="3">音乐</option>
        <option value="4">旅行</option>
      </select>
    </div>
  </div>


  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">分组选择框</label>
      <div class="layui-input-inline">
        <select name="quiz">
          <option value="">请选择问题</option>
          <optgroup label="城市记忆">
            <option value="你工作的第一个城市">你工作的第一个城市</option>
          </optgroup>
          <optgroup label="学生时代">
            <option value="你的工号">你的工号</option>
            <option value="你最喜欢的老师">你最喜欢的老师</option>
          </optgroup>
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">搜索选择框</label>
      <div class="layui-input-inline">
        <select name="modules" lay-verify="required" lay-search="">
          <option value="">直接选择或搜索选择</option>
          <option value="1">layer</option>
          <option value="2">form</option>
          <option value="3">layim</option>
          <option value="4">element</option>
          <option value="5">laytpl</option>
          <option value="6">upload</option>
          <option value="7">laydate</option>
          <option value="8">laypage</option>
          <option value="9">flow</option>
          <option value="10">util</option>
          <option value="11">code</option>
          <option value="12">tree</option>
          <option value="13">layedit</option>
          <option value="14">nav</option>
          <option value="15">tab</option>
          <option value="16">table</option>
          <option value="17">select</option>
          <option value="18">checkbox</option>
          <option value="19">switch</option>
          <option value="20">radio</option>
        </select>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">联动选择框</label>
    <div class="layui-input-inline">
      <select name="quiz1">
        <option value="">请选择省</option>
        <option value="浙江" selected="">浙江省</option>
        <option value="你的工号">江西省</option>
        <option value="你最喜欢的老师">福建省</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz2">
        <option value="">请选择市</option>
        <option value="杭州">杭州</option>
        <option value="宁波" disabled="">宁波</option>
        <option value="温州">温州</option>
        <option value="温州">台州</option>
        <option value="温州">绍兴</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz3">
        <option value="">请选择县/区</option>
        <option value="西湖区">西湖区</option>
        <option value="余杭区">余杭区</option>
        <option value="拱墅区">临安市</option>
      </select>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked="">
      <input type="checkbox" name="like[game]" title="游戏">
    </div>
  </div>

  <div class="layui-form-item" pane="">
    <label class="layui-form-label">原始复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
      <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
      <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">开关-默认关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关-默认开</label>
    <div class="layui-input-block">
      <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked="">
      <input type="radio" name="sex" value="女" title="女">
      <input type="radio" name="sex" value="禁" title="禁用" disabled="">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">普通文本域</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">编辑器</label>
    <div class="layui-input-block">
      <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>方框风格的表单集合</legend>
</fieldset>
<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" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">短输入框</label>
    <div class="layui-input-inline">
      <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">日期选择</label>
      <div class="layui-input-block">
        <input type="text" name="date" id="date" autocomplete="off" class="layui-input" onclick="layui.laydate({elem: this})">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">行内表单</label>
      <div class="layui-input-inline">
        <input type="number" name="number" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">范围</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">单行选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1" selected="">阅读</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-inline">
      <select name="quiz1">
        <option value="">请选择省</option>
        <option value="浙江" selected="">浙江省</option>
        <option value="你的工号">江西省</option>
        <option value="你最喜欢的老师">福建省</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz2">
        <option value="">请选择市</option>
        <option value="杭州">杭州</option>
        <option value="宁波" disabled="">宁波</option>
        <option value="温州">温州</option>
        <option value="温州">台州</option>
        <option value="温州">绍兴</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz3">
        <option value="">请选择县/区</option>
        <option value="西湖区">西湖区</option>
        <option value="余杭区">余杭区</option>
        <option value="拱墅区">临安市</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item" pane="">
    <label class="layui-form-label">开关-开</label>
    <div class="layui-input-block">
      <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
    </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="男" title="男" checked="">
      <input type="radio" name="sex" value="女" title="女">
      <input type="radio" name="sex" value="禁" title="禁用" disabled="">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
  </div>
</form>

<script src="layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form()
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;

  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');

  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [/(.+){6,12}$/, '密码必须6到12位']
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });

  //监听指定开关
  form.on('switch(switchTest)', function(data){
    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
  });

  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });


});
</script>
    </body>
</html>

这里写图片描述

官网表单集合

岽仔玖等
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前段框架layui中的table的dataName嵌套读取问题
qq905954401的博客
06-29 4541
问题描述：layui在渲染一个table的时候，需要传递一些参数，参数之一是response，它的官方说明如下：当后端返回的参数是{ status: 200, hint: "", total: 1000, rows: [] } { status: 200, hint: "", total: 1000, rows: [] } 我们应该这么定义response: { ...
组件 layui 表单抓取数据四步走
weixin_34038293的博客
09-10 235
组件 layui 表单抓取数据四步走 注意事项： layui 中提交按钮是基于“监听”机制实现的。 form.on() 的调用需置于 layui.use 的回调函数中。 末尾的 'return false' 不可或缺，以确保不会触发页面刷新。注意必须是 'return false'，而不能简单写成 'return'。 抓取表单数据可按四步来实现：...
Layui学习笔记
最新发布
2401_84046695的博客
05-16 564
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
oracle三表更新,oracle三表联合查询
weixin_39728544的博客
04-03 447
表a：订单表 order订单号 sheetid　供应商号 companyid　下单日期 ordertimeA000001　　　　　001　　　　　　2014/6/15A000002　　　　　002　　　　　　2014/6/15表b：订单商品表 orderitem订单号 sheetid　商品号 productid　订货数量 numberA000001　　　000006　　　　　　5A000001　　...
layui数据表格total和data无法使用多层嵌套json格式的数据的解决办法
热门推荐
飞起来的小猪的博客
07-13 1万+
前言 由于项目要用到layui的数据表格,但layui的数据表格的接口返回数据所有字段都只能最外层,虽然支持自定义数据,但也只能在最外层,而我们项目total和data在第二层,和layui数据表格要求数据格式不匹配,为了保证后台json数据格式的统一,通过阅读源码找到了一个解决办法. 正文 layui数据表格要求的数据格式 我的项目统一json格式 { &quot;status&quot;...
layui表单提交_非常详细吐血收藏
u013931283的博客
01-15 568
效果图(下图为目录,各个用法都有了) 效果1 详细见下方博客: https://www.cnblogs.com/caicaizi/p/69636_1.html https://www.cnblogs.com/caicaizi/p/69636_2.html
免费下载layui-v2.6.8(密码123).zip
11-15
6. **layui.icon**：layui内置的图标集合，通常以SVG或PNG格式提供。 7. **layui.theme**：预设的主题样式，允许自定义主题颜色。 8. **layui_demo**：示例代码和文档，帮助开发者理解和学习layui的使用方法。 9. **...
layui-main.zip
01-10
layui 的设计目标是提供丰富的组件集合，包括表格、表单、按钮、提示、弹窗等，以满足各种Web应用的需求。 layui 的优点在于其易用性和灵活性。由于采用了模块化的结构，每个组件都有独立的 JS 和 CSS 文件，可以...
layui清空,重置表单数据的实例
10-16
此外，layui还提供了自己的API来处理表单渲染，因此在清空表单后，为了保持表单的显示效果与实际数据同步，通常需要调用`layui.form.render()`来重新渲染表单： ```javascript layui.form.render(); ``` 在上述...
ASP.NET-Core-MVC-Layui-EF-Core-CRUD_Sample.rar
07-16
Layui是一个流行的前端组件库，它提供了一系列美观且易于使用的UI组件，如表格、按钮、表单、弹窗等，使得开发者可以快速构建出响应式的Web界面。在本示例中，Layui将作为前端展示数据和交互的主要工具。 接下来，...
LayuiForm表单.txt
12-10
 表单集合演示    <div class="layui-form-item">  <label class="layui-form-label">单行输入框  <div class="layui-input-block">  <input type="text" name="title" lay-verify="title" autocomplete=...
解决layui的input独占一行的问题
10-16
今天小编就为大家分享一篇解决layui的input独占一行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
form layui 同时提交多个对象_layui 表单 请求参数对象和数组同时传递向后台
weixin_39909001的博客
02-06 2348
layui页面 因为页面中的数据使用layui的form模块获取值，formData对象无法直接将多选框的值加入请求头，所以先将获取的多选按钮的值转为数组，然后使用formData.classId=arr_box;方法，将数组追加到formData中，后台获取值。String path = request.getContextPath();String basePath = request.get...
Layui 一行显示多个元素
wh445306
12-08 3015
<div> 搜索用户名： <div class="layui-inline"> <input class="layui-input" name="keyword" id="keyword" style="width: 300px" autocomplete="off"> </div> <button class="layui-btn layui-btn-sm" data-type="reload">.
一个WPF版的Layui前端UI库
技术杂谈，聚焦优质文章、开源项目、实用工具和学习、工作、面试心得分享。博客园推荐博客、阿里云专家博主，擅长于C#、.NET、.NET Core、Golang、TypeScript、Vue、Uni App、Angular开发。
01-02 509
相信做.NET后端开发的很多小伙伴都用过Layui前端UI组件库，今天我们分享一个WPF版的Layui前端UI样式库：Layui-WPF。WPF 是一个强大的桌面应用程序框架，用于构建具有丰富用户界面的 Windows 应用。它提供了灵活的布局、数据绑定、样式和模板、动画效果等功能，让开发者可以创建出吸引人且交互性强的应用程序。Layui 是一套免费的开源 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。
Layui版本的WPF开源控件库-Layui-WPF
zls365365的博客
10-09 1103
大家好，我是沙漠尽头的狼。今天介绍一款Layui风格的WPF开源控件库，仓库信息如下：仓库地址：https://github.com/Layui-WPF-Team/Layui-WPF仓库截图：Layui-WPF关于Layui请点击此链接[1]了解，本文不做介绍，下面我们从控件源码及已有的控件截图进行欣赏。控件源码克隆控件仓库：gitclonehttps://github.com/Layui-W...
几十款 WPF 控件 - UI 库，总有一款适合你
dotNET跨平台
10-17 9558
几十款 WPF 控件 - UI 库，总有一款适合你独立观察员 2022 年 10 月 16 日引言众所周知，使用WPF框架能够开发出功能强大、界面美观的桌面端应用。能够达到这个效果，各种 WPF 的控件库、UI库功不可没。所以，想着能不能收集一下目前市面上存在的库，以便在今后需要使用的时候能够手到擒来。这不收集不知道，一收集吓一跳，竟然收集出了三十多款UI/控件库，接下来就一一分享给...
WPF自定义控件(教程含源码)-轮播控件、仿 layui Carousel 控件
lhyriver的博客
11-18 1112
仿 layui 轮播控件 、carousel
layui 获取表单数据
博客
03-08 9718
layui 获取表单数据
layui-input-inline和layui-input-block的区别
05-05
`layui-input-inline` 和 `layui-input-block` 是两个不同的样式类，用于设置表单元素的显示方式。 `layui-input-inline` 用于将表单元素以行内方式（inline-block）展示，即表单元素之间不会换行，而是在同一行内...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值