将自定义HTML表单与django模型表单链接

wljmcqd8  于 2023-06-07  发布在  Go
关注(0)|答案(1)|浏览(149)

我想用水平字段将我的模型表单连接到HTML表单。如何手动呈现每个字段。我试图实施,但没有成功。使用以下方法,我手动呈现了字段,但表单没有将数据保存到数据库。

add_user.html

form action="#" method="POST">
{% csrf_token %}
<div class="row">
<div class="col-xl-6">
<div class="form-group row">
<label class="col-lg-3 col-form-label">{{user_form.first_name.label_tag}}</label>
<div class="col-lg-9">
{{ user_form.first_name }}
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">{{user_form.last_name.label_tag}}</label>
<div class="col-lg-9">
{{ user_form.last_name }}
</div>
</div>
</div>
<div class="col-xl-6">
<div class="form-group row">
<label class="col-lg-3 col-form-label">{{user_form.password1.label_tag}}</label>
<div class="col-lg-9">
{{ user_form.password1 }}
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">{{user_form.password2.label_tag}}</label>
<div class="col-lg-9">
{{ user_form.password2 }}
</div>
</div>
<button type="submit" class="btn btn-primary text-end">Submit</button>
</div>
</div>  
</div>
</div>
zvokhttg

zvokhttg1#

在这里我写的代码为您的要求,我使用Django内置的UserCreation表单注册,并为样式使用Bootstrap 5.3

form.py

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User

# User Signup
class UserCreateForm(UserCreationForm):
    password1 = forms.CharField(label='Password',widget=forms.PasswordInput(attrs={'class':'form-control','placeholder':'Enter Password'}))
    password2 = forms.CharField(label='Confirm Password',widget=forms.PasswordInput(attrs={'class':'form-control','placeholder':'Confirm Password'}))
    class Meta:
        model = User
        fields = ['username','first_name','last_name','email','password1','password2']

        widgets = {
            'first_name':forms.TextInput(attrs={'class':'form-control','placeholder':'Enter Firstname'}),
            'last_name':forms.TextInput(attrs={'class':'form-control','placeholder':'Enter Lastname'}),
            'username':forms.TextInput(attrs={'class':'form-control','placeholder':'Enter Username'}),
            'email':forms.EmailInput(attrs={'class':'form-control','placeholder':'Enter E-Mail'}),
        }

        labels={
            'first_name':'Firstname',
            'last_name':'Lastname',
            'username':'Username',
            'email':'E-mail',
        }

view.py

# User Signup
def RegisterView(request):
  if request.method == 'POST':
    form = UserCreateForm(request.POST)
    if form.is_valid():
      usrname= form.cleaned_data['username']
      print(usrname)
      form.save()
      messages.success(request,f'{usrname} Successfully Registred')
      form = CutomerRegistrationForm()
    return render(request, 'signup.html', {'form': form})
  else:
    form = UserCreateForm()
    context = {'form': form, }
  return render(request, 'signup.html', context)

Html代码

<div class="container">
    <div class="row ">
        <div class="col-lg-6 mx-auto border p-4">
            <div class="text-center p-3" ><h2>Signup</h2></div>
            <form action="" method="POST">
                {% csrf_token %}
                <div class="row ">
                    <div class="col-lg-6  ">
    
                        <label class="form-label">{{form.first_name.label_tag}}</label>
                        {{form.first_name}}
                    </div>
                    <div class="col-lg-6 ">
                        <label class="form-label">{{form.last_name.label_tag}}</label>
                        {{form.last_name}}
                    </div>
                    <div class="col-lg-6 ">
                        <label class="form-label">{{form.username.label_tag}}</label>
                        {{form.username}}
                    </div>
                    <div class="col-lg-6 ">
                        <label class="form-label">{{form.password1.label_tag}}</label>
                        {{form.password1}}
                    </div>
                    <div class="col-lg-12 ">
                        <label class="form-label">{{form.password2.label_tag}}</label>
                        {{form.password2}}
                    </div>
                    <div class="col-lg-12 mt-3">
                        <button class="btn btn-primary" type="submit">Signup</button>
                    </div>
    
                </div>
            </form>
        </div>

    </div>
</div>

浏览器输出

相关问题