Bootstrap响应式Web开发（第2版）-课件 第6章 Bootstrap表单.pptx

第6章Bootstrap表单;学习目标/Target;章节概述/Summary;目录/Contents;表单控件样式;;6.1.1文本框;6.1.1文本框;;创建D:\Bootstrap\chapter06目录，并使用VSCode编辑器打开该目录。;在浏览器中打开textInput.html文件，项目进度表单效果如下图所示。;;;Bootstrap提供了应用于下拉列表的相关类，具体解释如下：;;;在浏览器中打开radioSelect.html文件，选择支付方式的下拉列表效果如下图所示。;单击下拉列表，即可显示展开后的列表选项，列表选项效果如下图所示。;;;Bootstrap提供了应用于单选按钮和复选框的相关类，具体解释如下。;;;在浏览器中打开radioInput.html文件，问卷调查表单效果如下图所示。;;;Bootstrap提供了应用于输入组的相关类，具体解释如下：;下面演示如何创建一个输入组，示例代码如下。;;6.1.4输入组;在浏览器中打开groupInput.html文件，商品搜索表单效果如下图所示。;表单布局方式;;;首先，使用div标签创建一个行容器，并添加.row类；然后，在行容器内添加一个div标签用于包裹表单控件，并添加.col-auto类。这样可以使表单控件在同一行内水平排列，并根据内容自动调整宽度，示例代码如下。;6.2.1行内表单布局;创建inlineForm.html文件，在该文件中创建基础HTML5文档结构并引入bootstrap.min.css文件。;在浏览器中打开inlineForm.html文件，员工筛选表单效果如下图所示。;6.2.2水平表单布局;;通过栅格系统的.row类和.col-{sm|md|lg|xl|xxl}-{value}类可以创建水平表单布局。;form

divclass=row

labelclass=col-form-labelcol-sm-3Label1/label

divclass=col-sm-9

inputtype=textclass=form-control

/div

/div

divclass=row

labelclass=col-form-labelcol-sm-3Label2/label

divclass=col-sm-9

inputtype=textclass=form-control

/div

/div

/form;;创建horizontalForm.html文件，在该文件中创建基础HTML5文档结构并引入bootstrap.min.css文件。;在浏览器中打开horizontalForm.html文件，登录表单效果如下图所示。;6.2.3响应式表单布局;6.2.3响应式表单布局;;创建responseForm.html文件，在该文件中创建基础HTML5文档结构并引入bootstrap.min.css文件。;在浏览器中打开responseForm.html文件，产品筛选表单在中型及以上设备（视口宽度≥768px）中的页面效果如下图所示。;产品筛选表单在中型及以下设备（视口宽度＜768px）中的页面效果如下图所示。;表单验证;;6.3表单验证;6.3表单验证;常见的验证样式类如下表所示。;6.3表单验证;此外，在提交表单时，默认的表单提交行为会被执行。如果开发者希望在表单提交之前处理表单数据或执行其他操作，可以通过调用事件对象的preventDefault()方法阻止浏览器按照默认方式处理表单提交。;下面演示如何实现一个简单的用户名文本框验证效果。这个示例只关注样式的改变，不考虑具体的校验规则。当用户输入的用户名为空时，会阻止表单提交，并显示提示信息“请输入用户名”。当输入用户名后，会显示提示信息“输入正确”，示例代码如下。;6.3表单验证;上述示例代码运行后，当用户输入的用户名为空时，验证未通过的提示信息如下图所示。;当用户输入了用户名后，验证通过的提示信息如下图所示。;;创建validationForm.html文件，在该文件中创建基础HTML5文档结构并引入bootstrap.min.css文件和bootstrap.min.js文件。;在浏览器中打开validationForm.html文件，注册表单初始页面效果如下图所示。;用户输入无效的用户名、密码和确认密码后，注册表单未验证通过的提示信息如下图所示。;用户输入有效的用户名、密码和确认密码后，注册表单验证通过的提示信息如下图所示。;本章小结