Django表单：在自定义模板中集成帮助文本与字段错误提示

{% extends "base.html" %}
{% load static %}
{% block title %}Sign Up{% endblock %}

{% block content %}
<link rel="stylesheet" href="{% static 'css/inputs.css' %}">
<link rel="stylesheet" href="{% static 'css/signup.css' %}">
<div class="signup">
  <a href="{% url 'login' %}"><- Voltar</a>
  <h1>Sign up</h1>
  <form action="" method="post">
    {% csrf_token %}

    {# 显示表单级别的非字段错误 #}
    {% if form.non_field_errors %}
        <div class="alert alert-danger">
            <p>表单提交失败，请检查以下问题：</p>
            <ul>
                {% for error in form.non_field_errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}

    {% for field in form %}
      <div class="group {% if field.name == 'password1' %}password1{% elif field.name == 'password2' %}password2{% endif %}">      
        {# 渲染Django表单字段本身，这将生成 <input> 标签 #}
        {{ field }}
        <span class="highlight"></span>
        <span class="bar"></span>
        {# 使用 field.label 渲染字段的标签 #}
        <label>{{ field.label }}</label>

        {# 显示字段的帮助文本 #}
        {% if field.help_text %}
            <small class="help-text">{{ field.help_text }}</small>
        {% endif %}

        {# 显示字段的错误信息 #}
        {% if field.errors %}
            <ul class="errorlist">
                {% for error in field.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
      </div>
    {% endfor %}
    <button type="submit">Sign Up</button>
  </form> 
</div>
{% endblock %}

# forms.py
from django import forms
from django.contrib.auth.forms import UserCreationForm
from .models import CustomUser # 假设 CustomUser 是您的自定义用户模型

class CustomUserCreationForm(UserCreationForm):
    # 确保在Meta类中定义的字段与模型字段一致，
    # 并且如果CustomUserCreationForm没有直接包含idade和telefone，
    # 您需要在这里显式添加它们，并为其定义label和help_text。
    idade = forms.IntegerField(
        label="年龄", 
        help_text="请输入您的年龄", 
        required=True,
        widget=forms.NumberInput(attrs={'class': 'my-custom-input'}) # 添加自定义class
    )
    telefone = forms.CharField(
        label="电话", 
        help_text="请输入您的电话号码", 
        required=True,
        widget=forms.TextInput(attrs={'class': 'my-custom-input'}) # 添加自定义class
    )

    class Meta:
        model = CustomUser
        fields = ('username', 'email', 'first_name', 'last_name', 'idade', 'telefone')
        widgets = {
            'username': forms.EmailInput(attrs={'class': 'my-custom-input'}),
            'email': forms.TextInput(attrs={'class': 'my-custom-input'}),
            'first_name': forms.TextInput(attrs={'class': 'my-custom-input'}),
            'last_name': forms.TextInput(attrs={'class': 'my-custom-input'}),
            # 密码字段通常由UserCreationForm处理，如果需要自定义，也应在此处添加
            # 例如: 'password1': forms.PasswordInput(attrs={'class': 'my-custom-input'}),
            # 'password2': forms.PasswordInput(attrs={'class': 'my-custom-input'}),
        }