استفاده از css

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

چطوری می‌تونیم فایل‌های css را روی فرم‌های جنگو اعمال کنیم ؟

سلام،

ساده‌ترین روش استفاده از تگ لینک هست:

{% load static %}
<link rel="stylesheet" href="{% static 'polls/style.css' %}">

لینک منبع

محسن موحد ۰۲ اسفند ۱۴۰۲، ۰۷:۲۲

این روش روی فرم هایی که با django forms میسازیم هم جوابگو هست ؟ اخه ما این فرم هارو داخل برنامه به صورت تگ که استفاده نمیکنیم که بتونیم بهشون استایل بدیم

ما همیشه می‌تونیم به تگ‌ها class اضافه کنیم برای استایل دهی اما اینجا چطوری میشه به این form.as_pاستایل داد ؟

iamqazali ۰۲ اسفند ۱۴۰۲، ۱۷:۵۱

درود وقتتون بخیر

برای این کار چندین روش وجود داره که کاملا بستگی به خودتون داره از کدوم استفاده کنید
روش اول استفاده از attribute‌ها ( ویجت‌ها )

from django import forms
class MyCustomForm(forms.Form):
    my_field = forms.CharField(widget=forms.TextInput(attrs={'class': 'my-custom-class'}))

روش دوم استفاده از کلاس‌های custom :

<!-- template.html -->
<form method="post">
    {% csrf_token %}
    {{ form.field1 }}
    {{ form.field2 }}
    <button type="submit">Submit</button>
</form>
/* styles.css */
#id_field1 {
    /* اعمال استایل به فیلد field1 */
}
.email-field {
    /* اعمال استایل به فیلد field2 */
}

یا با استفاده از بازنویسی فیلد‌ها و اعمال رو تگ html:


<form method="post">
    {% csrf_token %}
    <label for="id_name">نام:</label>
    {{ form.name }}
    <label for="id_email">ایمیل:</label>
    {{ form.email }}
    <button type="submit">ارسال</button>
</form>

یا به این روش formset‌ها : لینک
توجه کنید برای این کار روش‌های دیگه ای هم وجود داره.
موفق باشید 💎

بهترین پاسخ

Reza Mobaraki ۰۵ اسفند ۱۴۰۲، ۱۲:۵۲

مثال کلی

FORM:

from django import forms
class MyForm(forms.Form):
   name = forms.CharField(label='نام')
   email = forms.EmailField(label='ایمیل')

HTML:

<form method="post">
   {% csrf_token %}
   <div class="form-group">
       <label for="id_name">نام:</label>
       {{ form.name }}
   </div>
   <div class="form-group">
       <label for="id_email">ایمیل:</label>
       {{ form.email }}
   </div>
   <button type="submit" class="btn btn-primary">ارسال</button>
</form>

فایل css:


/* استایل فیلد نام */
#id_name {
   /* اعمال استایل‌های دلخواه برای فیلد نام */
   border: 1px solid #ccc;
   padding: 5px;
   border-radius: 3px;
}
/* استایل فیلد ایمیل */
#id_email {
   /* اعمال استایل‌های دلخواه برای فیلد ایمیل */
   border: 1px solid #ccc;
   padding: 5px;
   border-radius: 3px;
}

Reza Mobaraki ۰۵ اسفند ۱۴۰۲، ۱۲:۵۵