为什么我的表单在扩展模板时不起作用

Question

您好，当我使用 jinja2 扩展模板时，我的所有表单都不起作用。如何让表单与模板一起运行？

目标是能够拥有一个 parent 文件，然后我可以将所有 child 文件添加到其中，而不必每次都添加页眉和页脚。这一次，我正在尝试添加一个表单，不会让该表单具有交互性。该表单就像一张图片，您无法 select 任何东西或与任何东西互动。

我的 parent 文件是：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/static/img/favicon.ico" type="image/x-icon">
<title>On Deck Shooting Apps</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="/static/CSS/layout.css" type="text/css" />
</head>
<body id="top">
<div class="wrapper col1">
  <div id="header">
    <div id="logo">
      <h1><a href="/#">OnDeckShooting</a></h1>
      <p><strong>Advanced event management</strong></p>
    </div>
      <h1>      </h1>

    <br class="clear" />
  </div>
</div> 
        {% block head %}
    <div class="wrapper col2">
        <div id="topbar">
        <div id="topnav">
          <ul>

              <ul>
            <li><a href="/">Home</a></li>

            <li><a href="sign-up">Sign in/up</a></li>
            <li><a href="#">Admin console</a>
              <ul>
                <li><a href="/WelcomeAdmin/">Console</a></li>
                <li><a href="staffman">Staff Management</a></li>
                <li><a href="AlertConsole">ALERTS</a></li>
                <li><a href="shootersign">Sign up Shooters</a></li>
              </ul>
            </li>

            <li ><a href="contact-us">Contact Us</a></li>
              <li class="last"><a href="/Logout">logout</a></li>
          </ul>
        </div>
        <br class="clear" />
      </div>
            <hr>
        {% with messages = get_flashed_messages() %}
          {% if messages %}
            <ul>
            {% for message in messages %}
                <li>{{ message }} </li>
            {% endfor %}
            </ul>
          {% endif %}
        {% endwith %}

    </div>
    {% endblock %}
     <div class="wrapper col5">

  <div id="container">
    <div id="content">

        {% block content %}{% endblock %}

        </div>
    </div>
</div>

    <div class="wrapper col6">
  <div id="footer">


    <br class="clear" />
  </div>
</div>{% block footer %}
<div class="wrapper col7">
  <div id="copyright">
    <p class="fl_left">Copyright &copy; 2015 - All Rights Reserved - <a href="#">ondeckshootingapps.com</a></p>
<!--    <p class="fl_right">Template by <a target="_blank" href="http://www.os-templates.com/" ></a></p>-->
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="PAYPALSTUFF
">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
    <br class="clear" />
  </div>
</div>
</body>
</html>
    {% endblock %}

我的 child 文件是：

{% extends "Header.html" %}
{% block content %}
<h1>CREATE SHOOT</h1>

<form action="" method="post" name="form">
      {{ form.hidden_tag() }}
      <p>
          <h2>Name of shoot:</h2>
          {{ form.nameofshoot(size=40) }}<br>
    <h2>Number of days in shoot:</h2>
            {{ form.day}}
      <p><input type="submit" value="Create Shoot"></p>
  </form>
      </div>
{% endblock %}

我的css是：

@charset "utf-8";
/*
Template Name: BusinessToday
Author: <a href="http://www.os-templates.com/">OS Templates</a>
Author URI: http://www.os-templates.com/
Licence: Free to use under our free template licence terms
Licence URI: http://www.os-templates.com/template-terms
File: Layout CSS
*/

@import url("navi.css");
@import url("forms.css");
@import url("tables.css");

html{overflow-y:scroll;}
body{margin:0; padding:0; font-size:12px; font-family:verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#29313C;}

.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart{margin:0; padding:0; list-style-type:none;}

.clear{clear:both;}
br.clear{clear:both; margin-top:-15px;}

a{outline:none; text-decoration:none;}

.fl_left, .imgl{float:left;}
.fl_right, .imgr{float:right;}

img{display:block; margin:0; padding:0; border:0;}
.imgl, .imgr{border:1px solid #DFDFDF; padding:5px; color:#666666; background-color:#FFFFFF;}
.imgl{margin:0 8px 8px 0; clear:left;}
.imgr{margin:0 0 8px 8px; clear:right;}

/* ----------------------------------------------Wrapper------------------------------------- */

div.wrapper{display:block; width:100%; margin:0; text-align:left;}
div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{margin:0 0 20px 0; padding:0 0 8px 0; font-size:20px; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; border-bottom:1px dotted #DDDDDD;}
.col1{color:#666666; background-color:#E3F1F9;}
.col2{color:#FFFFFF; background-color:#000000;}
.col3, .col4, .col5{color:#666666; background-color:#FFFFFF;}
.col6{color:#999999; background-color:#F3F3F3;}
.col6 a{color:#2684B7; background-color:#F3F3F3;}
.col7, .col7 a{color:#FFFFFF; background-color:#29313C;}

/* ----------------------------------------------Generalise------------------------------------- */

#header, #topbar, #intro, #services, #breadcrumb, #container, #footer, #copyright{display:block; position:relative; width:960px; margin:0 auto;}

/* ----------------------------------------------Header------------------------------------- */

#header{padding:30px 0; font-family:Georgia, "Times New Roman", Times, serif;}
#header #logo{display:block; float:left; width:300px; margin-top:7px;}
#header #logo h1, #header #logo p{margin:0; padding:0; line-height:normal;}
#header #logo h1{margin:0 0 10px 0; padding:0; font-size:36px; border:none;}
#header h1 a{color:#3A6C86; background-color:#E3F1F9;}
#header #newsletter{float:right; padding:10px 10px 12px 10px; color:#000000; background-color:#ADD6ED;}
#header #newsletter p{margin:0 0 8px 0; font-family:Verdana, Arial, Helvetica, sans-serif;}

/* ----------------------------------------------Topbar------------------------------------- */

#topbar{z-index:1000;}
#topbar #search{display:block; float:right; width:242px; height:36px; margin:0; padding:10px 0 0 17px; color:#FFFFFF; background-color:#000000; border-left:1px dotted #666666; overflow:hidden;}

/* ----------------------------------------------Homepage Intro------------------------------------- */

#intro{padding:30px 0 5px 0; font-size:16px; font-family:Georgia, "Times New Roman", Times, serif;}
#intro .fl_left{display:block; float:left; width:515px; height:240px; margin:0; padding:30px; color:#FFFFFF; background-color:#2684B7;}
#intro .fl_left h2{font-size:46px; margin:0 0 15px 0; padding:0; border:none; color:#FFFFFF; background-color:#2684B7;}
#intro .fl_left p{margin:0; padding:0; line-height:1.6em;}
#intro .fl_left p.readmore{display:block; width:100%; margin:20px 0 0 0; padding:0; text-align:right; line-height:normal;}
#intro .fl_left p.readmore a{padding:8px 15px; font-size:18px; color:#FFFFFF; background-color:#1C5E82;}
#intro .fl_right{float:right;}

/* ----------------------------------------------Services------------------------------------- */

#services ul, #services p, #services h2, #services img{margin:0; padding:0; list-style:none;}
#services li{display:block; float:left; width:294px; height:180px; margin:0 9px 0 0; padding:10px; color:#666666; background-color:#EFEFEF;}
#services li:hover, #services li:hover h2{color:#666666; background-color:#E5E5E5;}
#services li.last{margin-right:0;}
#services .fl_right{display:block; float:right; width:185px; padding:10px 0 0 0;}
#services h2{margin:0 0 5px 0; padding:0 0 3px 0; font-size:14px; font-weight:bold; color:#666666; background-color:#EFEFEF; border-bottom-color:#666666;}
#services p{margin:0; padding:0; line-height:1.6em;}
#services p.readmore{display:block; width:100%; margin:15px 0 0 0; padding:0; text-align:right; line-height:normal;}
#services p.readmore a{padding:8px 15px; font-weight:bold; color:#FFFFFF; background-color:#666666;}

/* ----------------------------------------------BreadCrumb------------------------------------- */

#breadcrumb{padding:30px 0; border-bottom:1px solid #CCCCCC;}
#breadcrumb a{color:#2684B7; background-color:#FFFFFF;}
#breadcrumb ul{margin:0; padding:0; list-style:none;}
#breadcrumb ul li{display:inline;}
#breadcrumb ul li.current a{text-decoration:underline;}

/* ----------------------------------------------Content------------------------------------- */

#container{padding:30px 0; line-height:1.4em;}
#container a{color:#2684B7; background-color:#FFFFFF;}
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{padding-bottom:8px; border-bottom:1px dotted #CCCCCC;}
#content{display:block; float:left; width:600px;}

/* Comments */

#comments{margin-bottom:40px;}
#comments .commentlist{margin:0; padding:0;}
#comments .commentlist ul{margin:0; padding:0; list-style:none;}
#comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}
#comments .commentlist li.comment_odd{color:#666666; background-color:#FFFFFF;}
#comments .commentlist li.comment_odd a{color:#3E7060; background-color:#FFFFFF;}
#comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
#comments .commentlist li.comment_even a{color:#3E7060; background-color:#E8E8E8;}
#comments .commentlist .author .name{font-weight:bold;}
#comments .commentlist .submitdate{font-size:smaller;}
#comments .commentlist p{margin:10px 5px 10px 0; padding:0; font-weight:normal; text-transform:none;}
#comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}

/* ----------------------------------------------Column------------------------------------- */

#column{display:block; float:right; width:300px;}
.flickrbox ul{margin:0; padding:0; list-style:none;}
.flickrbox li{display:block; float:left; width:80px; height:80px; margin:0 15px 15px 0; padding:4px; color:#666666; background-color:#FFFFFF; border:1px solid #CCCCCC;}
.flickrbox li.last{margin-right:0;}
#column .holder, #column #featured{display:block; width:300px; margin-bottom:20px;}
#column .holder h2.title{display:block; width:100%; height:65px; margin:0; padding:15px 0 0 0; font-size:20px; line-height:normal; border-bottom:1px dashed #666666;}
#column .holder h2.title img{float:left; margin:-15px 8px 0 0; padding:5px; border:1px solid #666666;}
#column div.imgholder{display:block; width:290px; margin:0 0 10px 0; padding:4px; color:#666666; background-color:#FFFFFF; border:1px solid #CCCCCC;}
#column .holder p.readmore{display:block; width:100%; font-weight:bold; text-align:right; line-height:normal;}

/* Featured Block */

#column #featured a{color:#666666; background-color:#F9F9F9;}
#column #featured ul, #column #featured h2, #column #featured p{margin:0; padding:0; list-style:none;}
#column #featured a{color:#2684B7; background-color:#F9F9F9;}
#column #featured li{display:block; width:250px; margin:0; padding:20px 25px; color:#666666; background-color:#F9F9F9;}
#column #featured li p.imgholder{display:block; width:240px; height:90px; margin:20px 0 15px 0; padding:4px; border:1px solid #CCCCCC;}
#column #featured li h2{margin:0; padding:0 0 14px 0; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; line-height:normal; border-bottom:1px dashed #666666;}
#column #featured p.readmore{display:block; width:100%; margin-top:15px; font-weight:bold; text-align:right; line-height:normal;}
#column #latestnews{display:block; width:100%; margin:0; padding:0; list-style:none;}
#column #latestnews li{display:block; margin:0 0 20px 0; padding:0 0 15px 0; border-bottom:1px dotted #DDDDDD;}
#column #latestnews li.last{margin-bottom:0;}
#column #latestnews p{margin:0; padding:0; line-height:normal;}
#column #latestnews .imgl{margin:0 10px 10px 0; padding:4px;}

/* ----------------------------------------------Footer------------------------------------- */

#footer{padding:30px 0;}
#footer h2{margin-bottom:10px; border-bottom:1px dotted #999999;}
#footer p, #footer ul, #footer a{margin:0; padding:0; font-weight:normal; list-style:none; line-height:normal;}
#footer .footbox{display:block; float:right; width:190px; margin:0 0 0 30px; padding:0;}
#footer li{margin-bottom:3px; line-height:1.6em;}
#footer .last{margin:0;}
#login{display:block; float:left; width:300px;}

/* ----------------------------------------------Copyright------------------------------------- */

#copyright{padding:20px 0;}
#copyright p{margin:0; padding:0;}

Answer 1

您的 CSS 就是问题所在。一种样式正在应用于 Header.html 中定义的元素，这导致您的表单隐藏在另一个元素之下。如果您检查页面，您会看到 div.col6 位于 div#content 之上。这是由layout.css中的以下两行引起的：

#content{display:block; float:left; width:600px;}

#header, #topbar, #intro, #services, #breadcrumb, #container, #footer, #copyright{display:block; position:relative; width:960px; margin:0 auto;}

第一行中的 float:left; 加上第二行中的 position:relative; 导致了这一点。

在不知道设计的最终目标的情况下，很难说出正确的解决方案是什么，但您有以下三种选择：

删除 float:left;.
删除 position:relative;，或者至少重新排列 CSS，使其不会应用于 #footer。
清除浮动。你可以用这样的东西来做到这一点：

<div class="wrapper col5">
  <div id="container">
    <div id="content">
      {% block content %}{% endblock %}
      <div class="clear"></div>
    </div>
  </div>
</div>

Answer 2

问题是我的 {{block contents}} 所在的位置。它在 footer css class 中将您的 {{block contents}} 移动到容器 class

为什么我的表单在扩展模板时不起作用

Why will my form not work when extending a template

python

jinja2

flask