CODEWITHSUNDEEP
javascripthtmlcssdjangoweb
sinθ
sinθ

Reputation: 11493

Weird html rendering anomaly.

I am unsure whether this problem is in Django or HTML, so I'm including both. This is the html that I see when I right click and select "view source":

<!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>

This is what I get, and what seems to render, when I click inspect element in google chrome. You notice all the end tags are missing in form. 

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

this is the 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;
}

This is the Django (if the problem is there):

Template:

<!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})

Upvotes: 0

Views: 142

Answers (1)

MicronXD
MicronXD

Reputation: 2220

The issue is your HTML. input tags aren't supposed to have an open and close.

To achieve what you're trying to achieve with:

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

You should instead do:

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

EDIT: spec if you're interested: http://www.w3.org/TR/html401/interact/forms.html#h-17.4

Upvotes: 5

Related Questions