引导垂直窗体、水平窗体、内联窗体-yiteyi-C++库

在本文中，我们将学习创建表单。几乎每个网站都使用表单，它们用于收集用户输入。

null

形式 : Bootstrap提供3种表单布局，即：

垂直窗体（默认）
水平形式
内联表单

垂直形式：

首先，我们将使用

标记初始化表单。我们将把所有标签和表单控件包装在标签

中。这是模板组件之间的最佳间距所必需的。

现在，我们可以根据需要在这些标签中设计表单。我们可以使用标签来定义输入元素的标签。请记住，标记的属性应该等于相关元素的id属性，以便将它们绑定在一起。在标签标记之后，可以输入标记，该标记指定用户可以在其中输入数据的输入字段。要在输入标记中使用的类必须是class=“form control”。还可以使用占位符属性，该属性指定描述输入字段预期值的简短提示。

例子：

html

                                 <!DOCTYPE html>                               
                                 <                                                 html                                                 lang                                                 =                                                 "en"                                                 >                               
                                 <                                                 head                                                 >                               
                                                                 <                                                 title                                                 >Bootstrap Example</                                                 title                                                 >                               
                                                                 <                                                 meta                                                 charset                                                 =                                                 "utf-8"                                                 >                               
                                                                 <                                                 meta                                                 name                                                 =                                                 "viewport"                                                 content                                                 =                                                 "width=device-width, initial-scale=1"                                                 >                               
                                                                 <                                                 link                                                 rel                                                 =                                                 "stylesheet"                                                 href                                                 =                                                 "                                   https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css                                  "                                                 >                               
                                                                 <                                                 script                                                 src                                                 =                                                 "                                   https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js                                  "                                                 ></                                                 script                                                 >                               
                                                                 <                                                 script                                                 src                                                 =                                                 "                                   https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js                                  "                                                 ></                                                 script                                                 >                               
                                 </                                                 head                                                 >                               
                                 <                                                 body                                                 >                               
                                                                 <                                                 div                                                 class                                                 =                                                 "container"                                                 style                                                 =                                                 "color:green"                                                 >                               
                                                                 <                                                 h1                                                 >GeeksforGeeks</                                                 h1                                                 >                               
                                                                 </                                                 div                                                 >                               
                                 <                                                 div                                                 class                                                 =                                                 "container"                                                 >                               
                                                                 <                                                 h4                                                 >Vertical Form</                                                 h4                                                 >                               
                                                                 <                                                 form                                                 action                                                 =                                                 ""                                                 >                               
                                                                 <                                                 div                                                 class                                                 =                                                 "form-group"                                                 >                               
                                                                 <                                                 label                                                 for                                                 =                                                 "id1"                                                 >User Name</                                                 label                                                 >                               
                                                                 <                                                 input                                                 class                                                 =                                                 "form-control"                                                 type                                                 =                                                 "text"                                                 id                                                 =                                                 "id1"                                                 placeholder                                                 =                                                 "Enter your User Name"                                                 >                               
                                                                 </                                                 div                                                 >                               
                                                                 <                                                 div                                                 class                                                 =                                                 "form-group"                                                 >                               
                                                                 <                                                 label                                                 for                                                 =                                                 "id2"                                                 >Password</                                                 label                                                 >                               
                                                                 <                                                 input                                                 class                                                 =                                                 "form-control"                                                 type                                                 =                                                 "password"                                                 id                                                 =                                                 "id2"                                                 placeholder                                                 =                                                 "Enter your password"                                                 >                               
                                                                 </                                                 div                                                 >                               
                                                                 <                                                 div                                                 class                                                 =                                                 "container"                                                 >                               
                                                                 <                                                 button                                                 type                                                 =                                                 "button"                                                 class                                                 =                                                 "btn btn-success"                                                 >Login</                                                 button                                                 >                               
                                                                 <                                                 button                                                 type                                                 =                                                 "button"                                                 class                                                 =                                                 "btn btn-secondary"                                                 >Register</                                                 button                                                 >                               
                                                                 </                                                 div                                                 >                               
                                                                 </                                                 form                                                 >                               
                                 </                                                 div                                                 >                               
                                               
                                 </                                                 body                                                 >                               
                                 </                                                 html                                                 >                               

输出： Bootstrap Buttons, Glyphicons, Tables

水平形式：

水平形式与垂直形式不仅在标记的数量上不同，而且在形式的表示上也不同。要使窗体水平，请在

元素中添加class=“form horizontal”。如果要使用元素，则必须使用class=“control label”。此外，请记住，您可以使用Bootstrap的预定义网格类在水平布局中对齐标签和表单控件组。

还可以向标签和输入字段添加特定样式。在

标记中添加任何类has warning、has success、has error等，该标记包含一个具有表单组的类，以在选中时为其提供不同的效果。

例子：

html

                                         <!DOCTYPE html>                                       
                                         <                                                             html                                                             lang                                                             =                                                             "en"                                                             >                                       
                                         <                                                             head                                                             >                                       
                                                                                 <                                                             title                                                             >Bootstrap Example</                                                             title                                                             >                                       
                                                                                 <                                                             meta                                                             charset                                                             =                                                             "utf-8"                                                             >                                       
                                                                                 <                                                             meta                                                             name                                                             =                                                             "viewport"                                                             content                                                             =                                                             "width=device-width, initial-scale=1"                                                             >                                       
                                                                                 <                                                             link                                                             rel                                                             =                                                             "stylesheet"                                                             href                                                             =                                                             "                                           https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css                                          "                                                             >                                       
                                                                                 <                                                             script                                                             src                                                             =                                                             "                                           https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js                                          "                                                             ></                                                             script                                                             >                                       
                                                                                 <                                                             script                                                             src                                                             =                                                             "                                           https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js                                          "                                                             ></                                                             script                                                             >                                       
                                         </                                                             head                                                             >                                       
                                         <                                                             body                                                             >                                       
                                                                                 <                                                             div                                                             class                                                             =                                                             "container"                                                             style                                                             =                                                             "color:green"                                                             >                                       
                                                                                 <                                                             h1                                                             >GeeksforGeeks</                                                             h1                                                             >                                       
                                                                                 </                                                             div                                                             >                                       
                                         <                                                             div                                                             class                                                             =                                                             "container"                                                             >                                       
                                                                                 <                                                             h4                                                             >Horizontal Form</                                                             h4                                                             >                                       
                                                                                 <                                                             form                                                             action                                                             =                                                             ""                                                             class                                                             =                                                             "form-horizontal"                                                             >                                       
                                                                                 <                                                             div                                                             class                                                             =                                                             "form-group has-success"                                                             >                                       
                                                                                 <                                                             label                                                             class                                                             =                                                             "control-label col-sm-2"                                                             for                                                             =                                                             "id1"                                                             >Username</                                                             label                                                             >                                       
                                                                                 <                                                             div                                                             class                                                             =                                                             "col-sm-6"                                                             >                                       
                                                                                 <                                                             input                                                             class                                                             =                                                             "form-control"                                                             type                                                             =                                                             "text"                                                             id                                                             =                                                             "id1"                                                             placeholder                                                             =                                                             "Enter your User Name"                                                             >                                       
                                                                                 </                                                             div                                                             >                                       
                                                                                 </                                                             div                                                             >                                       
                                                                                 <                                                             div                                                             class                                                             =                                                             "form-group has-success"                                                             >                                       
                                                                                 <                                                             label                                                             class                                                             =                                                             "control-label col-sm-2"                                                             for                                                             =                                                             "id2"                                                             >Password</                                                             label                                                             >                                       
                                                                                 <                                                             div                                                             class                                                             =                                                             "col-sm-6"                                                             >                                       
                                                                                 <                                                             input                                                             class                                                             =                                                             "form-control"                                                             type                                                             =                                                             "password"                                                             id                                                             =                                                             "id2"                                                             placeholder                                                             =                                                             "Enter your password"                                                             >                                       
                                                                                 </                                                             div                                                             >                                       
                                                                                 </                                                             div                                                             >                                       
                                                                                 <                                                             div                                                             class                                                             =                                                             "container"                                                             >                                       
                                                                                 <                                                             button                                                             type                                                             =                                                             "button"                                                             class                                                             =                                                             "btn btn-success"                                                             >Login</                                                             button                                                             >                                       
                                                                                 <                                                             button                                                             type                                                             =                                                             "button"                                                             class                                                             =                                                             "btn btn-secondary"                                                             >Register</                                                             button                                                             >                                       
                                                                                 <                                                             label                                                             >                                       
                                                                                 <                                                             input                                                             type                                                             =                                                             "checkbox"                                                             >Remember me                                       
                                                                                 </                                                             label                                                             >                                       
                                                                                 </                                                             div                                                             >                                       
                                                                                 </                                                             form                                                             >                                       
                                         </                                                             div                                                             >                                       
                                                           
                                         </                                                             body                                                             >                                       
                                         </                                                             html                                                             >                                       

输出： Bootstrap Buttons, Glyphicons, Tables

内联表单：

顾名思义，在内联形式中，所有元素都是内联的、左对齐的，标签是并排的。只需在表单元素中添加class=“form inline”。

使用class=“sr only”可以隐藏内联表单的标签，这有时可能会导致问题。

也可以在表单中添加图标。为此，您必须添加class=“has feedback”，并在标记之后添加glyphicon所在的span标记。还记得添加表单控件提要作为span标记的类吗。

例子：

html

                                           <!DOCTYPE html>                                         
                                           <                                                                html                                                                lang                                                                =                                                                "en"                                                                >                                         
                                           <                                                                head                                                                >                                         
                                                                                     <                                                                title                                                                >Bootstrap Example</                                                                title                                                                >                                         
                                                                                     <                                                                meta                                                                charset                                                                =                                                                "utf-8"                                                                >                                         
                                                                                     <                                                                meta                                                                name                                                                =                                                                "viewport"                                                                content                                                                =                                                                "width=device-width, initial-scale=1"                                                                >                                         
                                                                                     <                                                                link                                                                rel                                                                =                                                                "stylesheet"                                                                href                                                                =                                                                "                                             https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css                                            "                                                                >                                         
                                                                                     <                                                                script                                                                src                                                                =                                                                "                                             https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js                                            "                                                                ></                                                                script                                                                >                                         
                                                                                     <                                                                script                                                                src                                                                =                                                                "                                             https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js                                            "                                                                ></                                                                script                                                                >                                         
                                           </                                                                head                                                                >                                         
                                           <                                                                body                                                                >                                         
                                                                                     <                                                                div                                                                class                                                                =                                                                "container"                                                                style                                                                =                                                                "color:green"                                                                >                                         
                                                                                     <                                                                h1                                                                >GeeksforGeeks</                                                                h1                                                                >                                         
                                                                                     </                                                                div                                                                >                                         
                                           <                                                                div                                                                class                                                                =                                                                "container"                                                                >                                         
                                                                                     <                                                                h4                                                                >Inline Form</                                                                h4                                                                >                                         
                                                                                     <                                                                br                                                                >                                         
                                                                                     <                                                                form                                                                class                                                                =                                                                "form-inline"                                                                action                                                                =                                                                "/action_page.php"                                                                >                                         
                                                                                     <                                                                label                                                                for                                                                =                                                                "email"                                                                >Username:</                                                                label                                                                >                                         
                                                                                     <                                                                input                                                                type                                                                =                                                                "email"                                                                class                                                                =                                                                "form-control"                                                                id                                                                =                                                                "email"                                                                placeholder                                                                =                                                                "Enter Username"                                                                name                                                                =                                                                "email"                                                                >                                         
                                                                                     <                                                                label                                                                for                                                                =                                                                "pwd"                                                                >Password:</                                                                label                                                                >                                         
                                                                                     <                                                                input                                                                type                                                                =                                                                "password"                                                                class                                                                =                                                                "form-control"                                                                id                                                                =                                                                "pwd"                                                                placeholder                                                                =                                                                "Enter password"                                                                name                                                                =                                                                "pswd"                                                                >                                         
                                                                                     <                                                                button                                                                type                                                                =                                                                "button"                                                                class                                                                =                                                                "btn btn-danger"                                                                >Login</                                                                button                                                                >                                         
                                                                                     <                                                                button                                                                type                                                                =                                                                "button"                                                                class                                                                =                                                                "btn btn-secondary"                                                                >Register</                                                                button                                                                >                                         
                                                                                     </                                                                form                                                                >                                         
                                                              
                                                              
                                           </                                                                div                                                                >                                         
                                                              
                                           </                                                                body                                                                >                                         
                                           </                                                                html                                                                >                                         

输出： Bootstrap Buttons, Glyphicons, Tables

支持的浏览器：

谷歌浏览器
Internet Explorer
火狐
歌剧
游猎

文章作者哈希特·古普塔 : 总部位于加尔各答的Harshit Gupta是一位活跃的博主，对撰写时事、技术博客、故事和个人生活经历有着浓厚的兴趣。除了热爱写作，他还喜欢编码和跳舞。目前在IIEST学习，他是Geeksforgeks的活跃博客撰稿人。

如果你也想在这里展示你的博客，请参见吉微博在Geeksforgek上写客博。