页面元素之表单和导航

最新推荐文章于 2022-07-29 16:57:46 发布

Asteroid 325

最新推荐文章于 2022-07-29 16:57:46 发布

阅读量278

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/weixin_43846020/article/details/107382416

版权

layui 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

https://www.layui.com/doc/element/form.html

表单：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<script src="layui/layui.js"></script>
		<script>
		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>
	<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>
	</body>
</html>

在这里插入图片描述

导航条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<script src="layui/layui.js"></script>
		<script>
		//注意：导航 依赖 element 模块，否则无法进行功能性操作
		layui.use('element', function(){
		  var element = layui.element;
		  
		  //…
		});
		</script>
	</head>
	<body>
	<ul class="layui-nav" lay-filter="">
	  <li class="layui-nav-item"><a href="">最新活动</a></li>
	  <li class="layui-nav-item layui-this"><a href="">产品</a></li>
	  <li class="layui-nav-item"><a href="">大数据</a></li>
	  <li class="layui-nav-item">
	    <a href="javascript:;">解决方案</a>
	    <dl class="layui-nav-child"> <!-- 二级菜单 -->
	      <dd><a href="">移动模块</a></dd>
	      <dd><a href="">后台模版</a></dd>
	      <dd><a href="">电商平台</a></dd>
	    </dl>
	  </li>
	  <li class="layui-nav-item"><a href="">社区</a></li>
	</ul>
	</body>
</html>

在这里插入图片描述

Asteroid 325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面元素之表单和导航

https://www.layui.com/doc/element/form.html表单：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="layui/css/layui.css" /> <script src="layui/layui.js">
复制链接

扫一扫

专栏目录