--- title: "#30DaysOfStreamlit Day22 st.form" description: "この記事では、#30DaysOfStreamlitの内容の紹介を行います。\nst.form\nこのセクションでは、`st.form`の挙動について解説します。\n`st.form`は、「submit」ボタンと共に包含する要素をバッチ処理することができる機能です。" image: https://knowledge.insight-lab.co.jp/hubfs/30days_logo.png --- [![INSIGHT LAB](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png?width=400&height=110&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png) ![INSIGHT LAB](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF.png?width=400&height=110&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF.png)](https://knowledge.insight-lab.co.jp/aidx) [![お問い合わせ](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/5935783/97d2baf6-f3cd-4932-be66-900264c5d298.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/5935783/97d2baf6-f3cd-4932-be66-900264c5d298) - [AIDXナレッジ](https://knowledge.insight-lab.co.jp/aidx) ###### 3 分で読むことができます。 # [#30DaysOfStreamlit Day22 st.form](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day22-st.form) 執筆者 [Budo Ogimoto](https://knowledge.insight-lab.co.jp/aidx/author/budo) 更新日時 2023年12月19日 ###### Topics: [Python](https://knowledge.insight-lab.co.jp/aidx/tag/python) [streamlit](https://knowledge.insight-lab.co.jp/aidx/tag/streamlit) ![](https://knowledge.insight-lab.co.jp/hubfs/30days_logo.png) 目次 ## はじめに --- この記事では、#30DaysOfStreamlitの内容の紹介を行います。 #30DaysOfStreamlitについては[コチラの記事](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlitをやってみた)を参照してください。 ## st.form このセクションでは、`st.form`の挙動について解説します。 `st.form`は、「submit」ボタンと共に包含する要素をバッチ処理することができる機能です。 ユーザーは、再実行を引き起こすことなく、好きなだけ 1 つ以上のウィジェットを操作できます。 最後に、フォームの 「submit」 ボタンが押されると、フォーム内のすべてのウィジェット値が 1つのバッチで Streamlit に送信されます。 フォーム オブジェクトに要素を追加するには、この`with`表記法 (推奨) を使用することも、フォーム上でメソッドを直接呼び出すだけでオブジェクト表記法として使用することもできます。 フォームには下記の制約があります。 - 全てのフォームには`form_submit_button`が必要です - `st.button`, `st.download_button`はフォームに含むことができません - フォームの中にフォームを作成することはできません ## 構築する目標 下記の様なフォームの実装例を実装したアプリケーションを構築します。 - `with`表記法を利用したフォーム実装例 - オブジェクト表記法を利用したフォーム実装例 ## アプリケーションの構築 下記のようなPythonスクリプトを準備します。 上記のスクリプトを実行すると以下のような画面に遷移します。 ![SS00000148](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/SS00000148.jpg?width=770&height=1225&name=SS00000148.jpg) 各値を設定してSubmitを押下すると下記のような画面に遷移します。 - `with`表記法での例 ![SS00000149](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/SS00000149.jpg?width=810&height=1412&name=SS00000149.jpg) - オブジェクト表記法での例 ![SS00000151](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/SS00000151.jpg?width=780&height=1230&name=SS00000151.jpg) 一つのアプリケーションでフォームが送信されるとアプリケーション全体の値が更新されるようです。 ## コードの解説 まずは、必要なライブラリをインポートします。 また、アプリケーションのタイトルを設定します。   ヘッダーとサブヘッダーを使い、with表記法での例ということを説明する文を作成します。 そして、with表記法を使いフォームを実装します。 例として、コーヒーのオーダー用フォームを実装します。 `with`句内に選択させたい入力用ウィジェットを記述します。 そして、最後に`st.form_submit_button`を記述します。 続いて、オーダーを表示する画面を作成します。 最初のアクセスではsubmittedという変数がないので、elseに記述している挙動となります。 画面側でSubmitボタンが押下されるとsubmittedが定義される為、各情報を表示されます。 続いて、オブジェクト表記法での実装を行います。 まずは、ヘッダーにオブジェクト表記法の実装例である旨を記述します。 その後、フォーム用のインスタンスを作成し、フォーム内の要素を追加します。 最後にSubmitボタンを作成します。 あとは、設定した値を表示する処理を記述します。 個人的にはwith表記法の方が分かりやすい実装かと思います。   - [Tweet](https://twitter.com/share) ![Budo Ogimoto](https://knowledge.insight-lab.co.jp/hubfs/Budo.png) #### 執筆者 [Budo Ogimoto](https://knowledge.insight-lab.co.jp/aidx/author/budo) 柔術を操るデータサイエンティスト ###### [前の投稿](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day21-st.progress) [![](https://knowledge.insight-lab.co.jp/hubfs/30days_logo.png)](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day21-st.progress) ###### [#30DaysOfStreamlit Day21 st.progress](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day21-st.progress) ###### [次の投稿](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day23-st.experimental_get_query_params) [![](https://knowledge.insight-lab.co.jp/hubfs/30days_logo.png)](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day23-st.experimental_get_query_params) ###### [#30DaysOfStreamlit Day23 st.experimental\_get\_query\_params](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day23-st.experimental_get_query_params) ##### INFORMATION INFORMATION - [会社概要](https://www.insight-lab.co.jp/about/company.html) - [お問い合わせ](https://www.insight-lab.co.jp/contact.html) ##### MENU MENU - [AIDXナレッジ](https://knowledge.insight-lab.co.jp/aidx) - [NEWS AI SEARCH](https://solution.insight-lab.co.jp/ai/news-ai-search) [![INSIGHT LAB](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png?width=200&height=55&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png "INSIGHT LAB")](https://www.insight-lab.co.jp/) - [プライバシーポリシー](https://www.insight-lab.co.jp/privacy.html) Copyright © 2020 INSIGHT LAB, Inc.