Having trouble customizing the appearance of wtform attributes

Hello Everyone,

Here is the content of the .py file:


    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'] = 'mysecretkey'
    
    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()


The jinja template code looks like this:


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>User Login</title>
    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='login_style.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">

<!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  </head>
  <body>
  <div align="center" class="main-container">
    <form method="POST">
      <h1>User Login Page</h1>
      <h2>Welcome!</h2>
      <br>
      {{ form.hidden_tag() }}
      {{ form.username.label(class_='uname') }} {{ form.username(placeholder='enter email') }}
      <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>Forgot Password?</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>

I have connected the HTML with css successfully and the background image is visible when running the app through Flask. However, the formatting for the username and password labels/fields is not showing correctly. Below is my CSS file content:


    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;
    }

Please advise on what part I might be missing or using incorrectly.

Thank you!

(Last Updated)

Answer №1

You currently have the following classes:

class_='uname'
class_='passwd'

However, the CSS styles are looking for:

.username{}
.password{}

The class names need to match in order for the styling to work correctly.

UPDATE after original poster's edit

You have not applied the class declarations to the labels. You have added them to the fields instead. Please try:

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

or give this a shot:

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

If done correctly, it should appear like this:

https://i.sstatic.net/R10n1.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A rightward sliding submenu that appears upon clicking a button

I have a vision of creating an admin control panel for my website, featuring a set of buttons. I envision that when one of the buttons is clicked, the corresponding sub-menu will appear alongside it. For instance, if "My Account" is selected, its sub-menu ...

Synchronizing CSS3 Animation Events and Event Listeners in jQuery: A Complete Guide

I've been exploring different ways to utilize CSS3 Animation Events and Event Listeners across browsers for more precise control over CSS3 animations. While I know it's possible, I'm struggling to implement it due to my current limitations d ...

Steps for removing the bottom border for the last child in the Material UI Box Component

I have a Box Component where ListItems are wrapped. For each child, I have a border-bottom of 1px solid class set for the Box component, but I don't want it for the last child. How can I achieve that? {data.map((item, i) => { return ...

Angular: How to Disable Checkbox

Within my table, there is a column that consists solely of checkboxes as values. Using a for loop, I have populated all values into the table. What I have accomplished so far is that when a checkbox is enabled, a message saying "hey" appears. However, if m ...

Checking for empty inputs using Html, JavaScript, and CSS

I need help with a form that has 6 input fields. I want to ensure all fields are filled out, and if not, display an alert message. Any suggestions on how to achieve this? Additionally, I'm experiencing difficulties implementing different font styles. ...

The results of the query are not showing up on the website

I am encountering an issue with a query/output that is not functioning as expected. Despite ensuring the accuracy of all column table names, no errors are being thrown by PHP error checking. Below is the code segment that is failing to produce any output: ...

Conceal an entire div using CSS, especially if a portion of it remains unoccupied

Is there a way to conceal an entire division if a part of it is void? For instance, if "dd" is empty as indicated below, can I hide the entire class "test" so that the keyword Restrictions does not display either? I attempted .test dd:empty { display: none ...

In Laravel Blade, you can dynamically add rows and columns based on a certain condition

I'm working on creating a user interface for cinema seats in Laravel Blade. The database includes seat rows and columns, and the rows will be the same for two consecutive rows. For example, the first row could have an id of 1 with seat_row:1 and seat_ ...

Leveraging Columns in HTML and CSS

Looking to create a layout with 2 separate columns for the content on my website. The desired layout is shown below: https://i.stack.imgur.com/V4uX2.jpg On my computer monitor, it displays as intended. However, on my mobile device it appears like this: ...

What measures are in place to prevent content from being copied on this website?

I'm facing an issue with my website where users are unable to select and copy text using their mouse. The site is hand-coded in PHP and I've tested it on multiple browsers, but the problem persists. I understand that some people may want to preve ...

The form data is being passed as null to HttpContext.Current.Request

My file upload module is working well with Postman without any content type. However, in the code, the file count always shows as 0 in the backend API. If anyone has any insights into what I might be doing wrong, please help me out. Thank you. Below is my ...

The HTML generated by Selenium using Javascript is still missing some elements, despite accessing the document.body.innerHTML

Attempting to retrieve the HTML from a webpage that undergoes modification by JavaScript post-loading. Followed directions in this guide, executing the command below in my Python script after initial page load: html = browser.execute_script("return docume ...

The Wonders of Flex Box and Media Queries

Can a website still be made responsive without relying on media queries when flexbox is already implemented? Are there specific scenarios where the utilization of media queries offers enhanced control? ...

Failure to display masonry arrangement

I am working on creating a stunning masonry layout for my webpage using some beautiful images. Take a look at the code snippet below: CSS <style> .masonryImage{float:left;} </style> JavaScript <script src="ht ...

Choose an element from within a variable that holds HTML code

I have a specific div element that I need to select and transfer to a new HTML file in order to convert it into a PDF. The issue I'm facing is related to using AJAX in my code, which includes various tabs as part of a management system. Just to prov ...

Guide on redirecting to a different URL when the query string contains a particular keyword

Currently, I am facing an issue with the code below that is used for redirection based on URL string matching. The error message "Warning: Use of undefined constant" is being thrown and the code fails to work if the string is case sensitive. Can anyone a ...

Is it possible to include both the value and text of a dropdown in form.serialize?

For my project, I need to serialize the form data. However, when it comes to dropdowns, only the values are captured and not the text of the selected option. <select name='attend'> <option value="1" selected="selected">Question&l ...

Tips for vertically aligning elements within the body while excluding the navbar from being centered

On my webpage, I have a navigation bar and a lot of content. The code structure looks something like this: .container { display: flex; justify-content: center; align-items: center; } <div class="navbar"> <!-- Various links for navigation ...

Discover the ultimate guide to creating an interactive website using solely JavaScript, without relying on any server-side

I'm facing a challenge: I have a desire to create a website that is mainly static but also includes some dynamic components, such as a small news blog. Unfortunately, my web server only supports static files and operates as a public dropbox directory. ...

The toggle feature in Bootstrap is stuck in the "on" position and refuses to "untoggle."

Currently, I am working on developing a basic website using Laravel and Vue.js. To ensure that the website is responsive, I integrated Bootstrap 4 into the project. For the most part, everything appears to be functioning correctly - the navbar collapses as ...