Flask Academy · レッスン

フォームをレンダリングして送信する

テンプレートにフィールドを表示し、送信を処理します

「フォームをレンダリングして送信する」はCoddyKit上の無料Flask Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFlask Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Flask Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

From Class to Page

A form class is useless until a user can see it. Now you will render those fields into HTML and accept the submission back. 🖋️

Pass the Form to the Template

Create the form in your view and hand it to render_template. The template gets a live object full of fields it can draw.

form = LoginForm()
return render_template('login.html', form=form)

Open the Form Tag

In Jinja, start with an HTML form tag set to method post. That tells the browser to send field values in the request body.

<form method="post">
  ...
</form>

Render the Hidden Tag

Call form.hidden_tag() first inside the form. It drops in the CSRF token your post will need to be accepted.

<form method="post">
  {{ form.hidden_tag() }}
</form>

Draw a Field

Each field renders itself when you call it. Use field.label for the text and the field itself for the input element.

{{ form.username.label }}
{{ form.username() }}

Pass HTML Attributes

Calling a field accepts keyword arguments that become HTML attributes. Add a class or placeholder right from the template.

{{ form.username(class="input", placeholder="Your name") }}

Render the Submit Button

The submit field draws the button. Calling form.submit() produces the input that posts the whole form.

{{ form.submit() }}

Allow POST in the Route

By default a route only answers GET. List methods so the same view can serve the page and receive the post.

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()

Read Submitted Data

After a post, each field exposes a .data attribute holding the typed value, already coerced to the right Python type.

username = form.username.data
password = form.password.data

Auto-Populate on Reload

Flask-WTF fills fields from the request automatically. If you re-render after a post, the user's input stays in place.

form = LoginForm()  # picks up posted data on POST

One Template, Both Verbs

A single view handles GET and POST: build the form, process it on post, and re-render the same page otherwise.

form = LoginForm()
if form.is_submitted():
    pass  # handle data
return render_template('login.html', form=form)

Quick Check

What must you render inside the form to include the CSRF token?

Recap

You rendered fields with labels and attributes, added hidden_tag for CSRF, allowed POST, and read values from each field's .data. 🎉

よくある質問

「フォームをレンダリングして送信する」レッスンは無料ですか？

はい。「フォームをレンダリングして送信する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Flask Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Flask Academyコースには全4レッスンが含まれています。

「フォームをレンダリングして送信する」で何を学びますか？

テンプレートにフィールドを表示し、送信を処理しますブラウザで直接実行するハンズオンコードでFlask Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Flask Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFlask Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「フォームをレンダリングして送信する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFlask Academyレッスンでコードを書いて実行できますか？

はい。すべてのFlask Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Flask Academyに戻る