Django Formulare Template-design-Klassen

Forms-framework Django ist hervorragend und macht die ganze form, indem Sie einfach die folgenden.

{{ form.as_p }}

Für ein Anmeldeformular, er wandelt oben in:

<p><label for="id_username">Username:</label> <input id="id_username" type="text" name="username" maxlength="30" /> Required. 30 characters or fewer. Alphanumeric characters only (letters, digits and underscores).</p>
<p><label for="id_email">Email:</label> <input type="text" name="email" id="id_email" /></p>
<p><label for="id_firstname">Firstname:</label> <input type="text" name="firstname" id="id_firstname" /></p>
<p><label for="id_lastname">Lastname:</label> <input type="text" name="lastname" id="id_lastname" /></p>
<p><label for="id_password1">Password:</label> <input type="password" name="password1" id="id_password1" /></p>
<p><label for="id_password2">Password confirmation:</label> <input type="password" name="password2" id="id_password2" /></p>

Aber aus Gründen des Designs möchte ich hinzufügen, dass Klassen, um jedes element in der form, wie folgt:

<p><label for="id_email" class="field-title">Email:</label> <input type="text" name="email" id="id_email" /></p>
<p><label for="id_firstname" class="field-title">Firstname:</label> <input type="text" name="firstname" id="id_firstname" /></p>
<p><label for="id_lastname" class="field-title">Lastname:</label> <input type="text" name="lastname" id="id_lastname" /></p>
<p><label for="id_password1" class="field-title">Password:</label> <input type="password" name="password1" id="id_password1" /></p>
<p><label for="id_password2" class="field-title">Password confirmation:</label> <input type="password" name="password2" id="id_password2" /></p>

Was ist die standard-Möglichkeit, das hinzufügen dieser Klassen, um die einzelnen Formularelemente. Ist es nötig, erweitern Sie die form in der Vorlage manuell hinzufügen dieser Klassen (in dem Fall der Wechsel in der form sollte auch die entsprechenden änderungen in der Vorlage); Dieser ist zu mühsam, zumal Sie hinzufügen müssen, wenn Fehler, Fehler anzuzeigen, die auch für jedes der Felder.

Oder ist es besser, liefern einige Klassen von der form-Klasse, der Blick, das scheint ein wenig hässlich.

Ich weiß nicht viel css, sollte es möglich sein, diese Klassen definiert, die für die angegebenen tags, die innerhalb einer gegebenen Klasse von einem Formular. Wenn ja, sollte dies der beste Weg zu gehen über es zu tun.

Wie fügen Sie designer-Klassen für die Elemente bilden. Was denken Sie, ist der beste Weg, um Sie hinzuzufügen.

InformationsquelleAutor Lakshman Prasad | 2009-07-18
  1. 10

    Wenn Sie gerade brauchen, alle Etiketten zu haben, die einer bestimmten Klasse, der beste Weg zu ändern, die markup und CSS leicht. Setzen Sie ein <div> mit Ihrer Klasse rund um die form:

    <div class="field-title">
    {{ form.as_p }}
</div>

    machen und die CSS-definition wie folgt: 

    div.field-title label {
    ...
}
    • Ich zweite dieser, mit vorbehalten: (1) Wenn Ihr Ziel ist es, die Beschriftungen, die im Zusammenhang mit einem einzigen Stil. Dann können Sie einfach passen Sie Ihre CSS zu entsprechen. E. g., form label { background-color: red; } (2) Jedoch, wenn Sie möchten, VERSCHIEDENE Stile auf unterschiedlichen labels, dann wird das nicht funktionieren-da Sie nicht über Klasse-tags auf die tatsächlichen labels.
    InformationsquelleAutor Daniel Roseman
  2. 5

    War ich auch auf der Suche für das gleiche, nur das hinzufügen der info wenn Sie sind sich dessen nicht bewusst.

    Wenn Sie möchten, um css anzuwenden, um spezifische Bereich ist, können Sie extrahieren Sie die einzelnen Formularfelder wie folgt

    Z.B.: Formular-Feld name:

    {{ form.name.label }}
{{ form.name.errors }}
{{ form.name }}
{{ form.name.help_text }}

    Nun, statt {{ form.name.label }} Sie können Ihre eigene Formatierung, wie Sie erwähnt.

    Andere Möglichkeit ist das hinzufügen der Klassenname durch javascript.

    InformationsquelleAutor Bala kumar
  3. 1

    Hier ist eine ähnliche Frage: Klasse hinzufügen, um Django label_tag () - Ausgabe . Ich bin mir nicht sicher, ob die gewählte Antwort zu, dass man Ihren Bedürfnissen passen oder nicht.

    InformationsquelleAutor Adam
  4. 0

    Hinzufügen der Klasse direkt auf das Form-Feld als Attribut, schien die TROCKENE ' est Weg für mich.

    name = forms.CharField(widget=forms.TextInput(attrs={"class":"form-control"}))

message = forms.CharField(widget=forms.Textarea(attrs={"class":"form-control bar foo"}))

    Diese Weise brauchen Sie nicht zu ändern Sie alles, was irgendwo sonst. Sie können so viele Kurse zu bestimmten Feldern dieser Art und Weise, wie Sie wollen.

    InformationsquelleAutor nyx00
Schreibe einen Kommentar