其他分享
首页 > 其他分享> > 用户注册功能的前端页面 栅格系统

用户注册功能的前端页面 栅格系统

作者：互联网

用户注册功能的前端页面 栅格系统

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
{#    增加样式用style#}
    <style>
        .meihua{
            width:400px;
            margin:0 auto;
        }

    </style>
</head>
<body>
    <div class="meihua">
        <h1 style="text-align:center">用户注册</h1>
        <form>
            {% for i in form %}
                {% if i.name == '验证码' %}
                    <div class="form-group">
                        <label for="{{ i.id_for_label }}">{{ i.label }}:</label>
                        <div class="clearfix">
{#                            因为要在一个输入框中分成两个部分，一部分是验证码内容，一部分是个按钮，点击获取验证码，所以要栅格#}
                            <div class="col-md-6" style="padding-left: 0">{{ i }}</div>
                            <div class="col-md-6"><input type="button" class="btn btn-default" value="点击获取验证码"></div>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label for="{{ i.id_for_label }}">{{ i.label }}:</label>
                            {{ i }}
                    </div>
                {% endif %}
            {% endfor %}
            <button type="submit" class="btn btn-primary">注册</button>
        </form>
    </div>




<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
</body>
</html>

标签：用户注册,前端,验证码,label,栅格,页面
来源： https://www.cnblogs.com/tietiejiang/p/16227115.html