首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

对于Bootstrap模式中的表单,提交按钮应该放在哪里?

在Bootstrap模式中,提交按钮应该放在表单的底部。具体来说,可以将提交按钮放在表单的最后一个表单组件之后,并且使用Bootstrap的样式类btnbtn-primary来设置按钮的样式。此外,可以使用form-group类来包裹按钮,以保持整齐的表单布局。

以下是一个示例代码:

代码语言:txt
复制
<form>
  <div class="form-group">
    <label for="exampleInputEmail">Email地址</label>
    <input type="email" class="form-control" id="exampleInputEmail" placeholder="请输入您的邮箱地址">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword" placeholder="请输入密码">
  </div>
  
  <!-- 提交按钮 -->
  <div class="form-group">
    <button type="submit" class="btn btn-primary">提交</button>
  </div>
</form>

推荐的腾讯云相关产品:腾讯云云服务器(CVM),详情请参考腾讯云云服务器

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 表单

使用ngSubmit处理表单提交。 禁用窗体提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单新项目。...hero-form@Component选择器值意味着您可以使用元素将此表单放在父模板。 templateUrl属性指向模板HTML单独文件(您将很快创建)。...点击清除按钮。 文本字段变为空白,如果您更改了power,它将恢复为默认值。 用ngSubmit提交表单 用户应该能够在填写表单提交这个表单。...表单底部Submit按钮本身不做任何事情,但是由于它类型(type =“submit”),它会触发一个表单提交表单提交目前是无用。...提交标志变为真,表格消失。 您将看到表格显示英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交标志。 当您单击编辑按钮时,该表消失,并且可编辑表单重新出现。

17.5K30

Jump Start Bootstrap 第3章

Navbar(导航条) Navbar是最有趣Bootstrap组件;但对于新手,不容易掌握;它带来了很多挑战,比如将头部和其余部分保持一致;正确地对齐链接、搜索栏和导航栏下拉菜单会使工作变得更加困难...首先,我们建立一个,并包含两个类”navbar”和”navbar-default”;这些类对于Bootstrap非常重要,因为它们确定了在哪里应用导航条和特效: <div class="navbar...在这代码<em>中</em>,我们放置了一个包含”navbar-toggle”<em>的</em><em>按钮</em>,它被<em>Bootstrap</em>用来激活导航条<em>的</em>功能切换;它<em>应该</em>包含两个data-*类型<em>的</em>属性:data-toggle和data-target;...让我们给<em>表单</em>添加电子邮件、电话号码和文本块、<em>提交</em><em>按钮</em>。...为了复选框和它旁边<em>的</em>文本<em>的</em>正确对齐,您<em>应该</em>将它们都封装在一个用于复选框<em>的</em>div<em>中</em>;在这种情况下,您还<em>应该</em>将输入元素放入标签元素<em>中</em>,这样就可以正确地映射到相应<em>的</em>输入元素。

13.9K20
  • Laravel5.2之Validator

    引言: Laravel提供了Validator模块,可解决表单提交验证等一些需求,并且可以在视图View显示错误验证信息,交互还是很友好。注明:作者水平有限,有错误或建议请指正,轻拍。...这个路由,其中XXX为你host,可以是虚拟host也可以是你共有域名,则表单提交页面为: 3、写表单提交控制器 然后写上表单提交方法postValidator: public function...; } 填写表单,name="name"和age="age",点击提交按钮,没有打印"form post success!!!"...; } 不填写输入直接提交表单,错误信息显示: 或者 (三)、定制一个表单请求类,把验证规则从控制抽取出来 有时候,把验证规则逻辑单独放在一个类里,使得控制器代码更加简约...rules()方法里主要写表单验证规则,在这里把控制器postValidator()方法规则抽取出来放在这里: return [ 'person.*.name

    13.3K31

    联系我们吧 - 12个联系我们表单和页面设计赏析和学习

    Contact Form 15 特色: 谷歌地图背景 简洁精致标题 自定义样式提交按钮 CSS3和HTML5技术 优秀配色方案 该模板是一个基于CSS3和HTML5简易联系表格,可以在任何不同行业网站上使用...Contact Form v10 特色: 纯色按钮 自定义样式提交按钮 大文本框 完全响应设计 圆边框 该模板是一个简易免费HTML5联系表单模板。...Bootstrap 3 contact form 特色: HTML代码 视频演示 定制/使用指南 CSS样式 jQuery表单提交 表格验证 服务器端处理 图像背景 Bootstrap 3联系表单是一个完全响应网站联系页面...联系表单HTML / CSS模板 特色: 自定义样式提交按钮 一致动画 交互式页面设计 图标+文字设计 HTML和CSS模板 背景大图 联系表格HTML / CSS模板是另一个出自reusableforms.com...对于大多数企业来说,表单显得有点冗长,但对于需要运行各种背景调查企业而言,表单字段可能是帮助他们查询信息必要条件。 ?

    6.3K30

    6.HTML输入表单标签元素介绍

    HTML5 不支持 0x00 表单标签元素 form 标签 描述: 表单是一个包含表单元素区域,表单元素是允许用户在表单输入内容,其包含 文本框、文本域(textarea)、按钮、下拉列表、单选框...(radio-buttons)、复选框(checkboxes)等元素都要放在form标签里面或者进行formid值调用,否则提交数据到不了后端。...Get 请求:用于没有敏感信息,且少量数据提交,其表单数据在页面地址栏是可见,例如 action page.php?...formnovalidate 属性: 带有两个提交按钮表单(进行验证或不进行验证),第一个提交按钮提交数据时带有默认表单验证,第二个提交按钮提交数据时不进行表单验证。...formtarget 属性: 表示接收提交表单后在哪里显示响应(_self,_top,_blank,_parent) 温馨提示: 请始终为 元素规定 type 属性 (三种类型),

    4.6K10

    Django快速入门——投票程序(4,6)表单&界面、风格

    这意味着,当有人选择一个单选按钮提交表单提交时,它将发送一个POST数据 choice=# ,其中#为选择ChoiceID。这是 HTML表单基本概念。...简而言之,所有针对内部URLPOST表单应该使用 {% csrf_token %}模板标签。 现在,让我们来创建一个Django视图来处理提交数据。...它需要我们给出我们想要跳转视图名字和该视图所对应 URL 模式需要给该视图提供参数。...如果你提交时没有选择任何 Choice,你应该看到错误信息。 我们 vote() 视图代码有一个小问题。...对于小项目来说,这个问题没什么大不了,因为你可以把这些静态文件随便放在哪,只要服务程序能够找到它们就行。

    25220

    41. Vue组件案例-评论列表

    编写这个案例步骤大致如下: 编写一个基本样式页面,页面内容有两部分:提交评论信息表单、展示评论信息列表 那么「提交评论信息表单」可以写为一个子组件,而「评论信息列表」为父组件 给「提交评论信息表单」...-- 提交评论按钮 --> ...2.抽取评论内容作为子组件 上面抽取添加评论内容为一个组件之后,下面来在父组件中使用子组件,如下: 浏览器显示如下: 那么组件显示成功之后,下面就应该实现一下添加评论内容功能。...4.使用v-mode设置评论者以及评论内容 5.设置提交按钮click事件,打印评论数据 在浏览器查看一下打印出来数据,如下: 已经可以获取到数据了,下面将其进行存储。...8.在父组件编写刷新列表方法reload_list(),提供子组件进行调用 在浏览器点击提交按钮,查看是否触发父组件reload_list方法,如下: 好了,到这里可以执行父组件刷新列表方法了

    1.9K10

    【Java 进阶篇】深入了解 Bootstrap 插件

    您还可以更改选项卡样式、内容和切换效果,以满足您项目需求。 Bootstrap 表单验证 表单验证是一个重要前端功能,用于确保用户在提交表单时提供有效数据。...:这是表单每个表单组,包含一个标签和一个输入字段。 :这是表单标签,用于描述输入字段用途。...提交:这是提交按钮,用户可以点击它以提交表单。...这个基本表单验证结构包含了文本输入字段和必填字段。如果用户尝试提交空值,浏览器将显示验证错误消息。 自定义表单验证 表单验证可以根据不同需求进行自定义。...总结 在本博客,我们深入了解了 Bootstrap 插件,涵盖了轮播、模态框、下拉菜单、标签页和表单验证等常见插件。我们了解了它们基本结构以及如何自定义它们以满足项目需求。

    24830

    扒一扒使用boostrap-fileinput上传插件遇到坑,Bootstrap-fileinput上传插件使用详解,「建议收藏」

    由于公司项目的需求,需要实现动植物名录添加,包括姓名等信息和图片等,需要使用bootstrap-fileinput上传插件,在提交添加界面表单数据同时上传一张或者多张图片,并将上传图片保存到本地磁盘...(本文是f:盘目录下),在在实现时候,不适用bootstrap-fileinput上传插件本身上传按钮(因为本身按钮只能上传图片),需要点击提交,将表单其他信息和图片一起提交到后台。...实现思路:原来我思路是不使用插件上传按钮,而自己通过js将插件里面的多文件与表单一起提交,但是到后台只能获取到最后一个文件,我不是文件数组。...,实现实路是,先点击提交,通过ajax提交表单信息,在提交成功success响应方法,触发图片上传方法。...+msg); }); } 3.提交按钮点击事件。 //新增鱼类名录模态框提交按钮点击事件。

    3.3K20

    43. Vue组件案例-评论列表

    编写这个案例步骤大致如下: 编写一个基本样式页面,页面内容有两部分:提交评论信息表单、展示评论信息列表 那么提交评论信息表单可以写为一个子组件,而评论信息列表为父组件 给提交评论信息表单将子组件评论内容传递到父组件评论信息列表...-- 提交评论按钮 --> ...那么组件显示成功之后,下面就应该实现一下添加评论内容功能。...5.设置提交按钮click事件,打印评论数据 ? 在浏览器查看一下打印出来数据,如下: ? 已经可以获取到数据了,下面将其进行存储。...在浏览器点击提交按钮,查看是否触发父组件reload_list方法,如下: ? 好了,到这里可以执行父组件刷新列表方法了,那么下面只要完善刷新列表方法,对数据进行刷新即可。

    2.1K30

    DjangoBlog|12 博客文章删除功能(优化版)

    -- 添加csrf_token,防止黑客攻击,获取表单提交内容 csrf Cross Site Request Forgery)攻击 跨站请求伪造攻击...类型按钮/开关, data-bs-target="#exampleModal",其中exampleModal为我们设置Modalid,用于指示这个按钮是对应哪个Modal。...:弹框标题(modal-header)、主体内容(modal-body)、底部内容(odal-footer),底部我们设置了两个按钮,一个是取消,一个是删除,其中删除操作是放在了Post表单里面,并设置了...,从上一节跳转页面删除,变成了弹框删除,效果如下: 删除博客弹框模式演示 踩坑 替换成Bootstrap弹框模块Live demo后,点击删除按钮无法弹出弹框?...,raphael.js是一个可以渲染可缩放矢量图形 (SVG) js库,这个被引入本来是django-mdeditor渲染md内容用,暂时不知道为什么会和Bootstrapmodal冲突,按上面修改就可以解决问题

    76720

    【HTML】:编码规范

    表单 5.1. 控件标题 5.2. 按钮 1. 前言 本文档目标是使HTML代码风格保持一致,容易被理解和被维护 2. 通用 2.1....DOCTYPE html> [建议] 启用 IE Edge 模式。 IE 支持通过特定 标签来确定绘制当前页面所应该采用 IE 版本。...结构-样式-行为代码分离,对于提高代码可阅读性和维护性都有好处。 [建议] 在 head 引入页面需要所有 CSS 资源。...在页面渲染过程,新CSS可能导致元素样式重新计算和绘制,页面闪烁。 [建议] JavaScript 应当放在页面末尾,或采用异步加载。 将 script 放在页面中间将阻断页面的渲染。...按钮 [强制] 使用 button 元素时必须指明 type 属性值。 button 元素默认 type 为 submit,如果被置于 form 元素,点击后将导致表单提交

    2.1K20

    十五种加速设计开发CSS框架

    使用它好处在哪里? ? 通常,业界将CSS定义为一种提供有效外观设计语言。它可以被用于格式化和描述以文档标记形式编写外观。...确保标准结构一致性:前端框架通常由CSS、HTML和JavaScript文件组成。这些文件有助于确保所有元素(如设计、表单等)在页面一致性。 ? 优秀CSS框架 1....Bootstrap提供了报警、按钮、轮播、下拉式菜单、以及表单等设计模板。...它程序包包括有按钮、卡片、表格、图标、以及许多其他可供按需使用组件。此外,您还可能用到功能包括:拖出式移动菜单、涟漪效果动画、以及SASS mixins等。...如果您想对它工作原理做进一步了解,那么请查阅它联机文档。 13. Base 如果您主要任务是为所有的应用程序和Web开发项目打下坚实基础,那么您应该尝试一下此模块化框架。

    2.6K30

    表单提交input、button、submit区别

    再加上它样式难以定制、不可作为其他标签容器, 所以建议不要用input作为表单提交按钮。 注意:inputtype属性还可以是button,这时它只是一个按钮,不会引发表单提交。...IE浏览器兼容,请记住button[type]在IE默认值是button,这意味着它只是一个按钮而不会引发表单提交。   ...提交表单时,value会被作为表单数据提交给服务器。 在IE,甚至会把button开始与结束标签之间内容作为name对应提交给服务器。...当表单只有一个单行文本输入控件时,用户代理应当接受回车键来提交表单。 “单行”指的是type为text而非textarea,显然在textarea回车提交表单是怎样难以接受。...其实在实践,有多个单行input也可以用Enter提交,比如登录页面。 4.阻止表单提交 阻止表单提交也是一个常见的话题,通常用于客户端表单验证。

    3.9K100

    经典黑色--网站管理界面

    页面整体采用扁平化处理,布局更趋向于暴露内容本质,页面块之间留白更多,字体更大,配色更单一,在form表单处参照了bootstrap流行风格,也加入了一些css3动画效果,当然只有高级浏览器才支持...查询按钮放在另一行右对齐。 3). 结果列表处,操作按钮放在左上角,比如:新增作品,批量删除等,为了是让用户醒目的看到操作。 4). 这个table是分为table>tr>th+td布局结构。...提交按钮用一种亮色暗示页面操作重心所在。 5. 设置页面 ? 1)....这块一个细节处理是在站长信息设置下面还有一个按钮,一个页面上有两个提交按钮,普通用户以为是要操作两次,其实只是一个form表单。...放两个目的在于,由于表单过多,防止意外发生,上下各放一个,方便提交。 2. 另外一个处理是input[type="text"]处理更宽,方便信息录入。  6.

    2.3K10
    领券