layui.form小例子

  • 需要引入layui的包

      <!doctype html>
    
  <html>

  <head>
    
  <meta charset="utf-8">
    
  <title>layui.form小例子</title>
    
  <link rel="stylesheet" href="layui/dist/css/layui.css" media="all">
    
  <script type="text/javascript" src="layui/dist/layui.js"></script>
    
  </head>

  <body>
    
  <form class="layui-form">
    
  	<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    
  	<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="layui.js"></script>
    
  <script>
    
  	layui.use('form', function() {
    
  		var form = layui.form;

  		//各种基于事件的操作，下面会有进一步介绍
    
  	});
    
  </script>
    
  	</body>
    
  </html>

layui.form小例子的更多相关文章

  1. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

  2. c# BackGroundWorker 多线程操作的小例子

    在我们的程序中,经常会有一些耗时较长的运算,为了保证用户体验,不引起界面不响应,我们一般会采用多线程操作,让耗时操作在后台完成,完成后再进行处理或给出提示,在运行中,也会时时去刷新界面上的进度条等显示 ...

  3. Ajax入门小例子

    大牛文章:http://www.cnblogs.com/guduoduo/p/3681296.html                               ---Ajax基础学习 http:/ ...

  4. jsf小例子

    有人问我用过jsf没?   当时没有用过,就看了一下: 写了一个小例子  JSF和struts2 差不多的,都有一些配置和跳转 struts2的action配置和JSF的faces-config.xm ...

  5. C# 关于委托的小例子

    本例子是一个关于委托的小例子[猫叫,狗跳,人喊]. 委托是C#开发中一个非常重要的概念,理解起来也和常规的方法不同,但一旦理解清楚,就可以信手拈来,随处可用. 委托是对方法的抽象.它存储的就是一系列具 ...

  6. C#应用编程小例子-03-展示另一个窗体

    C#应用编程小例子-03-展示另一个窗体 using System; using System.Collections.Generic; using System.ComponentModel; us ...

  7. C#应用编程小例子-01-渐显的窗体

    C#应用编程小例子-01-渐显的窗体 using System; using System.Windows.Forms; namespace WindowsFormsApp2 { public par ...

  8. 前端小例子 基础js css html练习

    前情提要: 学前端也有一阵了,个人感觉前端还是重要的. html 学习教程 https://www.cnblogs.com/baili-luoyun/p/10466040.html css 教程 js ...

  9. JSP小例子——实现用户登录小例子（不涉及DB操作）

    实现用户登录小例子用户名和密码都为"admin",登陆成功使用服务器内部转发到login_success.jsp页面,并且提示登陆成功的用户名.如果登陆失败则请求重定向到login ...

随机推荐

  1. iview+vue 表格任一项实现鼠标划上显示内容

    在新版本的iview中,表格新增了tooltip功能: 但做项目时并不是新的iview版本,又不想升级,如何才能实现当内容过多鼠标划上显示内容?下边是我做项目时的改动: { // fixed: 'le ...

  2. SQL语句：随机取3条不重复的记录

    随机取3条不重复的记录 [Access]select top 3 * from tablename order by rnd(id); [SqlServer]select top 3 * from t ...

  3. django-3-视图（views.py）与网址（urls.py）

    视图与网址 操作文件:urls.py.views.py urls.py 作用:用于处理前台的链接(如前台访问:127.0.0.1:8080/index/1212/21212),其实永远访问的是同一个文 ...

  4. PAT甲级【2019年3月考题】——A1158 TelefraudDetection【25】

    Telefraud(电信诈骗) remains a common and persistent problem in our society. In some cases, unsuspecting ...

  5. python 自动把mysql备份文件发送邮箱

    import os import time import sched import smtplib from email.mime.text import MIMEText from email.he ...

  6. SSL certificate problem: self signed certificate

    执行Git命令时出现各种 SSL certificate problem 的解决办法 2014年10月11日 10:45:40   比如我在windows下用git clone gitURL 就提示  ...

  7. 10个Eclipse珍藏插件推荐

    1.Open Explorer 打开资源管理器插件,这是一个从Eclipse里面可以直接定位打开windows资源管理器文件的插件,这个版本的插件在最新的Eclipse版本中都能使用. 下载地址:ht ...

  8. Netty 粘包 拆包 | 史上最全解读

    Netty 粘包/半包原理与拆包实战(史上最全) 疯狂创客圈 Java 聊天程序[ 亿级流量]实战系列之13 [博客园 总入口 ] 本文的源码工程:Netty 粘包/半包原理与拆包实战 源码 本实例是 ...

  9. shell使用lftp同步yum仓库

  10. ORACLE 11G新特性之一（增加带default的字段）

    在11g之前,增加带default值的字段,实现原理如下: alter table t1 add c1 varchar2(20) default 'XX' not null; 假设t1表有4千万行数据 ...