4.登陆功能 - 猿小姜

登录页面初步搭建

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-8 col-md-offset-2">
            <h1 class="text-center">登陆</h1>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" name="username" id="username" class="form-control">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="text" name="password" id="password" class="form-control">
            </div>
            <div class="form-group">
                <label for="">验证码</label>
                <input type="text" name="code" id="id_code">
            </div>
            <input type="button" class="btn btn-success" value="登陆">
        </div>
    </div>
</div>
</body>

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
            <h1 class="text-center">登陆</h1>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" name="username" id="username" class="form-control">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="text" name="password" id="password" class="form-control">
            </div>
            <div class="form-group">
                <label for="">验证码</label>
                <div class="row">
                    <div class="col-xs-6">
                        <input type="text" name="code" id="id_code" class="form-control">
                    </div>
                    <div class="col-xs-6">
                        {% load static %}
                        <img src="{% static 'img/default.png' %}" alt="" width="480px" height="35px">
                    </div>
                </div>
            </div>
            <input type="button" class="btn btn-success" value="登陆">
        </div>
    </div>
</div>
</body>

图片验证码

posted on 2023-04-04 23:57 猿小姜阅读(24) 评论(0) 收藏举报