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

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

一、基本表单(或垂直表单)

<!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>

水平表单demo

参考:
Bootstrap3.0 表单
Bootstrap表单(基本表单、内联表单、水平表单)

猜你喜欢

转载自blog.csdn.net/qq_25479327/article/details/80275984