1+ {% extends 'bootstrap/base.html' %}
2+ 3+ {% block title %}Flask Bootstrap Form Example{% endblock %}
4+ {% block content %}
5+ < div class ="container ">
6+ {% for message in get_flashed_messages() %}
7+ < div class ="alert alert-warning ">
8+ < button type ="button " class ="close " data-dismiss ="alert "> ×</ button >
9+ {{ message }}
10+ </ div >
11+ {% endfor %}
12+ < div class ="row ">
13+ < div class ="col-sm ">
14+ < img src ="static/images/google-logo.jpg " alt ="Google Logo " width ="200 " height ="100 ">
15+ </ div >
16+ < div class ="col-sm ">
17+ < h1 > Google Image Downloader</ h1 >
18+ < form method ="post " action ="/ ">
19+ {{ form.hidden_tag() }}
20+ < div class ="form-group ">
21+ < label for ="name "> Name</ label >
22+ {{ form.name(class="form-control", id="name", required="required") }}
23+ </ div >
24+ < div class ="form-group ">
25+ < label for ="number_of_images "> Number of Images</ label >
26+ {{ form.number_of_images(class="form-control", id="number_of_images", required="required") }}
27+ </ div >
28+ < button type ="submit " class ="btn btn-primary "> Submit</ button >
29+ </ form >
30+ </ div >
31+ </ div >
32+ </ div >
33+ 34+ < script >
35+ // Example starter JavaScript for disabling form submissions if there are invalid fields
36+ ( function ( ) {
37+ 'use strict'
38+ 39+ // Fetch all the forms we want to apply custom Bootstrap validation styles to
40+ var forms = document . querySelectorAll ( '.needs-validation' )
41+ 42+ // Loop over them and prevent submission
43+ Array . prototype . slice . call ( forms )
44+ . forEach ( function ( form ) {
45+ form . addEventListener ( 'submit' , function ( event ) {
46+ if ( ! form . checkValidity ( ) ) {
47+ event . preventDefault ( )
48+ event . stopPropagation ( )
49+ }
50+ 51+ form . classList . add ( 'was-validated' )
52+ } , false )
53+ } )
54+ } ) ( )
55+ </ script >
56+ {% endblock %}
0 commit comments