《Web前端框架应用bootstrap》课件-项目五 表单_第1页
《Web前端框架应用bootstrap》课件-项目五 表单_第2页
《Web前端框架应用bootstrap》课件-项目五 表单_第3页
《Web前端框架应用bootstrap》课件-项目五 表单_第4页
《Web前端框架应用bootstrap》课件-项目五 表单_第5页
已阅读5页，还剩66页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务1：

三种表单项目五表单主讲人：CONTENTS0102垂直表单水平表单03内联表单垂直表单/01垂直表单垂直表单把成对的标签和表单控件放在一个带有class="mb-3"的div中，这是获取最佳间距所必需的。01文本形式的控件<input>和<textarea>使用.form-control进行样式化，包括一般外观、focus状态、尺寸等等的样式。02label标签，使用class=“form-label”。03垂直表单水平表单/02水平表单在垂直表单的基础上，给每一组标签控件外层div，添加row。01对label标签使用col类，和input标签外层添加div容器，然后对div使用col类。02Label标签上用col-form-label代替form-label，让标签垂直方向居中。03平表单的呈现形式是一组标签和控件水平放置，不同组的标签控件垂直放置。内联表单/03内联表单内联表单，就是行内表单，将输入框、按钮、下拉列表等元素都放在一行中。第一种用栅格系统中col-auto，将每个输入项设置为自动宽度。用间距g-{value}类，来设置列之间间距。对label标签使用visually-hidden类，进行视觉隐藏。内联表单内联表单，就是行内表单，将输入框、按钮、下拉列表等元素都放在一行中。内联表单内联表单，就是行内表单，将输入框、按钮、下拉列表等元素都放在一行中。第二种使用响应式行列自动类row-cols-{pointbreak}-auto可以实现响应式的内联效果。在较宽屏幕下，应用为内联表单。窄屏下则按照每列的占比进行布局。内联表单内联表单，就是行内表单，将输入框、按钮、下拉列表等元素都放在一行中。任务2：

表单控件项目五表单主讲人：CONTENTS0102输入框Select组件03文本域组件04单选框和多选框05控件大小输入框/01输入框最常见的表单文本控件是输入框input。用户可以在其中输入大多数必要的表单数据。Bootstrap提供了对所有原生的HTML5的input类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。适当的type声明是必需的，这样才能让input获得完整的样式。输入框输入框输入框输入框输入框Select组件/02代码Select组件下拉框（select）也是表单中的基本组件，允许用户从多个选项中进行选择。演示效果文本域组件/03代码文本域组件文本域（textarea）的使用方式和HTML的默认用法一致，当需要进行多行输入的时，则可以使用文本框。演示效果单选框和多选框/04单选框和多选框代码演示效果代码单选框和多选框演示效果代码单选框和多选框演示效果控件大小/05控件大小改变输入框或文本域的大小改变label标签的大小改变select的大小

.form-control-lg.form-control-sm.col-form-label-lg.col-form-label-sm.form-select-lg.form-select-sm控件大小代码演示效果任务3：

表单浮动标签-输入框项目五表单主讲人：CONTENTS0102表单浮动标签输入框表单浮动标签/01表单浮动标签默认情况下，标签一般显示在input输入框的上方。Bootstrap5中通过类.from-floating将标签插入到input输入框中。当点击input输入框时，标签会往上浮动。从而实现浮动标签的效果。输入框/02输入框在文本框的左侧、右侧或两侧加上文字、按钮、下拉菜单等附加组件，形成一个表单元素的组合效果，我们称之为输入框组。输入框组左侧或者右侧的附加组件可以是文本、按钮、带下拉菜单的按钮、单选按钮、多选按钮等。输入框（1）将文本框、左侧或右侧的附加组件放入一个父元素div中，并为div添加class="input-group"。输入框（2）左侧附加组件放在输入框的前面，右侧附加组件放在输入框的后面。如果附加组件中的内容是文本，使用类.input-group-text。如果附加组件中的内容是复选框、单选按钮，则将<span>改为<div>，然后在div中写按钮、复选框等的代码，div上使用input-gourp-text。输入框（2）左侧附加组件放在输入框的前面，右侧附加组件放在输入框的后面。如果附件组件的内容为按钮或带下拉菜单的按钮，则直接将按钮及其下拉菜单放在输入框的前面或者后面。输入框附加组件可以同时有多个。输入框与设置表单控件大小类似，输入框组的大小可以通过.input-group-sm和.input-group-lg来控制。任务4：

表单禁用-表单验证项目五表单主讲人：CONTENTS0102表单禁用表单验证表单禁用/01表单禁用在Bootstrap中，表单控件的禁用和普通HTML元素禁用一样，只需要添加disabled="disabled"属性，该元素就不能被单击。Bootstrap的禁用在样式上做了一定的处理，会改变表单控件的样式以及当鼠标指针悬停在框架上时，鼠标指针的样式。表单验证/02表单验证表单验证实现表单验证功能的要点：（1）表单元素form上添加class="was-validated"（2）为了实现验证功能，要在需要用户填写或选中的表单控件上加上required属性，对用户输入的值有格式要求的控件还需要加上pattern属性，属性值为相应的正则表达式。（3）在控件下方要加上用于反馈信息的div，如为其添加反馈信息类.invalid-feedback、valid-feedback。表单验证表单验证

反馈信息也可以使用.invalid-tooltip，.valid-tooltip，这时需要注意的是，在父元素上设置“position:relative;”表单验证

直接将.was-validated加到form元素上，打开页面未点提交按钮前就进行了验证。如果需要点击提交按钮时才显示无效字段的提示信息，则需要一些JavaScript代码来达到效果。表单验证

novalidate属性关闭浏览器的默认验证。.needs-validation类为自定义的一个类，用于js代码中选择form元素案例：注册页面项目五表单主讲人：余璐CONTENTS0102注册账号页面具体实现课程导入课程导入在网络空间中，每个人都应该遵守诚信原则，不提供虚假信息，不侵犯他人的隐私和权益。注册账号页面/01注册账号页面具体实现/02具体实现步骤一

在HBuilderX中新建一个Web项目，将Bootstrap的CSS文件复制到项目的CSS目录中，然后在<head>元素中引用。具体实现步骤二为页面添加背景颜色、间距等样式，添加标题与表单元素form。具体实现步骤三账号表单项接受最新推送表单项具体实现步骤三具体实现步骤四添加required属性、pattern属性、反馈div添加表单验证form元素上应用was-validated类具体实现novalidate属性，告诉浏览器不用验证表单，则表单不会验证表单。在javascri

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论