CODEWITHSUNDEEP
flaskwtforms
AndW
AndW

Reputation: 846

Flask/WTForms - how can I make a form inline?

Here is the code:

<form class="form-inline" action="" method="post">
  {{ form.hidden_tag() }}
  <fieldset class="form-group">
    <legend class="border-bottom mb-4"></legend>
    <div class="form-group">
      ... form fields here ...
    </div>
  </fieldset>
  <div class="form-group-submit">
    {{ form.submit(class="btn btn-outline-primary") }}
  </div>
</form>

I am not sure how to make this field inline...bootstrap docs say to set class to .form-inline but that is not working here

Upvotes: 0

Views: 1726

Answers (1)

Nour-Allah Hussein
Nour-Allah Hussein

Reputation: 1459

In the following example, I will show you the use of form-inline to align fields horizontally:

Suppose we have a form login_form, which is used in the view function login, that in turn renders the HTML file login.html

The form model:

class login_form(FlaskForm):
    some_hiden_field = HiddenField()
    username = StringField('User Name :', validators=[DataRequired()])
    password = PasswordField('Password :', validators=[DataRequired()])
    submit_btn = SubmitField('Submit')

The view function:

@app.route('/', methods=['Get', 'post'])
def login():
    # some code
    my_form = login_form()
    # some code
    return render_template('login.html', form=my_form)

login.html:

{% extends "mybase.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block page_content %}

<form class="form-inline"  method="POST">
    {{ form.hidden_tag() }}
    <div class="form-group">
        {{ form.username.label }} {{ form.username(class="form-control") }}
    </div>
    <div class="form-group">
        {{ form.password.label }} {{ form.password(class="form-control") }}
    </div>
    <div class="form-group">
        {{ form.submit_btn(class="btn btn-default") }}
    </div>
</form>

{% endblock %}

Finnally, as you know, in the above HTML code if you replace <form class="form-inline" method="POST"> with <form method="POST"> you will get the vertical alignment style.

I will add more clarification based on the comments below.

import Flask-Bootstrap
import Flask-WTF

Take them copy and paste

Imports collection

from flask import Flask, render_template, session, redirect, url_for, flash, request

from flask_bootstrap import Bootstrap

from flask_wtf import FlaskForm

import wtforms

from wtforms import StringField, FloatField, SubmitField, IntegerField, TextAreaField, DateField, DateTimeField, PasswordField, BooleanField, SelectField, FileField, HiddenField, Field, FieldList, FormField, Form

from wtforms.validators import Optional, NumberRange, DataRequired, Length, Email, Regexp

Upvotes: 2

Related Questions