Layui的表单理解

在编写网页的时候需要使用多种框架的效果,这些框架不但精简美观,而且上手快操作简单,下面我们就来认识一下layui框架的表单使用。
使用layui表单的时候需要在创建的form标签里面添加一个layui-form的类,class=“layui-form” 来标识一个表单元素块,通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素,并通过内置的 form模块 来完成各种交互。
当然如果不加载form模块的话form模块里面的各种功能,比如:select、checkbox、radio等功能就无法使用。它们提供了响应式的支持。但如果你不大喜欢,你可以换成你的结构,但必须要在外层容器中定义class=“layui-form”,form模块才能正常工作。
Form中的下拉框里面有下面几种类调整:
required:注册浏览器所规定的必填字段
lay-verify:注册form模块需要验证的类型
class=“layui-input”:layui.css提供的通用CSS类

Form中的select标签第一个option主要是占个坑,让form模块预留“请选择”的提示空间,否则将会把第一项(存在value值)作为默认选中项。你可以在option的空值项中自定义文本,如:请选择分类。
一些属性有:属性selected可设定默认项、属性disabled开启禁用,select和option标签都支持。
复选框的直接写上去就会有样式了,关于复选框的一些属性有:
属性title可自定义文本(温馨提示:如果只想显示复选框,可以不用设置title)
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置value="1"可自定义值,否则选中时返回的就是默认的on

Form中开关效果:
其实就是checkbox复选框的“变种”,通过设定 lay-skin=“switch” 形成了开关风格。
属性:
属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本
设置value="1"可自定义值,否则选中时返回的就是默认的on
Form中单选框的效果和复选框相似:
就是radio的单选框效果,
属性:
属性title可自定义文本
属性disabled开启禁用
设置value="xxx"可自定义值,否则选中时返回的就是默认的on
文本域
在form中的textarea标签添加class=“layui-textarea”:layui.css提供的通用CSS类就可以了。
组装行内表单
直接在两个div标签里面使用属性类进行调整就可以了。
属性:
class=“layui-inline”:定义外层行内
class=“layui-input-inline”:定义内层行内
风格样式美化:
通过追加 layui-form-pane 的class,来设定表单的方框风格。内部结构不变。

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页