python - 为什么扩展模板时我的表单不起作用-6ren

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

转载作者：行者123 更新时间：2023-11-30 23:13:16

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

目标是能够拥有一个父文件，然后我可以将所有子文件添加到该父文件中，而不必每次都添加页眉和页脚。这次我尝试添加表单不会让表单具有交互性。该表单就像一个图像，您无法选择任何内容或与任何内容交互。

我的父文件是:

<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 %}

我的子文件是:

{% 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;}

最佳答案

你的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。
清除 float 。您可以使用以下方法来做到这一点:

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

关于python - 为什么扩展模板时我的表单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29403129/

文章推荐： c# - 在两个目的地复制流内容

文章推荐： mysql - 比较 MySQL 中的变量 VS 数组

文章推荐： php - 卡在 os.rename() 处

c++ - 模板的特化模板的定义
namespace std { template <> class hash{ public : size_t operator()( cons
javascript - 出于 SEO 原因，对相同内容使用 Django 模板 + Vue 模板
我正在构建一个 Javascript 交互性有限的 Django 应用程序，并且正在研究如何将 Vue 模板与 Django 模板合并以实现相同的内容。想象一个无限滚动的页面，其中 SEO 非常重要
javascript - 外部类调用 LitElement 组件方法(传递 html 模板)，组件方法更新其 html 模板
我需要一个由游戏逻辑组成的外部类，调用 LitElement 组件，并向其传递一个 html 模板文字，该组件将使用该文字来更新其自己的 html 模板文字的一部分。在下面的代码中，您将看到组件的一
ember.js - 是否可以使用脚本标签加载 Handlebars 模板？或者在 Ember.js 中以编程方式定义 Handlebars 模板
很简单，我不想在 html 文件中定义所有 Handlebars 模板我试过了但这并没有奏效。我是否可以不以编程方式定义模板，甚至只是加载 Handlebars 文件，以便我可以重用，而且我觉得
templates - JQuery 1.5 模板 : JQuery 1. 5 未呈现我的模板。如何调用 JQuery 1.5 模板？
在此代码中，j 正确地成为对象:j.name、j.addr、j.city、j.state 和 j.zip。但是，成功函数有一个 JavaScript 错误 .tmpl() 不是函数。 {{t
Django 模板
Django模板不会？点进来，总结了模板语法传值取值、过滤器和自定义过滤器、模板标签的分类、中间件403报错如何解决、如何继承模板~👆 Django 模板模板传值取值后端传值键值对形式：{‘n
C++模板
哈喽大家好，我是鹿九丸 \color{red}{鹿九丸}鹿九丸，今天给大家带来的是C++模板。如果大家在看我的博客的过程中或者学习的过程中以及在学习方向上有什么问题或者想跟我交流的话可以加我的企
PHP 模板
我正在用 PHP 编写一个简单的模板层，但我遇到了一些困难。目前它是这样工作的: 首先，我使用 fetch_template 从数据库中加载模板内容 - 这可行(如果您有兴趣，我会在启动时收集所有模板
Django 模板
我正在制作有关模板的 Django 教程。我目前处于此代码: from django.template import Template, Context >>> person = {'name': '
Jquery 模板
我正在使用 Jquery 模板来显示传入的 JSON 数据我想将模板加载到可缓存的外部文件中。我该怎么做？更新 http://encosia.com/2010/12/02/jquery-templa
Python 模板
这是我的观点.py: from django.http import HttpResponse from django.template.loader import get_template from
JavaScript 模板
我试图说服一位同事在项目的前端使用 Mustache/Hogan，我提出了以下建议: 有一个 templates.js 文件，大致如下所示: var tpl_alert = '{{msg}}'; va
函数中的c++模板
我想创建一个通用的数组函数。在我的 API 中，我有一个通用容器，我需要将其转换为正确的类，但我想让它通用 template void UT::printArray(CCArray* arr, T t
JavaScript 模板
有谁知道是否有办法在 Genshi 中创建 javascript 模板？我的意思是，我需要一个 .js 文件，可以在其中使用等指令。等等。有什么想法吗？谢谢! 最佳答案你可以直接在html中这
HTML 模板
我想知道是否可以设置某种 HTML 模板系统，基本上我有 3 个不同的文件: - header.html - footer.html - landing.html(landing.html 是包含页面
HTML 模板
我正在尝试构建以下 HTML 模板: 这很简单，如果我使用红色容器 1-4，语法如下: 1 2 3 4 5 6 7 8 9 https://jsfi
模板的c++模板
#include "boost/numeric/ublas/matrix.hpp" using namespace boost::numeric::ublas; template class Lay
类中的c++模板
我在一个类中有一个函数，它传递了一个函数及其参数，然后将它们绑定(bind)到一个函数调用中并调用该函数等。这已经被快速组合在一起以测试我知道代码不是很好的概念。 class Profiling {
用于十进制和任意基数之间转换的c++模板
是否有一个 c++ 结构或模板(在任何库中)允许我在十进制和任何其他基数之间进行转换(很像 bitset 可以做的)？最佳答案是的，你可以使用unsigned int: unsigned int
C++泛型一：模板
数据类型给程序设计带来的困扰及解决方案 int maxt(int, int); double maxt(double, double); 若有一种占位符T，能够代替类型，便可以简化代码的冗余编写

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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