bootstrap form 按钮位置_19 表单Form教程（plotly Dash Bootstrap版）

今天第19课，本节课程主要学习Dash Bootstrap Components中的表单Form，今天的内容较为重要，学好今天的内容能为基于python的网页设计打好基础，便于网页规整化设计和显示。继续欣赏音乐《Still》。祝大家周末愉快~~~ (一)功能

使用Bootstrap的表单组件Form来控制输入组件的布局和样式。

在构建Dash应用程序时，很少使用HTML表单，而是将回调附加到输入组件。但是，Bootstrap的表单组件仍然可以是控制输入组件集合的布局的强大方法。表单Form常见的元素主要包括：文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。

(二)调用方式       

dash-bootstrap-components.Form

dash-bootstrap-components.FormGroup

dash-bootstrap-components.FormText

dash-bootstrap-components.FormFeedback

(三)Form使用层层深入      

1. 基本使用方法

import dash_bootstrap_components as dbcemail_input = dbc.FormGroup(    [        dbc.Label("Email", html_for="example-email"),        dbc.Input(type="email", id="example-email", placeholder="Enter email"),        dbc.FormText(            "Are you on email? You simply have to be these days",            color="secondary",        ),    ])password_input = dbc.FormGroup(    [        dbc.Label("Password", html_for="example-password"),        dbc.Input(            type="password",            id="example-password",            placeholder="Enter password",        ),        dbc.FormText(            "A password stops mean people taking your stuff", color="secondary"        ),    ])form = dbc.Form([email_input, password_input])

 2. 将label和输入框等在同一行显示

如果要在input之前添加一个了label标签，会导致input换行显示；如果又必须添加这样一个label标签，且不想让input换行，就需要将label标签也放在容器FormGroup中，通过设置row=True使得Label和Input内容在同一行显示。

注意：需要对Label组件设置宽度width，并将输入内容包装在Col组件中。

import dash_bootstrap_components as dbcemail_input = dbc.FormGroup(    [        dbc.Label("Email", html_for="example-email-row", width=2),        dbc.Col(            dbc.Input(                type="email", id="example-email-row", placeholder="Enter email"            ),            width=10,        ),    ],    row=True,)password_input = dbc.FormGroup(    [        dbc.Label("Password", html_for="example-password-row", width=2),        dbc.Col(            dbc.Input(                type="password",                id="example-password-row",                placeholder="Enter password",            ),            width=10,        ),    ],    row=True,)radios_input = dbc.FormGroup(    [        dbc.Label("Radios", html_for="example-radios-row", width=2),        dbc.Col(            dbc.RadioItems(                id="example-radios-row",                options=[                    {"label": "First radio", "value": 1},                    {"label": "Second radio", "value": 2},                    {                        "label": "Third disabled radio",                        "value": 3,                        "disabled": True,                    },                ],            ),            width=10,        ),    ],    row=True,)form = dbc.Form([email_input, password_input, radios_input])

3. 与栅格系统grid system结合使用 dbc. Progress (value=50, style={"height": "30px"})

import dash_bootstrap_components as dbcform = dbc.Row(    [        dbc.Col(            dbc.FormGroup(                [                    dbc.Label("Email", html_for="example-email-grid"),                    dbc.Input(                        type="email",                        id="example-email-grid",                        placeholder="Enter email",                    ),                ]            ),            width=6,        ),        dbc.Col(            dbc.FormGroup(                [                    dbc.Label("Password", html_for="example-password-grid"),                    dbc.Input(                        type="password",                        id="example-password-grid",                        placeholder="Enter password",                    ),                ]            ),            width=6,        ),    ],    form=True,)

4. 内联表单 可以将Form组件与 inline = True 一起使用，以在单个水平行上显示一系列标签，控件和按钮。使用Bootstrap的间距实用程序，如下所示，以内联形式控制组件之间的间距。 与 row=True 之间的差别： row=True ： 将Label和Input之间在同一行显示；

inline=True：将多个FormGroup包含的内容在同一行显示。

import dash_bootstrap_components as dbcform = dbc.Form(    [        dbc.FormGroup(            [                dbc.Label("Email", className="mr-2"),                dbc.Input(type="email", placeholder="Enter email"),            ],            className="mr-3",        ),        dbc.FormGroup(            [                dbc.Label("Password", className="mr-2"),                dbc.Input(type="password", placeholder="Enter password"),            ],            className="mr-3",        ),        dbc.Button("Submit", color="primary"),    ],    inline=True,)

5. 表单反馈FormFeedback使用 嵌套“progress”组件以制作带有多个进度条的进度条。在父级Progress组件上设置multi = True，在每个子级上设置bar = True 。

import dash_bootstrap_components as dbcimport dash_html_components as htmlfrom dash.dependencies import Input, Outputemail_input = html.Div(    [        dbc.FormGroup(            [                dbc.Label("Email"),                dbc.Input(id="email-input", type="email", value=""),                dbc.FormText("We only accept gmail..."),                dbc.FormFeedback(                    "That looks like a gmail address :-)", valid=True                ),                dbc.FormFeedback(                    "Sorry, we only accept gmail for some reason...",                    valid=False,                ),            ]        )    ])# --- Callbacks --- #@app.callback(    [Output("email-input", "valid"), Output("email-input", "invalid")],    [Input("email-input", "value")],)def check_validity(text):    if text:        is_gmail = text.endswith("@gmail.com")        return is_gmail, not is_gmail    return False, False

6. 与 Dash Core Components联合使用

Form和FormGroup组件也可以与dash-core-components一起使用。

import dash_bootstrap_components as dbcimport dash_core_components as dccdropdown = dbc.FormGroup(    [        dbc.Label("Dropdown", html_for="dropdown"),        dcc.Dropdown(            id="dropdown",            options=[                {"label": "Option 1", "value": 1},                {"label": "Option 2", "value": 2},            ],        ),    ])slider = dbc.FormGroup(    [        dbc.Label("Slider", html_for="slider"),        dcc.Slider(id="slider", min=0, max=10, step=0.5, value=3),    ])range_slider = dbc.FormGroup(    [        dbc.Label("RangeSlider", html_for="range-slider"),        dcc.RangeSlider(id="range-slider", min=0, max=10, value=[3, 7]),    ])form = dbc.Form([dropdown, slider, range_slider])

(四)Form本课程完整代码      

该部分视频教程的具体代码可看文末完整程序部分。

"""## 表单Form使用Bootstrap的表单组件Form来控制输入组件的布局和样式。在构建Dash应用程序时，很少使用HTML表单，而是将回调附加到输入组件。但是，Bootstrap的表单组件仍然可以是控制输入组件集合的布局的强大方法。表单Form常见的元素主要包括：文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。"""import dashimport dash_bootstrap_components as dbcimport dash_html_components as htmlfrom dash.dependencies import Input, Output, Stateapp = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])page = dbc.Container([    dbc.Row([        dbc.Col([            dbc.Form(                [                    dbc.FormGroup([                        dbc.Label('Email'),                        dbc.Col([                            dbc.Input(placeholder='Enter Email',id='input'),                            dbc.FormText('This is email!'),                            dbc.FormFeedback('You enter a right email!',valid=True),                            dbc.FormFeedback('You enter a WRONG email!', valid=False),                        ]),                    ],                    row=True),                    dbc.FormGroup([                        dbc.Label('Password'),                        dbc.Col([                            dbc.Input(placeholder='Enter password'),                            dbc.FormText('This is password!')                        ])                    ],                    row=True),                    dbc.FormGroup([                        dbc.Label('RadioItems'),                        dbc.Col([                            dbc.RadioItems(options=[                                {'label':'option1','value':1},                                {'label': 'option2', 'value': 2},                                {'label': 'option3', 'value': 3},                            ]),                            dbc.FormText('This is password!')                        ])                    ],row=True),                ]            )        ],        ),    ]),#     grid system使用方法    dbc.Row([        dbc.Col([            dbc.Form(                [                    dbc.FormGroup([                        dbc.Label('Email'),                        dbc.Col([                            dbc.Input(placeholder='Enter Email'),                            dbc.FormText('This is email!')                        ]),                    ],                    ),                    dbc.FormGroup([                        dbc.Label('Password'),                        dbc.Col([                            dbc.Input(placeholder='Enter password'),                            dbc.FormText('This is password!')                        ])                    ],                    ),                ]            )        ],        ),        dbc.Col([            dbc.Form(                [                    dbc.FormGroup([                        dbc.Label('Email'),                        dbc.Col([                            dbc.Input(placeholder='Enter Email'),                            dbc.FormText('This is email!')                        ]),                    ],                    ),                    dbc.FormGroup([                        dbc.Label('Password'),                        dbc.Col([                            dbc.Input(placeholder='Enter password'),                            dbc.FormText('This is password!')                        ])                    ],                    ),                ]            )        ],        width=5)    ]),    # inline=True使用方法    dbc.Row([        dbc.Col([            dbc.Form(                [                    dbc.FormGroup([                        dbc.Label('Email',width=1),                        dbc.Col([                            dbc.Input(placeholder='Enter Email'),                            dbc.FormText('This is email!')                        ],width=3),                    ],                        row=True),                    dbc.FormGroup([                        dbc.Label('Password',width=1),                        dbc.Col([                            dbc.Input(placeholder='Enter password'),                            dbc.FormText('This is password!')                        ],width=3)                    ],                        row=True),                    dbc.FormGroup([                        dbc.Label('RadioItems',width=1),                        dbc.Col([                            dbc.RadioItems(options=[                                {'label': 'option1', 'value': 1},                                {'label': 'option2', 'value': 2},                                {'label': 'option3', 'value': 3},                            ]),                            dbc.FormText('This is password!')],width=3)                    ], row=True),                ],                inline=True            )        ],        ),    ]),])app.layout = html.Div([page])@app.callback([Output('input','valid'),Output('input','invalid')],              [Input('input','value')])def Check_Input(text):    if text:        IFendwithgmai = text.endswith('@gmail')  # 返回值为True或False        return IFendwithgmai , not IFendwithgmai    else:        return False, Falseif __name__ == "__main__":    app.run_server(debug=True, port=8030)

---

注：相关视频教程请参见网易云课堂：https://study.163.com/course/introduction/1209894808.htm?share=2&shareId=480000002204845

---

欢迎扫码关注微信公众号(心觅空间)及加入QQ群(995019531)讨论技术细节~