<!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. js源码-数组中的push()和unshift()方法的源码实现

    人话不多,直接上代码,在代码中解析,不足之处请谅解: push() Array.prototype._push=function(...value){//在Array原型链上添加_push方法 for ...

  2. IDE中集成widfly

    第一步:添加JBOss服务器,Tomcat同理添加 第二步:选择刚刚部署好的服务器 第三步:启动服务: 注意:与Tomcat略有不同的是,启动的根目录可能不相同,导致一直404 查看启动的根目录: 注 ...

  3. CAAnimation——简介

  4. 设置程序启动时加载的storyboard

    这个设置表明:程序启动时会加载Main.storyboard

  5. uni showLoading 还有注意关闭 闭包， .finally

    uni.showLoading({ title:'正在提交...' }); let data = JSON.parse(JSON.stringify($this.sendData)); const r ...

  6. VC 窗口置顶并激活为当前窗体

    转载请注明来源:https://www.cnblogs.com/hookjc/ if (this != GetForegroundWindow())                           ...

  7. python使用插入法实现链表反转

    # encoding=utf-8 class LNode(object): def __init__(self, x): self.data = x self.next = None def reve ...

  8. centOs编译安装php7.2支持微擎php扩展

    发现yum安装许多坑 于是只好编译安装 第一步得到镜像地址 在      https://www.php.net/downloads.php     有的地址比较慢,需要耐心等待 cd /usr/lo ...

  9. 【密码学工具】Ciphey和WinDecrypto的使用随笔

    1.Ciphey 官方文档 这个工具安装起来也很容易,用pip下载即可. pip install ciphey -i https://pypi.mirrors.ustc.edu.cn/simple/ ...

  10. uni-app、Vue3 + ucharts 图表 H5 无法渲染

    文章已收录到 github,欢迎 Watch 和 Star. 简介 从问题定位开始,到给框架(uni-app)提 issue.出解决方案(PR),再到最后的思考,详细记录了整个过程. 前序 当你在业务 ...