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