Layui之表单form

1. 全家福代码以及效果图

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp"%>











	
Layui表单
	

	

	

	
		
		

			Name
			

				
			
		

		
		

			Password
			

				
			
			
辅助文字
		

		
		

			城市
			

				
				  请选择一个城市
				  北京
				  上海
				  杭州
				 
			
		

		
		

			Sport
			

				 
				
			
		
		
		
		

			兴趣
			

				
				 
				 
			
		

		
		

			是否同意协议？
			

				
			
		

		
		

			Sex
			

				
				
			
		

		
		

			个人简介
			

				
			
		
		
		

			

				立即提交
				重置
			
		
	

2. 使用Layui细节

① form标签必须给class="layui-form"

② text、password、select、checkbox、radio、textarea必须放在如下结构中，针对textarea，最外层的div的 class="layui-form-item layui-form-text"

    标签名
    
    

        原始的input
    

③ 必须加载form模块，否则select、checkbox、radio等将无法显示，并且无法使用form相关功能）

//加载form模块
layui.use('form', function() {
	var form = layui.form;
});

④ 提交和重置按钮如下格式

	

		立即提交
		重置
	

提交按钮的lay-filter的属性值类似于id，可以通过如下方法监听提交按钮时候被点击

form.on('submit(formDemo)', function(data) {
	layer.msg(JSON.stringify(data.field));
	return false;
});

3. 参数详解
① 针对text：

required：注册浏览器所规定的必填字段 
lay-verify：注册form模块需要验证的类型 
class="layui-input"：layui.css提供的通用CSS类
② 针对checkbox变种开关：

其实就是checkbox复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格
lay-skin：可设置复选框的风格，值为primary为原始风格
lay-text： 可自定义开关两种状态的文本。lay-text="是|否"
checked ： 设置默认为开
  ③ 表单lable放到方框中，通过在表单form的class属性值中追加layui-form-pane即可，但是要注意，复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭）。

	

	性别