<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<!--LayUI的核心css文件-->
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<!--LayUI的核心js文件-->
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
//加载form模块
layui.use("form",function(){
var form = layui.form;
});
</script>
</head>
<body>
<!--
在一个容器中设定*class="layui-form"* 来标识一个表单元素块
常用属性：
required 浏览器固定的必输字段
lay-verify 需要验证的类型 (required表示必填项)
class="layui-input" 提供的通用的样式
class="layui-input-inline" 占据部分宽度
class="layui-input-block" 占据全部宽度
文本框
placeholder 当文本框为空时，默认显示的文本信息
autocomplete 表单元素是否自动填充(当浏览器中缓存中存在
相同name属性的值时，会填充)
下拉框
通过selected属性设置默认选中项
通过disabled禁用选项
可以通过optgroup标签给select分组
通过设置lay-search属性
复选框
通过title属性设置自定义文本，(如果不需要显示文本，则不设置title属性)
通过checked属性设置被选中的项
通过lay-skin属性设置复选框的样式效果(lay-skin="primary"表示原始效果)
通过disabled禁用选项
开关
通过复选框，设置lay-skin="switch" 形成开关风格
通过lay-text="打开的值|关闭的值"来设定开关的两种状态的文本，通过|分
隔
通过checked属性设置默认打开状态
通过disabled禁用开关
通过value属性设置选中的值
单选框
通过checked属性设置默认打开状态
通过disabled禁用开关
通过value属性设置选中的值
文本域
class="layui-textarea"
表单方框风格
通过追加layui-form-pane的class，来设定表单的方框风格
-->
<form class="layui-form" action="#">
<!--文本框-->
<div class="layui-form-item">
<label class="layui-form-label">
标题
</label>
<div class="layui-input-inline">
<input type="text" name="title" class="layui-input"
required lay-verify="required" placeholder="请输入标题" autocomplete="off"/>
</div>
</div>
<!--下拉框-->
<div class="layui-form-item">
<label class="layui-form-label">
省份
</label>
<div class="layui-input-inline">
<select name="province" lay-verify="required">
<option value="11">北京市</option>
<option value="12" selected>天津市</option>
<option value="31">上海市</option>
<option value="50">重庆市</option>
<option value="13" disabled>河北省</option>
</select>
<br>
<select name="quiz">
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你喜欢的老师">你最喜欢的老师?</option>
</optgroup>
</select>
<br>
<select name="game" lay-verify="" lay-search>
<option value="">请选择</option>
<option value="hj">红色警报</option>
<option value="ms">魔兽争霸</option>
<option value="xj">星际争霸</option>
</select>
</div>
</div>
<!--复选框-->
<div class="layui-form-item">
<label class="layui-form-label">
爱好
</label>
<div class="layui-input-block">
<!--默认效果-->
<input type="checkbox" name="ai-hao" title="足球" value="football" checked/>
<input type="checkbox" name="ai-hao" title="篮球"/>
<input type="checkbox" name="ai-hao" title="乒乓球"/>
<br>
<!--原始效果-->
<input type="checkbox" name="ai-hao" title="足球" lay-skin="primary"/>
<input type="checkbox" name="ai-hao" title="篮球" lay-skin="primary"/>
<input type="checkbox" name="ai-hao" title="乒乓球" lay-skin="primary" disabled/>
</div>
</div>
<!-- 开关-->
<div class="layui-form-item">
<label class="layui-form-label">
开关
</label>
<div class="layui-input-block">
<input type="checkbox" name="a1" lay-skin="switch"/>
<input type="checkbox" name="a2" lay-skin="switch" lay-text="ON|OFF"/>
<input type="checkbox" name="a3" lay-skin="switch" lay-text="打开|关闭" value="打开"/>
</div>
</div>
<!--单选框-->
<div class="layui-form-item">
<label class="layui-form-label">
性别
</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="male" title="男" checked/>
<input type="radio" name="sex" value="female" title="女"/>
</div>
</div>
<!--文本域-->
<div class="layui-form-item">
<label class="layui-form-label">
简介
</label>
<div class="layui-input-inline">
<textarea name="remark" required lay-verify="required" placeholder="请输入简介"
class="layui-textarea">
</textarea>
</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="price_min" placeholder="￥" autocomplete="off" class="layui-input"/>
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<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">
<input type="password" name="pwd" placeholder="请输入密码" class="layui-input"/>
</div>
</div>
</div>
<!--原始效果-->
<div class="layui-form-item">
<label class="layui-form-label">
原始效果
</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="male" title="男" checked lay-ignore/>
<input type="radio" name="sex" value="female" title="女" lay-ignore/>
</div>
</div>
<!--按钮-->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter=""fromDemo>立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<hr/><br>
<!--表单方框风格-->
<form action="" class="layui-form layui-form-pane">
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="male" title="男" checked/>
<input type="radio" name="sex" value="female" title="女"/>
</div>
</div>
</form>
</body>
</html>，我来为大家科普一下关于layui教程前后端交互技术交流?以下内容希望对你有帮助!
layui教程前后端交互技术交流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<!--LayUI的核心css文件-->
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<!--LayUI的核心js文件-->
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
//加载form模块
layui.use("form",function(){
var form = layui.form;
});
</script>
</head>
<body>
<!--
在一个容器中设定*class="layui-form"* 来标识一个表单元素块
常用属性：
required 浏览器固定的必输字段
lay-verify 需要验证的类型 (required表示必填项)
class="layui-input" 提供的通用的样式
class="layui-input-inline" 占据部分宽度
class="layui-input-block" 占据全部宽度
文本框
placeholder 当文本框为空时，默认显示的文本信息
autocomplete 表单元素是否自动填充(当浏览器中缓存中存在
相同name属性的值时，会填充)
下拉框
通过selected属性设置默认选中项
通过disabled禁用选项
可以通过optgroup标签给select分组
通过设置lay-search属性
复选框
通过title属性设置自定义文本，(如果不需要显示文本，则不设置title属性)
通过checked属性设置被选中的项
通过lay-skin属性设置复选框的样式效果(lay-skin="primary"表示原始效果)
通过disabled禁用选项
开关
通过复选框，设置lay-skin="switch" 形成开关风格
通过lay-text="打开的值|关闭的值"来设定开关的两种状态的文本，通过|分
隔
通过checked属性设置默认打开状态
通过disabled禁用开关
通过value属性设置选中的值
单选框
通过checked属性设置默认打开状态
通过disabled禁用开关
通过value属性设置选中的值
文本域
class="layui-textarea"
表单方框风格
通过追加layui-form-pane的class，来设定表单的方框风格
-->
<form class="layui-form" action="#">
<!--文本框-->
<div class="layui-form-item">
<label class="layui-form-label">
标题
</label>
<div class="layui-input-inline">
<input type="text" name="title" class="layui-input"
required lay-verify="required" placeholder="请输入标题" autocomplete="off"/>
</div>
</div>
<!--下拉框-->
<div class="layui-form-item">
<label class="layui-form-label">
省份
</label>
<div class="layui-input-inline">
<select name="province" lay-verify="required">
<option value="11">北京市</option>
<option value="12" selected>天津市</option>
<option value="31">上海市</option>
<option value="50">重庆市</option>
<option value="13" disabled>河北省</option>
</select>
<br>
<select name="quiz">
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你喜欢的老师">你最喜欢的老师?</option>
</optgroup>
</select>
<br>
<select name="game" lay-verify="" lay-search>
<option value="">请选择</option>
<option value="hj">红色警报</option>
<option value="ms">魔兽争霸</option>
<option value="xj">星际争霸</option>
</select>
</div>
</div>
<!--复选框-->
<div class="layui-form-item">
<label class="layui-form-label">
爱好
</label>
<div class="layui-input-block">
<!--默认效果-->
<input type="checkbox" name="ai-hao" title="足球" value="football" checked/>
<input type="checkbox" name="ai-hao" title="篮球"/>
<input type="checkbox" name="ai-hao" title="乒乓球"/>
<br>
<!--原始效果-->
<input type="checkbox" name="ai-hao" title="足球" lay-skin="primary"/>
<input type="checkbox" name="ai-hao" title="篮球" lay-skin="primary"/>
<input type="checkbox" name="ai-hao" title="乒乓球" lay-skin="primary" disabled/>
</div>
</div>
<!-- 开关-->
<div class="layui-form-item">
<label class="layui-form-label">
开关
</label>
<div class="layui-input-block">
<input type="checkbox" name="a1" lay-skin="switch"/>
<input type="checkbox" name="a2" lay-skin="switch" lay-text="ON|OFF"/>
<input type="checkbox" name="a3" lay-skin="switch" lay-text="打开|关闭" value="打开"/>
</div>
</div>
<!--单选框-->
<div class="layui-form-item">
<label class="layui-form-label">
性别
</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="male" title="男" checked/>
<input type="radio" name="sex" value="female" title="女"/>
</div>
</div>
<!--文本域-->
<div class="layui-form-item">
<label class="layui-form-label">
简介
</label>
<div class="layui-input-inline">
<textarea name="remark" required lay-verify="required" placeholder="请输入简介"
class="layui-textarea">
</textarea>
</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="price_min" placeholder="￥" autocomplete="off" class="layui-input"/>
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<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">
<input type="password" name="pwd" placeholder="请输入密码" class="layui-input"/>
</div>
</div>
</div>
<!--原始效果-->
<div class="layui-form-item">
<label class="layui-form-label">
原始效果
</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="male" title="男" checked lay-ignore/>
<input type="radio" name="sex" value="female" title="女" lay-ignore/>
</div>
</div>
<!--按钮-->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter=""fromDemo>立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<hr/><br>
<!--表单方框风格-->
<form action="" class="layui-form layui-form-pane">
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="male" title="男" checked/>
<input type="radio" name="sex" value="female" title="女"/>
</div>
</div>
</form>
</body>
</html>
