【问题标题】:Unable to style wtform attributes无法设置 wtform 属性的样式
【发布时间】:2020-09-07 03:17:25
【问题描述】:

尊敬的会员,

.py 文件有以下内容:


    from flask import Flask, render_template, flash, session, redirect, url_for
    from flask_wtf import FlaskForm
    from wtforms import StringField,SubmitField
    from wtforms.validators import DataRequired
    
    app = Flask(__name__)
    app.config['SECRET_KEY'] = 'kmykey'
    
    class SimpleForm(FlaskForm):
        username = StringField("Username:", validators=[DataRequired()])
        password = StringField("Password:", validators=[DataRequired()])
        submit = SubmitField("Submit")
    @app.route('/', methods = ['GET', 'POST'])
    def index():
        form = SimpleForm()
        if form.validate_on_submit():
            session['username'] = form.username.data
            session['password'] = form.password.data
            return redirect(url_for('index'))
        return render_template('Login_Page.html', form=form)
    
    if __name__ == '__main__':
        app.run()


对应的jinja模板包括:


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Ticket Booking</title>
    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='Login_Page.css') }}">
    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </head>
  <body>
  <div align="center" class="main1">
    <form method="POST">
      <h1>Railway Booking Portal</h1>
      <h2>Welcome!</h2>
      <br>
      {# This hidden_tag is a CSRF security feature. #}
      {{ form.hidden_tag() }}
      {{ form.username.label(class_='uname') }} {{ form.username(placeholder='email here') }}
      <br>
      {{ form.password.label(class_='passwd')  }} {{ form.password() }}
      <br>
      <a class="abc" href="Sign_Up.html"><u>SignUp</u></a>
      <br>
      <a class="abc1" href="Password_Reset.html"><u>ForgotPassword</u></a>
      <br>
      <br>
      {{ form.submit() }}
      <br>
      <p>"One's destination is never a place, but a new way of seeing things." - Henry Miller</p>
</form>
</div>

我成功地将 HTML 与 css 连接起来,并且当应用程序通过 Flask 运行时可以看到背景图像,但是,用户名和密码标签/字段没有被格式化。 css 文件由以下内容组成:


    body{
      background: url(railway-tracks.jpeg);
      background-repeat: no-repeat;
    }
    h1{
      color: black;
    }
    p{
      font-family: 'Anton', sans-serif;
      font-size: 200%;
      color: black;
    }
    .uname{
      display: inline-block;
      min-width: 90px;
      color: red;
    }
    .passwd{
      display: inline-block;
      min-width: 90px;
      color: red;
    }

请指导我缺少什么或使用不正确的部分?

谢谢

(更新)

【问题讨论】:

    标签: html css flask jinja2 flask-wtforms


    【解决方案1】:

    你有:

    class_='uname'
    class_='passwd'
    

    但风格:

    .username{}
    .password{}
    

    类名应该匹配

    OP 编辑​​后更新

    您尚未将类声明添加到标签中。您将它们添加到字段中。试试:

    {{ form.username.label(class_='uname') }} {{ form.username(placeholder='email here') }}
    {{ form.password.label(class_='passwd')  }} {{ form.password}}
    

    或尝试:

    {{ form.username.label, extra_classes='uname' }} {{ form.username(placeholder='email here') }}
    {{ form.password.label, extra_classes='passwd'  }} {{ form.password}}
    

    有效:

    【讨论】:

    • 嗨,我的编辑器上的两个名称是相同的,但是当我将它粘贴到这里时,我更改了它以区分 css 类名称和 wtforms 的属性。我已经更新了我的查询。请指导为什么样式仍然不起作用?什么是可能的断开链接?
    • 您好,首先,非常感谢您帮助我。不幸的是,我仍然无法更改这些标签的颜色。在 css 文件中,我将 inline-block 设置为将两个输入字段保持在彼此分散的位置,但无法这样做。我刚刚编辑了文件以显示我正在使用的确切内容。我真诚地感谢您对此事的指导。问候
    • 可能是你的css文件无效。 background: url(rail.jpeg); 应该是 background: url("rail.jpeg");
    • 尊敬的会员,我能够成功地将 html 与 css 文件连接起来,即当应用程序通过本地主机上的烧瓶运行时,背景图像已经工作。对于扩展这个幼稚的问题,我深表歉意,但我很难抓住问题/漏洞。我包含了整个代码以提供清晰的图片,我将感谢您的友好和慷慨的帮助。问候
    • 嗨,按照指示我对 jinja 模板进行了更改,这是我看到的错误“jinja2.exceptions.TemplateSyntaxError: expected token 'end of print statement', got '='”。我试图用谷歌搜索错误以查看可能出了什么问题,但还没有弄清楚。任何见解将不胜感激。问候
    猜你喜欢
    • 2022-01-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-12-29
    • 1970-01-01
    • 2012-10-23
    • 2012-02-18
    相关资源
    最近更新 更多