title: How to toggle password visibility while using flask and flask_wtf forms?
body: <p>I just started learning flask, and i was wondering how can I toggle password field visibility by a button added in html and i can't figure it out.
  <strong>app.py</strong></p>
  
  <pre><code>from flask import Flask
  from flask import render_template, url_for, flash, redirect
  from forms import MyForm
  
  app = Flask(__name__)
  app.config['SECRET_KEY'] = '40928745c948f3f1e67703b23b49b9c5'
  
  @app.route('/', methods=('GET', 'POST'))
  def home():
      form = MyForm()
      return render_template('home.html', form=form)
  
  if __name__ == '__main__':
      app.run(debug=True)
  
  </code></pre>
  
  <p><strong>forms.py</strong></p>
  
  <pre><code>from flask_wtf import FlaskForm
  from wtforms import PasswordField
  from wtforms.validators import DataRequired
  
  class MyForm(FlaskForm):
      password = PasswordField('password', validators=[DataRequired()])
  
  </code></pre>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Sample&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;form method="POST" action="/"&gt;
    {{ form.hidden_tag() }}
    {{ form.name.label }} {{ form.name(size=20) }}
    &lt;input type="submit" value="Go"&gt;
    &lt;button type="button" name=""&gt;Show Password&lt;/button&gt; &lt;! –– Using this button, toggle password visibilty -- !&gt;
  &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now I know that <code>{{ form.hidden_tag() }}</code> is to hide input fields but how do I toggle the visibility?</p>