专栏首页sktjLayui form 表单(常用)

Layui form 表单(常用)

form依赖模块form

layui-form div.layui-form-item label.layui-form-label div.layui-input-block

input.layui-input lay-verify="required"

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

select分组

<select name="quiz">
 <option value="">请选择</option>
 <optgroup label="城市记忆">
 <option value="你工作的第一个城市">你工作的第一个城市?</option>
 </optgroup>
 <optgroup label="学生时代">
 <option value="你的工号">你的工号?</option>
 <option value="你最喜欢的老师">你最喜欢的老师?</option>
 </optgroup>
 </select>
<select name="city" lay-verify="" lay-search>
 <option value="010">layer</option>
 <option value="021">form</option>
 <option value="0571" selected>layim</option>
 ……
 </select>

复选框

默认风格:

 <input type="checkbox" name="" title="写作" checked>
 <input type="checkbox" name="" title="发呆">
 <input type="checkbox" name="" title="禁用" disabled>

原始风格:

 <input type="checkbox" name="" title="写作" lay-skin="primary" checked>
 <input type="checkbox" name="" title="发呆" lay-skin="primary">
 <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>

checkbox

 <input type="checkbox" name="xxx" lay-skin="switch">
 <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
 <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
 <input type="checkbox" name="aaa" lay-skin="switch" disabled>

radio

 <input type="radio" name="sex" value="nan" title="男">
 <input type="radio" name="sex" value="nv" title="女" checked>
 <input type="radio" name="sex" value="" title="中性" disabled>

layui-textarea

<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>

layui-form-inline 内联表单

<div class="layui-form-item">
<div class="layui-inline">
 <label class="layui-form-label">范围</label>
 <div class="layui-input-inline" style="width: 100px;">
 <input type="text" name="price_min" placeholder="¥" autocomplete="off" class="layui-input">
 </div>
 <div class="layui-form-mid">-</div>
 <div class="layui-input-inline" style="width: 100px;">
 <input type="text" name="price_max" placeholder="¥" autocomplete="off" class="layui-input">
 </div>
 </div>
<div class="layui-inline">
 <label class="layui-form-label">密码</label>
 <div class="layui-input-inline" style="width: 100px;">
 <input type="password" name="" autocomplete="off" class="layui-input">
 </div>
 </div>
</div>

表单方框风格 常用

<form class="layui-form layui-form-pane" action="">
内部结构都一样,值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性(否则会看起来比较别扭),如:
<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 条评论
登录 后参与评论

相关文章

  • bootstrap 搜索框 常用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • bootstrap 输入框组 常用搜索框样式

    div input-group span input-group-addon <div style="padding: 100px 100px 10px...

    用户5760343
  • bootstrap 表单控件大小

    <form role="form"> <div class="form-group"> <input class="form-control input-l...

    用户5760343
  • thymeleaf中使用layui

    头部引入css,尾部引入js,定义两个模板(一个也可以,里面的碎片分开写,我喜欢写两个分别引入),注意th:fragment,fragment即碎片,可以在模板...

    小尘哥
  • layui修改 form表单的 长度

    Little JAVA
  • JFinal极速开发框架使用笔记(二) 两个问题,一个发现

    最近给新人出了一个小测试,我也用JFinal框架做了一下,记录一下使用过程中遇到的坑和新学到的知识点 首先是遇到的两个小问题, 一个是用最新版的eclipse运...

    二十三年蝉
  • 短信接口发送验证码倒计时以及提交验证

    项目中找回密码的功能: 忘记密码,登录页面点击忘记密码,跳转页面输入用户名,如果用户名已经绑定手机号,后台调用短信接口给该用户绑定的手机发送短信,如果没有绑定手...

    二十三年蝉
  • js判断文件类型大小并给出提示

    上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求:       <form id="uploadForm" method="pos...

    二十三年蝉
  • Layui 面板 panel

    用户5760343
  • 点击菜单选项,右侧主体区新增子界面(Tab)的实现

    今天记录一下一种前端页面的效果的实现,这种效果很常见,一般用于网站后台系统的前端页面。一般后台系统会分为顶部导航栏,左边的菜单栏和右边的主体区。有一种效果是这样...

    CherishTheYouth

扫码关注云+社区

领取腾讯云代金券