1.

***首先明确一点 表单的以来加载模块是 form。如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能。

我们用layui官网的样本来做例子

******必须要在外层容器中定义class="layui-form"，form模块才能正常工作。layui表单并不一定需要form标签  但是但是但是，必须要在外层容器中定义class="layui-form"。

官网的例子是用的form.我们改为拥有上述calss的div。

<body>
<div class="layui-form" >
<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-inline">
<input type="password" name="password" 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">
<select name="city" 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="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked>
<input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch">
</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="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="desc" 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>
<script>
$(function () {
layui.use('form', function () {
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function (data) {
layer.msg(JSON.stringify(data.field));
return false;
//在这里调用自己的接口
});
});
});
</script>
</body>

效果完全一致

***<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>在这里提交的button需要添加lay-submit lay-filter="formDemo"两个属性。

我们去掉试试。去掉任意属性 表单不能再验证也不能再提交 但是可以理解为这些表单都可以放在任一div中。

layui表单一的更多相关文章

  1. MVC下form表单一次上传多种类型的图片（每种类型的图片可以上传多张）

    form表单一次上传多种类型的图片(每种类型的图片可以上传多张) controller中的action方法 public ActionResult UploadImage( )        { in ...

  2. layui表单验证

    layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值. required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) da ...

  3. layui 表单遇到的小问题

    select中的option 居中显示 /*select显示的option居中*/ /*.layui-select-title input{ text-align: center; }*/ /*opt ...

  4. layui表单提交

    关于layui表单提交  只是简单用一个文本框记录一下提交过程    其他的如下拉框选择框样式可以参考官网 下面直接开始.首 一:前台页面 <!DOCTYPE html><html& ...

  5. el-upload上传文件和表单一起提交+后端接收代码

    目录 一.前言 二.前端页面展示 三.表单代码 四.Data部分 五.JS方法 六.后端接收方式 七.总结 一.前言 我们在做前端时,会遇到这样的需求,上传Excel文件,并且还要和填写的表单数据,一 ...

  6. layui中进行form表单一些问题

    最近一段时间一直在用layui来写一些前段页面,发现有几个问题,不知道是我的编译器的问题还是什么,总之目前是自己改成功了,在这里分享下. 第一个是用layui去写单选按钮,网页上不会显示出来.解决方法 ...

  7. layui 图片与表单一起提交 + layer.photos图片层预览

    HTML基本结构: <form class="layui-form" action="" id="feedBackForm"> ...

  8. 组件 layui 表单抓取数据四步走

    注意事项: layui 中提交按钮是基于"监听"机制实现的. form.on() 的调用需置于 layui.use 的回调函数中. 末尾的 'return false' 不可或缺, ...

  9. .net core使用Ku.Core.Extensions.Layui实现layui表单渲染

    演示网站地址:http://layui.kulend.com/项目地址:https://github.com/kulend/Ku.Core.Extensions/tree/master/Ku.Core ...

随机推荐

  1. JDK 中的栈竟然是这样实现的？

    前面的文章<动图演示:手撸堆栈的两种实现方法!>我们用数组和链表来实现了自定义的栈结构,那在 JDK 中官方是如何实现栈的呢?接下来我们一起来看. 这正式开始之前,先给大家再解释一下「堆栈 ...

  2. STM32之旅6——WWDG

    WWDG是stm32f103的窗口看门狗,使用的时钟是APB1的时钟,在使用wwdg是被一个小问题困扰了很久--没有打开中断,无法喂狗,一直复位. 初始化完之后需要使能中断: __HAL_WWDG_E ...

  3. 实验三　HTML表格和表单的制作

    实验三 HTML表格和表单的制作 [实验目的] 1.掌握表格的创建.结构调整与美化方法: 2.熟悉表格与单元格的主要属性及其设置方法: 3.掌握通过表格来进行网页页面的布局方法. [实验环境] 连接互 ...

  4. 多测师讲解requests __中_高级讲师肖sir

    (1)生成报告 import unittest #导入单元测试框架 import requests #导入接口库 import time # #时间戳,导入time模块 from api.HTMLTe ...

  5. 【C++设计模式二】工厂模式

    (1)定义3 简单工厂模式中,每新增一个具体产品,就需要修改工厂类内部的判断逻辑.为了不修改工厂类,遵循开闭原则,工厂方法模式中不再使用工厂类统一创建所有的具体产品,而是针对不同的产品设计了不同的工厂 ...

  6. docker19.03限制容器使用的内存资源

    一,指定内存大小的参数: [root@localhost liuhongdi]# docker run -idt --name kafka2 --hostname kafka2 -m 200M --m ...

  7. Mac安装stf

    1.brew install rethinkdb graphicsmagick zeromq protobuf yasm pkg-config 2.node版本8.x我的是8.15.0 3.npm i ...

  8. Python字典的初识、增删改查及嵌套

    为什么要有字典? 列表可以存储大量的数据,但数据间的关联型不强 列表的查询速度相对慢 dict:字典,容器型数据类型 数据类型的分类: 可变与不可变 可变(不可哈希)的数据类型: 列表list,字典d ...

  9. buuctf-misc-[BJDCTF 2nd]圣火昭昭-y1ng 1

    开局一张图片,flag全靠猜,那这个是不是和outguess工具有关呢?于是我们显示查看了图片的详细信息 看到是新佛曰,于是我们用新佛曰论禅解密:http://hi.pcmoe.net/buddha. ...

  10. pdf 转word 工具

    在线转换,每天有次数限制,但是很强大: https://smallpdf.com/cn 可以使用python 写代码来转换文档 参考下面博客连接 https://blog.csdn.net/Dontl ...