Layui之表单form

来源：互联网发布：php的sleep函数编辑：程序博客网时间：2024/05/20 14:20

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

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ include file="/common/common.jsp"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="${ctp }/script/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="${ctp }/script/layui/css/layui.css"><script type="text/javascript" src="${ctp }/script/layui/layui.js"></script><script type="text/javascript">$(function() {layui.use('form', function() {var form = layui.form;//监听提交form.on('submit(formDemo)', function(data) {//layer.msg(JSON.stringify(data.field));//return false;});});});</script></head><body><h3 align="center">Layui表单</h3><br /><br /><form action="" class="layui-form layui-form-pane"><!-- 普通文本输入框 --><div class="layui-form-item"><label class="layui-form-label">Name</label><div class="layui-input-block"><input type="text" name="name" placeholder="请输入姓名"autocomplete="off" required lay-verify="required"class="layui-input"></div></div><!-- 密码输入框 --><div class="layui-form-item"><label class="layui-form-label">Password</label><div class="layui-input-inline"><input type="password" name="password" placeholder="请输入密码"autocomplete="off" required lay-verify="required"class="layui-input"></div><div class="layui-form-mid">辅助文字</div></div><!-- 下拉列表 --><div class="layui-form-item"><label class="layui-form-label">城市</label><div class="layui-input-block"><select name="city" lay-verify="required">  <option value="">请选择一个城市</option>  <option value="010">北京</option>  <option value="021" disabled>上海</option>  <option value="0571">杭州</option></select> </div></div><!-- 多选框默认风格 --><div class="layui-form-item" pane><label class="layui-form-label">Sport</label><div class="layui-input-block"><input type="checkbox" name="sport" value="bb" title="Basketball"> <input type="checkbox" name="sport" value="pp" title="PingPang"></div></div><!-- 多选框原始风格 --><div class="layui-form-item" pane><label class="layui-form-label">兴趣</label><div class="layui-input-block"><input type="checkbox" name="hobby" value="tyy" title="听音乐" lay-skin="primary" checked><input type="checkbox" name="hobby" value="fd" title="发呆" lay-skin="primary"> <input type="checkbox" name="hobby" value="kdy" title="看电影（禁用效果）" lay-skin="primary" disabled> </div></div><!-- 开关 --><div class="layui-form-item" pane><label class="layui-form-label">是否同意协议？</label><div class="layui-input-block"><input type="checkbox" name="agree" value="1" lay-skin="switch" lay-text="是|否" checked></div></div><!-- 单选按钮 --><div class="layui-form-item" pane><label class="layui-form-label">Sex</label><div class="layui-input-block"><input type="radio" name="sex" value="1" title="男" checked><input type="radio" name="sex" value="0" title="女"></div></div><!-- 文本域 --><div class="layui-form-item layui-form-text"><label class="layui-form-label">个人简介</label><div class="layui-input-block"><textarea name="abstract" 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="formDemo">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></body></html>

2. 使用Layui细节

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

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

<div class="layui-form-item">    <label class="layui-form-label">标签名</label>    <!-- 针对text，下面的class属性值也可以是layui-input-inline，可以缩短文本框 -->    <div class="layui-input-block">        原始的input    </div></div>

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

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

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

<div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div>

提交按钮的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属性（否则会看起来比较别扭）。

<form class="layui-form layui-form-pane" action=""><div class="layui-form-item" pane><label class="layui-form-label">性别</label><div class="layui-input-block"><input type="radio" name="sex" value="男" title="男"><input type="radio" name="sex" value="女" title="女" checked></div></div></form>

阅读全文

0 0