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. （一）arm交叉编译工具链准备

    1.背景 arm机器一般因为资源问题进行编译会影响开发速度,而且很多时候因为资源不够而无法完成编译工作.因此,需要在执行机上进行交叉编译,即使用x86或其他架构机器基于交叉编译工具编译出在arm上可以 ...

  2. 三线SWD模式Jlink

    三线SWD模式Jlink   在公司实习,部门经理让我做一个USB-CAN的适配器. 在网上找资料,找到一个开源的USB-CAN的适配器的资料. 采用的是CP2102芯片实现USB转串口.STM32作 ...

  3. exception 打印出异常栈踪迹

    Java异常抛出使用e.printStackTrace(),打印出抛出的异常栈踪迹, 如果你在catch中继续抛出这个异常,那么e.printStackTrace()也能跟踪到抛出异常的地方, 使用t ...

  4. Python中多线程的阻塞问题

    在使用Queue模块+多线程模拟生产者+消费者问题时,遇到了一个小问题,现在记录下来.供可能会遇到类似问题的初学者们参考. 该问题的完整参考代码如下.主要实现了以下的功能:在一个线程中,开启生产者模式 ...

  5. T1373：鱼塘钓鱼(fishing）

    原题链接:1373:鱼塘钓鱼(fishing) 解题思路: 由于在走路时,鱼的数量不会减少,那我们此时可以先减去路上可能花掉的时间,用剩下的时间来找最多的鱼,然后从左向右走,k枚举能到达的最远的鱼塘, ...

  6. java反射(一)--认识反射机制

    一.认识java反射机制 在java语言中,之所以会有如此众多的开源技术支撑,很大的一部分来源于java最大特征--反射机制.能够灵活的去使用反射机制进行项目的开发与设计,才能够真正接触到java的精 ...

  7. luoguP1314 聪明的质监员 题解(NOIP2011)

    P1314 聪明的质监员 题目 #include<iostream> #include<cstdlib> #include<cstdio> #include< ...

  8. 【UR #5】怎样跑得更快

    题目 给定\(n,c,d\)和序列\(\{b_i\}\),求一个序列\(\{x_i\}\)满足 \[\sum_{j=1}^n\gcd(i,j)^c\times \rm{lcm(i,j)^d}\time ...

  9. 新手学习 React 迷惑的点

    网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打 ...

  10. ArcGis基础——相接面制造指定距离的分隔带

    回家,出发前夜,看完电影吃晚饭回到住处已近十一点,和同事扯了一会儿淡,正准备去睡觉,这哥们儿突然想起一个问题: 如何把相接的面搞出一个20cm的分隔带?因为两区划定项目数据质检要求不同的地块图斑间应有 ...