• Welcome to Journal web site.
首页 关于 博客 留言 联系
首页 关于 博客 留言 联系

我是 PHP 程序员

- 开发无止境 -

Next
Prev

Bootstrap4 表单

Data: 2019-01-21 09:23:02Form: JournalClick: 10

# 表单

# 一、表单

# 1、堆叠表单（垂直方向）

  • form-control
<div class="container">
    <h2>登陆</h2>
    <form>
        <label for="account">账号:</label>
        <input type="text" class="form-control" id="account" />
        <label for="password">密码:</label>
        <input type="password" class="form-control" id="password" />
        <button type="submit" class="btn btn-primary">登陆</button>
    </form>
</div>

<!-- 可以增加<div class="form-group">，有个下面的外边距margin-bottom: 1rem; -->
<div class="container">
    <h2>登陆</h2>
    <form>
        <div class="form-group">
            <label for="account">账号:</label>
            <input type="text" class="form-control" id="account" />
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" class="form-control" id="password" />
        </div>
        <button type="submit" class="btn btn-primary">登陆</button>
    </form>
</div>

# 2、内联表单（水平方向）

  • .form-inline
<div class="container">
    <h2>登陆</h2>
    <form class="form-inline">
        <div class="form-group">
            <label for="account">账号:</label>
            <input type="text" class="form-control" id="account" />
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" class="form-control" id="password" />
        </div>
        <button type="submit" class="btn btn-primary">登陆</button>
    </form>
</div>
<!-- 可以不用外面的<div class="form-group">，有个下面的外边距margin-bottom: 1rem; -->
<div class="container">
    <h2>登陆</h2>
    <form class="form-inline">
        <div class="form-group">
            <label for="account">账号:</label>
            <input type="text" class="form-control" id="account" />
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" class="form-control" id="password" />
        </div>
        <button type="submit" class="btn btn-primary">登陆</button>
    </form>
</div>
  • 所有内联表单中的元素都是左对齐的。
  • 注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于 576px 时表单元素才会显示在同一个水平线上。

# 二、表单组件

# 1、input

  • Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。
<div class="form-group">
  <label for="account">账号:</label>
  <input type="text" class="form-control" id="account" />
</div>
<div class="form-group">
  <label for="password">密码:</label>
  <input type="password" class="form-control" id="password" />
</div>
<input type="datetime" class="form-control" />
<input type="datetime-local" class="form-control" />
<input type="date" class="form-control" />
<input type="month" class="form-control" />
<input type="time" class="form-control" />
<input type="week" class="form-control" />
<input type="number" class="form-control" />
<input type="email" class="form-control" />
<input type="url" class="form-control" />
<input type="search" class="form-control" />
<input type="tel" class="form-control" />
<input type="color" class="form-control" />

# 2、textarea

<div class="form-group">
  <label for="info">个人介绍:</label>
  <textarea class="form-control" rows="5" id="info"></textarea>
</div>

# 3、checkbox

  • form-check
  • form-check-input
  • disabled
<div class="form-check">
    <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="1" />html
    </label>
</div>
<div class="form-check">
    <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="2" />css
    </label>
</div>
<div class="form-check disabled">
    <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="3" disabled />php
    </label>
</div>
  • 内联 form-check-inline
<div class="form-check form-check-inline">
    <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="1" />html
    </label>
</div>
<div class="form-check form-check-inline">
    <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="2" />css
    </label>
</div>
<div class="form-check form-check-inline disabled">
    <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="3" disabled />php
    </label>
</div>

# 4、radio

<div class="radio">
    <label><input name="gender" type="radio" />男</label>
</div>
<div class="radio">
    <label><input name="gender" type="radio" />女</label>
</div>
<div class="radio disabled">
    <label><input name="gender" type="radio" disabled />保密</label>
</div>
  • 内联 .radio-inline
<label class="radio-inline"> <input type="radio" name="gender" />男 </label>
<label class="radio-inline"> <input type="radio" name="gender" />女 </label>
<label class="radio-inline">
    <input type="radio" name="gender" disabled />保密
</label>

# 5、select

<div class="form-group">
    <label for="prov">省份</label>
    <select class="form-control">
        <option value="1">北京</option>
        <option value="2">安徽</option>
        <option value="3">河南</option>
        <option value="4">江苏</option>
        <option value="5">湖北
journal I'm Developers.
Copyright © 2014-2024 Guojunjie.com.
All screenshots © 郭俊杰(Journal).
I have been in Xiamen,China.
Website Establishment by Journal.
闽ICP备12018326号-2
Name:
<提交>