django how to create a sign out link with template?

Question

I have tried this:

 .sign-out {
        height: 21px;
        width: 168px;
        color: #0854B3;
        font-family: Averta, serif;
        font-size: 14px;
        line-height: 21px;
        text-align: center;
        padding-top: 17px;
        margin-left: 291px;
    }

<html>
...
    <form method="post" action="{% url logout %}">
        {% csrf_token %}
        <div class="sign-out" type="submit">sign out</div>
    </form>
<html>

However the sign out text isn't clickable -- how do I make it so?

@willemVanOnsem but I'm required to make it a text clickable, not a button — nz_21, Aug 08 '19 at 10:28
@nz_21: you can simply alter a button to show the text: https://stackoverflow.com/q/1367409/67579 — Willem Van Onsem, Aug 08 '19 at 10:28
@nz_21: note that HTML is more a *semantical* layer, usually CSS determines how something looks. HTML is more to put "structure" into the data, and make it convenient to style it. — Willem Van Onsem, Aug 08 '19 at 10:34

score 1 · Answer 1 · answered Aug 08 '19 at 10:34

You basically made two errors here:

in order to submit a form, the element to submit the form should be an <input> or <button> type, or you need to use some JavaScript to submit the form; and
an {% url ... %} template tag expects as first parameter the name of the view, so a string.

<form method="post" action="{% url 'logout' %}">
    {% csrf_token %}
    <button class="sign-out" type="submit">sign out</button>
</form>

You can style the button as text with:

.sign-out {
    background:none!important;
    border:none; 
    padding:0!important;
    height: 21px;
    width: 168px;
    color: #0854B3;
    font-family: Averta, serif;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    padding-top: 17px;
    margin-left: 291px;
}

django how to create a sign out link with template?

1 Answers1