<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>layui.form小例子</title>

    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

</head>

<body>

<form class="layui-form">

    <div class="layui-form-item">

        <label class="layui-form-label">输入框</label>

        <div class="layui-input-block">

            <input type="text" name="" 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="interest" lay-filter="aihao">

                <option value="0">写作</option>

                <option value="1">阅读</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="阅读">

        </div>

    </div>

    <div class="layui-form-item">

        <label class="layui-form-label">开关关</label>

        <div class="layui-input-block">

            <input type="checkbox" lay-skin="switch">

        </div>

    </div>

    <div class="layui-form-item">

        <label class="layui-form-label">开关开</label>

        <div class="layui-input-block">

            <input type="checkbox" checked 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="0" title="男">

            <input type="radio" name="sex" value="1" title="女" checked>

        </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">

        <div class="layui-input-block">

            <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>

            <button type="reset" class="layui-btn layui-btn-primary">重置</button>

        </div>

    </div>

</form>

<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

<script>

    layui.use('form', function(){

        var form = layui.form;

    });

</script>

</body>

</html>
<!-- 引入 layui.css -->

 <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

 <!-- 引入 layui.js -->

 <script src="//unpkg.com/layui@2.6.8/dist/layui.js">

效果图：

layui 表单的使用的更多相关文章

  1. layui表单验证

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

  2. layui 表单遇到的小问题

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

  3. layui表单提交

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

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

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

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

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

  6. layui表单

    {include file="Public:inner_header" /} <link rel="stylesheet" href="__ST ...

  7. 使用layer弹窗和layui表单做新增功能

    注释:代码参考http://blog.51cto.com/825272560/1891158,在其修改之上而来,在此感谢! 1.需求:使用layer在弹窗内完成新增,成功后提示并刷新页面(父页面,li ...

  8. 解决layui表单ajax提交回调函数不起作用问题的两种方式

    最近想用layui开发一个论坛模板用的是fly-ui,才接触layui对其还不太熟悉.一个简单的登录就困扰了我很久.登录的form通过ajax提交回调函数老是不起作用.经过浪费了N多时间的调试,发现l ...

  9. 00008 - layui 表单验证，需要验证，但非必输

    当使用layui的验证规则,比如 手机, <input type="text" name="userName" lay-verify="phon ...

  10. layui 表单验证汇总

    1 表单自带校验 lay-verify:是表单验证的关键字有以下值供选择: required 必填项phone 手机号email 邮箱date 日期url 链接identity 身份证number 数 ...

随机推荐

  1. v76.01 鸿蒙内核源码分析(共享内存) | 进程间最快通讯方式 | 百篇博客分析OpenHarmony源码

    百篇博客分析|本篇为:(共享内存篇) | 进程间最快通讯方式 进程通讯相关篇为: v26.08 鸿蒙内核源码分析(自旋锁) | 当立贞节牌坊的好同志 v27.05 鸿蒙内核源码分析(互斥锁) | 同样 ...

  2. 基于redis实现tomcat的session会话保持 （转）

    出处:https://cloud.tencent.com/developer/article/1402997 基于redis实现tomcat的session会话保持 在实际生产中,我们经常部署应用服务 ...

  3. HDOJ acm steps 3.1.1

    (都是递推求值,呵呵,好开心- - ) 今天又是在自习室通宵(文明玩的停不下来了) 游戏玩完想想该水题了,于是打开了HDOJ的ACM STEPS(这是个好东西,就像他的名字,一步步来的) 2.3.x貌 ...

  4. Linux常用命令精华讲解 上部 （下部下回分解）不要催很忙的

    Linux常用命令讲解 1.Linux命令基础 2.Linux命令帮助 3.目录与文件的基操 1.Shell是系统中运行的一种特殊程序在用户和内核之间充当"翻译官"的角色,登录li ...

  5. 【web安全】Nodejs原型链污染分析

    Nodejs原型链污染分析 什么是js原型? 可以将js原型理解为其他OOP语言中的类,但还是有细微区别. 1. function F(){...} 2. var f = new F(); 分析: 1 ...

  6. Solution -「UNR #5」「UOJ #671」诡异操作

    \(\mathcal{Desciprtion}\)   Link.   给定序列 \(\{a_n\}\),支持 \(q\) 次操作: 给定 \(l,r,v\),\(\forall i\in[l,r], ...

  7. ASP.NET Core 6框架揭秘实例演示[05]：依赖注入基本编程模式

    毫不夸张地说,整个ASP.NET Core就是建立在依赖注入框架之上的.ASP.NET Core应用在启动时构建管道所需的服务,以及管道处理请求使用到的服务,均来源于依赖注入容器.依赖注入容器不仅为A ...

  8. SpringCloud微服务实战——搭建企业级开发框架（三十七）：微服务日志系统设计与实现

      针对业务开发人员通常面对的业务需求,我们将日志分为操作(请求)日志和系统运行日志,操作(请求)日志可以让管理员或者运营人员方便简单的在系统界面中查询追踪用户具体做了哪些操作,便于分析统计用户行为: ...

  9. simulink模块执行顺序

    1.simulink各模块执行顺序 Simulink模块的执行顺序都是序贯进行的,也就是沿着信号的流向进行.没有输入的模块先进行计算,更新状态量与输出,需要输入信号的模块等到输入信号准备ready之后 ...

  10. Jenkins项目迁移JOB

    Jenkins项目迁移JOB:从旧的迁移到新的Jenkins上 北京介绍 今天由于迁移Jenkins服务器,需要完全拷贝Jenkins里的Job. 经实验,直接在服务器上移动Jobs目录下的文件即可. ...