HTML、Flaskの形式で並べた入力

Question

私はFlaskを使ってWebアプリケーションを開発しています。私は、ユーザーがファイルをアップロードしてサーバーに送信できるようにするメインページにフォームを配置したいと考えています。

これが機能している：

<div class="jumbotron"> 
    <div class="container"> 
     <h1>Automatic Guitar Music Transcription</h1> 
    </div> 
    </div> 
    <div class="container"> 
    <p class="lead">Upload your audio file below:</p> 
    <form method="POST" action="/" enctype="multipart/form-data"> 
     <input name="file" type="file"/> 
     <input type="submit"/> 
    </form> 
    </div> 

（JSFiddle）

をしかし、私の本当のindex.htmlは、フラスコのテンプレートであり、また、ブートストラップを使用しています。

{%- extends "base.html" %} 

{% import "bootstrap/utils.html" as utils %} 

{% block content %} 
    {% if request == "GET": %} 

    <div class="jumbotron"> 
    <div class="container"> 
     <h1>Automatic Guitar Music Transcription</h1> 
    </div> 
    </div> 
    <div class="container"> 
    <p class="lead">Upload your audio file below:</p> 
    <form method="POST" action="/" enctype="multipart/form-data"> 
     <input name="file" type="file"/> 
     <input type="submit"/> 
    </form> 
    </div> 

    ...more HTML... 

    {% endif %} 
{% endblock %} 

{% block scripts %} 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> 
    <script src="https://rawgit.com/mattdiamond/Recorderjs/master/dist/recorder.js"></script> 
    <script src="{{url_for('static', filename='js/record.js')}}"></script> 
{% endblock %} 

残念ながら、この方法は、私がJSFiddleのように側で入力ボタン側を得ることはありませんが、私は、ファイルのアップロードボタン下の送信ボタンを取得：

なぜこれは起こっていますか？ありがとう。

Answer 1

これを達成するために単純なテーブルを使用します。

<table> 
 
    <tr> 
 
     <td><input name="file" type="file"/></td> 
 
     <td><input type="submit"/></td> 
 
    </tr> 
 
</table>

を