博主信息
阿杰网络科技博客资源站
博文
22
粉丝
0
评论
7
访问量
6216
积分:0
P豆:54

Layui表单案例

2020年06月19日 23:52:06阅读数:207博客 / 阿杰网络科技博客资源站/ 基础作品

QQ图片20200619235024.png

实例

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>表单</title>
	<link rel="stylesheet" type="text/css" href="./js/layui-v2.5.6/layui/css/layui.css"/>
	<script src="js/layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	
</head>
	<form class="layui-form" action="">
	  <div class="layui-form-item">
	    <label class="layui-form-label">输入框</label>
	    <div class="layui-input-block">
	      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">密码框</label>
	    <div class="layui-input-inline">
	      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
	    </div>
	    <div class="layui-form-mid layui-word-aux">辅助文字</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="0">北京</option>
	        <option value="1">上海</option>
	        <option value="2">广州</option>
	        <option value="3">深圳</option>
	        <option value="4">杭州</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="阅读" checked>
	      <input type="checkbox" name="like[dai]" title="发呆">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">开关</label>
	    <div class="layui-input-block">
	      <input type="checkbox" name="switch" 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="男" title="男">
	      <input type="radio" name="sex" value="女" title="女" checked>
	    </div>
	  </div>
	  <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">文本域</label>
	    <div class="layui-input-block">
	      <textarea name="desc" 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>
	 
	<script>
	//Demo
	layui.use('form', function(){
	  var form = layui.form;
	  
	  //监听提交
	  form.on('submit(formDemo)', function(data){
	    layer.msg(JSON.stringify(data.field));
	    return false;
	  });
	});
	</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
阿杰网络科技
  • 阿杰网络科技· 2020-06-19 23:53:491楼
  • 引入layui框架的css样式 <link rel="stylesheet" type="text/css" href="./js/layui-v2.5.6/layui/css/layui.css"/> 即可显示完整效果

  • 回复