编写一段内联、水平、垂直表单代码

最新推荐文章于 2022-03-21 14:33:14 发布

林飞的梦呓

最新推荐文章于 2022-03-21 14:33:14 发布

阅读量639

点赞数

分类专栏： Bootstrap 文章标签： Bootstrap

本文链接：https://blog.csdn.net/qq_25479327/article/details/80275984

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

编写一段内联、水平、垂直表单代码

一、基本表单（或垂直表单）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>基本表单（或垂直表单）</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
    <form action="" role="form">
        <div class="form-group">
            <label for="name">名称</label>
            <input type="text" class="form-control" id="name" placeholder="请输入名称" />
        </div>

        <div class="form-group">
            <label for="inputfile">文件输入</label>
            <input type="file" id="inputfile" />
        </div>

        <div class="checkbox">
            <label>
                <input type="checkbox" />请打钩
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
</body>
</html>

基本表单（或垂直表单）demo

二、内联表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>内联表单</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
    <form action="" role="form" class="form-inline">
        <div class="form-group">
            <label for="name" class="sr-only">名称</label>
            <input type="text" class="form-control" id="name" placeholder="请输入名称" />
        </div>
        <div class="form-group">
            <label for="inputfile" class="sr-only">文件输入</label>
            <input type="file" id="inputfile" />
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" />请打钩
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
</body>
</html>

内联表单demo

三、水平表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>水平表单</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
    <form action="" role="form" class="form-horizontal">
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">名字</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="firstname" placeholder="请输入名字" />
            </div>
        </div>


        <div class="form-group">
            <label for="inputfile" class="col-sm-2 control-label">姓</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="lastname" placeholder="请输入姓" />
            </div>
        </div>



        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" />请打钩
                    </label>
                </div>              
            </div>
        </div>




        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">提交</button>
            </div>
        </div>
    </form>
</body>
</html>