这是我的系列教程Python+Dash快速web应用开发的第九期，在之前三期的教程中，我们针对Dash中经常会用到的一些静态部件进行了较为详细的介绍，从而get到在Dash应用中组织静态内容的常用方法。
而从今天的教程开始，我将带大家来认识和学习Dash生态中非常实用的一些交互式部件，配合回调函数，可以帮助我们构建一个形式丰富的可接受输入，并反馈输出的交互式应用，今天要介绍的交互部件为表单输入类部件的基础知识，下面来学习吧~
交互部件跟之前介绍的一系列静态部件的区别在于它们不仅具有供用户交互操作的特点，还承担了接受用户输入，并传递这些输入参数的作用。而网页开发中，表单输入类部件则是交互部件中最常用到的。
在Dash生态中常用到的表单输入类交互部件有：
2.1 输入框部件Input()其实在之前的教程内容中我们已经使用过很多次输入框部件Input()了，而我比较推荐使用的是dash_bootstrap_components中封装的Input()，它相较于dash_core_components中自带的Input()拥有更多特性。
除了几乎所有部件都具有的id、className以及style参数之外，Input()中还有一个特殊的参数type，它的不同取值从根本上奠定了Input()的角色，常用的有：
text、password、search
当Input()的type参数取值为'text'、'password'以及'search'之一时，它分别扮演文本输入框、密码输入框以及搜索框等角色，也拥有了一些特别的常用参数&属性：
value属性对应它当前的输入值；
placeholder用于设置未输入时输入框内的提示文字；
maxLength用于设置最多可输入的字符数量；
n_submit用于记录光标在输入框内部时键盘Enter键被点按的次数；
debounce设置为True时会强制每次用户按下Enter键或点击其他部件时才同步value值给后台Dash服务。
valid和invalid参数都接受Bool型参数，分别用来控制输入框显示正确状态以及错误状态，我们可以在检查用户名、密码等是否正确时通过回调输出设置这些参数为True来告知用户相关提示信息。
我们来通过下面的示例来直观感受这些特性：
app1.py
import dash import dash_bootstrap_components as dbc import dash_html_components as html from dash.dependencies import Input, Output app = dash.Dash(__name__) app.layout = html.Div( dbc.Container( [ dbc.Input(id='input-text', placeholder='text模式，长度限制4', type='text', maxLength=4, style={'width': '300px'}), html.P(id='output-text'), dbc.Input(id='input-password', placeholder='password模式，绑定Enter键', type='password', style={'width': '300px'}, debounce=True), html.P(id='output-password'), dbc.Input(id='input-search', placeholder='search模式，可快速清除内容', type='search', style={'width': '300px'}), html.P(id='output-search'), ], style={'margin-top': '100px'} ) ) @app.callback( Output('output-text', 'children'), Input('input-text', 'value') ) def output_text(value): return value @app.callback( Output('output-password', 'children'), [Input('input-password', 'value'), Input('input-password', 'n_submit')] ) def output_password(value, n_submit): if value: return '密码为：'+value+' '+f'第{n_submit}次按下Enter' return dash.no_update if __name__ == '__main__': app.run_server(debug=True)number、range
当Input()部件的type属性设置为'number'时，它便摇身一变成了数值输入框，并拥有了一些特殊的参数&属性：
min与max参数用来约束数值输入框的输入值上下限；
step参数用来设定数值输入框右侧上下箭头点按一次后数值变化的步长
而当type设置为range时就更有意思了，我们的Input()这时变成了一个滑杆，也是通过上述三个参数来限制范围和拖动的步长值。
app2.py
import dash import dash_bootstrap_components as dbc import dash_html_components as html from dash.dependencies import Input, Output app = dash.Dash(__name__) app.layout = html.Div( dbc.Container( [ dbc.Input(id='input-number', placeholder='number模式', type='number', min=0, max=100, step=0.5, style={'width': '300px'}), html.P(id='output-number'), dbc.Input(id='input-range', placeholder='range模式', type='range', style={'width': '300px'}, min=0, max=100, step=10,), html.P(id='output-range') ], style={'margin-top': '100px'} ) ) @app.callback( Output('output-number', 'children'), Input('input-number', 'value') ) def output_number(value): return value @app.callback( Output('output-range', 'children'), Input('input-range', 'value') ) def output_range(value): return value if __name__ == '__main__': app.run_server(debug=True)接下来我们来深入学习之前也使用过很多次的下拉选择部件Dropdown()，直接使用dash_core_components中的Dropdown()即可，它的主要属性&参数有：