layui框架学习（16：表单-下）

  除了文本框，layui官网教程及示例中还介绍了下拉框、复选框、单选框等输入元素的样式及属性设置方式。
  html5中采用select标签定义下拉选择框，同时内嵌option标签定义选择项，支持option标签中使用selected属性定义默认选项，使用disabled属性禁用选项。可以在select标签中使用optgroup 标签将选项分组。以上内容都与layui无关，layui中与select相关的主要是lay-search属性，其支持开启搜索匹配功能，也即点击下拉框后，会出现搜索框，在搜素框中输入内容，会自动显示与内容相匹配的选项。普通下拉框与带搜索框的下拉框的区别如下所示：

	<form class="layui-form" action="">
	  <div class="layui-form-item">
	    <label class="layui-form-label">layui文本框label>
	    <div class="layui-input-block">
	  		<input type="text" name="rsname" lay-verType="msg" lay-reqText="邮箱地址不能为空" lay-verify="required|email" placeholder="输入邮箱" class="layui-input">
	    div>	
	  div>
	  <div class="layui-form-item layui-form-select">
	    <label class="layui-form-label">选择城市label>
	    <div class="layui-input-block">
	      <select name="type" lay-search="">
			  <option value="">option>
	        <optgroup label="河北省">
				<option value="0">石家庄option>
				<option value="1">秦皇岛option>
			optgroup>
			<optgroup label="四川省">
				<option value="2">成都option>
				<option value="3">广汉option>
			optgroup>
	        <optgroup label="湖北省">
	        	<option value="4">武汉option>
				<option value="5">荆州option>
	        optgroup>
	      select>
	    div>
	  div>
	  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn layui-bg-red layui-btn-radius" lay-submit>提交button>
	    div>
	  div>
	form>

  input标签的type属性值为checkbox时，样式显示为复选框，普通html中的复选框样式如下所示（示例来自参考文献5，且在input标签中设置title属性无效）：

	<form>
		<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
		<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
	form>

  而在layui中，复选框默认为如下样式：

   <div class="layui-form-item">
      <label class="layui-form-label">爱好label>
      <div class="layui-input-block">
    		<input type="checkbox" name="vehicle" title="我喜欢自行车" checked value="Bike">
    		<input type="checkbox" name="vehicle" title="我喜欢小汽车" value="Car">
      div>	
    div>

  可以使用lay-skin属性设置复选框的外观，其值switch（开关风格）和primary（原始风格），这两种风格的区别如下所示。当样式为开关风格时，显示的文本由lay-text属性确定，包括选中和未选中时的显示文本，此时title属性的内容不会显示。

  <div class="layui-form-item">
     <label class="layui-form-label">爱好label>
     <div class="layui-input-block">
   		<input type="checkbox" name="vehicle" title="我喜欢自行车" checked value="Bike">
   		<input lay-skin="primary" type="checkbox" name="vehicle" title="我喜欢小汽车" value="Car">
		<input lay-skin="switch" type="checkbox" name="vehicle" lay-text="启动|关闭" value="Car">
     div>	
   div>

  input标签的type属性值为radio时，样式显示为单选框，layui中没有特别针对单选框的样式设置（其实layui.css中有与单选框相关的预设类，但不清楚能不能用以及怎么用），单选框在layui表单中的显示样式如下所示：

	<div class="layui-form-item">
	 <label class="layui-form-label">性别label>
	  <div class="layui-input-block">
			<input type="radio" name="sex" value="nan" title="男" checked>
			<input type="radio" name="sex" value="nv" title="女">						
	  div>	
	div>

  除了上述输入元素外，layui官网教程中还介绍了文本域标签textarea的预设类layui-textarea，以及使用lay-submit属性设置绑定触发提交的输入元素，在此不再赘述。
  至此，layui教程中页面元素相关的内容大致过了一遍，后续会继续学习layui各内置模块的用法。

参考文献：
[1]B站：layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://www.runoob.com/html/html-forms.html