<!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. sqlserver查出来的数据丢失

    问题描述 今天利用sqlserver查数据,使用了一个ROUND(308.16000, 2)函数,发现在sqlserver工具中显示正常,但是在服务端查出来就会发生精度丢失问题. ROUND和CAST ...

  2. UITextFIeld的输入格式问题 ----W.P

    ---恢复内容开始--- 1.银行卡的输入格式,四个数字,一个空格. 2.金额的输入格式限制,不能以"."开头,"."后精确两位. 注意:第三方输入软件(百度, ...

  3. oracle查看当前正在使用的数据库

    select name from V$DATABASE; 也可以用 select SYS_CONTEXT('USERENV','INSTANCE_NAME') from dual;

  4. 浅谈Java之反射

    反射 四种获取Class实例的方法 定义测试结构 获取属性结构 获取方法结构 获取构造器结构(包括父类泛型) 获取实现的接口 获取所在包 获取注解 获取并创建指定构造器 获取指定属性 获取并运行指定方 ...

  5. Selenium对应版本

    下面是谷歌浏览器与chromedriver的版本对应关系,供参考: ChromeDriver v2.45 (2018-12-10)----------Supports Chrome v70-72Chr ...

  6. 虫师Selenium2+Python_3、Python基础

    P38--Python哲学 打开Python shell,输入import this,会看到下面的话: The Zen of Python, by Tim Peters   Beautiful is ...

  7. Spring Security探究之路之开始

    前言 在Spring Security介绍中,我们分析到了根据请求获取匹配的SecurityFilterChain,这个类中包含了一组Filter 接下来我们从这些Filter开始探究之旅 Sprin ...

  8. 07.python语法入门--流程控制

    分支结构 什么是分支结构 为什么要用分支结构 如何使用分支结构 if语法 if应用案例 循环结构 什么是循环结构 为什么要用循环结构 如何使用循环结构 while循环语法 while循环应用案例 fo ...

  9. 个人觉得好用的Idea插件

    Intellij IDEA插件 排名不分先后 1. Codota 代码智能提示插件 只要打出首字母就能联想出一整条语句,这也太智能了,还显示了每条语句使用频率.原因是它学习了我的项目代码,总结出了我的 ...

  10. [编译器]dev c++单步调试

    一.dev c++调试崩溃的解决方案 1.点击"工具 -> 编译选项". 2.选择"编译器"选项卡,勾选"编译时加入以下命令",输入& ...