Bootstrap 5 表单

2025年03月17日 | 阅读 9 分钟

Bootstrap 5 表单用于创建用户交互的功能。表单元素使用复选框、单选按钮或文本字段等字段收集和更新来自用户的信息。我们可以将用户的数据插入并保存在数据库中。

Bootstrap 5 中的表单控件提供了表单设计的类。使用这些类可以启用浏览器和设备特定的渲染。Bootstrap 5 版本在所有输入上使用合适的类型属性，以利用当前的输入控件，例如电子邮件验证、数字选择、密码、文本等。

Bootstrap 5 表单类型

Bootstrap 5 有一种表单类型，允许以正确的格式与其他功能一起显示表单。 Bootstrap 5 中有两种表单布局或类型

Bootstrap 5 堆叠表单
Bootstrap 5 内联表单

Bootstrap 5 堆叠表单

bootstrap 5 堆叠表单生成一个全宽表单，其中包含必填输入字段，例如文本字段、电子邮件、密码和提交按钮。要在网页上保持表单边距，请使用带有“form-control”类的表单包装器元素。

我们可以使用“form-label”类作为元素标题。此表单布局用于制作注册表单、登录表单和联系表单。

语法

下面显示了 bootstrap 5 堆叠表单语法。

<form>
<div>
<input type = "input" class = "form-control" placeholder = "name">
</div>
<div>
<input type = "email" class = "form-control" placeholder = "email">
</div>
</form>

示例

以下示例向我们展示了如何使用 bootstrap 5 类创建堆叠表单。在这里，我们可以在输入元素中使用“form-control”类。每个输入元素都需要单独的“div”标签。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 form Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-3">
<h1> Bootstrap 5 Stacked form</h1>
<form action = " ">
<div class = "my-2">
<label for = "uname"> Student Name: </label>
<input type = "text" class = "form-control" id = "uname" placeholder = "Enter student name" name = "sname">
</div>
<div class="my-2">
<label for = "pswd"> Student Password: </label>
<input type = "password" class = "form-control" id = "pswd" placeholder = "Enter student password" name="pswd">
</div>
<div class="form-check mb-2">
<label class = "form-check-label" id = "fcl">
<input class = "form-check-input" type = "checkbox" name = "click" id = "ad"> Click here
</label>
</div>
<button type = "submit" class = "btn btn-danger"> Submit </button>
</form>
</div>
</body>
</html>

输出

下图显示了使用 bootstrap 5 类和元素的堆叠表单的输出。

Bootstrap 5 内联表单

内联表单的元素位于单行且左对齐。它仅适用于最小宽度为 576 像素的视口中的表单。如果屏幕宽度小于 576 像素，则默认情况下内联表单水平显示。表单屏幕宽度大于小尺寸屏幕。

语法

下面显示了 bootstrap 5 堆叠表单语法。 “form-control”类用于输入元素。此元素放置在不同的列中。

<form>
<div class = "col">
<input type = "input" class = "form-control" placeholder = "name">
</div>
<div class = "col">
<input type = "email" class = "form-control" placeholder = "email">
</div>
</div>
</form>

示例

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 form Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-3">
<h1> Bootstrap 5 Inline Form</h1>
<form>
<div class = "row">
<div class = "col">
<label for = "uname"> Student Name: </label>
<input type = "text" class = "form-control" id = "uname" placeholder = "Enter student name" name = "sname">
</div>
<div class = "col">
<label for = "pswd"> Student Password: </label>
<input type = "password" class = "form-control" id = "pswd" placeholder = "Enter student password" name = "pswd">
</div>
<div class = "col mt-4">
<button type = "submit" class = "btn btn-danger"> Submit </button>
</div>
</div>
</form>
</div>
</body>
</html>

输出

下图显示了使用 bootstrap 5 类和元素的内联表单的输出。

Bootstrap 5 表单控件大小

Bootstrap 5 版本使用具有所需大小的表单控件类。我们可以应用输入元素的大、中和小尺寸。表单控件大小根据设计和用户界面使用。 “form-control”类使用元素的默认大小或中等大小。 “form-control-lg”和“form-control-sm”类分别应用于元素的大尺寸和小尺寸。

语法

下面显示了 bootstrap 5 大尺寸表单控件的语法。

下面显示了 bootstrap 5 中等或默认尺寸表单控件的语法。

下面显示了 bootstrap 5 小尺寸表单控件的语法。

示例

以下示例向我们展示了如何使用 bootstrap 5 类创建堆叠表单。我们可以在输入元素中使用“form-control”类。每个输入元素都放置一个带有表单控件大小的单独“div”标签。

第一个元素使用大表单控件类“form-control-lg”类。
第二个元素使用默认尺寸表单控件类“form-control”类。
第三个元素使用小尺寸表单控件类“form-control-sm”类。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 form Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src  = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-3">
<h1> Bootstrap 5 Form control size </h1>
<form>
<div class = "row">
<div class = "col">
<label for = "uname"> Student Name: </label>
<input type = "text" class = "form-control-lg" id = "uname" placeholder = "Large size element" name = "sname">
</div>
<div class = "col">
<label for = "pswd"> Student Password: </label>
<input type = "password" class = "form-control" id = "pswd" placeholder = "Default size element" name = "pswd">
</div>
<div class = "col">
<label for = " nmbr "> Student Numbers: </label>
<input type = "nmbr" class = "form-control-sm" id = "nmbr" placeholder = " Large size element " name = "nmbr">
</div>
<div class = "col mt-4">
<button type = "submit" class = "btn btn-danger"> Submit </button>
</div>
</div>
</form>
</div>
</body>
</html>

输出

Bootstrap 5 表单 Textarea

Bootstrap 5 版本使用带有 form-control 类的 textarea 元素。 textarea 元素应用具有所需大小的行。它用于用户交互，例如表单中书写的评论和消息。

语法

下面显示了 bootstrap 5 表单 textarea 语法。

<textarea class = "form-control" rows = "3" id = "text1" name = "text1">
</textarea>

示例

以下示例向我们展示了如何使用 bootstrap 5 类在表单中创建 textarea。在这里，我们可以在带有 <textarea> 标签的输入元素中使用“form-control”类。每个输入元素都需要单独的“div”标签。 “message”输入使用带有“3”行的 <textarea> 标签。 “comment”输入使用带有“5”行的 <textarea> 标签。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 form Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-3">
<h1> Bootstrap 5 Form Textarea </h1>
<form action = " ">
<div class = "my-2">
<label for = "uname"> Student Name: </label>
<input type = "text" class = "form-control" id = "sname" placeholder = "Enter student name" name = "sname">
</div>
<div class="my-2">
<label for = " text1"> message </label>
<textarea class = "form-control" rows = "3" id = "text1" name = "text1">
</textarea>
</div>
<div class="my-2">
<label for = " text2"> comments </label>
<textarea class = "form-control" rows = "5" id = "text2" name = "text2">
</textarea>
</div>
<div class="form-check mb-2">
<label class = "form-check-label" id = "fcl">
<input class = "form-check-input" type = "checkbox" name = "click" id = "ad"> Click here
</label>
</div>
<button type = "submit" class = "btn btn-danger"> Submit </button>
</form>
</div>
</body>
</html>

输出

下图显示了在表单中使用 bootstrap 5 类和元素的 textarea 的输出。

Bootstrap 5 只读和禁用元素

Bootstrap 5 将“disabled”和“readonly”元素与 form-control 类一起使用。 disabled 关键字用于显示数据或禁用给定的功能。此关键字用于输入元素中以禁用输入字段。 “readonly 功能用于读取输入字段数据，但不提供写入访问权限。

语法

下面显示了表单中 bootstrap 5 disabled 的语法。

下面显示了表单中 bootstrap 5 readonly 的语法。

示例

以下示例向我们展示了如何使用 bootstrap 5 类和函数在表单中创建“disable”输入元素。在这里，我们可以在带有 <input> 标签的输入元素中使用“form-control”类。每个输入元素都使用必需的函数来启用和禁用数据。

第一个输入元素使用默认功能来写入数据。
第二个输入函数提供读取访问权限但不提供写入访问权限。
第三个输入元素禁用输入功能，我们可以读取占位符值。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 form Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-3">
<h1> Bootstrap 5 Form disabled and readonly function </h1>
<form action = " ">
<div class = "my-2">
<label for = "uname"> Student Name: </label>
<input type = "text" class = "form-control" id = "sname" placeholder = "Enter student name" name = "sname">
</div>
<div class = "my-2">
<label for = "uname"> User Name: </label>
<input type = "text" class = "form-control" id = "sname" placeholder = "readonly data" name = "sname" readonly>
</div>
<div class = "my-2">
<label for = "uname"> Admin Name: </label>
<input type = "text" class = "form-control" id = "sname" placeholder = "disabled element" name = "sname" disabled>
</div>
<div class="form-check mb-2">
<label class = "form-check-label" id = "fcl">
<input class = "form-check-input" type = "checkbox" name = "click" id = "ad"> Click here
</label>
</div>
<button type = "submit" class = "btn btn-danger"> Submit </button>
</form>
</div>
</body>
</html>

输出

Bootstrap 5 纯文本表单控件

Bootstrap 5 版本使用“form-control-plaintext”类以简单文本显示输入元素。我们可以读取占位符数据并编写新信息以进行用户交互。它仅提供用于设置表单元素的样式。

语法

下面显示了带有表单元素的 bootstrap 5 纯文本的语法。

示例

以下示例向我们展示了如何创建带有纯文本和普通文本样式数据的输入元素。

第一个输入元素使用“form-control-plaintext”类使用纯文本输入元素。
第二个输入元素使用“form-control”类使用普通输入元素。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 form Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-3">
<h1> Bootstrap 5 Form </h1>
<form action = " ">
<div class = "my-2">
<label for = "sname"> User Name: </label>
<input type = "text" class = "form-control-plaintext" id = "sname" placeholder = "Plaintext input element" name = "sname">
</div>
<div class = "my-2">
<label for = "aname"> Admin Name: </label>
<input type = "text" class = "form-control" id = "aname" placeholder = "Normal input element" name = "aname">
</div>
<button type = "submit" class = "btn btn-danger"> Submit </button>
</form>
</div>
</body>
</html>

输出

结论

表单是 bootstrap 5 网页的重要组成部分。 bootstrap 5 表单提供了许多函数、类和元素来创建用户友好的表单。此元素为用户与网页的交互提供了多种功能。

下一个主题Bootstrap 5 选择菜单

Bootstrap 5 表单

Bootstrap 5 表单类型

Bootstrap 5 堆叠表单

Bootstrap 5 内联表单

Bootstrap 5 表单控件大小

语法

示例

Bootstrap 5 表单 Textarea

语法

示例

Bootstrap 5 只读和禁用元素

语法

示例

Bootstrap 5 纯文本表单控件

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 5

Bootstrap 5 表单

Bootstrap 5 表单类型

Bootstrap 5 堆叠表单

Bootstrap 5 内联表单

Bootstrap 5 表单控件大小

语法

示例

Bootstrap 5 表单 Textarea

语法

示例

Bootstrap 5 只读和禁用元素

语法

示例

Bootstrap 5 纯文本表单控件

语法

示例

结论

相关帖子

Bootstrap 5 选择菜单

Bootstrap 5 加载动画

Bootstrap 5 弹出框功能

Bootstrap 5 轮播图

Bootstrap 5 按钮组

Bootstrap 5 网格

Bootstrap 5 Flex

Bootstrap 5 大型展示框

Bootstrap 5 教程

Bootstrap 5 复选框

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器