<!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. 如何生成Java文档注释(Java Doc Comments)

    在我们的Java SDK中已经提供了javadoc工具来生成我们的文档. 所以我们可以手动调用javadoc工具来生成文档,或者通过IDE生成.当然IDE也是调用javadoc,不过更快更省事. 注释 ...

  2. Android 四种方法写按钮点击事件

    1.匿名内部类的方式 2. 创建一个类实现onclickListener,实现onclick方法,设置控件点击事件时传一个类的对象. 3. 让当前类实现onclickListener,设置控件点击事件 ...

  3. div置顶

    转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  4. 【转】Nginx服务并发过10万的Linux内核优化配置

    http://www.linuxidc.com/Linux/2012-11/75151.htm以下Linux 系统内核优化配置均经在线业务系统测试,服务器运行状态良好,用了一些时间整理,现和大家分享一 ...

  5. 如何按规定的格式向mysql中导入数据

    1.首先我们拿到数据,数据必须按照一定的格式书写的.如用|区分字段,换行区分row 12107 | 心情1 | 今天的心情很不好啊. 12108 | 天气 | 今天天气还行. 12109 | 臭美 | ...

  6. mysql表查询、多表查询（增强查询的使用）子查询、合并查询，外连接，mysql5种约束，自增长

    一.查询加强 1.在mysql中,日期类型可以直接比较,需要注意格式 2.%:表示0到多个字符, _:表示单个字符 exp:显示第二个字符为大写O的所有员工的姓名和工资 select  name fr ...

  7. fiddler模拟2

    在解决日常的支持需求中,经常会遇到一些用户反馈一些无法简单复现的bug,有很大一部分的bug是由于用户自身的网络环境波动,或者是本身网络环境就较为恶劣,而服务在面对这种恶劣的网络环境的健壮性不够,导致 ...

  8. C语言中各种输入函数之间的区别

    以下内容全部来自Bay(百度百科) scanf的返回值 scanf()函数返回成功赋值的数据项数,读到文件末尾出错时则返回EOF. 如: scanf("%d%d", &a, ...

  9. Solution -「NOI.AC 省选膜你赛」寄蒜几盒

    题目 题意简述   给定一个含有 \(n\) 个顶点的凸多边形( \(n\) 是偶数),对于每一对相对的边(即中间有 \(\frac{n}2-1\) 条其它边),延长它们以将平面分割为多块,并把包含原 ...

  10. 5.Flink实时项目之业务数据准备

    1. 流程介绍 在上一篇文章中,我们已经把客户端的页面日志,启动日志,曝光日志分别发送到kafka对应的主题中.在本文中,我们将把业务数据也发送到对应的kafka主题中. 通过maxwell采集业务数 ...