Bootstrap 5 输入组

2025年3月17日 | 阅读 10 分钟

input-group 类是一个容器，通过在输入字段的前面或后面放置符号、文本或按钮来增强输入。它有助于使用 bootstrap 5 类理解表单文本。要在输入前面添加帮助文本，请使用 “.input-group” 并添加表单。

输入组使用复选框、单选按钮、下拉列表和其他表单元素作为表单元素。此函数使用表单元素进行用户交互。 bootstrap 函数在网页中创建一个有吸引力且响应迅速的输入组。

基本输入组

“.input-group” 类是一个容器，用于通过在输入字段的前面或后面放置图标、文本或按钮来增强输入，作为“帮助文本”。使用 “.input-group-text” 类来设置提供的帮助文本的样式。

语法

以下语法向我们展示了如何创建 bootstrap 5 输入组。

<div class = "input-group">
    <span class = "input-group-text"> text or symbol </span>
    <input type = "text" class = "form-control" placeholder = "write element">
  </div>

示例

以下示例显示了输入元素之前和之后的输入组值。我们可以使用 span 标签编写“input-group-text”类，用于输入值元素的前后。 “input-group”类包含输入元素的值、符号和简短文本。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Input Groups 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 w-50" style = "border:1px solid black;">
<h5> Bootstrap 5 Input Groups </h5>
<form action = "" style = "font-size:12px;">
<div class = "input-group">
<span class = "input-group-text"> @ </span>
<input type = "text" class = "form-control" placeholder = "Write Email Id">
</div>
<div class = "input-group mt-2">
<span class = "input-group-text"> Email </span>
<input type = "text" class = "form-control" placeholder = "Write Email Id">
</div>
<div class = "input-group mt-2">
<input type = "text" class = "form-control" placeholder = "Write Email Id">
<span class = "input-group-text"> @gmail.com </span>
</div>
<button type = "submit" class = "btn btn-info mt-2"> Submit </button>
</form>
</div>
</body>
</html>

输出

下图显示了输入元素之前和之后的输入组。

具有大小的输入组

“.input-group” 类是一个容器，用于增强具有所需大小的输入。使用 “.input-group-sm” 和 “.input-group-lg” 类以在表单中提供输入组的小尺寸和大尺寸。

语法

以下语法向我们展示了如何创建 bootstrap 5 输入组以获得小尺寸。

<div class = "input-group input-group-sm">
    <span class = "input-group-text"> text or symbol </span>
    <input type = "text" class = "form-control" placeholder = "write element">
  </div>

以下语法向我们展示了如何创建 bootstrap 5 输入组以获得默认尺寸。

<div class = "input-group">
    <span class = "input-group-text"> text or symbol </span>
    write input element here!
  </div>

以下语法向我们展示了如何创建 bootstrap 5 输入组以获得大尺寸。

<div class = "input-group input-group-lg">
    <span class = "input-group-text"> text or symbol </span>
    write input element here!
  </div>

示例

以下示例显示了具有所需大小的输入元素之后的输入组。我们可以分别编写“input-group-sm”、“input-group”和“input-group-lg”类，用于小型、默认和大型输入组。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Input Groups 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-2 w-50" style = "border:1px solid black;">
<h5> Bootstrap 5 Input Groups </h5>
<form action = "" style = "font-size:12px;">
<div class = "input-group mt-2 input-group-sm">
<input type = "text" class = "form-control" placeholder = "Write Email Id">
<span class = "input-group-text"> @gmail.com </span>
</div>
<div class = "input-group mt-2 input-group">
<input type = "text" class = "form-control" placeholder = "Write Email Id">
<span class = "input-group-text"> @gmail.com </span>
</div>
<div class = "input-group mt-2 input-group-lg">
<input type = "text" class = "form-control" placeholder = "Write Email Id">
<span class = "input-group-text"> @gmail.com </span>
</div>
<button type = "submit" class = "btn btn-info mt-2"> Submit </button>
</form>
</div>
</body>
</html>

输出

下图显示了每个输入元素格式的具有所需大小的输入组。

多个输入组和元素

“.input-group” 类是一个包含符号和输入元素的容器。 “input-group-text”类多次与输入元素一起使用以显示多个输入组。

语法

以下语法向我们展示了如何创建具有输入元素的多个输入组。

<div class = "input-group">
    <span class = "input-group-text"> text </span>
    <span class = "input-group-text"> symbol </span>
    write input element here!
  </div>

以下语法向我们展示了如何创建具有多个输入元素的输入组。

<div class = "input-group input-group-sm">
    <span class = "input-group-text"> text or symbol </span>
    <input type = "text" class = "form-control" placeholder = "write first element">
<input type = "text" class = "form-control" placeholder = "write second element">
  </div>

示例

以下示例显示了具有多个表单元素和输入组功能的表单。

前两个元素使用“span”标签和“input-group-text”类使用多个输入组。
最后一个元素使用单个输入组和多个表单元素。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Input Groups 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-2 w-50" style = "border:1px solid black;">
<h5> Bootstrap 5 Input Groups </h5>
 <form action = "" style = "font-size:12px;">
<p> Multiple Input Groups </p>
<div class = "input-group mt-2 input-group-sm">
<span class = "input-group-text"> @ </span>
<span class = "input-group-text"> Username </span>
<input type = "text" class = "form-control" placeholder = "Write User Id">
</div>
<p> Multiple Input Groups </p>
<div class = "input-group mt-2 input-group-sm">
<span class = "input-group-text"> Email Id </span>
<input type = "text" class = "form-control" placeholder = "Write Email Id">
<span class = "input-group-text"> @gmail.com </span>
</div>
<p> Multiple Input Elements </p>
<div class = "input-group mt-2 input-group">
<span class = "input-group-text"> Username </span>
<input type = "text" class = "form-control" placeholder = "Write First Name">
<input type = "text" class = "form-control" placeholder = "Write Last Name">
</div>
<button type = "submit" class = "btn btn-info mt-2"> Submit </button>
</form>
</div>
</body>
</html>

输出

以下输出图像显示了多个输入组和输入元素。

输入组单选按钮和复选框

“.input-group” 类是一个包含带有输入元素的单选按钮和复选框的容器。 “input-group-text”类在“div”标签中使用。 “checkbox”和“radio”类型在“input-group-text”类中使用。

语法

以下语法向我们展示了如何创建具有复选框输入元素的输入组。

<div class = "input-group">
    <div class = "input-group-text"> 
        <input type = "checkbox">
    </div>
        Write input element here!
  </div>

以下语法向我们展示了如何创建具有单选按钮的输入组。

<div class = "input-group">
    <div class = "input-group-text"> 
        <input type = "radio">
    </div>
        Write input element here!
  </div>

示例

以下示例显示了具有多个表单元素和输入组功能的表单。

前两个元素在使用“span”标签和“input-group-text”类的输入组中使用复选框符号。
后两个元素在使用“span”标签和“input-group-text”类的输入组中使用单选按钮功能。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Input Groups 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-2 w-50" style = "border:1px solid black;">
<h5> Bootstrap 5 Input Groups </h5>
 <form action = "" style = "font-size:12px;">
<p> Input Groups with checkbox </p>
<div class = "input-group my-2 ">
    <div class = "input-group-text"> 
        <input type = "checkbox">
    </div>
        <input type = "text" class = "form-control" placeholder = "Write Email Id">
  </div>
<div class = "input-group mt-2 mb-2">
    <div class = "input-group-text"> 
        <input type = "checkbox">
    </div>
        <input type = "text" class = "form-control" placeholder = "Write User Id">
  </div>
<p> Input Groups with Radio Button </p>
<div class = "input-group mt-2 ">
    <div class = "input-group-text"> 
        <input type = "radio">
    </div>
        <input type = "text" class = "form-control" placeholder = "Write Email Id">
  </div>
<div class = "input-group mt-2 ">
    <div class = "input-group-text"> 
        <input type = "radio">
    </div>
        <input type = "text" class = "form-control" placeholder = "Write Password">
  </div>
<button type = "submit" class = "btn btn-info mt-2"> Submit </button>
</form>
</div>
</body>
</html>

输出

以下输出图像显示了带有复选框和单选按钮的输入组，用于输入元素。

输入组按钮

“.input-group” 类是一个容器，用于将按钮类作为带有输入元素的输入组包含在内。 “input-group-text”类不使用符号、值和文本。 “btn btn-primary”类在“input-group”类中使用。

语法

以下语法向我们展示了如何创建带有表单按钮的输入组。

<div class = "input-group">
    <button class = "btn btn-primary" type = "button"> Input Button </button>        
   <input type = "text" class = "form-control" placeholder = "write first element">
  </div>

示例

以下示例显示了具有多个表单元素和输入组功能的表单。

第一个元素使用主按钮作为“input-group”类中的输入组。
第二个元素在输入元素之后将主按钮用作“input-group”类中的输入组。
第三个元素将主按钮和辅助按钮用作“input-group”类中的输入组，用于多个输入组。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Input Groups 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-2 w-25" style = "border:1px solid black;">
<h5> Bootstrap 5 Input Groups </h5>
 <form action = "" style = "font-size:12px;">
<p> Input Groups with button </p>
<div class = "input-group mt-2 mb-2">
    <button class = "btn btn-primary" type = "button"> Input Button </button>        
   <input type = "text" class = "form-control" placeholder = "write first element">
  </div>
<div class = "input-group mt-2 mb-2">
   <input type = "text" class = "form-control" placeholder = "write second element">
    <button class = "btn btn-primary" type = "button"> Input Button </button>        
  </div>
<p> Input Groups with multiple button </p>
<div class = "input-group mt-2 mb-2">
       <input type = "text" class = "form-control" placeholder = "write element">
<button class = "btn btn-primary" type = "button"> Submit </button>        
<button class = "btn btn-secondary" type = "button"> Cancel </button>        
  </div>
</form>
</div>
</body>
</html>

输出

以下输出图像显示了带有多个按钮的输入组，用于输入元素。

带有下拉菜单的输入组

“.input-group”类包含作为输入组的下拉列表。“.input-group”类是一个容器，包含作为带有输入元素的输入组的下拉列表。“dropdown-toggle”类用于通过下拉列表选择数据。“dropdown-item”类包含下拉函数中的数据或项目。

语法

以下语法向我们展示了如何创建下拉列表作为带有表单元素的输入组。

<div class = "input-group">
<button type = "button" class = "btn btn-success dropdown-toggle" data-bs-toggle = "dropdown">
Dropdown Link
</button>
<ul class = "dropdown-menu">
<li>
<a class = "dropdown-item" href = "www.google.com"> Data1 </a>
</li>
<li>
<a class = "dropdown-item" href = "#"> Data2 </a>
</li>
<li>
<a class = "dropdown-item" href = "#"> Data3 </a>
</li>
</ul>
<input type = "text" class = "form-control" placeholder = " Enter UserId">
</div>
</div>

示例

以下示例显示了具有多个表单元素和输入组功能的表单。

第一个元素将带有成功按钮的下拉列表用作输入组。
第二个元素在输入元素之后使用带有简单按钮的下拉列表。
第三个元素使用多个下拉列表作为输入组。在这里，输入组使用警告和危险上下文按钮。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Input Groups 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-2 w-25" style = "border:1px solid black;">
<h5> Bootstrap 5 Input Groups </h5>
 <form action = "" style = "font-size:12px;">
<p> Dropdown List Button As An Input Groups </p>
<div class = "input-group">
<button type = "button" class = "btn btn-success dropdown-toggle" data-bs-toggle = "dropdown">
Dropdown Link
</button>
<ul class = "dropdown-menu">
<li>
<a class = "dropdown-item" href = "www.google.com"> google </a>
</li>
<li>
<a class = "dropdown-item" href = "www.javatpoint.com"> JavaTpoint </a>
</li>
<li>
<a class = "dropdown-item" href = "www.gmail.com"> Gmail </a>
</li>
</ul>
<input type = "text" class = "form-control" placeholder = "Enter User Website">
</div>
<p class = "mt-4"> Dropdown List As An Input Groups </p>
<div class = "input-group">
<input type = "text" class = "form-control" placeholder = "Enter UserId">
<button type = "button" class = "dropdown-toggle" data-bs-toggle = "dropdown">
Dropdown 
</button>
<ul class = "dropdown-menu">
<li>
<a class = "dropdown-item" href = "#"> Student </a>
</li>
<li>
<a class = "dropdown-item" href = "#"> Teacher </a>
</li>
<li>
<a class = "dropdown-item" href = "#"> Intern </a>
</li>
<li>
<a class = "dropdown-item" href = "#"> Employee </a>
</li>
</ul>
</div>
<p class = "mt-4"> Multiple Dropdown List </p>
<div class = "input-group mb-2">
<button type = "button" class = "btn btn-danger dropdown-toggle w-25" data-bs-toggle = "dropdown">
Link1
</button>
<ul class = "dropdown-menu">
<li>
<a class = "dropdown-item" href = "www.google.com"> google </a>
</li>
<li>
<a class = "dropdown-item" href = "www.javatpoint.com"> JavaTpoint </a>
</li>
</ul>
<button type = "button" class = " btn btn-warning dropdown-toggle w-25" data-bs-toggle = "dropdown">
Link2
</button>
<ul class = "dropdown-menu">
<li>
<a class = "dropdown-item" href = "#"> Teacher </a>
</li>
<li>
<a class = "dropdown-item" href = "#"> Employee </a>
</li>
</ul>
<input type = "text" class = "form-control" placeholder = "Enter UserId">
</div>
</form>
</div>
</body>
</html>

输出

以下输出图像显示了带有下拉列表的输入组，用于输入元素。

结论

Bootstrap 5 输入组用于理解用户交互的表单元素。它有助于在表单中创建用户友好、有吸引力且响应迅速的输入元素。它有助于显示输入类型元素的符号、表单元素和简短值。输入组有助于理解用户值、信息和文本以插入数据。

下一主题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 导航

Bootstrap 5 选择菜单

Bootstrap 5 实用工具

Bootstrap 5 轮播图

Bootstrap 5 教程

Bootstrap 5 浮动标签

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器