ایجاد فرم‌ها با Flask-WTF

 چرا Flask-WTF؟

ایجاد فرم‌ها با Flask-WTF که به شما امکان می‌دهد به راحتی فرم‌های وب را در برنامه‌های خود ایجاد و مدیریت کنید. این افزونه با ارائه ابزارهایی برای اعتبارسنجی داده‌ها، محافظت در برابر حملات CSRF و یکپارچه‌سازی با Flask، توسعه فرم‌ها را بسیار ساده‌تر می‌کند.

نصب Flask-WTF

ابتدا Flask-WTF را با استفاده از pip نصب کنید:

pip install Flask-WTF

ساخت یک فرم ساده

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired

class MyForm(FlaskForm):
    name = StringField('نام', validators=[DataRequired()])
    submit = SubmitField('ارسال')

در این مثال، یک فرم با دو فیلد ایجاد شده است:

• name: یک فیلد متنی با اعتبارسنجی DataRequired که اطمینان حاصل می‌کند کاربر این فیلد را پر کند.
• submit: یک دکمه ارسال برای ارسال فرم.

استفاده از فرم در قالب HTML

<form method="POST">
    {{ form.hidden_tag() }}
    {{ form.name.label }} {{ form.name }}
    {{ form.submit }}
</form>

تابع form.hidden_tag() یک فیلد مخفی برای توکن CSRF ایجاد می‌کند تا از حملات CSRF جلوگیری شود.

پردازش فرم در Flask

from flask import Flask, render_template, request
from my_form import MyForm  # فرض کنید فرم در فایل my_form.py تعریف شده است

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'  # برای تولید توکن CSRF ضروری است

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()
    if form.validate_on_submit():
        # داده‌های فرم معتبر هستند
        name = form.name.data
        # ... با داده‌ها کار کنید
        return 'سلام، ' + name
    return render_template('index.html', form=form)

ویژگی‌های کلیدی Flask-WTF

• اعتبارسنجی داده‌ها: انواع مختلفی از اعتبارسنجی‌ها مانند طول، قالب، الزامی بودن و … را پشتیبانی می‌کند.
• محافظت CSRF: به طور خودکار توکن‌های CSRF را ایجاد و بررسی می‌کند.
• یکپارچه‌سازی با Flask: به راحتی با Flask ادغام می‌شود و از ویژگی‌های Flask مانند Flask-WTF استفاده می‌کند.
• فلکسیبل: به شما امکان می‌دهد فرم‌های پیچیده و سفارشی ایجاد کنید.
• FieldList: برای ایجاد فرم‌هایی با تعداد نامشخصی از فیلدها مفید است.
• FormField: برای ایجاد فرم‌های تو در تو مفید است.

مثال پیشرفته‌تر

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField
from wtforms.validators import DataRequired, Email

class RegistrationForm(FlaskForm):
    username = StringField('نام کاربری', validators=[DataRequired()])
    email = StringField('ایمیل', validators=[DataRequired(), Email()])
    password = PasswordField('رمز عبور', validators=[DataRequired()])
    submit = SubmitField('ثبت نام')

نکات مهم

• امنیت: همیشه ورودی کاربر را قبل از استفاده اعتبارسنجی کنید تا از تزریق SQL، XSS و سایر حملات جلوگیری کنید.
• کاربرپسندی: فرم‌های خود را به گونه‌ای طراحی کنید که برای کاربر آسان باشد.
• پیام‌های خطا: پیام‌های خطای واضح و مفید برای کاربر نمایش دهید.

با استفاده از Flask-WTF می‌توانید فرم‌های قدرتمند و امنی را در برنامه‌های Flask خود ایجاد کنید. این افزونه به شما کمک می‌کند تا تجربه کاربری بهتری را برای کاربران خود فراهم کنید.

استفاده از فیلدهای مختلف در Flask-WTF

Flask-WTF طیف گسترده‌ای از فیلدها را برای ایجاد فرم‌های پیچیده و متنوع ارائه می‌دهد. در ادامه به برخی از پرکاربردترین این فیلدها و نحوه استفاده از آن‌ها می‌پردازیم:

• فیلد StringField در Flask-WTF

  StringField یک فیلد متنی پایه در Flask-WTF است که برای جمع‌آوری ورودی‌های متنی کوتاه از کاربر استفاده می‌شود. این فیلد می‌تواند برای نام‌ها، آدرس‌های ایمیل، آدرس‌های پستی، شماره تلفن‌ها و سایر ورودی‌های متنی مشابه استفاده شود.

  نحوه استفاده

  Python

  from flask_wtf import FlaskForm
  from wtforms import StringField
  
  class MyForm(FlaskForm):
      name = StringField('نام')
  

  در این مثال، یک فیلد متنی به نام name در فرم MyForm تعریف شده است.

  نمایش در قالب HTML

  HTML

  <form method="POST">
      {{ form.name.label }} {{ form.name }}
      {{ form.submit }}
  </form>

  اعتبارسنجی

  می‌توانید از اعتبارسنجی‌های مختلف برای اطمینان از صحت داده‌های ورودی استفاده کنید. برای مثال، برای اطمینان از اینکه فیلد name الزامی است و تنها شامل حروف و اعداد است، می‌توانید از اعتبارسنجی‌های زیر استفاده کنید:

  Python

  from wtforms.validators import DataRequired, Length, Regexp
  
  class MyForm(FlaskForm):
      name = StringField('نام', validators=[DataRequired(), Length(min=۲, max=۳۰), Regexp(r'^[a-zA-Z0-9 ]+$')])
  

  • DataRequired: اطمینان حاصل می‌کند که فیلد الزامی است.
  • Length: اطمینان حاصل می‌کند که طول فیلد بین ۲ تا ۳۰ کاراکتر است.
  • Regexp: اطمینان حاصل می‌کند که فیلد فقط شامل حروف، اعداد و فاصله است.

  ویژگی‌های اضافی

  • render_kw: برای اضافه کردن ویژگی‌های HTML به فیلد استفاده می‌شود.
  • label: برای تعیین برچسب فیلد استفاده می‌شود.
  • validators: برای اعمال اعتبارسنجی‌های مختلف بر روی فیلد استفاده می‌شود.

  مثال کامل

  Python

  from flask import Flask, render_template, request
  from flask_wtf import FlaskForm
  from wtforms import StringField, SubmitField
  from wtforms.validators import DataRequired
  
  app = Flask(__name__)
  app.config['SECRET_KEY'] = 'your_secret_key'
  
  class ContactForm(FlaskForm):
      name = StringField('نام', validators=[DataRequired()])
      email = StringField('ایمیل', validators=[DataRequired(), Email()])
      message = TextAreaField('پیام')
      submit = SubmitField('ارسال')
  
  @app.route('/', methods=['GET', 'POST'])
  def index():
      form = ContactForm()
      if form.validate_on_submit():
          # ارسال ایمیل یا ذخیره در پایگاه داده
          return 'پیام شما با موفقیت ارسال شد.'
      return render_template('index.html', form=form)
  

  نکات مهم:

  • از اعتبارسنجی‌ها برای اطمینان از صحت داده‌های ورودی استفاده کنید.
  • پیام‌های خطای واضح و مفید برای کاربر نمایش دهید.
  • برای فیلدهای رمز عبور، از فیلد PasswordField استفاده کنید.

• فیلد TextAreaField در Flask-WTF

  TextAreaField یک فیلد متنی چند خطی در Flask-WTF است که برای جمع‌آوری ورودی‌های متنی طولانی مانند کامنت‌ها، توضیحات یا متن‌های آزاد استفاده می‌شود. این فیلد به طور خودکار یک عنصر <textarea> در قالب HTML ایجاد می‌کند.

  نحوه استفاده

  Python

  from flask_wtf import FlaskForm
  from wtforms import TextAreaField
  
  class MyForm(FlaskForm):
      comment = TextAreaField('نظر')
  

  در این مثال، یک فیلد متنی چند خطی به نام comment در فرم MyForm تعریف شده است.

  نمایش در قالب HTML

  HTML

  <form method="POST">
      {{ form.comment.label }} {{ form.comment }}
      {{ form.submit }}
  </form>

  اعتبارسنجی

  می‌توانید از اعتبارسنجی‌های مختلف برای اطمینان از صحت داده‌های ورودی استفاده کنید. برای مثال، برای اطمینان از اینکه فیلد comment الزامی است و طول آن بین ۱۰ تا ۲۰۰ کاراکتر است، می‌توانید از اعتبارسنجی‌های زیر استفاده کنید:

  Python

  from flask_wtf import FlaskForm
  from wtforms import TextAreaField
  from wtforms.validators import DataRequired, Length
  
  class MyForm(FlaskForm):
      comment = TextAreaField('نظر', validators=[DataRequired(), Length(min=۱۰, max=۲۰۰)])
  

  ویژگی‌های اضافی

  • render_kw: برای اضافه کردن ویژگی‌های HTML به فیلد استفاده می‌شود.
  • label: برای تعیین برچسب فیلد استفاده می‌شود.
  • validators: برای اعمال اعتبارسنجی‌های مختلف بر روی فیلد استفاده می‌شود.

  مثال کامل

  Python

  from flask import Flask, render_template, request
  from flask_wtf import FlaskForm
  from wtforms import StringField, TextAreaField, SubmitField
  from wtforms.validators import DataRequired
  
  app = Flask(__name__)
  app.config['SECRET_KEY'] = 'your_secret_key'
  
  class ContactForm(FlaskForm):
      name = StringField('نام', validators=[DataRequired()])
      email = StringField('ایمیل', validators=[DataRequired(), Email()])
      message = TextAreaField('پیام', validators=[DataRequired()])
      submit = SubmitField('ارسال')
  
  @app.route('/', methods=['GET', 'POST'])
  def index():
      form = ContactForm()
      if form.validate_on_submit():
          # ارسال ایمیل یا ذخیره در پایگاه داده
          return 'پیام شما با موفقیت ارسال شد.'
      return render_template('index.html', form=form)
  

  نکات مهم:

  • از اعتبارسنجی‌ها برای اطمینان از صحت داده‌های ورودی استفاده کنید.
  • پیام‌های خطای واضح و مفید برای کاربر نمایش دهید.
  • برای فیلدهای متنی کوتاه، از StringField استفاده کنید.

• فیلد SelectField در Flask-WTF

  SelectField یک فیلد انتخابی در Flask-WTF است که برای ایجاد منوی کشویی یا لیست انتخابی استفاده می‌شود. این فیلد به کاربر امکان می‌دهد تا یک گزینه را از لیستی از گزینه‌های موجود انتخاب کند.

  نحوه استفاده

  Python

  from flask_wtf import FlaskForm
  from wtforms import SelectField
  
  class MyForm(FlaskForm):
      country = SelectField('کشور', choices=[('ir', 'ایران'), ('us', 'آمریکا')])
  

  در این مثال، یک فیلد انتخابی به نام country ایجاد شده است که لیستی از کشورها را به کاربر ارائه می‌دهد.

  نمایش در قالب HTML

  HTML

  <form method="POST">
      {{ form.country.label }} {{ form.country }}
      {{ form.submit }}
  </form>

  ویژگی‌های اضافی

  • choices: لیستی از گزینه‌های قابل انتخاب است. هر گزینه به صورت یک تاپل (tuple) از مقدار و برچسب نمایش داده می‌شود.
  • coerce: تابعی است که برای تبدیل مقدار انتخاب شده به نوع داده دلخواه استفاده می‌شود.
  • default: مقدار پیش‌فرض برای فیلد انتخاب می‌شود.
  • validate_choice: تابعی است که برای بررسی اعتبار انتخاب کاربر استفاده می‌شود.

  مثال کامل

  Python

  from flask import Flask, render_template, request
  from flask_wtf import FlaskForm
  from wtforms import SelectField, SubmitField
  
  app = Flask(__name__)
  app.config['SECRET_KEY'] = 'your_secret_key'
  
  class ContactForm(FlaskForm):
      country = SelectField('کشور', choices=[('ir', 'ایران'), ('us', 'آمریکا')])
      submit = SubmitField('ارسال')
  
  @app.route('/', methods=['GET', 'POST'])
  def index():
      form = ContactForm()
      if form.validate_on_submit():
          country = form.country.data
          # ...
          return 'کشور انتخاب شده: ' + country
      return render_template('index.html', form=form)
  

  نکات مهم

  • انتخاب گزینه‌های مناسب: گزینه‌های انتخابی باید مرتبط و مفید باشند.
  • مقدار پیش‌فرض: برای تعیین مقدار پیش‌فرض از ویژگی default استفاده کنید.
  • اعتبارسنجی: از اعتبارسنجی‌ها برای اطمینان از اینکه کاربر یک گزینه معتبر را انتخاب کرده است، استفاده کنید.

• فیلد RadioField در Flask-WTF

  RadioField یک فیلد انتخابی در Flask-WTF است که برای ایجاد یک گروه از دکمه‌های رادیویی استفاده می‌شود. این فیلد به کاربر امکان می‌دهد تا یک گزینه را از چندین گزینه موجود انتخاب کند.

  نحوه استفاده

  Python

  from flask_wtf import FlaskForm
  from wtforms import RadioField
  
  class MyForm(FlaskForm):
      gender = RadioField('جنسیت', choices=[('male', 'مرد'), ('female', 'زن')])
  

  در این مثال، یک فیلد رادیویی به نام gender ایجاد شده است که دو گزینه “مرد” و “زن” را به کاربر ارائه می‌دهد.

  نمایش در قالب HTML

  HTML

  <form method="POST">
      {{ form.gender.label }}
      {% for choice in form.gender %}
          <input type="radio" name="{{ form.gender.name }}" id="{{ choice.id }}" value="{{ choice.value }}" {% if choice.checked %}checked{% endif %}>
          <label for="{{ choice.id }}">{{ choice.label }}</label>
      {% endfor %}
      {{ form.submit }}
  </form>

  ویژگی‌های اضافی

  • choices: لیستی از گزینه‌های قابل انتخاب است. هر گزینه به صورت یک تاپل (tuple) از مقدار و برچسب نمایش داده می‌شود.
  • default: مقدار پیش‌فرض برای فیلد انتخاب می‌شود.
  • coerce: تابعی است که برای تبدیل مقدار انتخاب شده به نوع داده دلخواه استفاده می‌شود.
  • validate_choice: تابعی است که برای بررسی اعتبار انتخاب کاربر استفاده می‌شود.

  مثال کامل

  Python

  from flask import Flask, render_template, request
  from flask_wtf import FlaskForm
  from wtforms import RadioField, SubmitField
  
  app = Flask(__name__)
  app.config['SECRET_KEY'] = 'your_secret_key'
  
  class ContactForm(FlaskForm):
      gender = RadioField('جنسیت', choices=[('male', 'مرد'), ('female', 'زن')])
      submit = SubmitField('ارسال')
  
  @app.route('/', methods=['GET', 'POST'])
  def index():
      form = ContactForm()
      if form.validate_on_submit():
          gender = form.gender.data
          # ...
          return 'جنسیت انتخاب شده: ' + gender
      return render_template('index.html', form=form)
  

  نکات مهم

  • انتخاب گزینه‌های مناسب: گزینه‌های انتخابی باید مرتبط و مفید باشند.
  • مقدار پیش‌فرض: برای تعیین مقدار پیش‌فرض از ویژگی default استفاده کنید.
  • اعتبارسنجی: از اعتبارسنجی‌ها برای اطمینان از اینکه کاربر یک گزینه معتبر را انتخاب کرده است، استفاده کنید.

• فیلد BooleanField در Flask-WTF

  BooleanField یک فیلد انتخابی در Flask-WTF است که برای ایجاد یک چک باکس استفاده می‌شود. این فیلد به کاربر امکان می‌دهد تا یک مقدار بولی (True یا False) را انتخاب کند.

  نحوه استفاده

  Python

  from flask_wtf import FlaskForm
  from wtforms import BooleanField
  
  class MyForm(FlaskForm):
      agree_terms = BooleanField('شرایط را قبول دارم')
  

  در این مثال، یک فیلد چک باکس به نام agree_terms ایجاد شده است که کاربر می‌تواند آن را انتخاب کند تا نشان دهد که شرایط را قبول می‌کند.

  نمایش در قالب HTML

  HTML

  <form method="POST">
      {{ form.agree_terms.label }} {{ form.agree_terms }}
      {{ form.submit }}
  </form>

  ویژگی‌های اضافی

  • default: مقدار پیش‌فرض برای فیلد انتخاب می‌شود.
  • false_label: برچسبی که در صورت انتخاب نشدن فیلد نمایش داده می‌شود.
  • true_label: برچسبی که در صورت انتخاب شدن فیلد نمایش داده می‌شود.

  مثال کامل

  Python

  from flask import Flask, render_template, request
  from flask_wtf import FlaskForm
  from wtforms import BooleanField, SubmitField
  
  app = Flask(__name__)
  app.config['SECRET_KEY'] = 'your_secret_key'
  
  class ContactForm(FlaskForm):
      agree_terms = BooleanField('شرایط را قبول دارم', default=False)
      submit = SubmitField('ارسال')
  
  @app.route('/', methods=['GET', 'POST'])
  def index():
      form = ContactForm()
      if form.validate_on_submit():
          agree_terms = form.agree_terms.data
          # ...
          return 'آیا شرایط را قبول کردید؟: ' + str(agree_terms)
      return render_template('index.html', form=form)
  

  نکات مهم

  • مقدار پیش‌فرض: برای تعیین مقدار پیش‌فرض از ویژگی default استفاده کنید.
  • برچسب‌ها: برای تعیین برچسب‌های نمایش داده شده در قالب، از ویژگی‌های false_label و true_label استفاده کنید.
  • اعتبارسنجی: می‌توانید از اعتبارسنجی‌ها مانند DataRequired برای اطمینان از اینکه کاربر این فیلد را پر کرده است، استفاده کنید.

• فیلد FileField در Flask-WTF

  FileField یک فیلد ویژه در Flask-WTF است که به کاربر اجازه می‌دهد تا فایل‌ها را آپلود کند. این فیلد به طور خودکار یک عنصر <input type="file"> در قالب HTML ایجاد می‌کند.

  نحوه استفاده

  Python

  from flask_wtf import FlaskForm
  from flask_wtf.file import FileField, FileAllowed
  
  class MyForm(FlaskForm):
      photo = FileField('عکس', validators=[FileAllowed(['jpg', 'png'])])
  

  در این مثال، یک فیلد فایل به نام photo تعریف شده است که به کاربر اجازه می‌دهد تا یک فایل عکس را آپلود کند. همچنین، اعتبارسنجی FileAllowed برای محدود کردن فایل‌های قابل آپلود به فرمت‌های jpg و png استفاده شده است.

  نمایش در قالب HTML

  HTML

  <form method="POST" enctype="multipart/form-data">
      {{ form.photo.label }} {{ form.photo }}
      {{ form.submit }}
  </form>

  ویژگی‌های اضافی

  • validators: برای اعمال اعتبارسنجی‌های مختلف بر روی فایل آپلود شده استفاده می‌شود.
  • allow_unknown: تعیین می‌کند که آیا فایل‌هایی با پسوند ناشناخته مجاز هستند یا خیر.
  • max_size: حداکثر اندازه مجاز برای فایل آپلود شده را تعیین می‌کند.

  پردازش فایل آپلود شده

  در سمت سرور، می‌توانید فایل آپلود شده را پردازش کنید. برای مثال، می‌توانید فایل را ذخیره کنید، اندازه آن را بررسی کنید یا آن را تغییر دهید.

  Python

  from flask import Flask, render_template, request
  from flask_wtf import FlaskForm
  from flask_wtf.file import FileField, FileAllowed
  
  app = Flask(__name__)
  app.config['SECRET_KEY'] = 'your_secret_key'
  app.config['UPLOAD_FOLDER'] = 'uploads'
  
  class MyForm(FlaskForm):
      photo = FileField('عکس', validators=[FileAllowed(['jpg', 'png'])])
  
  @app.route('/', methods=['GET', 'POST'])
  def index():
      form = MyForm()
      if form.validate_on_submit():
          file = form.photo.data
          if file:
              filename = file.filename
              file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
              return 'فایل با موفقیت آپلود شد.'
      return render_template('index.html', form=form)
  

  نکات مهم

  • اعتبارسنجی: از اعتبارسنجی‌ها برای اطمینان از اینکه فایل آپلود شده معتبر است و اندازه آن از محدودیت‌های مجاز تجاوز نمی‌کند، استفاده کنید.
  • امنیت: برای جلوگیری از حملات آپلود فایل‌های مخرب، فایل‌های آپلود شده را به طور صحیح پردازش و ذخیره کنید.
  • محدودیت اندازه: برای جلوگیری از آپلود فایل‌های بسیار بزرگ، محدودیت اندازه تعیین کنید.
  • نوع فایل: محدودیت‌های نوع فایل را تعیین کنید تا فقط فایل‌های مجاز را بپذیرید.

• فیلد DateField در Flask-WTF

  DateField یک فیلد ویژه در Flask-WTF است که برای انتخاب تاریخ از کاربر استفاده می‌شود. این فیلد به طور خودکار یک عنصر <input type="date"> در قالب HTML ایجاد می‌کند.

  نحوه استفاده

  Python

  from flask_wtf import FlaskForm
  from wtforms import DateField
  
  class MyForm(FlaskForm):
      birthday = DateField('تاریخ تولد')
  

  در این مثال، یک فیلد تاریخ به نام birthday تعریف شده است که به کاربر اجازه می‌دهد تا تاریخ تولد خود را انتخاب کند.

  نمایش در قالب HTML

  HTML

  <form method="POST">
      {{ form.birthday.label }} {{ form.birthday }}
      {{ form.submit }}
  </form>

  ویژگی‌های اضافی

  • format: قالب نمایش تاریخ را تعیین می‌کند.
  • default: مقدار پیش‌فرض برای فیلد تاریخ را تعیین می‌کند.
  • validators: برای اعمال اعتبارسنجی‌های مختلف بر روی تاریخ استفاده می‌شود.

  پردازش تاریخ در سمت سرور

  پس از ارسال فرم، می‌توانید تاریخ انتخاب شده را در سمت سرور پردازش کنید. برای تبدیل رشته تاریخ به شیء datetime از ماژول datetime استفاده کنید:

  Python

  from datetime import datetime
  
  # ...
  if form.validate_on_submit():
      birthday = form.birthday.data
      birthday_date = datetime.strptime(birthday, '%Y-%m-%d')
      # ...

  مثال کامل

  Python

  from flask import Flask, render_template, request
  from flask_wtf import FlaskForm
  from wtforms import DateField, SubmitField
  from datetime import datetime
  
  app = Flask(__name__)
  app.config['SECRET_KEY'] = 'your_secret_key'
  
  class MyForm(FlaskForm):
      birthday = DateField('تاریخ تولد')
      submit = SubmitField('ارسال')
  
  @app.route('/', methods=['GET', 'POST'])
  def index():
      form = MyForm()
      if form.validate_on_submit():
          birthday = form.birthday.data
          birthday_date = datetime.strptime(birthday, '%Y-%m-%d')
          return 'تاریخ تولد: ' + birthday_date.strftime('%d/%m/%Y')
      return render_template('index.html', form=form)
  

  نکات مهم

  • فرمت تاریخ: اطمینان حاصل کنید که قالب تاریخ مورد استفاده در فیلد DateField با قالب مورد انتظار در سمت سرور مطابقت دارد.
  • اعتبارسنجی: از اعتبارسنجی‌ها برای اطمینان از اینکه کاربر یک تاریخ معتبر را انتخاب کرده است، استفاده کنید.
  • منطقه زمانی: اگر با منطقه‌های زمانی کار می‌کنید، مطمئن شوید که تنظیمات منطقه زمانی در سرور و در مرورگر کاربر صحیح است.

• فیلد DateTimeField در Flask-WTF

  DateTimeField یک فیلد ویژه در Flask-WTF است که برای انتخاب تاریخ و زمان از کاربر استفاده می‌شود. این فیلد به طور خودکار یک عنصر <input type="datetime-local"> در قالب HTML ایجاد می‌کند.

  نحوه استفاده

  Python

  from flask_wtf import FlaskForm
  from wtforms import DateTimeField
  
  class MyForm(FlaskForm):
      event_time = DateTimeField('زمان رویداد')
  

  در این مثال، یک فیلد تاریخ و زمان به نام event_time تعریف شده است که به کاربر اجازه می‌دهد تا تاریخ و زمان یک رویداد را انتخاب کند.

  نمایش در قالب HTML

  HTML

  <form method="POST">
      {{ form.event_time.label }} {{ form.event_time }}
      {{ form.submit }}
  </form>

  ویژگی‌های اضافی

  • format: قالب نمایش تاریخ و زمان را تعیین می‌کند.
  • default: مقدار پیش‌فرض برای فیلد تاریخ و زمان را تعیین می‌کند.
  • validators: برای اعمال اعتبارسنجی‌های مختلف بر روی تاریخ و زمان استفاده می‌شود.

  پردازش تاریخ و زمان در سمت سرور

  پس از ارسال فرم، می‌توانید تاریخ و زمان انتخاب شده را در سمت سرور پردازش کنید. برای تبدیل رشته تاریخ و زمان به شیء datetime از ماژول datetime استفاده کنید:

  Python

  from datetime import datetime
  
  # ...
  if form.validate_on_submit():
      event_time = form.event_time.data
      event_datetime = datetime.strptime(event_time, '%Y-%m-%dT%H:%M')
      # ...

  مثال کامل

  Python

  from flask import Flask, render_template, request
  from flask_wtf import FlaskForm
  from wtforms import DateTimeField, SubmitField
  from datetime import datetime
  
  app = Flask(__name__)
  app.config['SECRET_KEY'] = 'your_secret_key'
  
  class MyForm(FlaskForm):
      event_time = DateTimeField('زمان رویداد')
      submit = SubmitField('ارسال')
  
  @app.route('/', methods=['GET', 'POST'])
  def index():
      form = MyForm()
      if form.validate_on_submit():
          event_time = form.event_time.data
          event_datetime = datetime.strptime(event_time, '%Y-%m-%dT%H:%M')
          return 'زمان رویداد: ' + event_datetime.strftime('%d/%m/%Y %H:%M')
      return render_template('index.html', form=form)
  

  نکات مهم

  • فرمت تاریخ و زمان: اطمینان حاصل کنید که قالب تاریخ و زمان مورد استفاده در فیلد DateTimeField با قالب مورد انتظار در سمت سرور مطابقت دارد.
  • اعتبارسنجی: از اعتبارسنجی‌ها برای اطمینان از اینکه کاربر یک تاریخ و زمان معتبر را انتخاب کرده است، استفاده کنید.
  • منطقه زمانی: اگر با منطقه‌های زمانی کار می‌کنید، مطمئن شوید که تنظیمات منطقه زمانی در سرور و در مرورگر کاربر صحیح است.

نمایش فرم‌ها در قالب‌ها (Templates) در Flask-WTF

در Flask-WTF، فرم‌ها به عنوان اشیاء پایتون تعریف می‌شوند و سپس در قالب‌های شما رندر می‌شوند تا کاربر بتواند با آن‌ها تعامل داشته باشد. این فرآیند به شما اجازه می‌دهد تا فرم‌های پویا و تعاملی را در برنامه‌های وب خود ایجاد کنید.

مراحل کلی

1. تعریف فرم:

   • کلاس فرم خود را با استفاده از Flask-WTF ایجاد کنید و فیلدهای مختلف (مانند StringField، TextAreaField، SelectField و …) را به آن اضافه کنید.
   • برای هر فیلد، اعتبارسنج‌های مورد نظر را تعریف کنید.

2. ایجاد view function:

   • یک تابع نما (view function) ایجاد کنید که فرم را نمونه‌سازی کرده و آن را به قالب شما ارسال می‌کند.

3. رندر فرم در قالب:

   • در قالب خود، از متغیری که حاوی فرم است برای نمایش عناصر فرم استفاده کنید.

مثال عملی

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'

class MyForm(FlaskForm):
    name = StringField('نام', validators=[DataRequired()])
    submit = SubmitField('ارسال')

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()
    if form.validate_on_submit():
        # در اینجا کاری با داده‌های فرم انجام دهید
        name = form.name.data
        return f'سلام، {name}!'
    return render_template('index.html', form=form)

if __name__ == '__main__':
    app.run(debug=True)

<!DOCTYPE html>
<html>
<head>
    <title>فرم نمونه</title>
</head>
<body>
    <h1>فرم تماس</h1>
    <form method="POST">
        {{ form.hidden_tag() }}
        {{ form.name.label }} {{ form.name }}
        {{ form.submit }}
    </form>
</body>
</html>

توضیح کد

• تعریف فرم: در کلاس MyForm، دو فیلد name و submit تعریف شده‌اند. فیلد name الزامی است و فیلد submit یک دکمه ارسال است.
• ایجاد view function: در تابع index، فرم نمونه‌سازی شده و به قالب ارسال می‌شود. اگر فرم به درستی ارسال شود، داده‌های فرم پردازش می‌شوند.
• رندر فرم در قالب: در قالب index.html، از form.hidden_tag() برای تولید یک فیلد پنهان CSRF استفاده می‌شود. سپس، فیلدهای name و submit با استفاده از سینتکس Jinja2 رندر می‌شوند.

نکات مهم

• CSRF protection: همیشه از form.hidden_tag() برای محافظت در برابر حملات CSRF استفاده کنید.
• اعتبارسنجی: از اعتبارسنج‌های مختلف برای اطمینان از صحت داده‌های ورودی استفاده کنید.
• پیام‌های خطا: در صورتی که فرم به درستی پر نشود، پیام‌های خطا را به کاربر نمایش دهید.
• Bootstrap: برای استایل‌دهی به فرم‌های خود می‌توانید از فریمورک‌هایی مانند Bootstrap استفاده کنید.

با استفاده از Flask-WTF، می‌توانید به راحتی فرم‌های پیچیده و تعاملی را در برنامه‌های وب خود ایجاد کنید و تجربه کاربری بهتری را برای کاربران فراهم کنید.

پردازش داده‌های فرم در Flask-WTF

پس از اینکه کاربر اطلاعات را در یک فرم وارد کرد و آن را ارسال کرد، نوبت به پردازش این داده‌ها می‌رسد. در Flask-WTF، این کار به صورت زیر انجام می‌شود:

۱. اعتبارسنجی داده‌ها:

• به صورت خودکار: Flask-WTF به طور خودکار داده‌های ورودی را بر اساس اعتبارسنج‌هایی که برای هر فیلد تعریف کرده‌اید، اعتبارسنجی می‌کند.
• دسترسی به نتایج: می‌توانید به نتایج اعتبارسنجی با استفاده از form.validate_on_submit() دسترسی پیدا کنید. این تابع True را برمی‌گرداند اگر تمام اعتبارسنجی‌ها با موفقیت انجام شده باشند.

۲. دسترسی به داده‌ها:

• با استفاده از نام فیلد: پس از اعتبارسنجی موفق، می‌توانید به داده‌های هر فیلد با استفاده از نام آن دسترسی پیدا کنید. مثلاً form.name.data مقدار وارد شده در فیلد name را برمی‌گرداند.

مثال:

from flask import Flask, render_template, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'

class MyForm(FlaskForm):
    name = StringField('نام', validators=[DataRequired()])
    email = StringField('ایمیل', validators=[DataRequired()])
    submit = SubmitField('ارسال')

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()
    if form.validate_on_submit():
        # داده‌ها معتبر هستند، پردازش انجام می‌شود
        name = form.name.data
        email = form.email.data
        # در اینجا می‌توانید داده‌ها را در پایگاه داده ذخیره کنید، ایمیل ارسال کنید و ...
        return redirect(url_for('success'))
    return render_template('index.html', form=form)

@app.route('/success')
def success():
    return 'اطلاعات با موفقیت ثبت شد'

if __name__ == '__main__':
    app.run(debug=True)

توضیح کد:

• اعتبارسنجی: در تابع index، ابتدا اعتبارسنجی فرم انجام می‌شود. اگر فرم معتبر باشد، به تابع success هدایت می‌شویم.
• دسترسی به داده‌ها: در داخل بلوک if form.validate_on_submit():، مقادیر وارد شده در فیلدهای name و email به متغیرهای name و email اختصاص داده می‌شوند.
• پردازش داده‌ها: در اینجا می‌توانید هرگونه پردازش دلخواه روی داده‌ها انجام دهید. مثلاً:
  • ذخیره داده‌ها در پایگاه داده
  • ارسال ایمیل
  • ایجاد یک فایل
  • انجام محاسبات
  • و …

نکات مهم:

• امنیت: همیشه داده‌های ورودی از فرم‌ها را قبل از استفاده اعتبارسنجی کنید تا از تزریق SQL و سایر حملات جلوگیری کنید.
• پیام‌های خطا: اگر فرم معتبر نباشد، می‌توانید پیام‌های خطا را به کاربر نمایش دهید.
• روش‌های HTTP: از روش HTTP POST برای ارسال داده‌های فرم استفاده کنید.
• CSRF protection: برای جلوگیری از حملات CSRF، از form.hidden_tag() استفاده کنید.

مثال‌های پیشرفته‌تر

• فیلدهای مختلف: Flask-WTF انواع مختلفی از فیلدها را ارائه می‌دهد که می‌توانید برای جمع‌آوری انواع مختلف داده‌ها از آن‌ها استفاده کنید.
• گروه‌های فیلد: برای سازماندهی بهتر فیلدها می‌توانید از گروه‌های فیلد استفاده کنید.
• اعتبارسنج‌های سفارشی: می‌توانید اعتبارسنج‌های سفارشی خود را ایجاد کنید.
• پردازش فایل‌ها: برای آپلود فایل‌ها می‌توانید از فیلد FileField استفاده کنید و سپس فایل آپلود شده را پردازش کنید.

استفاده از Bootstrap با Flask-WTF: استایل‌دهی زیبا و کاربرپسند به فرم‌ها

Bootstrap یکی از محبوب‌ترین فریمورک‌های CSS است که به شما امکان می‌دهد رابط‌های کاربری زیبا و واکنش‌گرا ایجاد کنید. Flask-WTF نیز ابزاری قدرتمند برای ایجاد و اعتبارسنجی فرم‌ها در Flask است. ترکیب این دو ابزار، به شما اجازه می‌دهد فرم‌هایی با ظاهر حرفه‌ای و کاربرپسند ایجاد کنید.

چرا Bootstrap با Flask-WTF؟

• ظاهر یکپارچه: Bootstrap یک مجموعه کاملی از کلاس‌ها و کامپوننت‌ها را ارائه می‌دهد که به فرم‌های شما ظاهری یکپارچه و مدرن می‌دهند.
• سهولت استفاده: با استفاده از کلاس‌های Bootstrap، می‌توانید به سرعت و به راحتی فرم‌های خود را استایل‌دهی کنید.
• واکنش‌گرایی: فرم‌های ایجاد شده با Bootstrap به طور خودکار برای نمایش در دستگاه‌های مختلف با اندازه‌های صفحه متفاوت بهینه‌سازی می‌شوند.

نحوه استفاده

1. نصب Bootstrap:

   • می‌توانید Bootstrap را به صورت محلی دانلود و به پروژه خود اضافه کنید یا از یک CDN (شبکه تحویل محتوا) استفاده کنید.

2. ایجاد یک فرم با Flask-WTF:

   • یک فرم با استفاده از Flask-WTF ایجاد کنید و فیلدهای مورد نظر را به آن اضافه کنید.

3. اضافه کردن کلاس‌های Bootstrap:

   • به عناصر فرم (مانند فیلدهای ورودی، برچسب‌ها و دکمه‌ها) کلاس‌های Bootstrap مربوطه را اضافه کنید.

### مثال عملی

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'

class MyForm(FlaskForm):
    name = StringField('نام', validators=[DataRequired()])
    email = StringField('ایمیل', validators=[DataRequired()])
    submit = SubmitField('ارسال')

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()
    if form.validate_on_submit():
        # ...
    return render_template('index.html', form=form)

<!DOCTYPE html>
<html>
<head>
    <title>فرم نمونه</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <form method="POST">
            {{ form.hidden_tag() }}
            <div class="mb-3">
                {{ form.name.label(class="form-label") }}
                {{ form.name(class="form-control") }}
            </div>
            <div class="mb-3">
                {{ form.email.label(class="form-label") }}
                {{ form.email(class="form-control") }}
            </div>
            <button type="submit" class="btn btn-primary">ارسال</button>
        </form>
    </div>
</body>
</html>

توضیح کد:

• کلاس‌های Bootstrap: در قالب HTML، از کلاس‌های Bootstrap مانند form-label, form-control و btn btn-primary برای استایل‌دهی به عناصر فرم استفاده شده است.
• container: کلاس container در Bootstrap برای ایجاد یک ظرف با عرض متناسب با محتوا استفاده می‌شود.
• mb-3: کلاس mb-3 حاشیه پایین (margin-bottom) به اندازه ۳ واحد را به عنصر اضافه می‌کند.

نکات مهم:

• انتخاب کلاس‌ها: Bootstrap کلاس‌های بسیار متنوعی را برای استایل‌دهی عناصر فرم ارائه می‌دهد. می‌توانید با مراجعه به مستندات Bootstrap، کلاس‌های مناسب را انتخاب کنید.
• سفارشی‌سازی: می‌توانید کلاس‌های Bootstrap را با CSS سفارشی خود ترکیب کنید تا ظاهر فرم‌ها را بیشتر شخصی‌سازی کنید.
• واکنش‌گرایی: Bootstrap به طور خودکار فرم‌های شما را برای نمایش در دستگاه‌های مختلف با اندازه‌های صفحه متفاوت بهینه‌سازی می‌کند.