Form

HTML Form

• 웹 페이지에서 사용자의 데이터를 입력받을 수 있는 입력 양식
• Form 요소들은 Django에서 제공하는 폼을 사용하면 저절로 생성

from django import forms

class <form name>(forms.form):
	<variable name> = forms.<formfield>

from django import forms

class <formname>(forms.ModelForm):

label & input

• 폼은 form태그 안에 사용자의 입력을 받는 input태그와 설명을 위한 label태그의 쌍으로 구성

<form>
    <lable>이름</lable>
    <input type="text">
</form>

for & id

• 각각의 input태그와 label태그를 묶어주기 위해서 label태그에는 for 속성, input태그에는 id가 사용

<form>
    <label for="title">제목</label>
    <input type="text" id="title">
</form>

• for와 id 속성을 적어주고 싶지 않다면

<form>
    <label>제목
        <input type="text">
    </label>
</form>

name

• 입력된 데이터를 서버로 전송할 때, 서버에서 각각의 데이터를 구분하기 위한 속성
• name 속성이 있는 양식 요소만 값이 서버로 전달

<form>
    <label for="title">제목</label>
    <input type="text" id="title" name="title">
</form>

type

• 입력할 값에 따른 유형을 나타내는 속성
  • email
  • password
  • button
  • radio
  • checkbox
  • date
  • file
  • submit

# example
<label for="email">이메일</label>
<input type="email" id="email" name="email">

form 속성

• 입력된 데이터를 전송할 서버의 URL을 지정하는 action
• http 전달 방식을 지정해 주는 method

<form action="register" method="post">
    <label for="name">이름</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="제출하기">
</form>

GET & POST

• GET 방식으로 지정하면 유저가 데이터를 입력하고 전송했을 때 URL 뒤에 쿼리 스트링(Query String) 형태로 데이터가 전달

• GET은 서버에서 데이터를 가져오는 요청을 보낼 때 사용

  http://www.example.com/case?name=example&age=example

• POST 방식은 전송되는 URL에는 표시되지 않고 서버로 전송하는 메세지 안쪽에 데이터를 넣어서 전달

• POST는 서버의 데이터를 변경하거나 다른 로직을 수행할 때 사용

  http://www.example.com/case

Django Form Field

• Django 폼(Form)을 작성할 때 가장 중요한 부분이 바로 데이터에 맞는 폼 필드를 작성하는 것
• Django는 입력 데이터에 따라 사용할 수 있는 여러 내장 폼 필드를 제공

Form Field

필드	설명	옵션
		max_length
CharField	문자열 입력	min_length
		strip
EmailField	이메일 입력	CharField와 같은 옵션
IntegerField	정수 입력	max_value
		min_value
BooleanField	True, False 입력	빈 값일 경우 False
DateField	날짜 형식을 입력	input_formats
TimeField	시간 형식을 입력	DateField와 같은 옵션
DateTimeField	날짜/시간 형식을 입력	DateField와 같은 옵션

• 공식문서
  • https://docs.djangoproject.com/en/2.2/ref/forms/fields/#built-in-field-classes

Form Field Options

인수	설명
label	label 항목에 적힐 이름을 지정
label_suffix	label 다음 콜론(:)이 붙어서 표시되는데 이 값을 변경
help_text	입력에 도움이 되는 문자열을 입력 필드 밑에 표시
widget	필드가 사용할 사용자 입력 UI, 즉 위젯을 지정

• 공식문서
  • https://docs.djangoproject.com/en/2.2/ref/forms/fields/#core-field-arguments

CSS 적용

• widgets를 사용

from django import forms
from .models import Page # 사용할 모델을 가져옵니다.

class PageForm(forms.ModelForm):

    class Meta:
        model = Page # 모델 폼에서 사용할 모델과 필드를 명시합니다.
        fields = ['title', 'content', 'feeling', 'score', 'dt_created']

        widgets = {'title': forms.TextInput(attrs={'class':'title',
                                                    'placeholder':'제목을 입력하세요'}),
                    'content': forms.Textarea(attrs={'placeholder': '내용을 입력하세요'})
                    }

• forms.TextInput(attrs={'class':'title'})
  • TextInput은 속성으로 class : title을 가지게 됨

# form.css

.title {
    width: 400px;
}