master

分支 (1)

管理

管理

master

light-year-admin-using-v5-for-example
/
lyear_layout_form.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>表单布局示例 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--引入下拉插件css-->
<link rel="stylesheet" type="text/css" href="js/bootstrap-select/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<style>
/*示例三*/
.mx-w-800 {
    max-width: 800px;
    margin: 0 auto;
}
/*示例四*/
.input-group-controls {
    height: 36px;
    flex: 1 1 0%;
    border: 1px solid #F2F3F3;
    padding-left: 15px;
}
</style>
</head>

<body>
<div class="container-fluid">

  <div class="row">

  	<div class="col-lg-12">
  	  <div class="card">
  	    <header class="card-header">
  	      <div class="card-title">表单示例一</div>
  	    </header>
  		<div class="card-body">

  		  <p>比较常见的布局方式就是：标题放在最上面是为了响应式的环境下有较好的体验，不至于因为宽度不够导致文字换行。</p>
          <p>这里v5和v4有个区别的地方，v5没有了 <code>form-group</code>，所以表单元素的父 <code>div</code>，需要用 <code>mb-3</code> 来保证相邻的div不会叠加在一起。</p>
          <form action="#!" method="post" id="example-from-1">
            <div class="mb-3">
              <label for="nameOne" class="form-label">输入框</label>
              <input type="text" class="form-control" id="nameOne" name="name" value="" placeholder="输入框" />
            </div>
            <div class="mb-3">
              <label for="passwordOne" class="form-label">密码框</label>
              <input type="password" class="form-control" id="passwordOne" name="password" value="" placeholder="密码框" />
              <small class="form-text">密码是用5-20位字符</small>
            </div>
            <div class="mb-3">
              <label for="typeOne" class="form-label">(默认)选择框 - chrome更新后默认的黑色边框巨丑</label>
              <select name="type" class="form-select" id="typeOne">
                <option value="1">小说</option>
                <option value="2">古籍</option>
                <option value="3">专辑</option>
                <option value="4">自传</option>
              </select>
            </div>
            <div class="mb-3">
              <label for="desireOne" class="form-label">(使用插件)选择框</label>
              <div class="form-controls">
                <select class="form-control selectpicker" title="小伙子选择一个吧..." name="desire" id="desireOne">
                  <option>吊打海内外的编程技术</option>
                  <option>迷倒万千少女的颜值</option>
                  <option>马云大大的财富</option>
                </select>
              </div>
            </div>
            <div class="mb-3">
              <label for="exampleSwitchOne" class="form-label">开关</label>
              <div class="form-controls">
                <div class="form-check form-switch">
                  <input type="checkbox" class="form-check-input" value="1" id="exampleSwitchOne">
                  <label class="form-check-label" for="exampleSwitchOne"></label>
                </div>
              </div>
            </div>
            <div class="mb-3">
              <label class="form-label">复选框</label>
              <div class="form-controls">
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="hobbyOne" value="篮球">
                  <label class="form-check-label" for="hobbyOne">篮球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="hobbyTwo" value="足球">
                  <label class="form-check-label" for="hobbyTwo">足球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="hobbyThree" value="排球">
                  <label class="form-check-label" for="hobbyThree">排球</label>
                </div>
              </div>
            </div>
            <div class="mb-3 col-md-12">
              <label class="form-label">单选框</label>
              <div class="form-controls">
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" name="customRadio" id="loveOne" value="羽毛球">
                  <label class="form-check-label" for="loveOne">羽毛球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" name="customRadio" id="loveTwo" value="冰球">
                  <label class="form-check-label" for="loveTwo">冰球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" name="customRadio" id="loveThree" value="网球">
                  <label class="form-check-label" for="loveThree">网球</label>
                </div>
              </div>
            </div>
            <div class="mb-3 col-md-12">
              <label for="descOne" class="form-label">文本域</label>
              <textarea name="descOne" id="desc" placeholder="请输入内容" class="form-control"></textarea>
            </div>
            <div class="col-md-12">
              <button type="submit" class="btn btn-primary">立即提交</button>
              <button type="reset" class="btn btn-default">重 置</button>
            </div>

          </form>

  	    </div>
  	  </div>
    </div>

  	<div class="col-lg-12">
  	  <div class="card">
  	    <header class="card-header">
  	      <div class="card-title">表单示例二</div>
  	    </header>
  		<div class="card-body">

          <p>文字和表单元素在同一行。</p>
          <form action="#!" method="post" id="example-from-2">
            <div class="mb-3 row align-items-center">
              <div class="col-md-2"><label class="col-form-label" for="nameTwo">输入框</label></div>
              <div class="col">
                <input type="text" class="form-control" id="name" name="nameTwo" value="" placeholder="输入框" />
              </div>
            </div>
            <div class="mb-3 row align-items-center">
              <div class="col-md-2"><label class="col-form-label" for="passwordTwo">密码框</label></div>
              <div class="col">
                <input type="password" class="form-control" id="passwordTwo" name="password" value="" placeholder="密码框" />
              </div>
              <div class="col-auto"><small class="form-text">密码是用5-20位字符</small></div>
            </div>
            <div class="mb-3 row align-items-center">
              <label class="col-md-2 col-form-label" for="typeTwo">(默认)选择框</label>
              <div class="col">
                <select name="type" class="form-select" id="typeTwo">
                  <option value="1">小说</option>
                  <option value="2">古籍</option>
                  <option value="3">专辑</option>
                  <option value="4">自传</option>
                </select>
              </div>
            </div>
            <div class="mb-3 row align-items-center">
              <label class="col-md-2 col-form-label" for="desireTwo">(使用插件)选择框</label>
              <div class="col">
                <select class="form-control selectpicker" title="小伙子选择一个吧..." name="desire" id="desireTwo">
                  <option>吊打海内外的编程技术</option>
                  <option>迷倒万千少女的颜值</option>
                  <option>马云大大的财富</option>
                </select>
              </div>
            </div>
            <div class="mb-3 row align-items-center">
              <label class="col-md-2 col-form-label" for="idname">开关</label>
              <div class="col">
                <div class="form-check form-switch">
                  <input type="checkbox" class="form-check-input" value="1" id="exampleSwitchTwo">
                  <label class="form-check-label" for="exampleSwitchTwo"></label>
                </div>
              </div>
            </div>
            <div class="mb-3 row align-items-center">
              <label class="col-md-2 col-form-label">复选框</label>
              <div class="col">
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="hobbyFour" value="篮球">
                  <label class="form-check-label" for="hobbyFour">篮球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="hobbyFive" value="足球">
                  <label class="form-check-label" for="hobbyFive">足球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="hobbySix" value="排球">
                  <label class="form-check-label" for="hobbySix">排球</label>
                </div>
              </div>
            </div>
            <div class="mb-3 row align-items-center">
              <label class="col-md-2 col-form-label">单选框</label>
              <div class="col">
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" name="customRadio" id="loveFour" value="羽毛球">
                  <label class="form-check-label" for="loveFour">羽毛球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" name="customRadio" id="loveFive" value="冰球">
                  <label class="form-check-label" for="loveFive">冰球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" name="customRadio" id="loveSix" value="网球">
                  <label class="form-check-label" for="loveSix">网球</label>
                </div>
              </div>
            </div>
            <div class="mb-3 row align-items-center">
              <label class="col-md-2 col-form-label" for="descTwo">文本域</label>
              <div class="col">
                <textarea name="desc" id="descTwo" placeholder="请输入内容" class="form-control"></textarea>
              </div>
            </div>
            <div class="mb-3 row">
              <div class="col offset-md-2">
                <button type="submit" class="btn btn-primary">立即提交</button>
                <button type="reset" class="btn btn-default">重 置</button>
              </div>
            </div>

          </form>

  	    </div>
  	  </div>
    </div>

  	<div class="col-lg-12">
  	  <div class="card">
  	    <header class="card-header">
  	      <div class="card-title">表单示例三</div>
  	    </header>
  		<div class="card-body">

          <p>这个示例跟上一个其实是一样的，有些小伙伴可能不想要这么宽的输入框，这里可以新增样式 <code>mx-w-800</code>，指定最大宽度，让表单居中，你也可以自己定义。</p>
          <form action="#!" method="post" id="example-from-3" class="mx-w-800">
            <div class="mb-3 row align-items-center">
              <div class="col-md-2"><label class="col-form-label" for="nameTwo">输入框</label></div>
              <div class="col">
                <input type="text" class="form-control" id="name" name="nameTwo" value="" placeholder="输入框" />
              </div>
            </div>
            <div class="mb-3 row align-items-center">
              <div class="col-md-2"><label class="col-form-label" for="passwordTwo">密码框</label></div>
              <div class="col">
                <input type="password" class="form-control" id="passwordTwo" name="password" value="" placeholder="密码框" />
              </div>
              <div class="col-auto"><small class="form-text">密码是用5-20位字符</small></div>
            </div>
            <div class="mb-3 row align-items-center">
              <label class="col-md-2 col-form-label" for="typeTwo">(默认)选择框</label>
              <div class="col">
                <select name="type" class="form-select" id="typeTwo">
                  <option value="1">小说</option>
                  <option value="2">古籍</option>
                  <option value="3">专辑</option>
                  <option value="4">自传</option>
                </select>
              </div>
            </div>
            <div class="mb-3 row align-items-center">
              <label class="col-md-2 col-form-label" for="desireTwo">(使用插件)选择框</label>
              <div class="col">
                <select class="form-control selectpicker" title="小伙子选择一个吧..." name="desire" id="desireTwo">
                  <option>吊打海内外的编程技术</option>
                  <option>迷倒万千少女的颜值</option>
                  <option>马云大大的财富</option>
                </select>
              </div>
            </div>
            <div class="mb-3 row align-items-center">
              <label class="col-md-2 col-form-label" for="idname">开关</label>
              <div class="col">
                <div class="form-check form-switch">
                  <input type="checkbox" class="form-check-input" value="1" id="exampleSwitchTwo">
                  <label class="form-check-label" for="exampleSwitchTwo"></label>
                </div>
              </div>
            </div>
            <div class="mb-3 row align-items-center">
              <label class="col-md-2 col-form-label">复选框</label>
              <div class="col">
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="hobbyFour" value="篮球">
                  <label class="form-check-label" for="hobbyFour">篮球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="hobbyFive" value="足球">
                  <label class="form-check-label" for="hobbyFive">足球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="hobbySix" value="排球">
                  <label class="form-check-label" for="hobbySix">排球</label>
                </div>
              </div>
            </div>
            <div class="mb-3 row align-items-center">
              <label class="col-md-2 col-form-label">单选框</label>
              <div class="col">
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" name="customRadio" id="loveFour" value="羽毛球">
                  <label class="form-check-label" for="loveFour">羽毛球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" name="customRadio" id="loveFive" value="冰球">
                  <label class="form-check-label" for="loveFive">冰球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" name="customRadio" id="loveSix" value="网球">
                  <label class="form-check-label" for="loveSix">网球</label>
                </div>
              </div>
            </div>
            <div class="mb-3 row align-items-center">
              <label class="col-md-2 col-form-label" for="descTwo">文本域</label>
              <div class="col">
                <textarea name="desc" id="descTwo" placeholder="请输入内容" class="form-control"></textarea>
              </div>
            </div>
            <div class="mb-3 row">
              <div class="col offset-md-2">
                <button type="submit" class="btn btn-primary">立即提交</button>
                <button type="reset" class="btn btn-default">重 置</button>
              </div>
            </div>

          </form>

  	    </div>
  	  </div>
    </div>

  	<div class="col-lg-12">
  	  <div class="card">
  	    <header class="card-header">
  	      <div class="card-title">表单示例四</div>
  	    </header>
  		<div class="card-body">

          <p>使用 <code>input-group</code> 布局。</p>
          <p>这种布局也有局限性，右侧高度固定，如果是复选和单选，手机下可能会错位</p>
          <form action="#!" method="post" id="example-from-4">
            <div class="input-group mb-3">
              <span class="input-group-text">输入框</span>
              <input type="text" class="form-control" id="name" name="name" value="" placeholder="输入框" />
            </div>
            <div class="mb-3">
              <div class="input-group">
                <span class="input-group-text">密码框</span>
                <input type="password" class="form-control" id="password" name="password" value="" placeholder="密码框" />
              </div>
              <small class="form-txt">密码是用5-20位字符</small>
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text">选择框</span>
              <select name="type" class="form-select" id="type">
                <option value="1">小说</option>
                <option value="2">古籍</option>
                <option value="3">专辑</option>
                <option value="4">自传</option>
              </select>
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text">选择框</span>
              <select class="form-control selectpicker" title="小伙子选择一个吧..." name="example-6" id="example">
                <option>吊打海内外的编程技术</option>
                <option>迷倒万千少女的颜值</option>
                <option>马云大大的财富</option>
              </select>
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text">开&nbsp;&nbsp;&nbsp;&nbsp;关</span>
              <div class="input-group-controls pt-1">
                <div class="form-check form-switch">
                  <input type="checkbox" class="form-check-input" value="1" id="exampleSwitchTwo">
                  <label class="form-check-label" for="exampleSwitchTwo"></label>
                </div>
              </div>
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text">复选框</span>
              <div class="input-group-controls pt-1">
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="hobbyFour" value="篮球">
                  <label class="form-check-label" for="hobbyFour">篮球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="hobbyFive" value="足球">
                  <label class="form-check-label" for="hobbyFive">足球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="hobbySix" value="排球">
                  <label class="form-check-label" for="hobbySix">排球</label>
                </div>
              </div>
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text">单选框</span>
              <div class="input-group-controls pt-1">
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" name="customRadio" id="loveFour" value="羽毛球">
                  <label class="form-check-label" for="loveFour">羽毛球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" name="customRadio" id="loveFive" value="冰球">
                  <label class="form-check-label" for="loveFive">冰球</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" name="customRadio" id="loveSix" value="网球">
                  <label class="form-check-label" for="loveSix">网球</label>
                </div>
              </div>
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text">文本域</span>
              <textarea name="desc" id="desc" placeholder="请输入内容" class="form-control"></textarea>
            </div>
            <div>
              <button type="submit" class="btn btn-primary">立即提交</button>
              <button type="reset" class="btn btn-default">重 置</button>
            </div>

          </form>

  	    </div>
  	  </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!--引入下拉插件js-->
<script type="text/javascript" src="js/bootstrap-select/bootstrap-select.min.js"></script>
<script type="text/javascript" src="js/bootstrap-select/i18n/defaults-zh_CN.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // 默认
    $('.selectpicker').selectpicker();
});
</script>
</body>
</html>