layui表单实现

表单输入框的实现

1.要引入layui中的核心css和js资源

<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui-v2.5.6/layui/css/layui.css"/>
		<script src="layui-v2.5.6/layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>

2.要有依赖加载模块：form

<script type="text/javascript">
		// 加载form模块
			layui.use("form",function(){
				var form=layui.form;
			});
		</script>

（1）要在一个容器中设定 class=“layui-form” 来标识一个表单元素块
（2）基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。

表单
常用属性：
required :浏览器固定的必填字段
lay-verify:需要检验的类型
class=“layui-input”:提供的通用样式
class=“layui-input-inline” 占据全部宽度
文本框：
placeholder 文本框为空时，默认显示的文本信息
autocomplete 表单元素是否自动填充（当浏览器中缓存中存在相同的name属性的值的时候，会自动填充）

<!-- // 1. 在一个容器中设定 class="layui-form" 来标识一个表单元素块 -->
		<form action="" class="layui-form">
<!-- 		2. 基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。 -->
		<div class="layui-form-item">
			<label class="layui-form-label">标题</label>
			<div class="layui-input-inline">
				<!-- 文本框 -->
				<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />  
				
			</div>
		</div>
		</form>

表单下拉选择框

	       1.通过selected属性设置默认选中项目
		   2.通过disabled可以开启禁用
		   3.可以通过 optgroup 标签给select分组
		   4.通过设置lay-search属性开启搜索匹配功能

<div class="layui-form-item">
			<label class="layui-form-label">标题</label>
			<div class="layui-input-inline">
				<select name="city" lay-verify="">
				  <option value="">请选择一个城市</option>
				  <option value="010">北京</option>
				  <option value="021" selected">上海</option>
				  <option value="0571">杭州</option>
				</select>  
				
			</div>
		</div>
		
		<div class="layui-form-item">
			<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>
				
				<!-- 模糊匹配共呢 -->
				<select name="city" lay-verify="" lay-search>
				  <option value="010">layer</option>
				  <option value="021">form</option>
				  <option value="0571" selected>layim</option>
				</select>
			</div>
		</div>

表单复选框

			<!-- 复选框 -->
			<div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-block">
					<!-- 复选框
					1.通过title属性设置自定义文本（如果不需要显示文本，则不设置title属性值）
					2.通过checkded属性值设置被选中的项目
					3.通过lay-skin属性设置复选框的样式效果（lay-skin="parmary"表示原始样式）
					4.通过disabled属性禁用元素
					 -->
					 
					 <input type="checkbox" title="写作" checked value="writing">
					 <input type="checkbox" title="发呆" checked value="fadai">
					 <input type="checkbox" title="禁用" checked>
					 
					 <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>
				</div>
		</div>