Python Forum
making a form purely with flask-wtf - Printable Version

+- Python Forum (https://python-forum.io)
+-- Forum: Python Coding (https://python-forum.io/forum-7.html)
+--- Forum: General Coding Help (https://python-forum.io/forum-8.html)
+--- Thread: making a form purely with flask-wtf (/thread-42211.html)

Pages: 1 2

making a form purely with flask-wtf - robertkwild - May-29-2024

hi all,

i want to design a web form using purely using flask-wtf only, i dont want to use HTML

i want to use labels, text boxes, password fields (passwords must match and contain one number, capital special) and a submit button and then once they hit submit it sends it to a powershell command with the variables the user has entered in the text boxes and password fields

is this possible please

thanks,
rob

RE: making a form purely with flask-wtf - menator01 - May-29-2024

Have a look at this link in the flask docs

RE: making a form purely with flask-wtf - robertkwild - May-29-2024

thanks, ive made a basic flask to see if i can connect to it from a web browser and i can, so i got the basics to work


from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"
save it as "test.py"

and then to start the web server i do this in the dir ive saved the "test.py"

flask --app test run
but when i try to do this

from flask import Flask, render_template, redirect, url_for
from flask_bootstrap import Bootstrap5

from flask_wtf import FlaskForm, CSRFProtect
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired, Length

app = Flask(__name__)
app.secret_key = 'tO$&!|0wkamvVia0?n$NqIRVWOG'

# Bootstrap-Flask requires this line
bootstrap = Bootstrap5(app)
# Flask-WTF requires this line
csrf = CSRFProtect(app)

import secrets
foo = secrets.token_urlsafe(16)
app.secret_key = foo

class NameForm(FlaskForm):
    name = StringField('Which actor is your favorite?', validators=[DataRequired(), Length(10, 40)])
    submit = SubmitField('Submit')
and then i start the web app i get

Not Found

The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.

sorry for the stupid question im really new to python and flask

thanks,
rob

RE: making a form purely with flask-wtf - Larz60+ - May-29-2024

I'd suggest the Flask megatutorial here.

RE: making a form purely with flask-wtf - snippsat - May-29-2024

Should not add so many 3-party libraries before you understand the basic of Flask.
You haven't defined a route to handle the form rendering and submission in your Flask application.
Not gone explain this now,but here are working code you can try.
test.py:
from flask import Flask, render_template, redirect, url_for
from flask_bootstrap import Bootstrap5
from flask_wtf import FlaskForm, CSRFProtect
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired, Length

app = Flask(__name__)

app.secret_key = 'tO$&!|0wkamvVia0?n$NqIRVWOG'
bootstrap = Bootstrap5(app)
csrf = CSRFProtect(app)

class NameForm(FlaskForm):
    name = StringField('Which actor is your favorite?', validators=[DataRequired(), Length(10, 40)])
    submit = SubmitField('Submit')

# Define a route for the form page
@app.route("/", methods=["GET", "POST"])
def index():
    form = NameForm()
    if form.validate_on_submit():
        name = form.name.data
        return redirect(url_for('thanks', name=name))
    return render_template("index.html", form=form)

# Define a route for the thank you page
@app.route("/thanks/<name>")
def thanks(name):
    return f"<p>Thank you, {name}!</p>"
index.html:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Favorite Actor</title>
    {{ bootstrap.load_css() }} {{ bootstrap.load_js() }}
  </head>
  <body>
    <div class="container">
      <h1>Favorite Actor Form</h1>
      <form method="POST">
        {{ form.hidden_tag() }}
        <div class="form-group">
          {{ form.name.label(class="form-control-label") }} {{
          form.name(class="form-control") }}
        </div>
        <div class="form-group">{{ form.submit(class="btn btn-primary") }}</div>
      </form>
    </div>
  </body>
</html>


RE: making a form purely with flask-wtf - robertkwild - May-30-2024

(May-29-2024, 08:33 PM)snippsat Wrote: Should not add so many 3-party libraries before you understand the basic of Flask.
You haven't defined a route to handle the form rendering and submission in your Flask application.
Not gone explain this now,but here are working code you can try.
test.py:
from flask import Flask, render_template, redirect, url_for
from flask_bootstrap import Bootstrap5
from flask_wtf import FlaskForm, CSRFProtect
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired, Length

app = Flask(__name__)

app.secret_key = 'tO$&!|0wkamvVia0?n$NqIRVWOG'
bootstrap = Bootstrap5(app)
csrf = CSRFProtect(app)

class NameForm(FlaskForm):
    name = StringField('Which actor is your favorite?', validators=[DataRequired(), Length(10, 40)])
    submit = SubmitField('Submit')

# Define a route for the form page
@app.route("/", methods=["GET", "POST"])
def index():
    form = NameForm()
    if form.validate_on_submit():
        name = form.name.data
        return redirect(url_for('thanks', name=name))
    return render_template("index.html", form=form)

# Define a route for the thank you page
@app.route("/thanks/<name>")
def thanks(name):
    return f"<p>Thank you, {name}!</p>"
index.html:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Favorite Actor</title>
    {{ bootstrap.load_css() }} {{ bootstrap.load_js() }}
  </head>
  <body>
    <div class="container">
      <h1>Favorite Actor Form</h1>
      <form method="POST">
        {{ form.hidden_tag() }}
        <div class="form-group">
          {{ form.name.label(class="form-control-label") }} {{
          form.name(class="form-control") }}
        </div>
        <div class="form-group">{{ form.submit(class="btn btn-primary") }}</div>
      </form>
    </div>
  </body>
</html>

sorry but why have you created a two documents a "test.py" and a "index.html" cant you have it all in one document

RE: making a form purely with flask-wtf - snippsat - May-30-2024

(May-30-2024, 08:54 AM)robertkwild Wrote: sorry but why have you created a two documents a "test.py" and a "index.html" cant you have it all in one document
No(can but ugly),Flask use a templates/ folder for eg html/css/js files.
project_directory/
│
├── templates/
│   └── index.html
│
└── test.py
Run in project_directory/
flask --app test run
Also virtual environment is advisable when doing this.

RE: making a form purely with flask-wtf - robertkwild - May-30-2024

ok im reading this page and a couple of questions, sorry if the questions appear stupid

https://www.geeksforgeeks.org/flask-wtf-explained-how-to-use-it/

i understand all the importing libraries

class - these are the fields/classes i want in my form ie radio button, password field etc etc

app.route - i want to assign all classes to the root of my web page ie /

i dont understand what the return is doing, is that returning what all the values the user has inputted and showing it to the user

html file - this is what makes it appear on the web page

how does the file structure look like is it like this

c:\python - root dir
c:\pyhton\form.py - python3
c:\python\index.html - html

and sorry again for the daft question

RE: making a form purely with flask-wtf - robertkwild - May-30-2024

ok ive done this so far

# Importing Libraries..
from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, BooleanField, DecimalField, RadioField, SelectField, TextAreaField, FileField
from wtforms.validators import InputRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secretkey'


class MyForm(FlaskForm):
    username = StringField('username', validators=[InputRequired()])
    old_password = PasswordField('old_Password', validators=[InputRequired()])
    new_password = PasswordField('new_Password', validators=[InputRequired()])
    domain = SelectField('domain', choices=[('prod', 'prod'), ('corp', 'corp')])

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()
    if form.validate_on_submit():
        username = form.username.data
        old_password = form.old_password.data
        new_password = form.new_password.data
        domain = form.domain.data
    return render_template('index.html', form=form)

if __name__ == '__main__':
    app.run()
<!DOCTYPE html>
<html>
<head>
    <title>My Form</title>
</head>
<body>
    <h1>My Form</h1>
    <form method="post" action="/" enctype="multipart/form-data">
        {{ form.csrf_token }}
        <p>{{ form.username.label }} {{ form.username() }}</p>
        <p>{{ form.old_password.label }} {{ form.old_password() }}</p>
        <p>{{ form.new_password.label }} {{ form.new_password() }}</p>
		<p>{{ form.domain.label }} {{ form.domain() }}</p>
        <p><input type="submit" value="Submit"></p>
    </form>
</body>
</html>
this is the ouput

https://i.postimg.cc/VkpTkTzR/form.png

how would i go about when they hit the submit button it runs a powershell command with the variables the user has inputted

thanks,
rob

RE: making a form purely with flask-wtf - robertkwild - May-30-2024

what am i doing wrong guys, this isnt working

new_password = PasswordField('New_Password', [InputRequired(), Length(min=12), EqualTo('confirm_new_password', message='Passwords must match')])
    confirm_new_password = PasswordField('Confirm_New_Password')
i go to the website and i enter in the same password and add an extra a in the "confirm_new_password" but i dont get the error message

ive imported it as well, i know it works as the "length" validator works

from wtforms.validators import InputRequired, Length, DataRequired, EqualTo
thanks,
rob