Streamlit Input Widgets輸入小工具指南：掌握輸入元件、提升互動的關鍵
目錄
@Streamlit 簡介
@Streamlit Input 工具
@文字輸入小工具
@ 1. text_input
@ 2. text_area
@日期和時間小工具
@ 1. date_input
@ 2. time_input
@數字小工具：number_input
@選擇小工具
@ 1. radio
@ 2. toggle
@ 3. checkbox
@ 4. selectbox
@scroll捲軸小工具
@ 1. slider
@ 2. select_slider
@顏色選擇器
@ 1. color_picker
@小結Streamlit 簡介
我們曾經介紹過，Streamlit 是一個開放原始碼工具，使用Python 框架，是為了讓讓數據科學家和開發工程師能夠輕鬆地建立互動式網頁應用程式。使用者只需要透過簡單的 Python 程式碼，並且不需要具備深入的前端開發經驗，就可以快速的將數據分析和機器學習模型轉換成美觀的視覺化應用。這使得工程師們在展示和分享專案時變得更加直覺和便利。
Streamlit 的最大特色在於其「簡單易用」和「即時更新」的特性。只需撰寫幾行程式碼，就可以做出動態的圖表、表單和輸入小工具，並可以在瀏覽器中即時查看開發的變化，這樣的開發方式讓應用程式的建立變得更加便利。這有利於應用程式開發的快速迭代和實驗。
並且 Streamlit 支援各種資料的輸入方式，包括字串、數字、日期、時間、option選項和scroll捲軸等，這使得應用程式的使用者可以用最直覺的方式與資料進行互動。
在前一篇文章中，我們介紹過如何安裝與啟動 Streamlit 專案。在這篇文章中，我們要進一步地探討Streamlit 的各種資料的輸入方式。
Streamlit Input 工具
這部分包括了單欄與多欄的「文字輸入」工具、「日期和時間」、「數字」、「選擇」、「捲軸」以及「顏色選擇器」等工具。以下將針對各種工具逐一說明。
文字輸入小工具
這項小工具又可以分為「text_input」與「text_area」兩種。
1. text_input
text_input小工具用於接收使用者輸入的單行文字字串。使用方法非常簡單，只需在 Streamlit 程式碼中加入 st.text_input 函式即可。舉例來說：
import streamlit as st
user_input = st.text_input("請在此輸入您的名字")
st.write("您輸入的名字是：", user_input)在這個例子中，使用者可以在輸入框中輸入文字，並且可以即時的顯示輸入的內容。
輸入後，按下Enter鍵，就會在輸入匡的下方出現輸入的結果。
# 輸入密碼欄位
有時候，我們希望使用者輸入密碼才可以使用應用程式的服務。這時候也可以透過 text_input 這個工具來製作輸入匡：
st.text_input("請輸入密碼", type="password")可以看到，將 text_input作為密碼輸入時，在輸入的過程中不會顯示出密碼的內容，只會以「…」的方式顯示。
2. text_area
這個小工具與 text_input類似，但它適用於多行文字的輸入。適合用在需要收集較長文字資料的時候，例如讓使用者留言或進行評論。 text_area 的使用方法如下：
user_text = st.text_area("請輸入您的留言")
st.write("您的留言是：", user_text)使用者可以在文字區域中輸入多行文字，並且即時的顯示出這些內容。
日期和時間小工具
與日期和時間有關的小工具又可以分為date_input與time_input。以下分別就這兩項說明：
1. date_input
這個小工具可用來選日期。date_input提供了一個日曆的界面，讓使用者可以直接點選日期。使用方法如下：
date = st.date_input("選擇日期")
st.write("選擇的日期是：", date)這樣，使用者可以輕鬆的選擇並顯示出選定的日期。
選擇完畢後，即立刻在輸入匡中顯示出選定的日期。
2. time_input
而 time_input小工具則是用來選擇時間。它提供了一個時間選擇器，讓使用者可以選擇小時和分鐘。使用方法如下：
time = st.time_input("選擇時間")
st.write("選擇的時間是：", time)使用者可以透過一個下拉選單選擇時間並即時顯示所選的時間。
並於選擇完畢後，即時顯示所選的時間。
數字小工具：number_input
number_input 小工具用於接收數字的輸入。這個小工具允許使用者輸入整數或小數，並可以設定最小值和最大值。
使用方法如下：
number = st.number_input("輸入數字", min_value=0, max_value=100)
st.write("您輸入的數字是：", number)我們指定了最大值（max_value）為100，最小值（min_value）為0，使用者可以在我們指定的範圍內（0到100）輸入數字並顯示出來。
我們可以將這個工具用於輸入年齡上：
age = st.number_input("年齡", min_value=0, max_value=120)
st.write(f"您的年齡是：{age} 歲")指定最大值為120，最小值為0之後，使用者即可以在這個數值區間裡面輸入。
選擇小工具
與選項選擇有關的小工具，包括了radio、checkbox、toggle和selectbox等。以下分別針對各項小工具介紹。
1. radio
radio小工具，會提供一組單選選項，讓使用者從中擇一選擇。使用方法如下：
choice = st.radio("選擇一個選項", ("選項1", "選項2", "選項3"))
st.write("您選擇了：", choice)
使用者可以從我們提供的多個項目中選擇一個回答。並即時顯示選擇結果。
我們可以將這個radio小工具用於選擇性別，方法如下：
gender = st.radio("性別",["男","女"])
st.write("您的性別是：", gender)如此，就可以讓使用者選擇。
2. toggle
toggle小工具提供了一個 On-Off 開關，讓使用者透過切換的方式選擇。使用方法如下：
toggle = st.toggle("切換選擇")
st.write("開關狀態是：", toggle)使用者可以切換開關。即時顯示狀態。
比較常看到的例子是，將這個小工具用於切換網頁版面的「日、夜間模式」：
dark_mode = st.toggle("夜間模式")
st.write("開關狀態是：", dark_mode)結果如下：
3. checkbox
checkbox小工具提供了一個勾選選項方匡，讓使用者可以選擇是否勾選。使用方法如下：
agree = st.checkbox("我同意條款")
if agree:
st.write("謝謝您的同意！")使用者可以勾選或取消勾選，並根據狀態顯示相應的訊息。
勾選之後，在下面顯示「謝謝您的同意！」
4. selectbox
這個小工具又可以分為「單選」和「多選」的下拉選單方式。
# 單選下拉選單
selectbox小工具提供了一個下拉選單，讓使用者從中選擇一個項目。單選使用方法如下：
option = st.selectbox("選擇一個選項", ["選項1", "選項2", "選項3"])
st.write("您選擇了：", option)畫面中會出現一個下拉選單供使用者選擇：
當使用者選擇後，就可以將結果即時顯示出來：
# 多選下拉選單
另一種為多選選單，它的使用方法如下：
options = st.multiselect("選擇多個選項", ["選項1", "選項2", "選項3"])
st.write("您選擇了：", options)使用者可以從下拉選單中選擇一個或多個項目，畫面上並會顯示選擇的結果。
您可以逐一的從下拉選單中選擇項目，直到滿一為止。被選擇的項目可以即時的被顯示在畫面上。
scroll捲軸小工具
1. slider
slider小工具給我們一個捲軸，讓使用者選擇數值範圍內的一個值。使用方法如下：
value = st.slider("選擇數值", min_value=0, max_value=100, value=50)
st.write("您選擇的數值是：", value)使用者可以透過左右滑動的方式選擇數值並即時顯示選擇的結果。
2. select_slider
select_slider小工具類似於 slider，但可以設定一組離散值。使用方法如下：
option = st.select_slider("選擇一個選項", options=["選項1", "選項2", "選項3"])
st.write("您選擇了：", option)使用者可以從提供的選項中左右滑動選擇並顯示結果。
顏色選擇器
1. color_picker
color_picker小工具提供了一個顏色的選擇器，讓使用者可以從中選擇顏色。使用方法如下：
color = st.color_picker("選擇顏色", "#00f900")
st.write("您選擇的顏色是：", color)使用者可以選擇顏色並顯示所選顏色的六碼程式碼。
選擇之後，就會顯示出顏色的色碼。
小結
以上介紹了 Streamlit 中常用的各種輸入小工具，這些小工具讓使用者可以更加直覺的與應用程式互動。透過掌握這些基本的輸入小工具，可以幫助您快速建立功能強大且互動性高的應用程式。在此誠心建議大家多加練習，將這些小工具應用到自己的專案中，以充分發揮 Streamlit 的強大功能。
