layui 的 select、checkbox、radio、switch表单控件不渲染,不显示

 HTML  2020-07-28  admin  34  45

当你使用表单时,layui 会对 select、checkbox、radio、switch 等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于 form 组件,所以必须加载 form,并且执行一个实例。同时,所有的表单控件必须放在<form class="layui-form">  </form>中,否则也不能渲染。

正确写法:

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </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[dai]" title="发呆">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch">
    </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="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
  
</form>

<script>
layui.use('form', function(){
  var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
  
  //……
  
  //但是,如果你的HTML是动态生成的,自动渲染就会失效
  //因此你需要在相应的地方,执行下述方法来进行渲染
  //form.render();
});      
</script>


相关推荐


laravel布局模板的使用示例

laravel布局模板的使用示例

百度编辑器ueditor代码块解析缺失不完整的问题

百度编辑器ueditor代码块解析缺失不完整的问题百度编辑器ueditor内容容器应该使用&lt;script&gt;&lt;/script&gt;标签,不能使用&lt;textarea&gt;标签&lt;/textarea&gt;。textarea标签一般情况没有问题,但是如果里面有&lt;pre&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;代码块,会导致解析

Laravel自定义表单验证规则,添加验证规则

Laravel 提供了许多有用的验证规则;同时也支持自定义规则。在服务容器中使用这个方法来注册自定义验证规则: Laravel 自定义规则实现手机号、身份证号、密码强度的验证

html form表单提交数据与css属性的关系

html form表单提交数据与css属性的关系&lt;formaction=&quot;&quot;method=&quot;post&quot;&gt; &lt;inputtype=&quot;text&quot;value=&quot;123&quot;name=&quot;name&quot;/&gt;&lt;br&gt; &lt;inputtype=&quot;text&quot;v