奇怪的HTML渲染异常。

时间:2012-08-31 02:37:04

标签: javascript html css django web

我不确定这个问题是在Django还是HTML中,所以我包括两者。这是我在右键单击并选择“查看源代码”时看到的html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/static//CSS/postingformstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div style="width:100%;">

    <span class="posting_title">Original Work</span>

    <form action="" method="post" class="base_form">
        <p><label for="id_title">Title:</label> <input type="text" name="title" id="id_title" /></p>
        <input type="hidden" name="id">8</input>
        <input type="submit" class="posting_button">Post</input>
    </form>
</div>
</body>
</html>

当我点击google chrome中的inspect元素时,这就是我得到的,以及似乎呈现的内容。您注意到表单中缺少所有结束标记。

<html xmlns="http://www.w3.org/1999/xhtml"><head>


    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <link type="text/css" rel="stylesheet" href="/static//CSS/postingformstyle.css">
</head><body>
<div style="width: 100%;">

    <span class="posting_title">Original Work</span>

    <form class="base_form" method="post" action="">
        <p><label for="id_title">Title:</label> <input type="text" id="id_title" name="title"></p>
        <input type="hidden" name="id">8
        <input type="submit" class="posting_button">Post
    </form>
</div>
</body></html>

这是css:

.posting_button {
    display:block;
    font-size:20px;
    width:100%;
}
.posting_title {
    text-align:center;
    display:block;
    color:black;
    font-size:30px;
    font-family:Arial, Helvetica, sans-serif;
    margin: 2px 0 15px 0;
}
.base_form label {
    font-size: 17px;
    font-family: arial;
    font-weight: bold;
    display: block;
}
.base_form > p {
    margin: 2px 0 5px 0;
}

这是Django(如果有问题):

模板:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="{{ STATIC_URL }}/CSS/postingformstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div style="width:100%;">

    <span class="posting_title">Original Work</span>

    <form action="" method="post" class="base_form">
        {{ form.as_p }}
        <input type="hidden" name="id">{{ id }}</input>
        <input type="submit" class="posting_button">Post</input>
    </form>
</div>
</body>
</html>

Views.py

def posting_story_ow(request):
    if request.method == 'POST':
        d = 12
    return render_to_response('Posting/Forms/posting_post_ow.html', {'STATIC_URL':STATIC_URL, 'id' : request.GET['id'], 'alertnum': 0, 'form': post_ow})

1 个答案:

答案 0 :(得分:5)

问题在于您的HTML。输入标签不应该打开和关闭。

实现您想要实现的目标:

<input type="hidden" name="id">{{ id }}</input>

你应该这样做:

<input type="hidden" name="id" value="{{ id }}">

编辑:如果您感兴趣,请参阅:http://www.w3.org/TR/html401/interact/forms.html#h-17.4