前端自适应表单模板（支持IE8-9）

文章目录

前言
1.使用layui实现

前言

自适应表单模板，使用layui实现自适应表单，自适应pc，移动端和平板

1.使用layui实现

所需的js文件在我上传的资源有，下载不需要积分。
另度盘地址
密码链接：https://pan.baidu.com/s/1VHkhY1f9t05xZkHqs_tazg
提取码：33gs

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="/layui/dist/css/layui.css"  media="all"><!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 --><script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script><script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<div class="layui-fluid"><fieldset class="layui-elem-field layui-field-title" style="text-align: center;"><legend>流体容器（宽度自适应，不固定）</legend></fieldset><div class="layui-row"><div class="layui-col-sm2" style="visibility: hidden;">占位</div><div class="layui-col-sm6"><div class="grid-demo grid-demo-bg1"><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" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">验证必填项</label><div class="layui-input-block"><input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">验证手机</label><div class="layui-input-inline"><input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">验证邮箱</label><div class="layui-input-inline"><input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">多规则验证</label><div class="layui-input-inline"><input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">验证日期</label><div class="layui-input-inline"><input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">验证链接</label><div class="layui-input-inline"><input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><label class="layui-form-label">验证身份证</label><div class="layui-input-block"><input type="text" name="identity" lay-verify="identity" 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" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input"></div><div class="layui-form-mid layui-word-aux">请填写6到12位密码</div></div><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><div class="layui-form-item"><label class="layui-form-label">单行选择框</label><div class="layui-input-block"><select name="interest" lay-filter="aihao"><option value=""></option><option value="0">写作</option><option value="1" selected="">阅读</option><option value="2">游戏</option><option value="3">音乐</option><option value="4">旅行</option></select></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">分组选择框</label><div class="layui-input-inline"><select name="quiz"><option value="">请选择问题</option><optgroup label="城市记忆"><option value="你工作的第一个城市">你工作的第一个城市</option></optgroup><optgroup label="学生时代"><option value="你的工号">你的工号</option><option value="你最喜欢的老师">你最喜欢的老师</option></optgroup></select></div></div><div class="layui-inline"><label class="layui-form-label">搜索选择框</label><div class="layui-input-inline"><select name="modules" lay-verify="required" lay-search=""><option value="">直接选择或搜索选择</option><option value="1">layer</option><option value="2">form</option><option value="3">layim</option><option value="4">element</option><option value="5">laytpl</option><option value="6">upload</option><option value="7">laydate</option><option value="8">laypage</option><option value="9">flow</option><option value="10">util</option><option value="11">code</option><option value="12">tree</option><option value="13">layedit</option><option value="14">nav</option><option value="15">tab</option><option value="16">table</option><option value="17">select</option><option value="18">checkbox</option><option value="19">switch</option><option value="20">radio</option></select></div></div></div><div class="layui-form-item"><label class="layui-form-label">联动选择框</label><div class="layui-input-inline"><select name="quiz1"><option value="">请选择省</option><option value="浙江" selected="">浙江省</option><option value="你的工号">江西省</option><option value="你最喜欢的老师">福建省</option></select></div><div class="layui-input-inline"><select name="quiz2"><option value="">请选择市</option><option value="杭州">杭州</option><option value="宁波" disabled="">宁波</option><option value="温州">温州</option><option value="温州">台州</option><option value="温州">绍兴</option></select></div><div class="layui-input-inline"><select name="quiz3"><option value="">请选择县/区</option><option value="西湖区">西湖区</option><option value="余杭区">余杭区</option><option value="拱墅区">临安市</option></select></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"><input type="checkbox" name="like[write]" title="写作"><input type="checkbox" name="like[read]" title="阅读" checked=""><input type="checkbox" name="like[game]" title="游戏"></div></div><div class="layui-form-item" pane=""><label class="layui-form-label">原始复选框</label><div class="layui-input-block"><input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked=""><input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读"><input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled=""></div></div><div class="layui-form-item"><label class="layui-form-label">开关-默认关</label><div class="layui-input-block"><input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF"></div></div><div class="layui-form-item"><label class="layui-form-label">开关-默认开</label><div class="layui-input-block"><input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF"></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="男" checked=""><input type="radio" name="sex" value="女" title="女"><input type="radio" name="sex" value="禁" title="禁用" disabled=""></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 layui-form-text"><label class="layui-form-label">编辑器</label><div class="layui-input-block"><textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea></div></div>--><div class="layui-form-item"><div class="layui-input-block"><button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></div></div></div>
</div><script src="/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>    </script></body>
</html>

前端自适应表单模板（支持IE8-9）相关推荐

计算机程序设计表单,表单模板和表单简介
表单模板的组件表单模板是单个文件包含多个支持文件,例如定义表单模板上的控件的显示方式,显示在表单模板的图形文件的文件和编程启用自定义窗体中的行为的文件模板.为表单文件统称以下支持的文件.在设计表单模 ...
php 网页手册模板,网站表单模板
前端界面默认网站表单模板介绍发布:/template/pc/default/home/form_post.html 列表:/template/pc/default/home/form_list.ht ...
php 表单模板,迅睿CMS 网站表单模板
前端界面默认网站表单模板介绍发布:/template/pc/default/home/form_post.html 列表:/template/pc/default/home/form_list.h ...
vue+elementUI实现自定义表单模板组件（二）
前言在上一节主要解决了表单模板的创建问题,在数据库中的存储格式为字符串. 主要是通过前端处理,保存为 json 数组的字符串,形如 [{label:"文本",required:t ...
外部编辑Infopath的表单模板(xsn)
我们都知道Infopath表单模板(xsn文件)其实是一个压缩包(cab格式的),我们可以通过winrar或者winzip等工具直接打开它,它里面至少会有五个文件那么有没有什么办法直接编辑这些文件, ...
帝国cms录入表单模板php,帝国cms7.5在线表单提交制作教程
最近春哥仿站团队接到很多仿站客户订单,这里面有一个这样的功能,表单提交.今天花时间写个教程给大家.另外我们春哥仿站团队推出低价仿站业务,市面上99%的企业站点都能制作出来,有需要的联系我们. 今天春哥 ...
支付宝会员卡开卡表单模板配置(alipay.marketing.card.formtemplate.set)JAVA版本demo
官方接口文档: https://docs.open.alipay.com/251/105668/ ,我这里写的是开卡组件前两步的操作流程, 仅供参考 1. 调用接口前的准备工作(创建应用等)参考该文档 ...
2020使用html、js、正则表达式做一个前端注册表单信息验证
使用html.js.正则表达式做一个前端注册表单信息验证小小前端练手项目,主要运用正则表达式对用户名.密码.确认密码.电子邮箱.手机号码.生日.身份证号码的验证 1.用户名不正确(需由由英文字母和数 ...
html5 设计 form,为HTML5表单设计表单模板
为HTML5表单设计表单模板 AEM中的HTML5表单组件提供了将XFA表单模板渲染为HTML5格式的功能. 表单设计人员可以使用Forms Designer设计表单模板,并使用HTML5呈现功能. ...
基于css的表单模板
代码 /* General styles */ body { margin : 0 ; padding : 0 ; font : 80%/1.5 Arial,Helvetica,sa ...

前端自适应表单模板（支持IE8-9）

文章目录

前言

1.使用layui实现

前端自适应表单模板（支持IE8-9）相关推荐

最新文章

热门文章