POSTするHTMLフォームを構築する
actionの送信先をルートにしたフォームを作成します
「POSTするHTMLフォームを構築する」はCoddyKit上の無料Flask Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFlask Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Flask Academyコースには全4レッスンが含まれています。
フォームが重要な理由
HTMLのformは、ブラウザーが入力内容を集めてサーバーに渡すための仕組みです。ほぼすべてのユーザー操作における入り口となります。📝
form要素
すべてはformタグから始まります。ブラウザーはその中にあるフィールドをまとめ、ユーザーが送信すると一緒に送信します。
<form>
<!-- fields go here -->
</form>actionで送信先を指定する
action属性には、データを受け取るURLを指定します。空にすると、フォームが置かれている同じページに送信します。
<form action="/signup">methodを選ぶ
methodをpostに設定すると、値はURLではなくリクエストボディに送られます。これによりフォームデータが整理され、ブラウザーの履歴にも残りません。
<form action="/signup" method="post">すべてのフィールドに名前を付ける
各入力にはname属性が必要です。その名前が、サーバー側で値を探すときにFlaskが使うキーになります。
<input type="text" name="username">送信ボタンを追加する
submitボタンが送信を開始します。クリックすると、ブラウザーは名前付きフィールドを集め、action URLにリクエストを送ります。
<button type="submit">Sign up</button>ルートのメソッドを一致させる
受け取るルートではPOSTを許可する必要があります。methodsに指定しないと、Flaskは405を返し、フォームデータは届きません。
@app.route("/signup", methods=["GET", "POST"])
def signup():
...request.formから値を読み取る
サーバー側では、送信されたフィールドはrequest.formに格納されます。これは、HTMLで定義した各入力のnameをキーとする辞書に似たオブジェクトです。
username = request.form["username"]GETでフォームを表示する
リクエストがGETの場合は、空のフォームを表示するページをrenderするだけです。これでユーザーが入力できるようになります。
if request.method == "GET":
return render_template("signup.html")POST分岐を処理する
メソッドがPOSTの場合は、フィールドを読み取り、それに応じて処理します。1つのviewでフォームの表示と送信のprocessを両方行えます。
if request.method == "POST":
name = request.form["username"]完全なミニフォーム
フォームを組み立て、/signupにPOSTし、ユーザーに挨拶するviewを作成します。これが数行で実現する完全なround tripです。
@app.route("/signup", methods=["GET", "POST"])
def signup():
if request.method == "POST":
return "Hi " + request.form["username"]
return render_template("signup.html")簡単な確認
フォームが実際にPOSTするために必要なものを確認しましょう。
まとめ：フォームのPOST
formにactionとpostメソッドを設定し、フィールドに名前を付け、ルートでPOSTを許可し、request.formから値を読み取りました。🎉
AI チューターと学ぶ Python — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「POSTするHTMLフォームを構築する」レッスンは無料ですか？
はい。「POSTするHTMLフォームを構築する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Flask Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Flask Academyコースには全4レッスンが含まれています。
「POSTするHTMLフォームを構築する」で何を学びますか？
actionの送信先をルートにしたフォームを作成します ブラウザで直接実行するハンズオンコードでFlask Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Flask Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFlask Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「POSTするHTMLフォームを構築する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFlask Academyレッスンでコードを書いて実行できますか？
はい。すべてのFlask Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- POSTするHTMLフォームを構築する
- クエリパラメーターを読み取りデフォルト値を設定する
- 必須フィールドを手動で検証する
- POST後にリダイレクトする（PRGパターン）