layui 表单的使用
2024-09-04 04:06:56
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui.form小例子</title>
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
</head>
<body>
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value="0">写作</option>
<option value="1">阅读</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="阅读">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关关</label>
<div class="layui-input-block">
<input type="checkbox" lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关开</label>
<div class="layui-input-block">
<input type="checkbox" checked 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="0" title="男">
<input type="radio" name="sex" value="1" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">请填写描述</label>
<div class="layui-input-block">
<textarea 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="*">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div> </form>
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script>
layui.use('form', function(){
var form = layui.form; });
</script>
</body>
</html>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"> <!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js">
效果图：
最新文章
- linux C 获取当前目录的实现（转-Blossom）
- 【原创】-- nfs安装配置及使用，挂载根文件系统
- Git基本命令（一）
- bootstrap学习笔记<一>（bootstrap用法）
- mysql 查看锁表解锁
- VS2012 C#调用C++ dll
- git研究2
- Python--模块微谈
- MySQL user表root用户误删除后恢复
- windows和linux套接字中的select机制浅析
- Windows IOT
- 21JDBC_事务&JDBCTemplate
- Docker Overlay 介绍
- loadrunner 关联匹配多个值
- 安装edusoho
- 标准正态分布表（scipy.stats）
- Android 单元测试覆盖率计算
- java-Runtime 调用命令
- WordPress For SAE进入后台
- JS之原型式的继承