《Bootstrap前端开发从入门到实战(微视频版)》课件 第07章 表单样式.pptx

表单样式

202X表单布局设计表单控件样式表单校验机制实战演练：酒店预订网页思考与练习1.3.2.4.5.目录

01表单布局设计

简单表单结构原始HTML表单通过label和input等标签实现基本功能，但样式简陋，用户体验差。例如，一个简单的登录表单仅包含电子邮件和密码输入框，缺乏美观性和响应式设计。

使用Bootstrap后，通过添加.form-group、.form-control等类，表单元素间距优化，样式美观，且在不同设备上表现一致，大幅提升用户体验。布局优化与响应式设计Bootstrap的响应式网格系统使表单控件宽度可灵活调整。默认情况下，表单控件宽度为100%，垂直堆叠排列，适用于小屏设备。

通过.form-row和.col-{breakpoint}-{value}类，可实现水平表单布局，使表单在大屏设备上更美观、高效。例如，在中等屏幕尺寸上，表单元素可并排显示，提高空间利用率。02基础表单布局

水平表单实现水平表单通过.form-row和.col-form-label类实现标签与控件的垂直对齐。例如，创建一个包含名字和邮箱输入框的水平表单，每个输入框占据一半宽度，标签与输入框对齐居中，视觉效果整洁。

使用.col-md-6等栅格类，可在不同屏幕尺寸下灵活调整表单元素的布局，实现响应式设计。内联表单设计内联表单使表单元素在同一行内水平排列，更加紧凑。通过.col-auto类，可使输入项宽度自动调整，适应内容宽度，适用于有哪些信誉好的足球投注网站表单等场景。

使用.row、.g-3和.align-items-center类，可实现内联表单的水平和垂直居中对齐，提升表单的美观性和用户体验。水平表单与内联表单

02表单控件样式

输入框通过.form-control类实现圆角、浅色边框等样式，宽度默认为100%，可填满父容器。例如，单行文本输入框可用于输入用户名、密码等信息，提供良好的视觉效果和交互体验。

.form-control类还支持disabled和readonly属性，为禁用和只读状态的输入框设置背景色和透明度，增强表单的可读性。输入框样式文本域通过textarea元素和.form-control类实现多行文本输入，适用于长文本内容，如用户反馈、评论等。其rows属性可设置显示行数，placeholder属性提供输入提示。

文本域同样支持.form-control-lg和.form-control-sm类，用于创建不同大小的输入框，以满足不同场景的需求。文本域样式输入框与文本域

单选按钮通过.form-check、.form-check-input和.form-check-label类实现自定义样式，可垂直或水平排列。例如，在一个表单中，用户可以选择性别，单选按钮的选中状态清晰可见。

使用.form-switch类可实现开关样式，适用于页面上的选项切换，如开启或关闭通知功能，视觉效果更现代化。单选按钮样式复选框同样使用.form-check类定义容器，.form-check-input类定义输入元素样式，.form-check-label类定义标签样式。例如，在一个表单中，用户可以选择多个兴趣爱好，复选框的选中和未选中状态一目了然。

复选框支持水平排列，通过添加.form-check-inline类，可使多个复选框在同一行内显示，节省空间。复选框样式单选按钮与复选框

03表单校验机制

HTML5提供了多种表单校验属性，如required、pattern、min、max等，用于验证输入数据的格式和范围。例如，inputtype=emailrequired可确保用户输入有效的电子邮件地址，inputtype=textpattern=[0-9]{12}可验证输入是否为12位数字。

使用这些属性，可在用户提交表单时进行即时校验，减少网络负载，提升用户体验。Bootstrap为校验状态提供了.is-valid和.is-invalid类，可分别标识数据是否通过校验。例如，当输入框中的数据格式不正确时，添加.is-invalid类，输入框边框变为红色，并显示错误提示信息。

通过.valid-feedback和.invalid-feedback类，可在校验通过或不通过时显示相应的提示信息，帮助用户了解输入错误的原因。01HTML5校验属性02校验状态样式客户端校验原理

表单校验代码示例示例代码展示了一个包含电子邮件、密码、省份选择等字段的表单，通过checkValidity()方法和.was-validated类实现客户端校验。例如，当用户未输入电子邮件地址时，点击提交按钮后，输入框边框变红，并显示“请输入有效的电子邮件地址”的提示信息。

使用jQuery拦截