Layui之表单form

最新推荐文章于 2022-07-08 11:05:53 发布

什么都不会做

最新推荐文章于 2022-07-08 11:05:53 发布

阅读量1.2k

点赞数

原文链接：https://blog.csdn.net/cccmercy/article/details/78878244?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160385013219724822543325%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=160385013219724822543325&biz_id=0&

版权

代码以及效果图

<%@ 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>

在这里插入图片描述

使用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;
});

参数详解
① 针对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
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Layui之表单form

代码以及效果图<%@ 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">
复制链接

扫一扫