layui表单使用

原创 2019-02-14 19:31:43 276
摘要:<!DOCTYPE html><html><head> <title>登录页面</title> <!-- 引入layui.css样式 不然没有效果 --> <link rel="stylesheet" type="text/css" href="layui/css/lay

<!DOCTYPE html>

<html>

<head>

<title>登录页面</title>

<!-- 引入layui.css样式 不然没有效果 -->

<link rel="stylesheet" type="text/css" href="layui/css/layui.css">

<!-- <script src="layui/layui.js"></script> -->

</head>

<body style="background: #1e9fff;">

<div style="width:500px;margin:220px auto 0px;">

<div style="background:#fff;border-radius:4px;box-shadow:5px 5px 20px #444;padding:20px;">

<form class="layui-form">

<div class="layui-form-item" style="color:gray;">

<h2>后台管理系统</h2>

</div>

<hr>


<div class="layui-form-item">

<label class="layui-form-label">用户名</label>

  <div class="layui-input-block">

    <input type="text" placeholder="请输入用户名" class="layui-input">  

  </div>

</div>


<div class="layui-form-item">

<label class="layui-form-label">密 码</label>

  <div class="layui-input-block">

    <input type="password" placeholder="请输入密码" class="layui-input">  

  </div>

</div>


<div class="layui-form-item">

    <label class="layui-form-label">验证码</label>

    <div class="layui-input-inline">

      <input type="text" placeholder="请输入验证码"  class="layui-input">

    </div>

    <img src="">

    </div>

    

    <div class="layui-form-item">

    <div class="layui-input-block">

<button class="layui-btn">登录</button>

    </div>

    </div>

</form>

</div>

</div>

</body>

</html>


批改老师:韦小宝批改时间:2019-02-15 09:11:18
老师总结:写的很不错 layui中实现一个表单还是比较简单的 各种输入框和选择器都是有组件的

发布手记

热门词条