Bootstrap学习笔记-表单

最新推荐文章于 2024-10-15 17:38:27 发布

原创最新推荐文章于 2024-10-15 17:38:27 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

BootStrap 专栏收录该内容

8 篇文章

订阅专栏

本文展示了两种HTML表单样式：内联表单和水平表单，并提供了详细的源码示例。内联表单适合紧凑布局，而水平表单则更注重清晰的标签与输入字段分离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内联表单

1.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/js/jquery-1.12.3.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/jquery.bootgrid.min.css">
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="/js/jquery.bootgrid.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap-datetimepicker.min.css" type="text/css"></link>
    <title>Title</title>
</head>
<body>
    <div class="container">

        <!--class="form-inline" 表示创建的为内联表单
                内联表单的内容变为自适应的
        -->
        <!--class="sr-only" label属性文字变为不可见-->
        <form role="form" class="form-inline">
            <div class="form-group">
                <label>用户名:</label>
                <input type="email" class="form-control" placeholder="Enter email">
                <label>注册日期:</label>
                <input type="date" class="form-control" placeholder="Enter date">
            </div>

            <!--密码-->
            <div class="form-group">
                <label>密码:</label>
                <input type="password" class="form-control" placeholder="Enter password">
            </div>

            <!--选择文件-->
            <div class="form-group">
                <label >选择文件:</label>
                <input type="file">
                <p class="help-block">选择你需要的文件</p>
            </div>

            <div class="form-group">

            </div>
        </form>
    </div>
</body>
</html>

2.效果

水平表单

1.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/js/jquery-1.12.3.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/jquery.bootgrid.min.css">
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="/js/jquery.bootgrid.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap-datetimepicker.min.css" type="text/css"></link>
    <title>Title</title>
</head>
<body>
    <div class="container">

        <!--
            class="form-control"  圆角效果
            class="col-sm-2 control-label" 栅格对其
        -->

        <form  class="form-horizontal" role="form">

            <!--邮箱-->
            <div class="form-group">
                <label class="col-sm-2 control-label">email:</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" placeholder="Enter email">
                </div>
            </div>

            <!--密码-->
            <div class="form-group">
                <label class="col-sm-2 control-label">password:</label>
                <div class="col-sm-10">
                    <input type="password"  class="form-control"  placeholder="Enter password">
                </div>
            </div>
            
            <!--复选框-->
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> 记住密码
                        </label>
                    </div>
                </div>
            </div>

            <!--按钮-->
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <button type="submit" class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>