본문 바로가기

Python/Django

[Django] Forms - 템플릿 렌더링

이번에는 지난 블로그에서 만든 폼을 조금 더 다듬어 보겠습니다.

 

3가지 메인 옵션에 대해서 알아보겠습니다.

form.as_p

form.field_name

for 문

 

 

rental_review.html 수정 - paragraphe 태그 옵션 사용. 

그외의 옵션 - as_ul, as_table 등 

 

<body>
    <h1>Rental Review Form PAGE</h1>
    <form action="" method="POST">
        {% csrf_token %}
        <label for="">Name: </label>
        <input type="text">
        <input type="submit" value="제출">
        <br><br><br><br>
        {{form.as_p}}   <<<=== 이부분 수정
        <br>
        <input type="submit">
    </form>

</body>

 

 

 

 

특정 폼 태그정보만 화면에 추가할 수 있다.

 

<body>
    <h1>Rental Review Form PAGE</h1>
    <form action="" method="POST">
        {% csrf_token %}
        <!-- {{form.as_p}} -->
        <br>
        {{form.first_name.label_tag}} {{form.first_name}}
        <div><p>
            {{form.last_name.label_tag}} {{form.last_name}}
        </p></div>
        <br>
        <input type="submit">
    </form>
</body>

 

 

 

이때 주의할 사항은 화면에 표시되지 않은 폼 데이터의 옵션을 아래와 같이 변경해야 한다.

 

class ReviewForm(forms.Form):
    first_name = forms.CharField(label = 'First Name', max_length=100)
    last_name = forms.CharField(label = 'Last Name', max_length=100)
    email = forms.CharField(label = 'Email', max_length=100, required=False)
    review = forms.CharField(label='Please write your review here', required=False)

 

 

for 문과 bootstrap 을 사용한 경우,

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <title>Rental Review</title>
</head>
<body>
    <h1>Rental Review Form PAGE</h1>
    <div class="container">
        <form action="" method="POST">
            {% csrf_token %}
            {% for field in form %}
                <div class="mb-3">
                    {{field.label_tag}}
                </div>
                {{field}}
            {% endfor %}
            <br>
            <input type="submit">
        </form>
    </div>
</body>
</html>