회원가입 form 꾸미기

회원가입 페이지를 form 으로 설정하였다.

 

# myProject/myMember/forms.py

from django import forms
from django.db import models
from .models import Profile
from django.contrib.auth.models import User
from betterforms.multiform import MultiModelForm
from django.views.generic.edit import CreateView
from django.contrib.auth.forms import UserCreationForm

class DateInput(forms.DateInput):
    input_type = 'date'

class CreateUserForm(UserCreationForm):
    class Meta:
        model = User
        fields = ("username", "password1", "password2")
        widgets = {
            'username': forms.TextInput(attrs={'class': 'form-control', 'placeholder':'15자 이내로 입력 가능합니다.'}),
            'password1' : forms.PasswordInput(attrs={'class': 'form-control'}),
            'password2' : forms.PasswordInput(attrs={'class': 'form-control'}),
        }

    def save(self, commit=True):
        user = super(CreateUserForm, self).save(commit=False) 
        if commit:
            user.save()
        return user

class ProfileForm(forms.ModelForm):
    class Meta:
        model = Profile
        fields = ['nick', 'email', 'birth_date',]

        widgets = {
            'nick': forms.TextInput(attrs={'class': 'form-control'}),
            'email': forms.EmailInput(attrs={'class': 'form-control'}),
            'birth_date': forms.DateInput(attrs={'class': 'form-control'}),
        }

        labels = {
            'nick': '이름',
            'email': 'e-mail',
            'birth_date': '생일',
        }

class UserCreationMultiForm(MultiModelForm):
    form_classes = {
        'user' : CreateUserForm,
        'profile' : ProfileForm,
    }
        
class LoginForm(forms.ModelForm):
    class Meta:
        model = User
        fields = ['username', 'password']

class ProfileUpdateForm(forms.ModelForm):

    class Meta:
        model = Profile
        fields = ['nick', 'email','birth_date']

        widgets = {
            'nick': forms.TextInput(attrs={'class': 'form-control'}),
            'email': forms.EmailInput(attrs={'class': 'form-control'}),
            'birth_date': forms.DateInput(attrs={'class': 'form-control'}),
        }

        labels = {
            'nick': '이름',
            'email': 'e-mail',
            'birth_date': '생일',
        }

 

그러다 보니 내가 원하는대로 웹 디자인을 할 수 없었다.

 

그래서 찾은 방법

 

 

페이지 소스보기를 눌러서

 

<form method="POST" action="/user/signup/" enctype="multipart/form-data">
<input type="hidden" name="csrfmiddlewaretoken" value="rVJXupqTedpYN0ekhen48ZmXBmT7PYksSO88oV1i19cXinzolUDqMqGqEbovciER">
<ul class="errorlist"><li>필수 항목입니다.</li></ul>
<p><label for="id_user-username">사용자 이름:</label> <input type="text" name="user-username" class="form-control" placeholder="15자 이내로 입력 가능합니다." maxlength="150" autofocus required id="id_user-username"> <span class="helptext">150자 이하 문자, 숫자 그리고 @/./+/-/_만 가능합니다.</span></p>
<ul class="errorlist"><li>필수 항목입니다.</li></ul>
<p><label for="id_user-password1">비밀번호:</label> <input type="password" name="user-password1" required id="id_user-password1"> <span class="helptext"><ul><li>다른 개인정보와 비슷한 비밀번호는 사용할 수 없습니다.</li><li>비밀번호는 최소 8자 이상이어야 합니다.</li><li>비밀번호는 일상적으로 사용되는 비밀번호일 수 없습니다.</li><li>비밀번호는 전부 숫자로 할 수 없습니다.</li></ul></span></p>
<ul class="errorlist"><li>필수 항목입니다.</li></ul>
<p><label for="id_user-password2">비밀번호 확인:</label> <input type="password" name="user-password2" required id="id_user-password2"> <span class="helptext">확인을 위해 이전과 동일한 비밀번호를 입력하세요. </span></p><p><label for="id_profile-nick">이름:</label> <input type="text" name="profile-nick" class="form-control" maxlength="50" id="id_profile-nick"></p>
<p><label for="id_profile-email">e-mail:</label> <input type="email" name="profile-email" class="form-control" maxlength="50" id="id_profile-email"></p>
<p><label for="id_profile-birth_date">생일:</label> <input type="text" name="profile-birth_date" class="form-control" id="id_profile-birth_date"></p>
<br>
<button type="submit" class="form-control">Sign Up</button>
</form>
<hr>
<a href="/user/signin/">
<button type="submit" class="form-control">Go back</button>
</a>

해당 소스를 모두 긁어옵니다.

 

그리고 input type='hidden' 값을

 

{%csrf_token%}

 

로 바꿔줍니다.

 

그러면 원하는대로 form 을 뚫고 수정 가능!

 

물론 input값에 id를 주어 그대로 파라미터 값을 받으면 되지만

 

현재로서 생각나는 방법을 이용하여 보았습니다.