Django+Bootstrap的form表单

最新推荐文章于 2024-08-20 10:01:38 发布

南栀子。

最新推荐文章于 2024-08-20 10:01:38 发布

阅读量686

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/qq_38191971/article/details/113749890

Bootstrap 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用Bootstrap框架构建的用户信息表单，包括姓名、密码输入、性别选择、兴趣爱好选项和城市选择。展示了如何利用Bootstrap进行基本的前端布局和样式设置。

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

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用样式</title>
    <link rel="stylesheet" type="text/css" href="{% static 'dist/css/bootstrap.css' %}"/>
</head>
<body>
<div class="container">
    <form action="#" class="form-horizontal" role="form">
        <h2 align="center">user informations</h2>
        <div class="form-group">
            <label for="uname" class="control-label col-md-2">name</label>
            <div class="col-md-8">
                <input type="text" name="uname" id="uname" class="form-control" placeholder="请输入姓名"/>
            </div>
        </div>

        <div class="form-group">
            <label for="pwd" class="control-label col-md-2">password</label>
            <div class="col-md-8">
                <input type="password" name="pwd" id="pwd" class="form-control" placeholder="请输入密码"/>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">sex</label>
            <div class="col-md-8">
                <label class="radio-inline"><input type="radio" name="sex"/>male</label>
                <label class="radio-inline"><input type="radio" name="sex"/>female</label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">hobby</label>
            <div class="col-md-8">
                <label class="checkbox-inline"><input type="checkbox" name="hobby"/>唱歌</label>
                <label class="checkbox-inline"><input type="checkbox" name="hobby"/>跳舞</label>
                <label class="checkbox-inline"><input type="checkbox" name="hobby"/>画画</label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">city</label>
            <div class="col-md-8">
                <select class="form-control">
                    <option>请选择城市</option>
                    <option>上海</option>
                    <option>北京</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="remark" class="control-label col-md-2">instruction</label>
            <div class="col-md-8">
                <textarea id="remark" class="form-control"></textarea>
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-offset-8">
                <button class="btn btn-success">submit</button>
            </div>
        </div>

{#        <div class="form-group">#}
{#            <label class="control-label col-md-2"></label>#}
{#            <div class="col-md-10">#}
{##}
{#            </div>#}
{#        </div>#}

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