<!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. JavaScript闭包的那些事

    JavaScript闭包 1.函数在JavaScript中的地位 在介绍闭包之前,可以先聊聊函数在JavaScript中的地位,因为闭包的存在是与函数息息相关的. JavaScript之所以可以称之为 ...

  2. 如何修改TOMCAT的默认主页为你自己项目的主页

    感谢作者:xxs673076773 原文链接:https://www.iteye.com/blog/xxs673076773-1134805 (最合适的) 最直接的办法是,删掉tomcat下原有Roo ...

  3. element-ui 使用 Select 组件给 value 属性绑定对象类型

    qq_36437172 2020-06-28 22:38:49  778  收藏 分类专栏: element-ui 文章标签: element-ui Select 组件 value 属性 绑定 对象类 ...

  4. Html 项目使用自定义字体文件问题

    感谢大佬:https://zhidao.baidu.com/question/652711582735059245.html 1.首先在项目过程中新建文件夹fonts将准备好的ttf字体文件复制该文件 ...

  5. 【Github资源大汇总】 - 王朋

    1.Github-iOS备忘 (国人总结的上百个Github上的开发框架和完整App) http://github.ibireme.com/github/list/ios/ 2.不少优秀的 iOS, ...

  6. Jenkins--持续集成及Jenkins介绍

    Jenkins--持续集成及Jenkins介绍 目录 Jenkins--持续集成及Jenkins介绍 一.持续集成及Jenkins介绍 1. 软件开发生命周期 1.1 需求分析 1.2 设计 1.3 ...

  7. Docker之LNMP分布式容器部署

    Docker之LNMP分布式容器部署 目录 Docker之LNMP分布式容器部署 一.项目模拟 1. 项目环境 2. 服务器环境 3. 任务需求 二.Linux系统基础镜像 三.Nginx 1. 建立 ...

  8. Content-Type: multipart/form-data;文件上传利用

    当我们找到一个文件上传接口时,发现他的MIME类型检测为Content-Type: multipart/form-data;时,我们就可以尝试下面几种方法来绕过限制. ---------------- ...

  9. js实现网页回弹小球效果

    直接上效果图 运行页面会首先弹出一个输入框,询问用户想要产生的小球数量,随后后台就会产生指定数量的小球,在页面中来回跳动,触碰到页面边框时,就会回弹,且产生的小球颜色随机,小球在页面中的位置随机,小球 ...

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

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