因为我已经开始使用Tailwind CSS样式我的形式,它不会保存。我之前传递了像这样的表单{{ form.as_p }}
,但想设计它的样式。现在我已经设置了表单的样式,它不能正确地提交数据。我已经被困在这个年龄,任何帮助将不胜感激。下面是所有相关代码。
HTML模板:
{% load static %}
<head>
<link href="{% static 'src/output.css' %}" rel="stylesheet" />
<title>Surfer Creation Form</title>
</head>
<body class="bg-gradient-to-tr from-pink-500 via-purple-500 to-blue-500">
{% include 'include/messages.html' %}
<form method="post" action="{% url 'roxy:UserCreate_Surfer' %}">
{% csrf_token %}
<!-- User Creation Form -->
<div class="flex justify-center items-center">
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 my-2">
<h2 class="mb-4">Start your surfing journey now!</h2>
<!--Name fields -->
<div class="-mx-3 md:flex mb-6">
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ user_form.first_name.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ user_form.first_name.label }}:
</label>
<input
type="text"
name="{{ user_form.first_name.html_name }}"
id="{{ user_form.first_name.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
<!-- Last name field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ user_form.last_name.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ user_form.last_name.label }}:
</label>
<input
type="text"
name="{{ user_form.last_name.html_name }}"
id="{{ user_form.last_name.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
</div>
<!-- Email field -->
<div class="md:w-full">
<label
for="{{ user_form.email.id_for_label }}"
class="block text-sm font-normal"
>{{ user_form.email.label }}:
</label>
<input
type="email"
name="{{ user_form.email.html_name }}"
id="{{ user_form.email.auto_id }}"
class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
placeholder="youremail@example.com"
required
/>
</div>
<!-- Password fields -->
<div class="-mx-3 md:flex mb-6">
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ user_form.password1.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ user_form.password1.label }}:
</label>
<input
type="password"
name="{{ user_form.password1.html_name }}"
id="{{ user_form.password1.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ user_form.password2.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ user_form.password2.label }}:
</label>
<input
type="password"
name="{{ user_form.password2.html_name }}"
id="{{ user_form.password2.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
</div>
<!-- Surfer Form -->
<!-- Split box -->
<div class="-mx-3 md:flex mb-6">
<!-- Age field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.age.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.age.label }}:
</label>
<input
type="number"
name="{{ surfer_form.age.html_name }}"
id="{{ surfer_form.age.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
<!-- DOB field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.DOB.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.DOB.label }}:
</label>
<input
type="date"
name="{{ surfer_form.DOB.html_name }}"
id="{{ surfer_form.DOB.auto_id }}"
class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
</div>
<!-- Split box -->
<div class="-mx-3 md:flex mb-6">
<!-- Gender field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.gender.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.gender.label }}:
</label>
<select
name="{{ surfer_form.gender.html_name }}"
id="{{ surfer_form.gender.auto_id }}"
class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Female">Non-binary</option>
<option value="Other">Other</option>
</select>
</div>
<!-- Race field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.race.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.race.label }}:
</label>
<input
type="text"
name="{{ surfer_form.race.html_name }}"
id="{{ surfer_form.race.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
</div>
<!-- Phone number field -->
<div class="md:w-full">
<label
for="{{ surfer_form.phone_number.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.phone_number.label }}:
</label>
<input
type="tel"
name="{{ surfer_form.phone_number.html_name }}"
id="{{ surfer_form.phone_number.auto_id }}"
class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
<!-- Split box -->
<div class="-mx-3 md:flex mb-6">
<!-- Adress field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.address.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.address.label }}:
</label>
<input
type="text"
name="{{ surfer_form.address.html_name }}"
id="{{ surfer_form.address.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
<!-- Country field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.country.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.country.label }}:
</label>
<input
type="text"
name="{{ surfer_form.country.html_name }}"
id="{{ surfer_form.country.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
</div>
<!-- Split box -->
<div class="-mx-3 md:flex mb-6">
<!-- Occupation field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.occupation.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.occupation.label }}:
</label>
<input
type="text"
name="{{ surfer_form.occupation.html_name }}"
id="{{ surfer_form.occupation.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
<!-- School field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.school.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.school.label }}:
</label>
<input
type="text"
name="{{ surfer_form.school.html_name }}"
id="{{ surfer_form.school.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
</div>
<!-- Onset of condition field -->
<div>
<label
for="{{ surfer_form.onset_of_condition.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.onset_of_condition.label }}:
</label>
<input
type="date"
name="{{ surfer_form.onset_of_condition.html_name }}"
id="{{ surfer_form.onset_of_condition.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
<!-- Medical issues field -->
<div class="md:w-full">
<label
for="{{ surfer_form.medical_issues.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.medical_issues.label }}:
</label>
<textarea
name="{{ surfer_form.medical_issues.html_name }}"
id="{{ surfer_form.medical_issues.auto_id }}"
rows="3"
class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
></textarea>
</div>
<!-- Diagnosis and needs field -->
<div class="md:w-full">
<label
for="{{ surfer_form.diagnosis_and_needs.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.diagnosis_and_needs.label }}:
</label>
<textarea
name="{{ surfer_form.diagnosis_and_needs.html_name }}"
id="{{ surfer_form.diagnosis_and_needs.auto_id }}"
rows="3"
class="border md:w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
></textarea>
<!-- Error message -->
</div>
<!-- Medication field -->
<div class="md:w-full">
<label
for="{{ surfer_form.medication.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.medication.label }}:
</label>
<textarea
name="{{ surfer_form.medication.html_name }}"
id="{{ surfer_form.medication.auto_id }}"
rows="3"
class="border md:w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
></textarea>
</div>
<!-- Extra info field -->
<div class="md:w-full">
<label
for="{{ surfer_form.extra_info.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.extra_info.label }}:
</label>
<textarea
name="{{ surfer_form.extra_info.html_name }}"
id="{{ surfer_form.extra_info.auto_id }}"
rows="3"
class="border md:w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
></textarea>
</div>
<!-- Split box -->
<div class="-mx-3 md:flex mb-6">
<!-- Swim longer than 5 minutes field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.swim_longer_than_5_min.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.swim_longer_than_5_min.label }}:
</label>
<select
name="{{ surfer_form.swim_longer_than_5_min.html_name }}"
id="{{ surfer_form.swim_longer_than_5_min.auto_id }}"
class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
>
<option value="">Select an option</option>
<option value="True">Yes</option>
<option value="False">No</option>
</select>
</div>
<!-- Comfortability in ocean field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.comfortability_in_ocean.id_for_label }}"
class="block text-sm font-normal mb-2"
>Comfortable are you in the ocean?:</label
>
<select
name="{{ surfer_form.comfortability_in_ocean.html_name }}"
id="{{ surfer_form.comfortability_in_ocean.auto_id }}"
class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
>
<option value="">Select an option</option>
<option value="Very Comfortable">Very Comfortable</option>
<option value="Comfortable">Comfortable</option>
<option value="Kind of Comfortable">Kind of Comfortable</option>
<option value="A Bit Uncomfortable">A Bit Uncomfortable</option>
<option value="Uncomfortable">Uncomfortable</option>
<option value="Very Uncomfortable">Very Uncomfortable</option>
</select>
</div>
</div>
<!-- Split box -->
<div class="-mx-3 md:flex mb-6">
<!-- Emergency contact first name field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.emergency_contact_first_name.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.emergency_contact_first_name.label }}:
</label>
<input
type="text"
name="{{ surfer_form.emergency_contact_first_name.html_name }}"
id="{{ surfer_form.emergency_contact_first_name.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
<!-- Emergency contact last name field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.emergency_contact_last_name.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.emergency_contact_last_name.label }}:
</label>
<input
type="text"
name="{{ surfer_form.emergency_contact_last_name.html_name }}"
id="{{ surfer_form.emergency_contact_last_name.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
</div>
<!-- Emergency contact cell field -->
<div class="md:w-full">
<label
for="{{ surfer_form.emergency_contact_cell.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.emergency_contact_cell.label }}:
</label>
<input
type="tel"
name="{{ surfer_form.emergency_contact_cell.html_name }}"
id="{{ surfer_form.emergency_contact_cell.auto_id }}"
class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
<!-- Split box -->
<div class="-mx-3 md:flex mb-6">
<!-- Doctor's first name field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.dr_first_name.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.dr_first_name.label }}:
</label>
<input
type="text"
name="{{ surfer_form.dr_first_name.html_name }}"
id="{{ surfer_form.dr_first_name.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
<!-- Doctor's last name field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.dr_last_name.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.dr_last_name.label }}:
</label>
<input
type="text"
name="{{ surfer_form.dr_last_name.html_name }}"
id="{{ surfer_form.dr_last_name.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
</div>
<!-- Doctor's cell field -->
<div class="md:w-full">
<label
for="{{ surfer_form.dr_cell.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.dr_cell.label }}:
</label>
<input
type="tel"
name="{{ surfer_form.dr_cell.html_name }}"
id="{{ surfer_form.dr_cell.auto_id }}"
class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
<!-- Split box -->
<div class="-mx-3 md:flex mb-6">
<!-- Medical aid field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.medical_aid.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.medical_aid.label }}:
</label>
<input
type="text"
name="{{ surfer_form.medical_aid.html_name }}"
id="{{ surfer_form.medical_aid.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
<!-- Medical aid number field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.medical_aid_num.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.medical_aid_num.label }}:
</label>
<input
type="text"
name="{{ surfer_form.medical_aid_num.html_name }}"
id="{{ surfer_form.medical_aid_num.auto_id }}"
class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
/>
</div>
</div>
<!-- Split box -->
<div class="-mx-3 md:flex mb-6">
<!-- Accept TandC field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.accept_TandC.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.accept_TandC.label }}:
</label>
<select
name="{{ surfer_form.accept_TandC.html_name }}"
id="{{ surfer_form.accept_TandC.auto_id }}"
class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
>
<option value="">Select an option</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<!-- Receive newsletter field -->
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label
for="{{ surfer_form.receive_newsletter.id_for_label }}"
class="block text-sm font-normal mb-2"
>{{ surfer_form.receive_newsletter.label }}:
</label>
<select
name="{{ surfer_form.receive_newsletter.html_name }}"
id="{{ surfer_form.receive_newsletter.auto_id }}"
class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
required
>
<option value="">Select an option</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<!-- Submit button -->
<div class="mb:w-full">
<button
type="submit"
class="bg-blue-500 hover:bg-blue-700 w-full text-white font-normal py-2 px-4 rounded"
>
Submit
</button>
</div>
</div>
</div>
</form>
</body>
models.py:
class Surfer(models.Model):
"""Model representing a surfer."""
first_name = models.CharField(max_length=100)
last_name = models.CharField(max_length=100)
email = models.EmailField(primary_key=True)
phone_number = models.CharField(max_length=100)
address = models.CharField(max_length=100)
country = models.CharField(max_length=100)
DOB = models.DateField()
onset_of_condition = models.DateField()
gender = models.CharField(max_length=100)
race = models.CharField(max_length=100)
medical_issues = models.CharField(max_length=1000)
occupation = models.CharField(max_length=100)
school = models.CharField(max_length=100)
diagnosis_and_needs = models.CharField(max_length=1000)
medication = models.CharField(max_length=500)
extra_info = models.CharField(max_length=500)
swim_longer_than_5_min = models.BooleanField()
comfortablity_in_ocean = models.CharField(max_length=100)
age = models.PositiveIntegerField()
emergency_contact_first_name = models.CharField(max_length=100)
emergency_contact_last_name = models.CharField(max_length=100)
emergency_contact_cell = models.CharField(max_length=100)
dr_first_name = models.CharField(max_length=100)
dr_last_name = models.CharField(max_length=100)
dr_cell = models.CharField(max_length=100)
medical_aid = models.CharField(max_length=100)
medical_aid_num = models.CharField(max_length=100)
receive_newsletter = models.CharField(max_length=3)
accept_TandC = models.CharField(max_length=3)
def __str__(self):
"""Return string representation of the Surfer object."""
return f"{self.first_name} {self.last_name}"
views.py:
# User + Surfer Create Form
def UserCreate_Surfer(request):
if request.method == 'POST':
user_form = UserCreationForm(request.POST)
surfer_form = SurferForm(request.POST)
if user_form.is_valid() and surfer_form.is_valid():
user = user_form.save()
user.save()
surfer_form = surfer_form.save(commit=False)
surfer_form.user = user
# This will avoid making the user fill in the same data twice
surfer_form.first_name = user.first_name
surfer_form.last_name = user.last_name
surfer_form.email = user.email
surfer_form.save()
return redirect('roxy:LoginRequest')
else:
# Auto setting role
user_form = UserCreationForm({'role': 'Surfer'})
surfer_form = SurferForm()
return render(request, 'surferpages/become-a-surfer.html', {
'user_form': user_form,
'surfer_form': surfer_form
})
form.py
class UserForm(forms.ModelForm):
password1 = forms.CharField(label='Password', widget=forms.PasswordInput)
password2 = forms.CharField(label='Password confirmation', widget=forms.PasswordInput)
class Meta:
model = User
fields = (
'first_name',
'last_name',
'email',
'role'
)
# Surfer form
class SurferForm(forms.ModelForm):
class Meta:
model = Surfer
# specifying which model we are working with
fields = (
'age',
'phone_number',
'address',
'country',
'DOB',
'gender',
'race',
'medical_issues',
'occupation',
'school',
'onset_of_condition',
'diagnosis_and_needs',
'medication',
'extra_info',
'swim_longer_than_5_min',
'comfortablity_in_ocean',
'emergency_contact_first_name',
'emergency_contact_last_name',
'emergency_contact_cell',
'dr_first_name',
'dr_last_name',
'dr_cell',
'medical_aid',
'medical_aid_num',
'receive_newsletter',
'accept_TandC',
)
1条答案
按热度按时间nbewdwxp1#
Django的内置
User
模型需要username
字段,但它不包含在用户创建表单中。我不知道你是否定制了
User
型号。无论如何,如果你正在使用Django的开发服务器,你可以在任何可疑的地方放置一个print
语句,并检查它在控制台上的输出。