zoukankan      html  css  js  c++  java
  • layui表单html结构学习

    参考地址:https://www.layui.com/demo/form.html

    1,进入官网,点击示例,进入示例页面:

    根据左侧擦点的标签查找需要 的内容。

    2,这里点击表单菜单

    找到需要的元素,然后点击“查看代码”

     然后可以查看具体的form元素html结构应该如何写;

    1)单行输入框

    <div class="layui-form-item">
        <label class="layui-form-label">单行输入框</label>
        <div class="layui-input-block">
          <input name="title" class="layui-input" type="text" placeholder="请输入标题" autocomplete="off" lay-verify="title">
        </div>
      </div>

    2)form表单

    <form class="layui-form" action="">
    </form>

    3)验证必填项

     <div class="layui-form-item">
        <label class="layui-form-label">验证必填项</label>
        <div class="layui-input-block">
          <input name="username" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="required" lay-reqtext="用户名是必填项,岂能为空?">
        </div>
      </div>

    注意:lay-verify="required" lay-reqtext="用户名是必填项,岂能为空?"

    4)一行多个元素及其验证

    <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">验证手机</label>
          <div class="layui-input-inline">
            <input name="phone" class="layui-input" type="tel" autocomplete="off" lay-verify="required|phone">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">验证邮箱</label>
          <div class="layui-input-inline">
            <input name="email" class="layui-input" type="text" autocomplete="off" lay-verify="email">
          </div>
        </div>
      </div>

    最好不要参考本文的html结构,因为layui可能会更新,请在官网demo中获取最新代码,以保证正确使用。

  • 相关阅读:
    C#资源释放方法实例分析
    c#中在一个窗体中触发另一个窗体的事件
    C#定时器的用法
    C# 类的析构函数和释放函数
    C# 定时执行,文件占用
    C#多线程与异步
    Newtonsoft中JArray 转成list<object>
    C#中Dictionary的用法
    C# 解析Json文件(使用NewtonJson库)
    mysql无法远程连接10038错误的坑(阿里云ecs)
  • 原文地址:https://www.cnblogs.com/Tpf386/p/12673744.html
Copyright © 2011-2022 走看看