簡介：

今天的文章內容非常精彩實用，最后一部分會教大家純Python編寫出下面這樣炫酷的應用（動圖錄制出來太大，所以壓縮完之后看起來有點卡，但實際運行非常流暢推薦大家親自運行體驗。

正文：

今天的教程我們將繼續來學習Dash中有關表單控件的一些高級知識，get到這些知識之后，我們就有能力開發出更加完善和先進的網頁表單功能。

2 Dash表單控件進階

在正式的開發網頁表單時，不僅僅是將表單控件排列擺放出來那么簡單隨意，我們往往需要為控件添置一些補充內容，從而更好地引導用戶使用它們，或是擴充出更多功能，這在Dash中我們可以借助dash_bootstrap_components的力量：

2.1 利用Form()、FormGroup()更好地組織表單

dash_bootstrap_components中的Form()與FormGroup()被設計用于更快捷地排布我們的表單控件，使用邏輯是先用FormGroup()組織好每一個表單控件，再將若干個FormGroup()形成的列表作為Form()的children即可，從下面這個簡單的例子出發：

?

app1.py

? import?dash import?dash_html_components?as?html import?dash_bootstrap_components?as?dbcapp?=?dash.Dash(__name__)app.layout?=?html.Div(dbc.Container(dbc.Form([dbc.FormGroup([dbc.Label("用戶名",?html_for="username"),dbc.Input(id="username",?placeholder="請輸入用戶名",?autoComplete='off')]),dbc.FormGroup([dbc.Label("賬號密碼",?html_for="password"),dbc.Input(type="password",id="password",placeholder="請輸入密碼",),dbc.FormText("密碼必須同時包含大寫字母、小寫字母和數字！",?color="secondary"),]),dbc.FormGroup([dbc.Button('注?冊')])]),style={'margin-top':?'200px','max-width':?'400px'}) )if?__name__?==?'__main__':app.run_server(debug=True)

可以看到，在上面例子中的網頁表單，共包含了兩個輸入框和一個按鈕共三個控件，通過將控件組織在FormGroup()+Form()的結構中，使得這些控件在布局上自成一體非常方便。

相信你也注意到我們有些FormGroup()中除了控件自身，還添置了一些額外的輔助性質的部件，常用的有：

• 「dbc.Label()」

利用dbc.Label()部件，我們可以在對應控件之前添加說明文字，利用html_for參數可為其綁定具有某個id的控件，利用color參數可以快捷修改其顏色；

• 「dbc.FormText()」

利用dbc.FormText()可以在表單控件之后為其添加格式美觀的說明文字；

• 「dbc.FormFeedback()」

dbc.FormFeedback()的作用比較有意思，它可以幫助我們簡化對表單控件輸入內容的驗證過程，其參數valid同之前介紹過的Input()部件的valid參數，只不過這里我們在同一個FormGroup()中為指定表單控件添置valid參數相反的兩種預設的FormFeedback()內容部件，接著只需要寫個回調關聯控件自身即可：

?

app2.py

? import?dash import?dash_html_components?as?html import?dash_bootstrap_components?as?dbc from?dash.dependencies?import?Input,?Outputapp?=?dash.Dash(__name__)app.layout?=?html.Div(dbc.Container(dbc.Form([dbc.FormGroup([dbc.Label("賬號密碼",?html_for="password"),dbc.Input(id="password",placeholder="請輸入密碼",autoComplete='off'),dbc.FormText("密碼至少同時包含大寫字母、小寫字母和數字！",?color="secondary"),dbc.FormFeedback("密碼格式滿足要求！",?valid=True),dbc.FormFeedback("密碼格式不滿足要求！",valid=False,),])]),style={'margin-top':?'200px','max-width':?'400px'}) )@app.callback([Output('password',?'valid'),Output('password',?'invalid')],Input('password',?'value') ) def?check_password_format(value):import?reif?value:#?檢查是否滿足密碼格式要求if?all([re.search('[a-z]',?value),re.search('[A-Z]',?value),re.search('[0-9]',?value),value.__len__()?!=?0]):return?True,?Falseelse:return?False,?Truereturn?dash.no_updateif?__name__?==?'__main__':app.run_server(debug=True)

2.2 利用InputGroup()為表單控件添加說明

除了前面介紹的利用dbc.FormText()等部件為對應的表單控件生成外部說明文字之外，dash_bootstrap_components還提供了基于InputGroup()的一系列部件，使得我們可以方便地創建出與控件本身渾然一體的說明內容：

?

app3.py

? import?dash import?dash_bootstrap_components?as?dbc import?dash_html_components?as?htmlapp?=?dash.Dash(__name__)app.layout?=?html.Div(dbc.Container([dbc.InputGroup([dbc.InputGroupAddon("https://www.cnblogs.com/",?addon_type="prepend"),dbc.Input(placeholder="輸入博客園用戶名")]),html.Br(),dbc.InputGroup([dbc.Input(placeholder="輸入qq郵箱"),dbc.InputGroupAddon("@qq.com",?addon_type="append")])],style={'margin-top':?'200px','max-width':?'400px'}) )if?__name__?==?'__main__':app.run_server(debug=True)

效果如下，通過InputGroupAddon()可以很方便地為輸入控件添加前綴或后綴說明：

3 動手寫一個英雄聯盟英雄資料查看器！

有了今天的知識內容基礎，加上之前教程內容的鋪墊，我們可以開始用Dash書寫一些形式更加豐富多樣的web應用，比如一個「在線英雄聯盟英雄資料查看器」，后臺通過爬取LOL官網的實時數據，實現全英雄資料查詢，先來一睹效果如何吧~

可以看到效果非常不錯，并且純Python編寫，下面我大致介紹一下整體思路：

1.「抓包」LOL官網，爬取全英雄名稱與id信息，并繼續抓包找到傳遞每個英雄單獨詳細信息的異步請求；

2.利用今天所學的Form()和FormGroup()輕松搭建出界面上方的三個控件；

3.編寫回調，基于用戶選擇內容，以及「查詢」按鈕的點擊情況，來異步渲染出下方Tabs()+Tab()區域內容，其中大量使用到列表推導非常的方便；

4.最后「皮膚一覽」區域的輪播圖片結合了bootstrap的知識，也是個非常有用的技巧！

結尾：

限于篇幅，此處并沒有直接放出全部代碼

最后完整代碼已經打包整理好了，有需要的小伙伴，可以點擊這行字體，要么私信小編！

總結

以上是生活随笔為你收集整理的炫酷，纯Python开发LOL英雄信息查询平台的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。